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

<style>
    .iti input {
        padding-left: 85px !important;
    }
</style>
<x-Dashboard.Layout.Layout title="Create Lead">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css" />

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-md-12">
                <form method="POST" action="{{ route('leads.store') }}">
                    @csrf

                    {{-- Personal Information --}}
                    <div class="card border-0 mb-24">
                        <div class="card-header">
                            <h6 class="text-lg font-weight-semibold mb-0">Personal Information</h6>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <x-forms.input-label.basic 
                                        name="first_name" 
                                        required 
                                        :value="$firstName"
                                    >
                                        First name <span style="color:red">*</span>
                                    </x-forms.input-label.basic>
                                </div>
                                
                                <div class="col-md-6">
                                    <x-forms.input-label.basic 
                                        name="last_name" 
                                        required 
                                        :value="$lastName"
                                    >
                                        Last name <span style="color:red">*</span>
                                    </x-forms.input-label.basic>
                                </div>
                                
                                <div class="col-md-6">
                                    <x-forms.input-label.basic 
                                        name="email" 
                                        required
                                    >
                                        Email <span style="color:red">*</span>
                                    </x-forms.input-label.basic>
                                </div>
                                
                                <div class="col-md-6">
                                    <x-forms.input-label.basic 
                                        name="phone" 
                                        id="phone" 
                                        required 
                                        :value="$phone"
                                    >
                                        Phone <span style="color:red">*</span>
                                    </x-forms.input-label.basic>
                                
                                    <span id="phone-error" style="color:red; display:none;"></span>
                                    <input type="hidden" id="country_code" name="country_code">
                                </div>
                                <div class="col-md-12">
                                    <x-forms.input-label.basic name="address">Address<span style="color:red">*</span>
                                    </x-forms.input-label.basic>
                                </div>
                                <div class="col-md-6">
                                    <x-forms.labels.basic>Nationality <span
                                            style="color:red">*</span></x-forms.labels.basic>

                                    <x-forms.select.basic required class="select2" name="nationality_id">
                                        <option selected>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="col-md-6">
                                    <x-forms.labels.basic>Religion <span
                                            style="color:red">*</span></x-forms.labels.basic>
                                    <x-forms.select.basic class="select2" name="religion" required>
                                        <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="col-md-6">
                                    <x-forms.labels.basic>Gender<span style="color:red">*</span></x-forms.labels.basic>
                                    <x-forms.select.basic class="select2" 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="col-md-6">
                                    <x-forms.labels.basic>Country<span style="color:red">*</span></x-forms.labels.basic>
                                    <x-forms.select.basic class="select2" 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="col-md-6">
                                    <x-forms.labels.basic>Source<span style="color:red">*</span></x-forms.labels.basic>
                                    <x-forms.select.basic class="select2" name="source" required>
                                        <option value="">Select source</option>

                                        {{-- default value --}}
                                        @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="col-md-6" id="source_id" style="display:none;">
                                    <x-forms.labels.basic>Referral ID<span
                                            style="color:red">*</span></x-forms.labels.basic>
                                    <x-forms.select.basic id="source_id_select" class="select2"
                                        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->display_name  }} --}}
                                                {{ $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="col-md-6">
                                    <x-forms.labels.basic>Type of contact<span
                                            style="color:red">*</span></x-forms.labels.basic>
                                    <x-forms.select.basic class="select2" 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="col-md-6">
                                    <x-forms.labels.basic>Track type<span
                                            style="color:red">*</span></x-forms.labels.basic>
                                    <x-forms.select.basic class="select2" 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="col-md-6">
                                    <x-forms.labels.basic>Program<span style="color:red">*</span></x-forms.labels.basic>
                                    <x-forms.select.basic class="select2" 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="col-md-6">
                                    <label for="date_of_birth" class="form-label fw-bold">
                                        Date of Birth <span style="color:red">*</span>
                                    </label>
                                    <input type="date" class="form-control" id="date_of_birth"
                                        name="date_of_birth" value="{{ old('date_of_birth') }}" required>
                                    @error('date_of_birth')
                                        <div class="text-danger mt-1">{{ $message }}</div>
                                    @enderror
                                </div>

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

                            </div>
                        </div>
                    </div>

                    {{-- Professional Details --}}
                    <div class="card border-0 mb-24">
                        <div class="card-header">
                            <h6 class="text-lg font-weight-semibold mb-0">Professional Details</h6>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <x-forms.labels.basic>Industry <span
                                            style="color:red">*</span></x-forms.labels.basic>
                                    <x-forms.select.basic required name="industry" id="industry" class="select2">
                                        <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="col-md-6">
                                    <x-forms.input-label.basic required name="position">Position
                                        <span style="color:red">*</span></x-forms.input-label.basic>
                                </div>
                                <div class="col-md-6">
                                    <x-forms.input-label.basic name="ad_code">Ad code <span style="color:red"
                                            id="required_add_code_mark">*</span>
                                    </x-forms.input-label.basic>
                                </div>

                                <div class="col-md-6">
                                    <x-forms.labels.basic>Assigned to</x-forms.labels.basic>
                                    <x-forms.select.basic class="select2" 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="col-md-6">
                                    <x-forms.labels.basic>Account to</x-forms.labels.basic>
                                    <x-forms.select.basic name="account_id">
                                        <option value="">Select user</option>
                                        @foreach ($getAllAccounts as $account)
                                            <option value="{{ $account->id }}"
                                @if (old('account_id', $lead->account_id) == $account->id) selected @endif>
                                {{ $account->name }}
                                </option>
                                @endforeach
                                </x-forms.select.basic>
                            </div> --}}
                                {{-- <div class="col-md-6">
                                    <x-forms.labels.basic>Student to</x-forms.labels.basic>
                                    <x-forms.select.basic name="student_id">
                                        <option value="">Select student</option>
                                        @foreach ($getAllStudents as $student)
                                            <option value="{{ $student->id }}"
                            @if (old('student_id', $lead->student_id) == $student->id) selected @endif>
                            {{ $student->name }}
                            </option>
                            @endforeach
                            </x-forms.select.basic>
                        </div> --}}
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <x-forms.labels.basic>Lead plan type<span
                                            style="color:red">*</span></x-forms.labels.basic>
                                    <x-forms.select.basic class="select2" 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 }}"
                                                @if (old('plan_type_id', $lead->plan_type_id) == $plan_type->id) selected @endif>
                                                {{ $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="col-md-6 d-none" id="b2bSelectWrapper">
                                    <x-forms.labels.basic>Select B2B Parent<span
                                            style="color:red">*</span></x-forms.labels.basic>
                                    <x-forms.select.basic class="select2" name="parent_id">
                                        <option value="">Select B2B Parent</option>
                                        @foreach ($getB2BParents as $b2b)
                                            <option value="{{ $b2b->id }}">{{ $b2b->fathers_name }}</option>
                                        @endforeach
                                    </x-forms.select.basic>
                                </div>

                                <div class="col-md-6 d-none" id="familySelectWrapper">
                                    <x-forms.labels.basic>Select Family Parent<span
                                            style="color:red">*</span></x-forms.labels.basic>
                                    <x-forms.select.basic class="select2" name="family_parent_id">
                                        <option value="">Select Family Parent</option>
                                        @foreach ($getfamilyParents as $family)
                                            <option value="{{ $family->id }}">{{ $family->fathers_name }}</option>
                                        @endforeach
                                    </x-forms.select.basic>
                                </div>

                            </div>
                        </div>
                    </div>

                    {{-- Lead Management --}}
                    <div class="card border-0">
                        <div class="card-header">
                            <h6 class="text-lg font-weight-semibold mb-0">Lead Management</h6>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                {{-- <div class="col-md-6">
                                    <x-forms.labels.basic>Creator</x-forms.labels.basic>
                                    <x-forms.select.basic name="creator_id">
                                        <option value="">Select user</option>
                                        @foreach ($usersSelect as $id => $fullName)
                                            <option value="{{ $id }}" @selected(old('creator_id') == $id)>
                    {{ $fullName }}
                    </option>
                    @endforeach
                    </x-forms.select.basic>
                </div> --}}


                                {{-- <div class="col-md-6">
                                    <x-forms.labels.basic>Program type</x-forms.labels.basic>
                                    <x-forms.select.basic name="program_type_id">
                                        <option value="">Select type</option>
                                        @foreach ($programTypesSelect as $id => $name)
                                            <option
                                                value="{{ $id }}"
                @selected(old('program_type_id') == $id)
                >
                {{ $name }}
                </option>
                @endforeach
                </x-forms.select.basic>
            </div> --}}


                                {{-- <div class="col-md-6">
                                    <x-forms.input-label.basic
                                        name="last_follow_up"
                                        type="datetime-local"
                                        value="{{ old('last_follow_up') }}"
            >
            Last follow up
            </x-forms.input-label.basic>
        </div>
        <div class="col-md-6">
            <x-forms.input-label.basic
                name="next_follow_up"
                type="datetime-local"
                value="{{ old('next_follow_up') }}">
                Next follow up
            </x-forms.input-label.basic>
        </div> --}}
                                <div class="col-md-6">
                                    <x-forms.labels.basic>Flag<span style="color:red">*</span></x-forms.labels.basic>
                                    <x-forms.select.basic class="select2" 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="col-md-6">
                                    <x-forms.labels.basic>WorkFlow</x-forms.labels.basic>
                                    <x-forms.select.basic name="workflow_id">
                                        @foreach ($workflows as $workflow)
                                            <option
                                                value="{{$workflow->id}}"
        @selected(old('workflow_id', $lead->workflow_id) === $workflow->id)
        >
        {{ str($workflow?->name)->replace('_', ' ')->lower()->ucfirst() }}
        </option>
        @endforeach
        </x-forms.select.basic>
    </div> --}}
                                <div class="col-md-6">
                                    <x-forms.labels.basic>Creation Action<span
                                            style="color:red">*</span></x-forms.labels.basic>
                                    <x-forms.select.basic class="select2" name="creation_action" required>
                                        <option value="call">Call</option>
                                        <option value="task">Task</option>
                                        {{-- <option value="product">Product</option> --}}
                                    </x-forms.select.basic>
                                </div>
                                <div class="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 class="col-12 pt-4 text-end">
                                    <x-forms.buttons.primary class="float-end">Submit</x-forms.buttons.primary>
                                </div>
                            </div>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
    <script src="{{ asset('assets/js/lib/jquery-3.7.1.min.js') }}"></script>
    <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%'
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            $('select[name="source"]').on('change', function() {
                if ($(this).val() === 'referral') {
                    $('#source_id').css('display', 'block');
                } else {
                    $('#source_id').css('display', 'none');
                }
                if ($(this).val() === 'ads') {
                    $('#required_add_code_mark').removeClass('d-none');
                } else {
                    $('#required_add_code_mark').addClass('d-none')
                }
            });
        });
        $(document).ready(function() {
            $('#plan_type_id').on('change', function() {
                const selectedType = $(this).find(':selected').data('type');
                console.log("Selected Type", selectedType)
                $('#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);

                }
            });
        });
        const phoneInput = document.querySelector("#phone");
        const countryCodeInput = document.querySelector("#country_code");
        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(""));
            }
        });

        // Ensure wrapper styling
        window.addEventListener("load", () => {
            const itiWrapper = phoneInput.closest(".iti");
            if (itiWrapper) {
                itiWrapper.classList.add("w-100");
            }
        });

        // Validation on blur
        // Make country code optional and phone required
        phoneInput.addEventListener("blur", function() {
            const dialCode = iti.getSelectedCountryData().dialCode;

            // Only set country code if selected
            if (dialCode && countryCodeInput) {
                countryCodeInput.value = "+" + dialCode;
            } else {
                countryCodeInput.value = ""; // clear if no country selected
            }
            const errorMsg = document.querySelector("#phone-error");
            if (phoneInput.value.trim() === "") {
                if (errorMsg) {
                    errorMsg.textContent = "Phone number is required.";
                    errorMsg.style.display = "block";
                }
                return;
            }
            if (!dialCode) {
                if (errorMsg) {
                    errorMsg.textContent = "";
                    errorMsg.style.display = "none";
                }
                return;
            }
            const isValid = iti.isValidNumber();
            if (!isValid) {
                const errorCode = iti.getValidationError();
                const errorMessages = [
                    "Invalid country code",
                    "Too short",
                    "Too long"
                ];
                if (errorMsg) {
                    errorMsg.textContent = errorMessages[errorCode] || "Invalid phone number";
                    errorMsg.style.display = "block";
                }
            } else {
                if (errorMsg) {
                    errorMsg.textContent = "";
                    errorMsg.style.display = "none";
                }
            }
        });
    </script>
    <script>
        function change_source(selectElement) {
            const selectedOption = selectElement.options[selectElement.selectedIndex];
            const userType = selectedOption.getAttribute("data-type");
            const userId = selectedOption.getAttribute("data-user-id");
            console.log("User Type", userType);
            // update hidden inputs
            document.getElementById("user_type").value = userType || "";
            document.getElementById("user_id_hidden").value = userId || "";
        }
    </script>
</x-Dashboard.Layout.Layout>