@extends('layouts.master')
@section('title')
    Tenant Add
@endsection

@section('content')
    @php
        use DipeshSukhia\LaravelCountryStateCityData\Models\Country;
        use DipeshSukhia\LaravelCountryStateCityData\Models\State;
        use DipeshSukhia\LaravelCountryStateCityData\Models\City;

        // Get old values for country, state, city
        $oldCountry = old('country', isset($data) ? $data->country : null);
        $oldState = old('state', isset($data) ? $data->state : null);
        $oldCity = old('city', isset($data) ? $data->city : null);
    @endphp

    {{-- Include Select2 CSS --}}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
    <style>
        /* Custom Select2 Bootstrap Integration */
        .select2-container--default .select2-selection--single {
            height: calc(2.25rem + 2px) !important;
            padding: 0.375rem 0.75rem;
            border: 1px solid #ced4da;
            border-radius: 0.375rem;
            background-color: #fff;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: #495057;
            line-height: calc(2.25rem);
            padding-left: 0;
            padding-right: 20px;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: calc(2.25rem + 2px);
            right: 10px;
        }

        .select2-dropdown {
            border: 1px solid #ced4da;
            border-radius: 0.375rem;
            border-top: none;
        }

        .select2-container--default.select2-container--focus .select2-selection--single {
            border-color: #80bdff;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }

        .select2-container--default .select2-search--dropdown .select2-search__field {
            border: 1px solid #ced4da;
            border-radius: 0.375rem;
        }

        /* Error state styling */
        .is-invalid+.select2-container .select2-selection {
            border-color: #dc3545 !important;
        }

        .select2-container {
            width: 100% !important;
        }
    </style>

    <div class="row">
        <div class="col-12">
            <form action="{{ route('tenant.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                @isset($data)
                    <input name="id" type="hidden" value="{{ $data->id }}">
                @endisset
                <div class="card">
                    <div class="card-body row">
                        <h4 class="card-title py-3">
                            @isset($data)
                                @lang('translation.Edit_Tenant')
                            @else
                                @lang('translation.Add_Tenant')
                            @endisset
                        </h4>

                        {{-- Tenant Name --}}
                        <div class="col-md-6">
                            <div class="mb-3 row">
                                <label for="tenant_name" class="col-md-4 col-form-label">Tenant Name</label>
                                <div class="col-md-8">
                                    <input name='tenant_name'
                                        class="form-control @error('tenant_name') is-invalid @enderror" type="text"
                                        value="{{ isset($data) ? $data->tenant_name : old('tenant_name') }}">
                                    @error('tenant_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        {{-- Tenant Type --}}
                        <div class="col-md-6">
                            <div class="mb-3 row">
                                <label for="tenant_type" class="col-md-4 col-form-label">Tenant Type</label>
                                <div class="col-md-8">
                                    <select name="tenant_type"
                                        class="form-select @error('tenant_type') is-invalid @enderror">
                                        <option value="">-- Select Type --</option>
                                        <option value="Restaurant" @if ((isset($data) && $data->tenant_type == 'Restaurant') || old('tenant_type') == 'Restaurant') selected @endif>
                                            Restaurant
                                        </option>
                                        <option value="Food Court" @if ((isset($data) && $data->tenant_type == 'Food Court') || old('tenant_type') == 'Food Court') selected @endif>
                                            Food Court
                                        </option>
                                    </select>
                                    @error('tenant_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        {{-- Contact Person Name --}}
                        <div class="col-md-6">
                            <div class="mb-3 row">
                                <label class="col-md-4 col-form-label">Contact Person Name</label>
                                <div class="col-md-8">
                                    <input name='contact_person_name'
                                        class="form-control @error('contact_person_name') is-invalid @enderror"
                                        type="text"
                                        value="{{ isset($data) ? $data->contact_person_name : old('contact_person_name') }}">
                                    @error('contact_person_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        {{-- Contact Person Email --}}
                        <div class="col-md-6">
                            <div class="mb-3 row">
                                <label class="col-md-4 col-form-label">Contact Person Email</label>
                                <div class="col-md-8">
                                    <input name='contact_person_email'
                                        class="form-control @error('contact_person_email') is-invalid @enderror"
                                        type="email"
                                        value="{{ isset($data) ? $data->contact_person_email : old('contact_person_email') }}">
                                    @error('contact_person_email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        {{-- Contact Person Phone --}}
                        <div class="col-md-6">
                            <div class="mb-3 row">
                                <label class="col-md-4 col-form-label">Contact Person Phone</label>
                                <div class="col-md-8">
                                    <input name='contact_person_phone'
                                        class="form-control @error('contact_person_phone') is-invalid @enderror"
                                        type="text"
                                        value="{{ isset($data) ? $data->contact_person_phone : old('contact_person_phone') }}">
                                    @error('contact_person_phone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        {{-- Username --}}
                        <div class="col-md-6">
                            <div class="mb-3 row">
                                <label class="col-md-4 col-form-label">Username</label>
                                <div class="col-md-8">
                                    <input name='username' class="form-control @error('username') is-invalid @enderror"
                                        type="text" value="{{ isset($data) ? $data->username : old('username') }}">
                                    @error('username')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        {{-- Password --}}
                        <div class="col-md-6">
                            <div class="mb-3 row">
                                <label class="col-md-4 col-form-label">Password</label>
                                <div class="col-md-8">
                                    <div class="input-group auth-pass-inputgroup @error('password') is-invalid @enderror">
                                        <input type="password" name="password"
                                            class="form-control  @error('password') is-invalid @enderror" id="userpassword"
                                            value="{{ old('password') }}" placeholder="Enter password" aria-label="Password"
                                            aria-describedby="password-addon">
                                        <button class="btn btn-light " type="button" id="password-addon"><i
                                                class="mdi mdi-eye-outline"></i></button>
                                        @error('password')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Email --}}
                        <div class="col-md-6">
                            <div class="mb-3 row">
                                <label class="col-md-4 col-form-label">Email</label>
                                <div class="col-md-8">
                                    <input name='email' class="form-control @error('email') is-invalid @enderror"
                                        type="email" value="{{ isset($data) ? $data->email : old('email') }}">
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        {{-- Phone --}}
                        <div class="col-md-6">
                            <div class="mb-3 row">
                                <label class="col-md-4 col-form-label">Phone</label>
                                <div class="col-md-8">
                                    <input name='phone' class="form-control @error('phone') is-invalid @enderror"
                                        type="text" value="{{ isset($data) ? $data->phone : old('phone') }}">
                                    @error('phone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        {{-- Address --}}
                        <div class="col-md-6">
                            <div class="mb-3 row">
                                <label class="col-md-4 col-form-label">Address</label>
                                <div class="col-md-8">
                                    <input name='address' class="form-control @error('address') is-invalid @enderror"
                                        type="text" value="{{ isset($data) ? $data->address : old('address') }}">
                                    @error('address')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        {{-- Country Autocomplete --}}
                        <div class="col-md-6">
                            <div class="mb-3 row">
                                <label for="country" class="col-md-4 col-form-label">Country</label>
                                <div class="col-md-8">
                                    <select name="country" id="country"
                                        class="form-select @error('country') is-invalid @enderror">
                                        <option value="">-- Select Country --</option>
                                        @foreach (\App\Models\Country::all() as $country)
                                            <option value="{{ $country->id }}"
                                                @if ($oldCountry == $country->id) selected @endif>
                                                {{ $country->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('country')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        {{-- State Autocomplete --}}
                        <div class="col-md-6">
                            <div class="mb-3 row">
                                <label for="state" class="col-md-4 col-form-label">State</label>
                                <div class="col-md-8">
                                    <select name="state" id="state"
                                        class="form-select @error('state') is-invalid @enderror">
                                        <option value="">-- Select State --</option>
                                        @if ($oldCountry)
                                            @php
                                                $states = \App\Models\State::where('country_id', $oldCountry)->get();
                                            @endphp
                                            @foreach ($states as $state)
                                                <option value="{{ $state->id }}"
                                                    @if ($oldState == $state->id) selected @endif>
                                                    {{ $state->name }}
                                                </option>
                                            @endforeach
                                        @endif
                                    </select>
                                    @error('state')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        {{-- City Autocomplete --}}
                        <div class="col-md-6">
                            <div class="mb-3 row">
                                <label for="city" class="col-md-4 col-form-label">City</label>
                                <div class="col-md-8">
                                    <select name="city" id="city"
                                        class="form-select @error('city') is-invalid @enderror">
                                        <option value="">-- Select City --</option>
                                        @if ($oldState)
                                            @php
                                                $cities = \App\Models\City::where('state_id', $oldState)->get();
                                            @endphp
                                            @foreach ($cities as $city)
                                                <option value="{{ $city->id }}"
                                                    @if ($oldCity == $city->id) selected @endif>
                                                    {{ $city->name }}
                                                </option>
                                            @endforeach
                                        @endif
                                    </select>
                                    @error('city')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        {{-- Status --}}
                        <div class="col-md-6">
                            <div class="mb-3 row">
                                <label class="col-md-4 col-form-label">Status</label>
                                <div class="col-md-8">
                                    <select class="form-select @error('status') is-invalid @enderror" name="status">
                                        <option value='active' @if ((isset($data) && $data->status == 'active') || old('status') == 'active' || (!isset($data) && !old('status'))) selected @endif>
                                            Active
                                        </option>
                                        <option value='inactive' @if ((isset($data) && $data->status == 'inactive') || old('status') == 'inactive') selected @endif>
                                            Inactive
                                        </option>
                                    </select>
                                    @error('status')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        {{-- Submit Button --}}
                        <div class="col-md-12 d-flex align-items-center justify-content-end py-3">
                            <button class='btn px-4 btn-info' type='submit'>
                                @isset($data)
                                    Update
                                @else
                                    Submit
                                @endisset
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{-- Include jQuery and Select2 JS --}}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

    <script>
        $(document).ready(function() {
            // Pass PHP values to JavaScript
            const oldCountry = @json($oldCountry);
            const oldState = @json($oldState);
            const oldCity = @json($oldCity);

            // Check if Select2 is loaded
            if (typeof $.fn.select2 === 'undefined') {
                console.error('Select2 is not loaded. Falling back to regular dropdowns.');
                initializeRegularDropdowns();
                return;
            }

            // Initialize Select2 for all dropdowns with search functionality
            try {
                $('#country').select2({
                    placeholder: '-- Select Country --',
                    allowClear: true,
                    width: '100%',
                    theme: 'default'
                });

                $('#state').select2({
                    placeholder: '-- Select State --',
                    allowClear: true,
                    width: '100%',
                    theme: 'default'
                });

                $('#city').select2({
                    placeholder: '-- Select City --',
                    allowClear: true,
                    width: '100%',
                    theme: 'default'
                });

                // If we have old values, load dependent dropdowns
                if (oldCountry && !oldState) {
                    // Load states for old country but no old state
                    loadStatesForCountry(oldCountry);
                } else if (oldState && !oldCity) {
                    // Load cities for old state but no old city
                    loadCitiesForState(oldState);
                }

                // Country change event for Select2
                $('#country').on('select2:select', function() {
                    handleCountryChange();
                });

                $('#country').on('select2:clear', function() {
                    clearStateAndCity();
                });

                // State change event for Select2
                $('#state').on('select2:select', function() {
                    handleStateChange();
                });

                $('#state').on('select2:clear', function() {
                    clearCity();
                });

            } catch (error) {
                console.error('Error initializing Select2:', error);
                initializeRegularDropdowns();
            }

            // Fallback function for regular dropdowns
            function initializeRegularDropdowns() {
                $('#country').on('change', function() {
                    handleCountryChange();
                });

                $('#state').on('change', function() {
                    handleStateChange();
                });

                // If we have old values, load dependent dropdowns
                if (oldCountry && !oldState) {
                    loadStatesForCountry(oldCountry);
                } else if (oldState && !oldCity) {
                    loadCitiesForState(oldState);
                }
            }

            // Load states for a specific country
            function loadStatesForCountry(countryID) {
                if (!countryID) return;

                updateStateDropdown([{id: '', name: 'Loading states...'}], '');

                $.ajax({
                    type: "GET",
                    url: "{{url('/')}}/get-states/" + countryID,
                    success: function(res) {
                        if (res && res.length > 0) {
                            updateStateDropdown(res, '-- Select State --');
                        } else {
                            updateStateDropdown([], 'No states available');
                        }
                    },
                    error: function() {
                        updateStateDropdown([], 'Error loading states');
                    }
                });
            }

            // Load cities for a specific state
            function loadCitiesForState(stateID) {
                if (!stateID) return;

                updateCityDropdown([{id: '', name: 'Loading cities...'}], '');

                $.ajax({
                    type: "GET",
                    url: "{{url('/')}}/get-cities/" + stateID,
                    success: function(res) {
                        if (res && res.length > 0) {
                            updateCityDropdown(res, '-- Select City --');
                        } else {
                            updateCityDropdown([], 'No cities available');
                        }
                    },
                    error: function() {
                        updateCityDropdown([], 'Error loading cities');
                    }
                });
            }

            // Country change handler
            function handleCountryChange() {
                var countryID = $('#country').val();
                clearStateAndCity();

                if (countryID) {
                    loadStatesForCountry(countryID);
                }
            }

            // State change handler
            function handleStateChange() {
                var stateID = $('#state').val();
                clearCity();

                if (stateID) {
                    loadCitiesForState(stateID);
                }
            }

            // Helper functions
            function clearStateAndCity() {
                updateStateDropdown([], '-- Select State --');
                updateCityDropdown([], '-- Select City --');
            }

            function clearCity() {
                updateCityDropdown([], '-- Select City --');
            }

            function updateStateDropdown(options, placeholder) {
                var $stateSelect = $("#state");

                if (typeof $.fn.select2 !== 'undefined' && $stateSelect.hasClass('select2-hidden-accessible')) {
                    $stateSelect.empty().append('<option value="">' + placeholder + '</option>');
                    $.each(options, function(key, value) {
                        $stateSelect.append('<option value="' + value.id + '">' + value.name + '</option>');
                    });
                    $stateSelect.val('').trigger('change.select2');
                } else {
                    $stateSelect.empty().append('<option value="">' + placeholder + '</option>');
                    $.each(options, function(key, value) {
                        $stateSelect.append('<option value="' + value.id + '">' + value.name + '</option>');
                    });
                    $stateSelect.val('');
                }
            }

            function updateCityDropdown(options, placeholder) {
                var $citySelect = $("#city");

                if (typeof $.fn.select2 !== 'undefined' && $citySelect.hasClass('select2-hidden-accessible')) {
                    $citySelect.empty().append('<option value="">' + placeholder + '</option>');
                    $.each(options, function(key, value) {
                        $citySelect.append('<option value="' + value.id + '">' + value.name + '</option>');
                    });
                    $citySelect.val('').trigger('change.select2');
                } else {
                    $citySelect.empty().append('<option value="">' + placeholder + '</option>');
                    $.each(options, function(key, value) {
                        $citySelect.append('<option value="' + value.id + '">' + value.name + '</option>');
                    });
                    $citySelect.val('');
                }
            }
        });

        // Password visibility toggle
        document.addEventListener('DOMContentLoaded', function() {
            const passwordToggle = document.getElementById('password-addon');
            const passwordField = document.getElementById('userpassword');

            if (passwordToggle && passwordField) {
                passwordToggle.addEventListener('click', function() {
                    const type = passwordField.getAttribute('type') === 'password' ? 'text' : 'password';
                    passwordField.setAttribute('type', type);

                    const icon = this.querySelector('i');
                    if (type === 'password') {
                        icon.classList.remove('mdi-eye-off-outline');
                        icon.classList.add('mdi-eye-outline');
                    } else {
                        icon.classList.remove('mdi-eye-outline');
                        icon.classList.add('mdi-eye-off-outline');
                    }
                });
            }
        });
    </script>

@endsection