@extends('layouts.app')

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

{{-- custom css --}}
@push('css')
<link rel="stylesheet" href="{{ asset('assets/css/custom/lead.css') }}">
<style>
    .iti--allow-dropdown {
        width: 100% !important;
    }
</style>
@endpush

{{-- page content --}}
@section('content')

<x-content-body>

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

    <x-row-card>
        <x-slot:title>
            <h4 class="card-title">Edit Lead Information</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="edit-lead-form" novalidate>
            @csrf
            @method('PUT')
            <input type="hidden" name="id" value="{{ $lead['id'] }}" />
            {{-- <x-lead.lead-information :lead="$lead ?? ''" :pipelines="$pipelines ?? ''" :tags="$tags"/> --}}
            <x-lead.lead-information :lead="$lead ?? ''" :pipelines="$pipelines ?? ''" :tags="$tags" />
            <x-lead.detail :leadsources="$leadsources" :lead="$lead ?? ''" :users="$users" />

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

            <x-lead.commercial-requirement :lead="$lead ?? ''" />


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

                <x-lead.residential-requirement :lead="$lead ?? ''" />

                <x-lead.comps :lead="$lead ?? ''" />

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

            <x-lead.assignment-information :assignments="$lead['leadsassignments'] ?? ''" />

            <div class="mt-3" id="buyer-notes-residential-commercial" style="display: block;">
                {{-- {{ dd($lead);}} --}}

                {{-- {{ dd($lead['organizations'])}} --}}
                <x-lead.organization-or-llc :organizations="$lead['organizations'] ?? ''" />
            </div>
         
            <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">{{ $lead['lead_notes'] ?? '' }}</textarea>
            </div>
            <!-- visited property and histroy sectin is common for residential and commercial property  -->
            <x-lead.visited-property :visitedProperties="$lead['visited_properties'] ?? ''" />

            <x-lead.history :history="$lead['visited_properties'] ?? ''" />

            <div class="col-12 mt-4 p-3" x-data="{ preListing: 'no' }">
                <input type="hidden" name="add_to_pre_listing" x-model="preListing">

                <div class="offset-9 col-3 d-flex justify-content-between">
                    <button type="submit" class="btn btn-primary btn-sm mt-3 me-2 submit" id="exit_edit_lead" x-on:click="preListing = 'no'">
                        Save and Exit
                    </button>
                    <button type="submit" class="btn btn-primary btn-sm mt-3 me-2" id="edit_lead">
                        Save
                    </button>
                    <button type="button" class="btn btn-danger btn-sm mt-3 me-2" id="exit_lead">
                        Exit
                    </button>
                </div>
            </div>

            {{-- 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>
    let leadUpdateRoute = "{{route('leads.update', ['lead' => intval($lead['id'])])}}";
    let showAllLeadsRoute = "{{route('leads.index')}}";
    let leadRoute = "{{ route('leads.store') }}";
    let leadCreateRoute = "{{route('leads.create')}}";
</script>

<!-- select 2  Script -->
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
<script src="{{ asset('assets/js/custom/lead_contact_common.js') }}"></script>
<script src="{{ asset('assets/js/custom/lead/lead_form.js') }}"></script>

<script>


    document.getElementById('exit_lead').addEventListener('click', function() {
        // window.location.href = showAllLeadsRoute;
        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;
            }
        });
    });


    function updatePageWithData(updatedData) {
        $('#lead-name').text(updatedData.name);
        $('#lead-email').text(updatedData.email);
        $('#lead-phone').text(updatedData.phone);
    }
</script>
<!-- Create from contact dropdown -->
<script>
    // Listen for change events on the select element
    $('#contactList').change(function() {
        // Get the selected option
        var selectedOption = $(this).find('option:selected');

        // Retrieve the data-contact attribute
        var contact = selectedOption.data('contact');
        console.log(contact.contact_source);
        $("#lead_first_name").val(contact.f_name);
        $("#lead_middle_name").val(contact.m_name);
        $("#lead_last_name").val(contact.l_name);
        $("#lead_company").val(contact.company);
        $("#lead_title").val(contact.title);
        $("#lead_email").val(contact.email);
        $("#lead_phone").val(contact.cell_phone);
        $("#lead_nick_name").val(contact.n_name);
        $("#lead_additional_number").val(contact.office_phone);
        $("#lead-tags").val(contact.tags);
        $("#address").val(contact.address);
        $("#lead_source").val(contact.contact_source);
        //======================== Assign the intrusted in property and title to th Tag =================
        // Assuming contact.intrusted_in_properties and contact.assign_title are comma-separated strings
        let properties = contact.intrusted_in_properties;
        let titles = contact.assign_title;
        // Split both strings by commas to create arrays
        let titlesArray = titles.split(',').map(item => item.trim());

        // Combine both arrays
        let combinedArray = [...titlesArray];

        // Iterate through combinedArray and add any missing options
        combinedArray.forEach(function(property) {
            // Check if the option already exists in the dropdown
            if ($("#lead-tags option[value='" + property + "']").length === 0) {
                // If it doesn't exist, append a new option with the value and display text
                // first on is display value and second is option value
                $("#lead-tags").append(new Option(underscoreStringConvertToCapitalString(property),
                    property));
            }
        });

        // Set the combined array as the selected values and trigger the change event
        $("#lead-tags").val(combinedArray).trigger('change');


        function underscoreStringConvertToCapitalString(input) {

            // Check if the string contains an underscore. If not, return the string as is.
            if (!input.includes('_')) return input;

            // If underscore exists, format the string
            return input
                .split('_') // Split by underscores
                .map(word => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize each word
                .join(' '); // Join with spaces
        }
    });


    // Initialize Select2 on the contact dropdown in the modal
    $('#contactList').select2({
        dropdownParent: $('#createLeadModal'), // Ensure dropdown appears inside the modal
        placeholder: 'Select a contact',
        // allowClear: true
    });
</script>

 
@endpush