@extends('layouts.master')

@section('title', 'Express54')

@section('content')

    <!-- Background image -->
    <div class="p-5 admin_bg" 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 py-4 px-md-6">
                            <a href="{{ url('supervisor/dashboard') }}" class="btn btn-md btn-danger rounded-pill px-3"><i
                                    class="fa-solid fa-arrow-left"></i>
                                @lang('messages.back')</a>

                            <div class="row d-flex justify-content-center p-3">
                                <div class="col-lg-12">
                                    <h3 class="mb-5 custom-heading">@lang('messages.addnewemployee')</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('addEmployee') }}" 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"
                                                        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"
                                                        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="supervisor">Supervisor</option> -->
                                                        <option value="employee">@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" selected>@lang('messages.all_services')</option>
                                                        @foreach ($services as $service)
                                                            <option value="{{ $service->id }}">{{ $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"
                                                        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" class="form-control"
                                                        placeholder="Password" id="password" required />
                                                    <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="row">
                                                <div class="col-md-6 mb-3">
                                                    <div class="form-outline mb-4">
                                                        <label class="form-label">@lang('messages.country')</label>
                                                        <input type="text" name="country"
                                                            value="{{ $user->countryDetail['title'] }}" class="form-control"
                                                            readonly />
                                                        <input type="hidden" name="countryId"
                                                            value="{{ $user->countryDetail['id'] }}" class="form-control"
                                                            readonly />
                                                    </div>
                                                </div>

                                                <div class="col-md-6 mb-3">
                                                    <div class="form-outline mb-4">
                                                        <label class="form-label">@lang('messages.embassies')</label>
                                                        <input type="text" name="embassy"
                                                            value="{{ $user->embassies['name'] }}" class="form-control"
                                                            readonly />
                                                        <input type="hidden" name="embassyId"
                                                            value="{{ $user->embassies['id'] }}" class="form-control"
                                                            readonly />

                                                        {{-- <select name="embassies" class="form-select"/>

                                                            <option value="" disabled selected>@lang('messages.selectembassy')
                                                            </option>
                                                        </select> --}}
                                                    </div>
                                                    {{-- <input type="hidden" name="selected_embassy" id="selected_embassy"> --}}

                                                    {{-- <script>
                                                        document.querySelector('select[name="country"]').addEventListener('change', function(event) {
                                                            const selectedCountry = event.target.value;
                                                            const embassySelect = document.querySelector('select[name="embassies"]');
                                                            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
                                                            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);
                                                                        });
                                                                    }
                                                                });
                                                        });
                                                        document.querySelector('select[name="embassies"]').addEventListener('change', function(event) {
                                                            const selectedEmbassy = event.target.value;
                                                            document.querySelector('#selected_embassy').value = selectedEmbassy;
                                                        });
                                                    </script> --}}
                                                </div>
                                            </div>
                                            <center><button type="submit" class="btn rounded-pill btn-lg px-3 savebutton">
                                                    <i class="fas fa-thin fa-angle-right"></i> @lang('messages.save')</button>
                                            </center>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection