@extends('layouts.app')
@section('title')
{{ __('messages.Locations') }}

@endsection
@section('style')
<style>


</style>
@endsection
@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    @include('inc.breadcrumb' , ['breadcrumb_items'=>[
         __("messages.Home")=>route('home'),
         __("messages.Locations")=>route('admin.locations.index'),
         __("messages.Create")=>"active"
    ]])



    <div class="row justify-content-center">
        <!-- Form controls -->
        <div class="col-md-12">
            <!-- Multi Column with Form Separator -->
            <div class="card mb-4">
              <form class="card-body form_submit" id="form_submit" action="{{ route('admin.locations.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <h6>1. {{ __('messages.Basic information') }}</h6>

                <div class="row">
                    <div class="col-md-6 mb-4">
                        <label class="mb-1">{{ __('messages.Clients') }} </label>
                        <select name="user_id" id="user_id" class="form-control  @error('user_id') is-invalid @enderror select2 user_id">
                            <option value="">--------</option>
                            @foreach ($clients as $client)
                                <option value="{{ $client->id }}" @selected(old('user_id') == $client->id)>
                                    {{ $client->name }}</option>
                            @endforeach
                        </select>
                        <div class="messages_errors_custom msg_input_user_id text-danger"></div>

                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="multicol-title">{{ __("messages.Title") }}</label>
                        <input type="text" id="multicol-title" class="form-control  @error('title') is-invalid @enderror" name="title"  value="{{ old('title')  }}"  />
                        @error('title')
                        <div class="invalid-feedback">{{ $message }}</div>
                       @enderror
                    </div>


                    <div class="col-md-6 mb-4">
                        <label class="mb-1">{{ __('messages.City') }} </label>
                        <select name="city_id" id="city_id" class="form-control select2  @error('city_id') is-invalid @enderror city_id">
                            <option value="">--------</option>
                            @foreach ($cities as $city)
                                <option value="{{ $city->id }}" @selected(old('city_id') == $city->id)>
                                    {{ $city->name }}</option>
                            @endforeach
                        </select>
                        <div class="messages_errors_custom msg_input_city_id text-danger"></div>

                    </div>
                    <div class="col-md-6 mb-4">
                        <label class="mb-1">{{ __('messages.Region') }} </label>
                        <select name="region_id" id="region_id" class="form-control select2 region_id   @error('region_id') is-invalid @enderror">
                            <option value="">--------</option>

                        </select>
                        <div class="messages_errors_custom msg_input_region_id text-danger"></div>

                    </div>

                    <div class="col-md-6">
                        <label class="form-label" for="multicol-description">{{ __("messages.Short description") }}</label>
                        <input type="text" id="multicol-description" class="form-control  @error('description') is-invalid @enderror" name="description"  value="{{ old('description')  }}"  />
                        @error('description')
                        <div class="invalid-feedback">{{ $message }}</div>
                       @enderror
                    </div>

                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-12 col-md-4 mt-2">
                                <label class="form-label" for="multicol-mobile">{{ __('messages.Country') }} (CODE)</label>
                                <select name="mobile_country_code" id="country" class="form-control  @error('last_name') is-invalid @enderror">
                                    @foreach ($countries_alpha as $key => $country)
                                        <option  @selected(old('mobile_country_code') ==  $country->phone_code  ||  (!old('mobile_country_code') && $country->phone_code =="971"))   value="{{ $country->phone_code }}"
                                            data-flag="{{ asset('assets/flags/min/' . strtolower($country->alpha_2)) }}.png">
                                            {{$country->alpha_3  }}  +{{ $country->phone_code }}
                                        </option>
                                    @endforeach
                                </select>
                                <div class="messages_errors_custom msg_input_mobile_country_code text-danger"></div>

                            </div>
                            <div class="col-md-8 col-12 mt-2">
                                <label class="form-label" for="multicol-mobile">{{ __('messages.Phone') }}</label>
                                <input type="tel" name="mobile" value="{{ old('mobile') }}" id="multicol-mobile"
                                    class="form-control  @error('mobile') is-invalid @enderror" />
                                @error('mobile')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                    </div>


                </div>




                <div class="pt-4">
                    <button type="submit" class="btn btn-primary me-sm-3 me-1 btn_with_load">{{ __('messages.Save')
                    }} <span class="spinner-border mx-3 d-none loader" role="status"
                        aria-hidden="true"></span></button> <button type="reset"
                    class="btn btn-label-secondary">{{ __('messages.Cancel') }}</button>
                </div>
              </form>
            </div>
        </div>
    </div>

 </div>
@endsection

@section('script')
@include('inc.script_submit')
<script>
    $(function(){

        @if(old('city_id'))
        get_region_by_city("{{ old('city_id') }}");
        @endif


        $(".city_id").change(function(){
            var city_id = $(this).val();
            get_region_by_city(city_id);
        })

        function get_region_by_city(city_id){
            $.ajax({
                url:"{{ route('admin.get_regions_by_city') }}?city_id="+city_id,
                success:function(res){
                    $(".region_id").html(res);
                }
            })
        }
    })
</script>

<script>
    $(document).ready(function() {
     $('#country').select2({
         templateResult: formatCountry,
         templateSelection: formatCountry,
         escapeMarkup: function(markup) {
             return markup; // يسمح بإدراج HTML في القائمة
         }
     });

     function formatCountry(country) {
         if (!country.id) {
             return country.text;
         }
         var flag = $(country.element).data('flag');
         var markup = `
             <div style="display: flex; align-items: center;">
                 <img  src="${flag}" alt="" style="width: 30px; height: 30px; margin-right: 5px;margin-left: 5px;">
                 <span>${country.text}</span>
             </div>
         `;
         return markup;
     }
 });

 </script>
@endsection