@extends('layouts.master')

@section('content')
    <div class="container-fluid p-5 bgImage" style="min-height: calc(100vh - 110px);">
        <section class="gradient-custom">
            <div class="container-fluid h-100">
                <div class="row d-flex justify-content-center align-items-center h-100">
                    <div class="col-12 col-md-8 col-lg-6 col-xl-6">
                        <div class="card bg-white text-black" style="border-radius: 1rem;">
                            <div class="card-body p-5">
                                <h2 class="fw-bold mb-5 custom-heading">@lang('messages.myprofile')</h2>
                                <div id="alert-container">

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

                                    @if (Session('success'))
                                        <div class="alert alert-success" role="alert">
                                            {{ Session('success') }}
                                        </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('entite_ivoirienne.updateProfile', ['id' => $user->id]) }}" method="POST">
                                    @csrf

                                    <div class="row mb-3">
                                        <label for="fname" class="col-sm-3 col-form-label logincol">@lang('messages.name')
                                            :</label>
                                        <div class="col-sm-6">
                                            <input type="text" name="fname" value="{{ $user->fname }}"
                                                class="form-control" />
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <label for="lname" class="col-sm-3 col-form-label logincol">@lang('messages.last_name')
                                            :</label>
                                        <div class="col-sm-6">
                                            <input type="text" name="lname" value="{{ $user->lname }}"
                                                class="form-control" />
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label for="lname" class="col-sm-3 col-form-label logincol">@lang('messages.email')
                                            :</label>
                                        <div class="col-sm-6">
                                            <input type="text" name="email" value="{{ $user->email }}"
                                                class="form-control" />
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <label for="country"
                                            class="col-sm-3 col-form-label logincol">@lang('messages.country'):</label>
                                        <div class="col-sm-6">
                                            <select name="country" id="countrySelect" class="form-control">
                                                <option value="">Select Country</option>
                                                @foreach ($countries as $country)
                                                    <option value="{{ $country->id }}"
                                                        @if ($user->country == $country->id) selected @endif>
                                                        {{ $country->title }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <label for="embassy"
                                            class="col-sm-3 col-form-label logincol">@lang('messages.embassy'):</label>
                                        <div class="col-sm-6">
                                            <select name="embassy" id="embassySelect" class="form-control">
                                                <option value="">Select Embassy</option>
                                                @foreach ($embassies as $embassy)
                                                    <option value="{{ $embassy->id }}"
                                                        @if ($user->embassies == $embassy->id) selected @endif>
                                                        {{ $embassy->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <script>
                                        document.querySelector('select[name="country"]').addEventListener('change', function(event) {
                                            const selectedCountry = event.target.value;
                                            const embassySelect = document.querySelector('select[name="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 fetching embassies");
                                            }
                                        });
                                    </script>

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

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection