@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>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>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>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 </x-forms.labels.basic>
                                    <x-forms.select.basic class="select2" name="nationality_id">
                                        <option selected disabled>
                                            Select Nationality
                                        </option>
                                        @foreach ($nationalities as $nationality)
                                            <option value="{{ $nationality->id }}">
                                                {{ $nationality->name }}
                                            </option>
                                        @endforeach
                                    </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>
                                        @foreach (SourceType::cases() as $source)
                                            <option value="{{ $source->value }}" @selected(old('source') === $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->full_name ?? $student->first_name . ' ' . $student->last_name }}
                                            </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-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</x-forms.labels.basic>
                                    <x-forms.select.basic 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 name="position" >Position
                                    </x-forms.input-label.basic>
                                </div>
                                <div class="col-md-6">
                                    <x-forms.input-label.basic name="ad_code" required>Ad code<span
                                            style="color:red">*</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="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() {
            $('select[name="source"]').on('change', function() {
                if ($(this).val() === 'referral') {
                    $('#source_id').css('display', 'block');
                } else {
                    $('#source_id').css('display', 'none');
                }
            });
        });

        $(document).ready(function() {
            $('#plan_type_id').on('select2:select', function(e) {
                const selectedType = $(e.params.data.element).data('type');
                console.log('Selected value:', selectedType);

                  // Hide all wrappers and remove required from selects
        $('#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 number",
                    "Invalid country code",
                    "Too short",
                    "Too long",
                    "Invalid number"
                ];
                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(e) {
            //  const select = document.querySelector('[name="source_id"]');
                // console.log(e, 'tr');
                // console.log('selchanger2');
                let selectedOption = e.options[e.selectedIndex];
                console.log(selectedOption);

                document.getElementById('user_type').value = selectedOption.getAttribute('data-type') || '';
                document.getElementById('user_id_hidden').value = selectedOption.getAttribute('data-user-id') || '';
            
        }
    </script>
    
</x-Dashboard.Layout.Layout>