@extends('layouts.main_admin')

@section('content')

    <!-- <div class="content-page"> -->
    <div class="page-body">
        <div class="container-fluid">
            <div class="page-title">
                <div class="row">
                    <div class="col-6">
                        <h3>@lang('site.employee')</h3>
                    </div>
                    <div class="col-6">
                        <ol class="breadcrumb">

                            <li class="breadcrumb-item">@lang('site.dashboard')</li>
                            <li class="breadcrumb-item active">
                                @lang('site.employee')
                                @endlang
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <!-- Container-fluid starts-->

        {{-- {{dd($cityUser->id)}} --}}
        <div class="container-fluid">
            <div class="row second-chart-list third-news-update">
                <div class="col-xl-12 col-lg-11 xl-50 morning-sec box-col-12">
                    <form action="{{ route('dashboard.employee.update', $cityUser->id) }}" method="post"
                        enctype="multipart/form-data">

                        {{ csrf_field() }}
                        {{ method_field('put') }}

                        <div class="bg-secondary-lighten card-header d-flex justify-content-between">
                            <h5>@lang('site.edit') </h5>
                            <div class="text-end  group-btn-top">
                                <div class="form-group d-flex form-group justify-content-between">
                                    <button type="button" class="btn btn-pill btn-outline-primary btn-air-primary"
                                        onclick="history.back();">
                                        <!--<i class="fa fa-backward"></i>-->
                                        @lang('site.back')
                                    </button>
                                    <button type="submit" class="btn btn-air-primary btn-pill btn-primary"><i
                                            class="fa fa-magic"></i>
                                        @lang('site.edit')</button>
                                </div>
                            </div>


                        </div>
                        <div class="card-body">
                            @include('partials._errors')

                            <div class="row">

                                <div class="col-md-6 form-group">
                                    <label class="form-label">@lang('site.users')</label>
                                    <select class="js-example-placeholder-multiple col-sm-12" name="user_id">
                                        <option value="0" disabled>@lang('site.select')</option>
                                        @foreach ($users as $user)
                                            <option value="{{ $user->id }}"
                                                @if ($cityUser->user_id == $user->id) selected @endif>
                                                {{ $user->firstname . $user->lastname ?? '' }}</option>
                                        @endforeach

                                    </select>
                                </div>
                                
                                <div class="col-md-6 form-group">
                                    <label class="form-label">@lang('site.country')</label>
                                    <select class="js-example-placeholder-multiple col-sm-12" name="country_id" id="country_id" required>
                                        <option value="0" disabled>@lang('site.select')</option>
                                        @foreach ($countries as $country)
                                            <option value="{{ $country->id }}" 
                                                @if ($country->id == $countryId) selected @endif>
                                                {{ $country->name_ar ?? '' }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-6 form-group">
                                    <label class="form-label">@lang('site.city')</label>
                                    <select class="js-example-placeholder-multiple col-sm-12" multiple="multiple"
                                        name="city_id[]" id="city_id" required>
                                        <option value="0" disabled>@lang('site.select')</option>
                                        @foreach ($cities as $city)
                                            <option value="{{ $city->id }}"
                                                @if (in_array($city->id, json_decode($cityUser->city_id, true))) selected @endif>
                                                {{ $city->name_ar ?? '' }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                {{-- old code without json --}}
                                {{-- <div class="col-md-6 form-group col-12 p-2">
                                    <label class="form-label">@lang('site.country')</label>
                                    <select class="form-control btn-square" multiple="multiple" name="country_id[]"
                                        id="country_id">
                                        @foreach ($countries as $country)
                                            <option value="{{ $country->id }}">
                                                {{ $country->name_ar ?? '' }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-6 form-group col-12 p-2">
                                    <label class="form-label">@lang('site.cities')</label><span class="text-danger">*</span>
                                    <select class="js-example-placeholder-multiple col-sm-12" multiple="multiple"
                                        name="city_id[]" required>
                                        <option value="0">@lang('site.select')</option>
                                        @foreach ($cities as $city)
                                            @php
                                                $selected =
                                                    $cityUser->cities && $cityUser->cities->contains('id', $city->id);
                                            @endphp
                                            <option value="{{ $city->id }}"
                                                @if ($selected) selected @endif>
                                                {{ $city->name_ar ?? '' }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div> --}}
                                {{-- end old code without json --}}

                            </div>

                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    </div>
    </form>
    </div>
    </div>
    </div>
    <!-- Individual column searching (text inputs) Ends-->
    </div>
    </div>
    <!-- Container-fluid Ends-->
    </div>

@endsection
@section('scripts')
    {{-- <script>
        $(document).ready(function() {

            var country_id = $('#country_id').val();
            $.get("{{ url('dashboard/countrycities') }}/" + country_id, function(data) {
                $('#city_id').empty();
                $('#city_id').append('<option></option>');
                $.each(data, function(key, value) {
                    $('#city_id').append('<option value="' + value.id + '">' + value.name_ar +
                        '</option>')

                });
                $('#city_id').val({{ json_decode($cityUser->city_id) }});

            });
        });

        function deletetr(r) {
            r.closest('tr').remove();
        }
        $('#country_id').on('change', function(e) {
            var country_id = e.target.value;

            $.get("{{ url('dashboard/countrycities') }}/" + country_id, function(data) {
                console.log(data);
                $('#city_id').empty();
                $('#city_id').append('<option>@lang('site.select')</option>');
                $.each(data, function(key, value) {
                    $('#city_id').append('<option value="' + value.id + '">' + value.name_ar +
                        '</option>')

                });
            })
        });
    </script> --}}
    <script>
        $(document).ready(function() {
            var country_id = $('#country_id').val();
            
            if (country_id) {
                fetchCities(country_id);
            }
            
            $('#country_id').on('change', function(e) {
                var country_id = e.target.value;
                fetchCities(country_id);
            });
    
            function fetchCities(country_id) {
                $.get("{{ url('dashboard/countrycities') }}/" + country_id, function(data) {
                    $('#city_id').empty();
                    $('#city_id').append('<option value="0" disabled>@lang('site.select')</option>');
                    $.each(data, function(key, value) {
                        $('#city_id').append('<option value="' + value.id + '">' + value.name_ar + '</option>');
                    });
    
                    // Pre-select the cities
                    var selectedCities = {!! json_encode(json_decode($cityUser->city_id, true)) !!};
                    $('#city_id').val(selectedCities).trigger('change');
                });
            }
    
            function deletetr(r) {
                r.closest('tr').remove();
            }
        });
    </script>
    
@endsection