@extends('admin.layouts.container')

@section('content')

<!-- Display the title -->
<!-- <h1>{{ $title }}</h1> -->

<div class="side-title">
    <h3>{{ $head ?? ''}}</h3>
</div>

<!-- Dropdown to select between Country, Region, and City -->
<div class="form-group col-lg-6">
<label for="section_select"> {{ __('categories.Select_Section') }}</label>
    <select id="section_select" class="form-control">
        <option value="country">الرئيسي</option>
        <option value="region">فرعي اول </option>
        <option value="city">فرعي ثاني</option>
    </select>
</div>

<!-- Country Section -->
<div id="country" name="country" class="border-item" style="border: 3px solid #007bff; border-radius: 8px; padding: 15px; margin-top: 20px; position: relative; width: 90%; display: none;">
 
    <form class="form-row add_form" method="post" action="{{ $action }}" enctype="multipart/form-data" id="form">
        @csrf

        <div class="row tab-wrapper w-100">
            @foreach(languages() as $language)
                <div class="form-group col-lg-6">
                    <label>{{ meta('title', $language->local) ?? __('categories.title') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                    <input type="text" class="form-control {{ $edit ? 'pe-none' : '' }} {{ $errors->has('title_'.$language->local) ? 'is-invalid' : '' }}" name="title_{{ $language->local }}" placeholder="{{ meta('title', $language->local) ?? __('categories.title') }}" value='{{ old("title_{$language->local}", $country[$language->local]->title ?? "") }}'/>
                </div>
            @endforeach
        </div>
        <div class="text-center mt-5 col-12">
            <button type="submit" class="butn add_button"><span>{{ __('dashboard.save') }}</span></button>
        </div>
    </form>
</div>

<!-- Region Section -->
<div id="region" name="region" class="border-item" style="border: 3px solid #007bff; border-radius: 8px; padding: 15px; margin-top: 20px; position: relative; width: 90%; display: none;">
  
    <form class="form-row add_form" method="post" action="{{ $action }}" enctype="multipart/form-data" id="form">
        @if($region ?? '' && $region->id)
            @method('PUT')
        @endif
        @csrf

        <div class="row tab-wrapper w-100">
            <div class="form-group col-lg-12">
                <label>{{ meta('country_id', $lang) ?? __('categories.1') }} </label>
                <select name="country_id" class="form-control {{ $edit ? 'pe-none' : '' }} {{ $errors->has('country_id') ? 'is-invalid' : '' }}" id="country_select">
                    <!-- <option value="">{{__('regions.country_id')}}</option> -->
                    @foreach($countries as $country)
                        <option {{old('country_id', $region->country_id ?? null) == $country->id ? 'selected' : '' }} value="{{ $country->id }}">
                            {{ $country->currentDescription->title ?? "" }}
                        </option>
                    @endforeach 
                </select>
            </div>

            @foreach(languages() as $language)
                <div class="form-group col-lg-6">
                    <label>{{ meta('title', $language->local) ?? __('categories.title') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                    <input type="text" class="form-control {{ $edit ? 'pe-none' : '' }} {{ $errors->has('title_'.$language->local) ? 'is-invalid' : '' }}" name="title_{{ $language->local }}" placeholder="{{ meta('title', $language->local) ?? __('categories.title') }}" value='{{ old("title_{$language->local}", $region[$language->local]->title ?? "") }}'/>
                </div>
            @endforeach
        </div>
        <div class="text-center mt-5 col-12">
            <button type="submit" class="butn add_button"><span>{{ __('dashboard.save') }}</span></button>
        </div>
    </form>
</div>

<!-- City Section -->
<div id="city" name="city" class="border-item" style="border: 3px solid #007bff; border-radius: 8px; padding: 15px; margin-top: 20px; position: relative; width: 90%; display: none;">
  
    <form class="form-row add_form" method="post" action="{{ $action }}" enctype="multipart/form-data" id="form">
        @if($city ?? '' && $city->id)
            @method('PUT')
        @endif
        @csrf
        <div class="row tab-wrapper w-100">
            <div class="form-group col-12">
            <label>{{ meta('country_id', $lang) ?? __('categories.1') }} </label>
            <select name="country_id" class="form-control country-select {{ $edit ? 'pe-none' : '' }} {{ $errors->has('country_id') ? 'is-invalid' : '' }}" id="country_select_city">
                    <!-- <option value="">{{__('cities.country_id')}}</option> -->
                    @foreach($countries as $country)
                        <option {{old('country_id', $city->country_id ?? null) == $country->id ? 'selected' : '' }} value="{{ $country->id }}">
                            {{ $country->currentDescription->title ?? "" }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="form-group col-12 ">
                <label>{{ meta('region_id', $lang) ?? __('categories.2') }} </label>
                <select name="region_id" class="form-control region-select {{ $edit ? 'pe-none' : '' }}
                 {{ $errors->has('region_id') ? 'is-invalid' : '' }}" id="region_select_city">
                    <option value="">{{__('categories.region_id')}}</option>
                    <!-- Regions will be populated dynamically -->
                </select>
            </div>
        </div>

        @foreach(languages() as $language)
            <div class="form-group col-lg-6">
                <label>{{ meta('title', $language->local) ?? __('categories.title') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                <input type="text" class="form-control {{ $edit ? 'pe-none' : '' }} {{ $errors->has('title_'.$language->local) ? 'is-invalid' : '' }}" name="title_{{ $language->local }}" placeholder="{{ meta('title', $language->local) ?? __('categories.title') }}"
                 value='{{ old("title_{$language->local}", $city[$language->local]->title ?? "") }}'/>
            </div>
        @endforeach

        <div class="text-center mt-5 col-12">
            <button type="submit" class="butn add_button"><span>{{ __('dashboard.save') }}</span></button>
        </div>
    </form>
</div>

@endsection

@section('inner_js')
    <script src="{{ asset('/assets/admin/js/lib/tinymce.min.js') }}"></script>
    <script>
        let route_prefix = "{{ url(config('lfm.prefix')) }}",
            url = "{{url('/')}}/",
            currentLanguage = "{{$lang}}",
            imagePath = "{{asset('')}}",
            inputName = null;
    </script>
    <script src="{{ asset('assets/admin/js/editor.js') }}"></script>

    <script>
        // JavaScript to toggle sections based on dropdown selection
        document.getElementById('section_select').addEventListener('change', function() {
            const selectedSection = this.value;

            // Hide all sections
            document.getElementById('country').style.display = 'none';
            document.getElementById('region').style.display = 'none';
            document.getElementById('city').style.display = 'none';

            // Show the selected section
            document.getElementById(selectedSection).style.display = 'block';
        });

        // Fetch regions dynamically when country is selected in the city form
        document.getElementById('country_select_city').addEventListener('change', function() {
            const countryId = this.value;
            const regionSelect = document.getElementById('region_select_city');

            // Fetch regions based on selected country
            fetch(`/get-regions/${countryId}`)
                .then(response => response.json())
                .then(data => {
                    regionSelect.innerHTML = '<option value="">Select Region</option>'; // Reset regions
                    data.forEach(region => {
                        regionSelect.innerHTML += `<option value="${region.id}">${region.title}</option>`;
                    });
                });
        });
    </script>
    @include('admin.partials._script')
@endsection