@extends('layouts.master')
@section('title')
    @isset($data)
        @if($data->tenant_type == 'Restaurant')
            Add Branch
        @else
            Edit Outlet
        @endif
    @else
        Add Branch
    @endisset
@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);

        // Get all countries for the dropdown
        $countries = \App\Models\Country::all();

        // Get states and cities if editing
        $states = collect();
        $cities = collect();

        if ($oldCountry) {
            $states = \App\Models\State::where('country_id', $oldCountry)->get();
        }

        if ($oldState) {
            $cities = \App\Models\City::where('state_id', $oldState)->get();
        }
    @endphp

    <!-- Add Select2 CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />

    <div class="row">
        <div class="col-12">
            <form action="{{ route('branch.store') }}" method="POST">
                @csrf
                @isset($data)
                    <input type="hidden" name="tenant_id" value="{{ $data->id }}">
                    <input type="hidden" name="tenant_type" value="{{ $data->tenant_type }}">
                @endisset

                <div class="card">
                    <div class="card-body row">
                        <h4 class="card-title py-3">
                            @isset($data)
                                @if($data->tenant_type == 'Restaurant')
                                    ADD Branch
                                @else
                                    ADD Outlet
                                @endif
                            @else
                                Add Branch
                            @endisset
                        </h4>

                        @isset($data)
                            @if($data->tenant_type == 'Food Court')
                                <!-- Food Court Outlet Form -->
                                {{-- Food Court ID --}}
                                <div class="col-md-6">
                                    <div class="mb-3 row">
                                        <label class="col-md-4 col-form-label">Food Court ID</label>
                                        <div class="col-md-8">
                                            <input type="text" name="food_court_id"
                                                   value="{{ $data->food_court_id ?? old('food_court_id') }}"
                                                   class="form-control @error('food_court_id') is-invalid @enderror">
                                            @error('food_court_id')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

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

                                {{-- Shop Count --}}
                                <div class="col-md-6">
                                    <div class="mb-3 row">
                                        <label class="col-md-4 col-form-label">Shop Count (Optional)</label>
                                        <div class="col-md-8">
                                            <input type="number" name="shop_count"
                                                   value="{{ $data->shop_count ?? old('shop_count') }}"
                                                   class="form-control @error('shop_count') is-invalid @enderror"
                                                   min="0">
                                            @error('shop_count')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                {{-- Outlet Contact Name --}}
                                <div class="col-md-6">
                                    <div class="mb-3 row">
                                        <label class="col-md-4 col-form-label">Outlet Contact Name</label>
                                        <div class="col-md-8">
                                            <input type="text" name="outlet_contact_name"
                                                   value="{{ $data->outlet_contact_name ?? old('outlet_contact_name') }}"
                                                   class="form-control @error('outlet_contact_name') is-invalid @enderror"
                                                   pattern="[A-Za-z\s]{3,}"
                                                   title="Alphabets only, minimum 3 characters">
                                            @error('outlet_contact_name')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                {{-- Outlet Contact Phone --}}
                                <div class="col-md-6">
                                    <div class="mb-3 row">
                                        <label class="col-md-4 col-form-label">Outlet Contact Phone</label>
                                        <div class="col-md-8">
                                            <input type="tel" name="outlet_contact_phone"
                                                   value="{{ $data->outlet_contact_phone ?? old('outlet_contact_phone') }}"
                                                   class="form-control @error('outlet_contact_phone') is-invalid @enderror"
                                                   pattern="[0-9]{10}"
                                                   title="10 digits only"
                                                   maxlength="10">
                                            @error('outlet_contact_phone')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

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

                            @else
                                <!-- Regular Branch Form -->
                                {{-- Branch Name --}}
                                <div class="col-md-6">
                                    <div class="mb-3 row">
                                        <label class="col-md-4 col-form-label">Branch Name</label>
                                        <div class="col-md-8">
                                            <input type="text" name="branch_name"
                                                value="{{ $data->branch_name ?? old('branch_name') }}"
                                                class="form-control @error('branch_name') is-invalid @enderror">
                                            @error('branch_name')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

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

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

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

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

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

                                {{-- Country Dropdown --}}
                                <div class="col-md-6">
                                    <div class="mb-3 row">
                                        <label class="col-md-4 col-form-label">Country</label>
                                        <div class="col-md-8">
                                            <select name="region" id="country"
                                                class="form-select @error('country') is-invalid @enderror">
                                                <option value="">-- Select Country --</option>
                                                @foreach ($countries as $country)
                                                    <option value="{{ $country->id }}"
                                                        {{ $oldCountry == $country->id ? 'selected' : '' }}>
                                                        {{ $country->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('region')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                {{-- State Dropdown --}}
                                <div class="col-md-6">
                                    <div class="mb-3 row">
                                        <label 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>
                                                @foreach ($states as $state)
                                                    <option value="{{ $state->id }}"
                                                        {{ $oldState == $state->id ? 'selected' : '' }}>
                                                        {{ $state->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('state')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                {{-- City Dropdown --}}
                                <div class="col-md-6">
                                    <div class="mb-3 row">
                                        <label 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>
                                                @foreach ($cities as $city)
                                                    <option value="{{ $city->id }}"
                                                        {{ $oldCity == $city->id ? 'selected' : '' }}>
                                                        {{ $city->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('city')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                {{-- Reservation Toggle --}}
                                <div class="col-md-6">
                                    <div class="form-check form-switch mb-3">
                                        <input class="form-check-input" type="checkbox" id="reservation" name="reservation"
                                            {{ old('reservation', $data->reservation ?? false) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="reservation">Reservation</label>
                                    </div>
                                </div>

                                {{-- Advanced Seating Toggle --}}
                                <div class="col-md-6">
                                    <div class="form-check form-switch mb-3">
                                        <input class="form-check-input" type="checkbox" id="advanced_seating"
                                            name="advanced_seating"
                                            {{ old('advanced_seating', $data->advanced_seating ?? false) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="advanced_seating">Advanced Seating</label>
                                    </div>
                                </div>
                            @endif
                        @else
                            <!-- Default form for new branch (when no $data exists) -->
                            {{-- Regular branch form fields here (same as above) --}}
                            {{-- ... your existing branch form fields ... --}}
                        @endisset

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

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

    <!-- Scripts -->
    <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() {
            // Only initialize location dropdowns if we're in the regular branch form
            @if(!isset($data) || (isset($data) && $data->tenant_type != 'Restaurant'))
                // Your existing location dropdown JavaScript code here
                const oldCountry = @json($oldCountry);
                const oldState = @json($oldState);
                const oldCity = @json($oldCity);

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

                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'
                    });

                    $('#country').on('select2:select', function() {
                        handleCountryChange();
                    });

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

                    $('#state').on('select2:select', function() {
                        handleStateChange();
                    });

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

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

                function initializeRegularDropdowns() {
                    $('#country').on('change', function() {
                        handleCountryChange();
                    });

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

                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');
                        }
                    });
                }

                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');
                        }
                    });
                }

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

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

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

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

                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('');
                    }
                }
            @endif

            // Client-side validation for Food Court form
            @if(isset($data) && $data->tenant_type == 'Restaurant')
                // Food Court Name validation
                $('input[name="food_court_name"]').on('blur', function() {
                    const value = $(this).val().trim();
                    if (value.length < 3) {
                        $(this).addClass('is-invalid');
                    } else {
                        $(this).removeClass('is-invalid');
                    }
                });

                // Shop Count validation
                $('input[name="shop_count"]').on('blur', function() {
                    const value = $(this).val();
                    if (value && !/^\d+$/.test(value)) {
                        $(this).addClass('is-invalid');
                    } else {
                        $(this).removeClass('is-invalid');
                    }
                });

                // Outlet Contact Name validation
                $('input[name="outlet_contact_name"]').on('blur', function() {
                    const value = $(this).val().trim();
                    if (value.length < 3 || !/^[A-Za-z\s]+$/.test(value)) {
                        $(this).addClass('is-invalid');
                    } else {
                        $(this).removeClass('is-invalid');
                    }
                });

                // Outlet Contact Phone validation
                $('input[name="outlet_contact_phone"]').on('blur', function() {
                    const value = $(this).val().trim();
                    if (!/^\d{10}$/.test(value)) {
                        $(this).addClass('is-invalid');
                    } else {
                        $(this).removeClass('is-invalid');
                    }
                });

                // Outlet Contact Email validation
                $('input[name="outlet_contact_email"]').on('blur', function() {
                    const value = $(this).val().trim();
                    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                    if (!emailRegex.test(value)) {
                        $(this).addClass('is-invalid');
                    } else {
                        $(this).removeClass('is-invalid');
                    }
                });
            @endif
        });
    </script>
@endsection