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

@section('content')

<style>
    .form-check-input {
        vertical-align: middle;
    }
    .form-check-label {
        margin-left: 0.5rem;
    }
    .text-left {
        text-align: left;
    }
</style>
    <div class="main-content custom_myprofile">
        <div class="p-5 bg_image" style="min-height: calc(100vh - 110px); background-color:white">
           

            <section class="gradient-custom">

                <div class="container-fluid h-100">
                    <a href="{{ route('minister.dashboard') }}" class="btn btn-lg btn-danger_ rounded-pill px-3" style="background: #ff7700;color:#fff">
                        <i class="fa-solid fa-arrow-left"></i>@lang('messages.back')
                    </a>

                    <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 text-center">
                                    <form action="{{route('student.dataSave')}}" method="POST">
                                        @csrf
                                        
                                        <div class="row mb-3">
                                            <label class="col-sm-3 col-form-label logincol" for="gender">Sexe</label>
                                            <div class="col-sm-9 d-flex align-items-center">
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="radio" name="genre" id="genre_male" value="Homme" required>
                                                    <label class="form-check-label" for="genre_male">Homme</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="radio" name="genre" id="genre_female" value="Femme" required>
                                                    <label class="form-check-label" for="genre_female">Femme</label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row mb-3">
                                            <label for="name" class="col-sm-3 col-form-label logincol">Nom</label>
                                            <div class="col-sm-6">
                                                <input type="text" name="name" class="form-control" required  />
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <label for="email" class="col-sm-3 col-form-label logincol">Email</label>
                                            <div class="col-sm-6">
                                                <input type="text" name="email" class="form-control" required  />
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <label for="field" class="col-sm-3 col-form-label logincol">Filière</label>
                                            <div class="col-sm-6">
                                                <input type="text" name="field" class="form-control" required  />
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <label for="year_of_study" class="col-sm-3 col-form-label logincol">Année d'étude</label>
                                            <div class="col-sm-6">
                                                <select name="year_of_study" id="year_of_study" class="form-control" required>
                                                    @for ($year = now()->year; $year >= now()->year - 10; $year--)
                                                        <option value="{{ $year }}-{{ $year + 1 }}">{{ $year }}-{{ $year + 1 }}</option>
                                                    @endfor
                                                </select>
                                            </div>
                                        </div>

                                        <div class="row mb-3">
                                            <label for="niveau_etude" class="col-sm-3 col-form-label logincol">Niveau d'études</label>
                                            <div class="col-sm-6">
                                                <select name="niveau_etude" id="niveau_etude" class="form-control" required>
                                                    <option value="">Sélectionnez un niveau d'études</option>
                                                    <option value="bac">Baccalauréat (Niveau 4)</option>
                                                    <option value="bac+2">Bac +2 (Niveau 5) : DEUG, BTS, DUT, DEUST</option>
                                                    <option value="licence">Licence (Bac +3, Niveau 6)</option>
                                                    <option value="master">Master (Bac +5, Niveau 7)</option>
                                                    <option value="doctorat">Doctorat (Bac +8, Niveau 8)</option>
                                                </select>
                                            </div>
                                        </div>


                                        <div class="row mb-3">
                                            <label for="institution" class="col-sm-3 col-form-label logincol">Université</label>
                                            <div class="col-sm-6">
                                                <input type="text" name="institution" class="form-control" required />
                                            </div>
                                        </div>

                                        <div class="row mb-3">
                                            <label for="institution" class="col-sm-3 col-form-label logincol">Montant de la bourse</label>
                                            <div class="col-sm-6">
                                                <input type="text" name="total_amount" class="form-control" required />
                                            </div>
                                        </div>

                                        <div class="row mb-3">
                                            <label for="institution" class="col-sm-3 col-form-label logincol">Montant Inscription scolaire</label>
                                            <div class="col-sm-6">
                                                <input type="text" name="inscription_scolaire" class="form-control"  />
                                            </div>
                                        </div>

                                        <div class="row mb-3">
                                            <label for="institution" class="col-sm-3 col-form-label logincol">Montant Assurance maladie</label>
                                            <div class="col-sm-6">
                                                <input type="text" name="assurance_maladie" class="form-control"  />
                                            </div>
                                        </div>

                                        <div class="row mb-3">
                                            <label for="institution" class="col-sm-3 col-form-label logincol">Montant Rapatriement bagage</label>
                                            <div class="col-sm-6">
                                                <input type="text" name="rapatriement_bagage" class="form-control"  />
                                            </div>
                                        </div>

                                        <!-- <div class="row mb-3">
                                            <label for="institution" class="col-sm-3 col-form-label logincol">Pays</label>
                                            <div class="col-sm-6">
                                            <select name="country_id" id="country_id" class="form-control" required>
                                                        <option value="">Sélectionnez un pays</option>
                                                        @foreach($countries as $country)
                                                        <option value="{{$country->id}}">{{$country->title}}</option>
                                                        @endforeach
                                                </select>
                                            </div>
                                        </div> -->
                                        <div class="row mb-3">
                                            <label for="country_id" class="col-sm-3 col-form-label logincol">Pays d'étude</label>
                                            <div class="col-sm-6">
                                                <select name="country_id" id="country_id" class="form-control" required>
                                                    <option value="">Sélectionnez un pays</option>
                                                </select>
                                            </div>
                                        </div>
                                        <script>
                                            document.addEventListener('DOMContentLoaded', function () {
                                                const countrySelect = document.getElementById('country_id');

                                                // Ajouter un indicateur de chargement
                                                const loadingOption = document.createElement('option');
                                                loadingOption.textContent = 'Chargement des pays...';
                                                loadingOption.disabled = true;
                                                loadingOption.selected = true;
                                                countrySelect.appendChild(loadingOption);

                                                // Fonction pour générer l'emoji du drapeau à partir du code ISO
                                                function getFlagEmoji(countryCode) {
                                                    const codePoints = countryCode
                                                        .toUpperCase()
                                                        .split('')
                                                        .map(char => 127397 + char.charCodeAt());
                                                    return String.fromCodePoint(...codePoints);
                                                }

                                                // Appeler l'API pour récupérer les pays
                                                fetch('/minister/countries')
                                                    .then(response => {
                                                        if (!response.ok) {
                                                            throw new Error('Erreur réseau');
                                                        }
                                                        return response.json();
                                                    })
                                                    .then(countries => {
                                                        countrySelect.innerHTML = ''; // Supprimer l'indicateur de chargement
                                                        const defaultOption = document.createElement('option');
                                                        defaultOption.value = '';
                                                        defaultOption.textContent = 'Sélectionnez un pays';
                                                        countrySelect.appendChild(defaultOption);

                                                        countries.forEach(country => {
                                                            const option = document.createElement('option');
                                                            option.value = country.name; // Utilisez le nom
                                                            option.textContent = `${getFlagEmoji(country.iso2)} ${country.name}`; // Emoji suivi du nom
                                                            countrySelect.appendChild(option);
                                                        });
                                                    })
                                                    .catch(error => {
                                                        console.error('Erreur lors de la récupération des pays:', error);
                                                        countrySelect.innerHTML = '<option value="">Erreur lors du chargement des pays</option>';
                                                    });
                                                });
                                        </script>

                                        <div class="row mb-3">
                                            <label for="institution" class="col-sm-3 col-form-label logincol">Type de bourse</label>
                                            <div class="col-sm-6">
                                            <select name="type_bourse" id="type_bourse" class="form-control" required>
                                                <option value="">Sélectionnez un type de bourse.</option>
                                                <option value="MESRS">MESRS</option>
                                                <option value="METFPA">METFPA</option>  
                                            </select>
                                            </div>
                                        </div>

                                        <div class="row mb-3">
                                            <label for="num_decision" class="col-sm-3 col-form-label logincol">Numéro décision</label>
                                            <div class="col-sm-6">
                                                <input type="number" name="num_decision" class="form-control" required />
                                            </div>
                                        </div>

                                        <div class="row mb-3">
                                            <label for="num_page" class="col-sm-3 col-form-label logincol">Numéro page</label>
                                            <div class="col-sm-6">
                                                <input type="number" name="num_page" class="form-control" required />
                                            </div>
                                        </div>

                                        <div class="row">
                                        <div class="col-md-12 text-center">
                                            <button type="submit" class="btn btn-outline-dark btn-md px-3 savebutton" style="background:#de7210;">Soumettre </button>
                                        </div>
                                    </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
@endsection