{{-- @extends('layouts.mastersupervisor') --}}
@extends('layouts.master')

@section('title', 'Express54')

@section('content')

    <!-- Background image -->
    <div class="p-5 bgImage" style="min-height: calc(100vh - 110px);">
        {{-- <div class="p-5 supervisor {{ Auth::check() && Auth::user()->country == 17 ? 'africa' : 'logobanner' }}"
        style="min-height: calc(100vh - 110px);"> --}}
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-8 col-sm-12">
                    <div class="card shadow-sm p-3 mb-5 bg-white rounded" style="backdrop-filter: blur(30px);">
                        <div class="card-body">
                            <div class="row d-flex justify-content-center">
                                <div class="col-lg-12">
                                    <h3 class="mb-5 custom-heading">@lang('messages.editemployee')</h3>

                                    @if (Session('success'))
                                        <div class="alert alert-success" role="alert">
                                            {{ Session('success') }}
                                        </div>
                                    @endif
                                    @if (Session('error'))
                                        <div class="alert alert-danger" role="alert">
                                            {{ Session('error') }}
                                        </div>
                                    @endif


                                    <form action="{{ route('updateEmployee', ['id' => $user->id]) }}" method="POST">
                                        @csrf

                                        <div class="row">
                                            <div class="col-md-6 mb-4">
                                                <div class="form-outline">
                                                    <label class="form-label">@lang('messages.name')</label>
                                                    <input type="text" class="form-control" name="fname"
                                                        value="{{ $user->fname }}" placeholder="First Name" required />
                                                </div>
                                            </div>

                                            <div class="col-md-6 mb-3">
                                                <div class="form-outline">
                                                    <label class="form-label">@lang('messages.last_name')</label>
                                                    <input type="text" class="form-control" name="lname"
                                                        value="{{ $user->lname }}" placeholder="Last Name" required />
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <div class="form-outline">
                                                    <label class="form-label">@lang('messages.role')</label>
                                                    <select class="form-select" name="role">
                                                        <option value="employee"
                                                            {{ $user->role === 'employee' ? 'selected' : '' }}>
                                                            @lang('messages.employee')</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <div class="form-outline">
                                                    <label class="form-label">@lang('messages.service')</label>

                                                    {{-- <select class="form-select" name="emp_service[]" multiple
                                                        id="emp-service">
                                                        <option value="AllService"
                                                            {{ in_array('AllService', $selectedServices) ? 'selected' : '' }}>
                                                            @lang('messages.all_services') </option>
                                                            
                                                        @foreach ($services as $service)
                                                            <option value="{{ $service->id }}"
                                                                {{ in_array($service->id, $selectedServices) ? 'selected' : '' }}>
                                                                {{ $service->name }}
                                                        @endforeach
                                                    </select> --}}

                                                    <select class="form-select" name="emp_service[]" multiple
                                                        id="emp-service">
                                                        <option value="AllService"
                                                            {{ is_array($selectedServices) && in_array('AllService', $selectedServices) ? 'selected' : '' }}>
                                                            @lang('messages.all_services')
                                                        </option>
                                                        @foreach ($services as $service)
                                                            <option value="{{ $service->id }}"
                                                                {{ is_array($selectedServices) && in_array($service->id, $selectedServices) ? 'selected' : '' }}>
                                                                {{ $service->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>

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

                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <div class="form-outline">
                                                    <label class="form-label">@lang('messages.email')</label>
                                                    <input type="email" class="form-control" name="email"
                                                        value="{{ $user->email }}" placeholder="Email" required />
                                                </div>
                                            </div>



                                            {{-- <div class="col-md-6 mb-3">
                                                <div class="form-outline mb-4">
                                                    <label class="form-label">@lang('messages.password')</label>
                                                    <input type="password" name="password" id="password"
                                                        class="form-control" value="" placeholder="********" />
                                                    <small class="text-danger" id="passwordValidationMessage"
                                                        style="display: none;">Password must be at least 8 characters
                                                        and contain at least one special character.</small>
                                                </div>
                                            </div>
                                            <script>
                                                $(document).ready(function() {
                                                    // Password validation
                                                    function validatePassword(password, messageId) {
                                                        const validationMessage = $(messageId);

                                                        if (password.length >= 8 && /[!@#$%^&*()_+{}\[\]:;<>,.?~\\-]/.test(password)) {
                                                            validationMessage.hide();
                                                        } else {
                                                            validationMessage.show();
                                                        }
                                                    }

                                                    //    characters and  length 
                                                    $("#password").on("keyup", function() {
                                                        const password = $(this).val();
                                                        validatePassword(password, "#passwordValidationMessage");
                                                    });
                                                });
                                            </script> --}}

                                            <div class="col-md-6 mb-3">
                                                <div class="form-outline mb-4">
                                                    <label class="form-label">@lang('messages.country')</label>
                                                    <select name="country" class="form-select" disabled>
                                                        <option value=""
                                                            {{ is_null($user->country) ? 'selected' : '' }}>
                                                            @lang('messages.selectcountry')</option>
                                                        @foreach ($countries as $country)
                                                            <option value="{{ $country->id }}"
                                                                {{ $user->country == $country->id ? 'selected' : '' }}>
                                                                {{ $country->title }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>


                                                <input type="hidden" name="selected_country" id="selected_country">
                                                <script>
                                                    document.querySelector('select[name="country"]').addEventListener('change', function(event) {
                                                        document.querySelector('#selected_country').value = event.target.value;
                                                    });
                                                </script>

                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <div class="form-outline mb-4">
                                                    <label class="form-label">@lang('messages.embassy')</label>
                                                    <select name="embassy" class="form-select" id="embassySelect" disabled>
                                                        <option value="{{ $user->embassies }}"
                                                            {{ is_null($user->embassies) ? 'selected' : '' }}>
                                                            @lang('messages.selectembassy')
                                                        </option>
                                                        @foreach ($embassies as $embassy)
                                                            <option value="{{ $embassy->id }}"
                                                                {{ $user->embassies == $embassy->id ? 'selected' : '' }}>
                                                                {{ $embassy->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <input type="hidden" name="selected_embassy" id="selected_embassy">
                                            </div>
                                        </div>


                                        <script>
                                            const countrySelect = document.querySelector('select[name="country"]');
                                            const embassySelect = document.querySelector('#embassySelect');

                                            // Disable the embassy select initially
                                            embassySelect.disabled = true;

                                            countrySelect.addEventListener('change', function(event) {
                                                const selectedValue = event.target.value;

                                                // Enable the embassy select if a country is selected, otherwise, disable it
                                                embassySelect.disabled = selectedValue === '';

                                                // Update the hidden field with the selected country value
                                                document.querySelector('#selected_country').value = selectedValue;
                                            });
                                        </script>

                                        <script>
                                            document.querySelector('select[name="country"]').addEventListener('change', function(event) {
                                                const selectedCountry = event.target.value;
                                                const embassySelect = document.querySelector('select[name="embassy"]');
                                                const selectedEmbassyField = document.querySelector('#selected_embassy');

                                                // Clear existing embassy options
                                                embassySelect.innerHTML = '<option value="" disabled selected>Select an embassy</option>';
                                                // Fetch and populate embassy options based on selected country
                                                try {
                                                    fetch(`/get-supembassies/${selectedCountry}`)
                                                        .then(response =>
                                                            response.json()
                                                        )
                                                        .then(data => {
                                                            if (data.length === 0) {
                                                                const option = document.createElement('option');
                                                                option.textContent = 'No embassy';
                                                                embassySelect.appendChild(option);
                                                            } else {
                                                                data.forEach(embassy => {
                                                                    const option = document.createElement('option');
                                                                    option.value = embassy.id;
                                                                    option.textContent = embassy.name;
                                                                    embassySelect.appendChild(option);
                                                                });
                                                            }
                                                        });
                                                } catch (e) {
                                                    console.log("Error");
                                                }
                                            });
                                            document.querySelector('select[name="embassy"]').addEventListener('change', function(event) {
                                                const selectedEmbassy = event.target.value;
                                                document.querySelector('#selected_embassy').value = selectedEmbassy;
                                            });
                                        </script>

                                        <center><button type="submit" class="btn rounded-pill btn-lg px-3 savebutton"> <i
                                                    class="fas fa-thin fa-angle-right"></i> @lang('messages.update')</button>
                                        </center>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection