@extends('layouts.app')

@section('title', 'Add Lead')

{{-- custom css --}}
<style>
    .iti--allow-dropdown {
        width: 100% !important;
    }
</style>
@push('css')
<link rel="stylesheet" href="{{ asset('assets/css/custom/lead.css') }}">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">

@endpush


@section('content')
<x-content-body>

    <x-breadcrumbs :breadcrumbs="$breadcrumbs" />

    <x-row-card>
        <x-slot:title>
            <h4 class="card-title">Add Lead</h4>
            <button type="button " class="btn btn-primary btn-sm rounded" data-bs-toggle="modal"
                data-bs-target="#createLeadModal">
                Create from Contacts
            </button>
        </x-slot:title>

        <x-form id="add-lead-form">

            <x-lead.lead-information :lead="$lead ?? ''" :pipelines="$pipelines ?? ''" :tags="$tags" />
            {{-- {{ dd($leadSources); }} --}}
            {{-- <x-lead.detail :leadsources="$leadSources" :users="$users" /> --}}

            <x-lead.detail :leadsources="$leadsources" :users="$users ?? ''" />
            <span x-text="leadType"></span>
            <span x-text="propertyType"></span>
            <span x-text="residentialPropertyType"></span>
            <span x-text="commercialPropertyType"></span>

            <x-lead.address :countries="$countries" :states="$states" />

            <x-lead.commercial-requirement />

            <div class="row mt-3" id="seller-commercial-residential-section" style="display:none">

                <x-lead.residential-requirement />

                <x-lead.comps />

                <!-- <x-lead.net-sheet-calculator /> -->
            </div>

            <x-lead.assignment-information />

 

            <x-lead.organization-or-llc />
            <div class="mb-6 col-md-6 mt-3">
            <h4 class="mb-0 pb-0 pt-2 mt-3 text-primary">Lead Notes </h4>
                    <!-- <label class="form-label">Lead Notes</label> -->
                    <textarea id="lead_notes" name="notes" cols="80" rows="5" class="form-control form-control-sm"
                        placeholder="Write your Note"></textarea>
            </div>
            <x-lead.visited-property />

            <x-lead.history />

            <x-lead.buttons submittedTitle="Save & Exit" />

            {{-- modal include for shwoing contact list in the modal --}}
            @include('layouts.includes.modals.lead.lead-modal')

        </x-form>
    </x-row-card>
</x-content-body>
@endsection


{{-- custom js --}}
@push('js')

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="{{ asset('assets/js/custom/lead_contact_common.js') }}"></script>
<script>
    let leadRoute = "{{ route('leads.store') }}";
    let showAllLeadsRoute = "{{ route('leads.index') }}";
    let leadCreateRoute = "{{route('leads.create') }}";
    let leadUpdateRoute = "";
</script>
<script src="{{ asset('assets/js/custom/lead/lead_form.js') }}"></script>

<script>
    document.getElementById('exit_lead').addEventListener('click', function(event) {
        event.preventDefault();

        Swal.fire({
            title: "Are you sure you want to exit?",
            text: "Any unsaved changes will be lost.",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#17A2B8",
            cancelButtonColor: "#d33",
            confirmButtonText: "Yes, Exit",
            cancelButtonText: "Cancel"
        }).then((result) => {
            if (result.isConfirmed) {
                window.location.href = showAllLeadsRoute;
            }
        });
    });
</script>

<script>
    // ==================================================================================
    // =============== tooltips show with anyone else on deed dropdown   ================
    // ==================================================================================
    document.addEventListener('DOMContentLoaded', function() {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        tooltipTriggerList.map(function(tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        });
    });
</script>


@endpush