@php
    use App\Enums\Leads\FlagType;
    use App\Enums\Leads\SourceType;
    use App\Enums\Leads\StatusType;
    use App\Enums\Leads\TypeOfContact;
@endphp

@extends('components.dashboard.layout.layout')

@section('content')
    @include('components.alert')

    <style>
        .lead-phone-wrap .iti {
            width: 100%;
        }

        .lead-phone-wrap .iti input {
            padding-left: 85px !important;
        }

        .lead-helper-text {
            color: #64748b;
            font-size: 0.875rem;
            line-height: 1.5;
            margin-top: 0.35rem;
        }

        .lead-required {
            color: #dc2626;
        }

        .lead-hidden-section {
            transition: 0.2s ease;
        }

        .asset-form-grid .select2-container {
            width: 100% !important;
            max-width: 100% !important;
            display: block !important;
        }

        .asset-form-grid .select2-container .selection {
            width: 100% !important;
            display: block !important;
        }

        .asset-form-grid .select2-selection--single,
        .asset-form-grid .select2-selection--multiple {
            width: 100% !important;
            min-height: 44px !important;
            border-radius: 12px !important;
        }
    </style>

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title title="Create Lead"
                    description="Add a new lead profile, define personal and professional information, then choose the initial creation action.">
                    <a href="{{ url()->previous() }}" class="asset-btn asset-btn--secondary">
                        Back
                    </a>
                </x-page-title>

                <form method="POST" action="{{ route('leads.store') }}" id="leadCreateForm">
                    @csrf

                    {{-- Personal Information --}}
                    <div class="ui-card">
                        <div class="form-section">
                            <div class="form-section__head">
                                <h5 class="form-section__title mb-1">Personal Information</h5>
                                <p class="form-section__sub mb-0">
                                    Enter the lead identity, contact details, source, and academic interest information.
                                </p>
                            </div>

                            <div class="asset-form-grid">
                                <div class="asset-col-6">
                                    <x-forms.input-label.basic name="first_name" required :value="$firstName">
                                        First name <span class="lead-required">*</span>
                                    </x-forms.input-label.basic>
                                </div>

                                <div class="asset-col-6">
                                    <x-forms.input-label.basic name="last_name" required :value="$lastName">
                                        Last name <span class="lead-required">*</span>
                                    </x-forms.input-label.basic>
                                </div>

                                <div class="asset-col-6">
                                    <x-forms.input-label.basic name="email" required>
                                        Email <span class="lead-required">*</span>
                                    </x-forms.input-label.basic>
                                </div>

                                <div class="asset-col-6 lead-phone-wrap">
                                    <x-forms.input-label.basic name="phone" id="phone" required :value="$phone">
                                        Phone <span class="lead-required">*</span>
                                    </x-forms.input-label.basic>

                                    <span id="phone-error" class="text-danger d-none"></span>
                                    <input type="hidden" id="country_code" name="country_code">
                                </div>

                                <div class="asset-col-12">
                                    <x-forms.input-label.basic name="address">
                                        Address <span class="lead-required">*</span>
                                    </x-forms.input-label.basic>
                                </div>

                                <div class="asset-col-6">
                                    <x-forms.labels.basic>
                                        Nationality <span class="lead-required">*</span>
                                    </x-forms.labels.basic>

                                    <x-forms.select.basic required class="select2 general-select" name="nationality_id">
                                        <option value="">Select Nationality</option>
                                        @foreach ($nationalities as $nationality)
                                            <option value="{{ $nationality->id }}" @selected(old('nationality_id') == $nationality->id)>
                                                {{ $nationality->name }}
                                            </option>
                                        @endforeach
                                    </x-forms.select.basic>
                                </div>

                                <div class="asset-col-6">
                                    <x-forms.labels.basic>
                                        Religion <span class="lead-required">*</span>
                                    </x-forms.labels.basic>
                                    <x-forms.select.basic class="asset-select select2 general-select" name="religion"
                                        required style="width: 100%;">
                                        <option value="">Select Religion</option>
                                        <option value="1" @selected(old('religion') == '1')>Muslim</option>
                                        <option value="2" @selected(old('religion') == '2')>Christian</option>
                                        <option value="3" @selected(old('religion') == '3')>Jewish</option>
                                    </x-forms.select.basic>

                                </div>

                                <div class="asset-col-6">
                                    <x-forms.labels.basic>
                                        Gender <span class="lead-required">*</span>
                                    </x-forms.labels.basic>

                                    <x-forms.select.basic class="select2 general-select" name="gender" required>
                                        <option value="">Select Gender</option>
                                        <option value="male" @selected(old('gender') == 'male')>Male</option>
                                        <option value="female" @selected(old('gender') == 'female')>Female</option>
                                    </x-forms.select.basic>
                                </div>

                                <div class="asset-col-6">
                                    <x-forms.labels.basic>
                                        Country <span class="lead-required">*</span>
                                    </x-forms.labels.basic>

                                    <x-forms.select.basic class="select2 general-select" name="country_id" required>
                                        <option value="">Select country</option>
                                        @foreach ($countriesSelect as $id => $name)
                                            <option value="{{ $id }}" @selected(old('country_id') == $id)>
                                                {{ $name }}
                                            </option>
                                        @endforeach
                                    </x-forms.select.basic>
                                </div>

                                <div class="asset-col-6">
                                    <x-forms.labels.basic>
                                        Source <span class="lead-required">*</span>
                                    </x-forms.labels.basic>

                                    <x-forms.select.basic class="select2 general-select" name="source" required>
                                        <option value="">Select source</option>

                                        @foreach (SourceType::cases() as $i => $source)
                                            <option value="{{ $source->value }}" @selected(old('source', $i === 0 ? $source->value : null) === $source->value)>
                                                {{ str($source->value)->replace('_', ' ')->lower()->ucfirst() }}
                                            </option>
                                        @endforeach
                                    </x-forms.select.basic>
                                </div>

                                <div class="asset-col-6 lead-hidden-section" id="source_id" style="display:none;">
                                    <x-forms.labels.basic>
                                        Referral ID <span class="lead-required">*</span>
                                    </x-forms.labels.basic>

                                    <x-forms.select.basic id="source_id_select" class="select2 general-select"
                                        onchange="change_source(this)" name="source_id">
                                        <option value="" disabled @if (!old('source_id')) selected @endif>
                                            Select Referral ID
                                        </option>

                                        @foreach ($getAllStudents as $student)
                                            <option value="{{ $student->id }}" data-type="{{ $student->type }}"
                                                data-user-id="{{ $student->user_id ?? '' }}" @selected(old('source_id') == $student->id)>
                                                {{ $student->student_code ?? '' }}
                                            </option>
                                        @endforeach
                                    </x-forms.select.basic>

                                    <input type="hidden" name="user_type" id="user_type">
                                    <input type="hidden" name="user_id_hidden" id="user_id_hidden">
                                </div>

                                <div class="asset-col-6">
                                    <x-forms.labels.basic>
                                        Type of contact <span class="lead-required">*</span>
                                    </x-forms.labels.basic>

                                    <x-forms.select.basic class="select2 general-select" name="type_of_contact" required>
                                        <option value="">Select type</option>
                                        @foreach (TypeOfContact::cases() as $type)
                                            <option value="{{ $type->value }}" @selected(old('type_of_contact') == $type->value)>
                                                {{ $type->value }}
                                            </option>
                                        @endforeach
                                    </x-forms.select.basic>
                                </div>

                                <div class="asset-col-6">
                                    <x-forms.labels.basic>
                                        Track type <span class="lead-required">*</span>
                                    </x-forms.labels.basic>

                                    <x-forms.select.basic class="select2 general-select" name="track_type_id" required>
                                        <option value="">Select type</option>
                                        @foreach ($trackTypesSelect as $id => $name)
                                            <option value="{{ $id }}" @selected(old('track_type_id') == $id)>
                                                {{ $name }}
                                            </option>
                                        @endforeach
                                    </x-forms.select.basic>
                                </div>

                                <div class="asset-col-6">
                                    <x-forms.labels.basic>
                                        Program <span class="lead-required">*</span>
                                    </x-forms.labels.basic>

                                    <x-forms.select.basic class="select2 general-select" name="program_id" required>
                                        <option value="">Select Program</option>
                                        @foreach ($programs as $program)
                                            <option value="{{ $program->id }}" @selected(old('program_id') == $program->id)>
                                                {{ $program->name_en }}
                                            </option>
                                        @endforeach
                                    </x-forms.select.basic>
                                </div>

                                <div class="asset-col-6">
                                    <label for="date_of_birth" class="asset-label">
                                        Date of Birth <span class="lead-required">*</span>
                                    </label>

                                    <input type="date"
                                        class="asset-input @error('date_of_birth') asset-invalid @enderror"
                                        id="date_of_birth" name="date_of_birth" value="{{ old('date_of_birth') }}"
                                        required>

                                    @error('date_of_birth')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-12">
                                    <label for="moderation_mode" class="asset-label">Moderation Mode</label>
                                    <textarea class="asset-input" rows="4" id="moderation_mode" name="moderation_mode">{{ old('moderation_mode') }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Professional Details --}}
                    <div class="ui-card">
                        <div class="form-section">
                            <div class="form-section__head">
                                <h5 class="form-section__title mb-1">Professional Details</h5>
                                <p class="form-section__sub mb-0">
                                    Define the lead’s work background, assignee, plan type, and optional parent relation.
                                </p>
                            </div>

                            <div class="asset-form-grid">
                                <div class="asset-col-6">
                                    <x-forms.labels.basic>
                                        Industry <span class="lead-required">*</span>
                                    </x-forms.labels.basic>

                                    <x-forms.select.basic required name="industry" id="industry"
                                        class="select2 general-select">
                                        <option value="">Select Industry</option>
                                        @foreach (App\Enums\IndustryEnum::cases() as $industry)
                                            <option value="{{ $industry->value }}" @selected(old('industry') == $industry->value)>
                                                {{ $industry->value }}
                                            </option>
                                        @endforeach
                                    </x-forms.select.basic>
                                </div>

                                <div class="asset-col-6">
                                    <x-forms.input-label.basic required name="position">
                                        Position <span class="lead-required">*</span>
                                    </x-forms.input-label.basic>
                                </div>

                                <div class="asset-col-6">
                                    <x-forms.input-label.basic name="ad_code">
                                        Ad code <span class="lead-required" id="required_add_code_mark">*</span>
                                    </x-forms.input-label.basic>
                                </div>

                                <div class="asset-col-6">
                                    <x-forms.labels.basic>Assigned to</x-forms.labels.basic>

                                    <x-forms.select.basic class="select2 general-select" name="assigned_to">
                                        <option value="">Select user</option>
                                        @foreach ($usersSelect as $id => $fullName)
                                            <option value="{{ $id }}" @selected(old('assigned_to') == $id)>
                                                {{ $fullName }}
                                            </option>
                                        @endforeach
                                    </x-forms.select.basic>
                                </div>

                                <div class="asset-col-6">
                                    <x-forms.labels.basic>
                                        Lead plan type <span class="lead-required">*</span>
                                    </x-forms.labels.basic>

                                    <x-forms.select.basic class="select2 general-select" name="plan_type_id"
                                        id="plan_type_id" required>
                                        <option value="">Select plan type</option>

                                        @foreach ($getPricingPlanType as $plan_type)
                                            <option value="{{ $plan_type->id }}" @selected(old('plan_type_id') == $plan_type->id)>
                                                {{ $plan_type->name }}
                                            </option>
                                        @endforeach

                                        @php
                                            $b2b = $getPricingPlanType->where('name', 'B2B')->first();
                                            $family = $getPricingPlanType->where('name', 'Family')->first();
                                        @endphp

                                        @if ($b2b)
                                            <option data-type="{{ strtolower($b2b->name) }}"
                                                value="{{ $b2b->id }}">
                                                Current B2B Parent
                                            </option>
                                        @endif

                                        @if ($family)
                                            <option data-type="{{ strtolower($family->name) }}"
                                                value="{{ $family->id }}">
                                                Current Family Parent
                                            </option>
                                        @endif
                                    </x-forms.select.basic>
                                </div>

                                <div class="asset-col-6 d-none" id="b2bSelectWrapper">
                                    <x-forms.labels.basic>
                                        Select B2B Parent <span class="lead-required">*</span>
                                    </x-forms.labels.basic>

                                    <x-forms.select.basic class="select2 general-select" name="parent_id">
                                        <option value="">Select B2B Parent</option>
                                        @foreach ($getB2BParents as $b2b)
                                            <option value="{{ $b2b->id }}" @selected(old('parent_id') == $b2b->id)>
                                                {{ $b2b->fathers_name }}
                                            </option>
                                        @endforeach
                                    </x-forms.select.basic>
                                </div>

                                <div class="asset-col-6 d-none" id="familySelectWrapper">
                                    <x-forms.labels.basic>
                                        Select Family Parent <span class="lead-required">*</span>
                                    </x-forms.labels.basic>

                                    <x-forms.select.basic class="select2 general-select" name="family_parent_id">
                                        <option value="">Select Family Parent</option>
                                        @foreach ($getfamilyParents as $family)
                                            <option value="{{ $family->id }}" @selected(old('family_parent_id') == $family->id)>
                                                {{ $family->fathers_name }}
                                            </option>
                                        @endforeach
                                    </x-forms.select.basic>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Lead Management --}}
                    <div class="ui-card">
                        <div class="form-section">
                            <div class="form-section__head">
                                <h5 class="form-section__title mb-1">Lead Management</h5>
                                <p class="form-section__sub mb-0">
                                    Set the lead flag, choose the first creation action, and add any internal notes.
                                </p>
                            </div>

                            <div class="asset-form-grid">
                                <div class="asset-col-6">
                                    <x-forms.labels.basic>
                                        Flag <span class="lead-required">*</span>
                                    </x-forms.labels.basic>

                                    <x-forms.select.basic class="select2 general-select" name="flag" required>
                                        <option value="">Select flag</option>
                                        @foreach (FlagType::cases() as $flag)
                                            <option value="{{ $flag->value }}" @selected(old('flag') === $flag->value)>
                                                {{ str($flag->value)->replace('_', ' ')->lower()->ucfirst() }}
                                            </option>
                                        @endforeach
                                    </x-forms.select.basic>
                                </div>

                                <div class="asset-col-6">
                                    <x-forms.labels.basic>
                                        Creation Action <span class="lead-required">*</span>
                                    </x-forms.labels.basic>

                                    <x-forms.select.basic class="select2 general-select" name="creation_action" required>
                                        <option value="call" @selected(old('creation_action') == 'call')>Call</option>
                                        <option value="task" @selected(old('creation_action') == 'task')>Task</option>
                                    </x-forms.select.basic>
                                </div>

                                <div class="asset-col-12">
                                    <x-forms.labels.basic>Notes</x-forms.labels.basic>
                                    <x-forms.textarea.basic name="notes">{{ old('notes') }}</x-forms.textarea.basic>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="asset-actions">
                        <a href="{{ url()->previous() }}" class="asset-btn asset-btn--secondary">
                            Cancel
                        </a>

                        <button type="submit" class="asset-btn asset-btn--primary">
                            Submit
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>

    <script>
        $(document).ready(function() {
            $('.select2').select2({
                placeholder: "Select option",
                allowClear: true,
                width: '100%'
            });

            function toggleSourceFields() {
                var sourceValue = $('select[name="source"]').val();

                if (sourceValue === 'referral') {
                    $('#source_id').css('display', 'block');
                } else {
                    $('#source_id').css('display', 'none');
                    $('#source_id_select').val(null).trigger('change');
                    $('#user_type').val('');
                    $('#user_id_hidden').val('');
                }

                if (sourceValue === 'ads') {
                    $('#required_add_code_mark').removeClass('d-none');
                } else {
                    $('#required_add_code_mark').addClass('d-none');
                }
            }

            function togglePlanParentFields() {
                const selectedType = $('#plan_type_id').find(':selected').data('type');

                $('#b2bSelectWrapper, #familySelectWrapper').addClass('d-none');
                $('#b2bSelectWrapper select, #familySelectWrapper select').prop('required', false);

                if (selectedType === 'b2b') {
                    $('#b2bSelectWrapper').removeClass('d-none');
                    $('#b2bSelectWrapper select').prop('required', true);
                } else if (selectedType === 'family') {
                    $('#familySelectWrapper').removeClass('d-none');
                    $('#familySelectWrapper select').prop('required', true);
                }
            }

            $('select[name="source"]').on('change', toggleSourceFields);
            $('#plan_type_id').on('change', togglePlanParentFields);

            toggleSourceFields();
            togglePlanParentFields();
        });
    </script>

    <script>
        const phoneInput = document.querySelector("#phone");
        const countryCodeInput = document.querySelector("#country_code");

        if (phoneInput) {
            const iti = window.intlTelInput(phoneInput, {
                initialCountry: "eg",
                nationalMode: false,
                allowDropdown: true,
                autoHideDialCode: false,
                autoPlaceholder: "polite",
                separateDialCode: true,
                utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
                geoIpLookup: function(callback) {
                    fetch("https://ipinfo.io/json?token=your_token")
                        .then((resp) => resp.json())
                        .then((resp) => callback(resp.country))
                        .catch(() => callback(""));
                }
            });

            window.addEventListener("load", () => {
                const itiWrapper = phoneInput.closest(".iti");

                if (itiWrapper) {
                    itiWrapper.classList.add("w-100");
                }
            });

            phoneInput.addEventListener("blur", function() {
                const dialCode = iti.getSelectedCountryData().dialCode;
                const errorMsg = document.querySelector("#phone-error");

                if (dialCode && countryCodeInput) {
                    countryCodeInput.value = "+" + dialCode;
                } else if (countryCodeInput) {
                    countryCodeInput.value = "";
                }

                if (phoneInput.value.trim() === "") {
                    if (errorMsg) {
                        errorMsg.textContent = "Phone number is required.";
                        errorMsg.classList.remove('d-none');
                    }

                    return;
                }

                if (!dialCode) {
                    if (errorMsg) {
                        errorMsg.textContent = "";
                        errorMsg.classList.add('d-none');
                    }

                    return;
                }

                const isValid = iti.isValidNumber();

                if (!isValid) {
                    const errorCode = iti.getValidationError();

                    const errorMessages = {
                        1: "Invalid country code",
                        2: "Too short",
                        3: "Too long",
                        4: "Too short",
                        5: "Too long"
                    };

                    if (errorMsg) {
                        errorMsg.textContent = errorMessages[errorCode] || "Invalid phone number";
                        errorMsg.classList.remove('d-none');
                    }
                } else {
                    if (errorMsg) {
                        errorMsg.textContent = "";
                        errorMsg.classList.add('d-none');
                    }
                }
            });
        }

        function change_source(selectElement) {
            const selectedOption = selectElement.options[selectElement.selectedIndex];
            const userType = selectedOption.getAttribute("data-type");
            const userId = selectedOption.getAttribute("data-user-id");

            document.getElementById("user_type").value = userType || "";
            document.getElementById("user_id_hidden").value = userId || "";
        }
    </script>
@endpush