@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.add_new_supervisor')</h2>

                                @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('addsupervisor') }}" 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="@lang('messages.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="@lang('messages.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">@lang('messages.employee')</option>
                                                    <option value="supervisor">@lang('messages.supervisor')</option>
                                                    <option value="minister">Ministère</option>
                                                    <option value="minister_supervisor">Ministère Superviseur</option>
                                                    <option value="payor">Payeur</option>
                                                    <option value="entite_ivoirienne">Entité Ivoirienne</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row d-none" id="supervisortitle">
                                        <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">Ambassadeur</option>
                                                    <option value="Premier Conseiller">Premier Conseiller</option>
                                                    <option value="Consul Général">Consul Général</option>
                                                    <option value="Conseiller">Conseiller</option>
                                                    <option value="Consul">Consul</option>
                                                    <option value="Vice-Consul">Vice-Consul</option>
                                                    <option value="Ministre-Conseiller">Ministre-Conseiller</option>

                                                </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>
                                    </div>



                                    <div class="row">
                                        <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" required>
                                                    <option value="" disabled selected>@lang('messages.selectcountry')</option>
                                                    @foreach ($countries as $country)
                                                        <option value="{{ $country->id }}">{{ $country->title }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <input type="hidden" name="selected_country" id="selected_country">
                                            <script></script>

                                        </div>


                                        <div class="col-md-6 mb-3">
                                            <div class="form-outline mb-4">
                                                <label class="form-label">@lang('messages.embassies')</label>
                                                <select name="embassies" class="form-select" required>
                                                    <option value="" disabled selected>@lang('messages.selectembassy')</option>
                                                </select>
                                            </div>
                                            <input type="hidden" name="selected_embassy" id="selected_embassy">

                                        </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>

    <!-- admin script  -->
    <script src="{{ asset('/assets/js/admin.js') }}"></script>


@endsection