@extends('layouts.master')

@section('title', 'Express54')

@section('content')

    <!-- Background image -->
    <div class="p-5 bgImage" style="min-height: calc(100vh - 110px);">
        <div class="row justify-content-center">
            <div class="col-md-6 col-sm-8 col-xs-12">
                <div class="card mx-4 mx-md-5 shadow-5-strong" style="backdrop-filter: blur(30px);">
                    <div class="card-body py-5 px-md-6">
                        <div class="row d-flex justify-content-center">
                            <div class="col-lg-10">
                                <h2 class="fw-bold mb-5 custom-heading">@lang('messages.editsupervisor')</h2>

                                <div id="alert-container">
                                    @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
                                    <script>
                                        document.addEventListener("DOMContentLoaded", function() {
                                            var alertContainer = document.getElementById("alert-container");
                                            if (alertContainer) {
                                                setTimeout(function() {
                                                    alertContainer.remove();
                                                }, 5000);
                                            }
                                        });
                                    </script>
                                </div>

                                <form action="{{ route('updatesupervisor', ['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-12 mb-3">
                                            <div class="form-outline">
                                                <label class="form-label">@lang('messages.role')</label>
                                                <select class="form-select" name="role" id="roleSelect">

                                                    <option value="employee"
                                                        {{ $user->role === 'employee' ? 'selected' : '' }}>@lang('messages.employee')
                                                    </option>
                                                    <option
                                                        value="supervisor"{{ $user->role === 'supervisor' ? 'selected' : '' }}>
                                                        @lang('messages.supervisor')</option>
                                                    <option
                                                        value="minister"{{ $user->role === 'minister' ? 'selected' : '' }}>
                                                        Ministère</option>
                                                    <option
                                                        value="minister_supervisor"{{ $user->role === 'minister_supervisor' ? 'selected' : '' }}>
                                                        Ministère Superviseur</option>
                                                    <option
                                                        value="payor"{{ $user->role === 'payor' ? 'selected' : '' }}>
                                                        Payeur</option>

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

                                    <div class="row" id="supervisortitle"
                                        {{ $user->role === 'supervisor' ? '' : 'style=display:none;' }}>
                                        <div class="col-md-12 mb-3">
                                            <div class="form-outline">
                                                <label class="form-label">@lang('messages.title')</label>
                                                <select class="form-select" name="supervisor_title">
                                                    <option value="" selected disabled>Select Title</option>
                                                    <option value="Ambassadeur"
                                                        {{ $user->supervisor_title === 'Ambassadeur' ? 'selected' : '' }}>
                                                        Ambassadeur</option>
                                                    <option value="Premier Conseiller"
                                                        {{ $user->supervisor_title === 'Premier Conseiller' ? 'selected' : '' }}>
                                                        Premier Conseiller</option>
                                                    <option value="Consul Général"
                                                        {{ $user->supervisor_title === 'Consul Général' ? 'selected' : '' }}>
                                                        Consul Général</option>
                                                    <option value="Conseiller"
                                                        {{ $user->supervisor_title === 'Conseiller' ? 'selected' : '' }}>
                                                        Conseiller</option>
                                                    <option value="Consul"
                                                        {{ $user->supervisor_title === 'Consul' ? 'selected' : '' }}>Consul
                                                    </option>
                                                    <option value="Vice-Consul"
                                                        {{ $user->supervisor_title === 'Vice-Consul' ? 'selected' : '' }}>
                                                        Vice-Consul</option>
                                                        <option value="Ministre-Conseiller"
                                                        {{ $user->supervisor_title === 'Ministre-Conseiller' ? 'selected' : '' }}>
                                                        Ministre Conseiller</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <script>
                                        document.addEventListener('DOMContentLoaded', function() {
                                            var roleSelect = document.getElementById('roleSelect');
                                            var supervisortitle = document.getElementById('supervisortitle');

                                            roleSelect.addEventListener('change', function() {
                                                if (roleSelect.value === 'supervisor') {
                                                    supervisortitle.style.display = 'block';
                                                } else {
                                                    supervisortitle.style.display = 'none';
                                                    supervisortitle.querySelector('select').selectedIndex = 0;
                                                }
                                            });

                                            // If the role is supervisor, show the title field
                                            if (roleSelect.value === 'supervisor') {
                                                supervisortitle.style.display = 'block';
                                            }
                                        });
                                    </script>



                                    <div class="row">
                                        <div class="col-md-12 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>

                                    <div class="row">
                                        {{-- <div class="col-md-12 mb-3">
                                            <div class="form-outline mb-4">
                                                <label class="form-label">@lang('messages.password')</label>

                                                <input type="password" name="password" class="form-control" value=""
                                                    id="password" 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">
                                                    <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="embassy"]').addEventListener('change', function(event) {
                                        document.querySelector('#selected_embassy').value = event.target.value;
                                    });
                                    </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-embassies/${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-5 savebutton">
                                            @lang('messages.update')<i class="fas fa-thin fa-angle-right p-1"></i></button>
                                    </center>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection