@extends('layouts.master')

@section('title', 'Liste des CV')

@section('content')

    <div class="container my-5">

        <div class="d-flex justify-content-between align-items-center mb-4">
            <h3>📝 Liste des CV</h3>
        </div>

        <div id="alert-container">
            @if (session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif
            @if (session('error'))
                <div class="alert alert-danger">{{ session('error') }}</div>
            @endif
        </div>

        <a href="{{ route('entreprise_ivoirienne.mainService') }}" class="btn rounded-pill btn-lg back text-white mb-4"
            id="service_back" style="background: {{ $colorCode }};" onmouseover="this.style.background='{{ $hovercolor }}';"
            onmouseout="this.style.background='{{ $colorCode }}';">
            <i class="fas fa-thin fa-angle-left"></i> @lang('messages.back')
        </a>

        <!-- Search/Filter Section -->
        <div class="card mb-4">
            <div class="card-body">
                <h6 class="card-title">🔍 Filtres de recherche</h6>
                <form method="GET" action="{{ route('entreprise_ivoirienne.listeCVs') }}">
                    <div class="row">
                        <div class="col-md-4">
                            <label for="diplome_filter" class="form-label">Diplôme</label>
                            <input type="text" class="form-control" id="diplome_filter" name="diplome_filter"
                                value="{{ request('diplome_filter') }}" placeholder="Ex: Master, Licence, BAC+5...">
                        </div>
                        <div class="col-md-4">
                            <label for="domaine_filter" class="form-label">Domaine</label>
                            <input type="text" class="form-control" id="domaine_filter" name="domaine_filter"
                                value="{{ request('domaine_filter') }}" placeholder="Ex: Informatique, Commerce...">
                        </div>
                        {{-- <div class="col-md-4">
                            <label for="country_filter" class="form-label">Pays de résidence</label>
                            <select class="form-control" id="country_filter" name="country_filter">
                                <option value="">-- Tous les pays --</option>
                                @foreach($countries as $country)
                                <option value="{{ $country->id }}" {{ request('country_filter')==$country->id ? 'selected' :
                                    '' }}>
                                    {{ $country->title }}
                                </option>
                                @endforeach
                            </select>
                        </div> --}}
                        <div class="col-md-4">
                            <label for="country_filter" class="form-label">Pays de résidence</label>
                            <select class="form-control" id="country_filter" name="country_filter">
                                <option value="">-- Tous les pays --</option>
                            </select>
                        </div>
                        <script>
                            document.addEventListener('DOMContentLoaded', function () {
                                const countrySelect = document.getElementById('country_filter');

                                // Si le select existe (évite les erreurs si l'id change)
                                if (countrySelect) {
                                    // Ajoute une option de chargement
                                    const loadingOption = document.createElement('option');
                                    loadingOption.textContent = 'Chargement des pays...';
                                    loadingOption.disabled = true;
                                    loadingOption.selected = true;
                                    countrySelect.appendChild(loadingOption);

                                    function getFlagEmoji(countryCode) {
                                        if (!countryCode) return '';
                                        const codePoints = countryCode
                                            .toUpperCase()
                                            .split('')
                                            .map(char => 127397 + char.charCodeAt());
                                        return String.fromCodePoint(...codePoints);
                                    }

                                    fetch('/pays')
                                        .then(response => {
                                            if (!response.ok) {
                                                throw new Error('Erreur réseau');
                                            }
                                            return response.json();
                                        })
                                        .then(countries => {
                                            countrySelect.innerHTML = '';

                                            // Ajout manuel de "Côte d'Ivoire" en premier
                                            // const coteOption = document.createElement('option');
                                            // coteOption.value = countries.find(c => c.title === "Côte d'Ivoire")?.id || '';
                                            // coteOption.textContent = `${getFlagEmoji('CI')} Côte d'Ivoire`;
                                            // countrySelect.appendChild(coteOption);

                                            // Option par défaut après
                                            const defaultOption = document.createElement('option');
                                            defaultOption.value = '';
                                            defaultOption.textContent = '-- Tous les pays --';
                                            countrySelect.appendChild(defaultOption);

                                            // Filtrer "Ivory Coast" et éviter de réajouter "Côte d'Ivoire"
                                            countries
                                                .filter(country => country.title !== 'Ivory Coast' && country.title !== "Côte d'Ivoire")
                                                .forEach(country => {
                                                    const option = document.createElement('option');
                                                    option.value = country.id;
                                                    option.textContent = `${getFlagEmoji(country.iso2)} ${country.title}`;
                                                    countrySelect.appendChild(option);
                                                });

                                            // Rétablir la sélection si filtre déjà appliqué
                                            const selected = "{{ request('country_filter') }}";
                                            if (selected) {
                                                countrySelect.value = selected;
                                            }
                                        })
                                        .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>
                    <div class="row mt-3">
                        <div class="col-12">
                            <button type="submit" class="btn btn-primary me-2">
                                <i class="fas fa-search"></i> Rechercher
                            </button>
                            <a href="{{ route('entreprise_ivoirienne.listeCVs') }}" class="btn btn-outline-secondary">
                                <i class="fas fa-redo"></i> Réinitialiser
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="card shadow-sm border-light">
            <div class="card-body">
                <table class="table table-striped table-hover" id="cvTable">
                    <thead class="table-light">
                        <tr>
                            <th>#</th>
                            <th>Prénom</th>
                            <th>Nom</th>
                            <th>Email</th>
                            <th>Diplôme</th>
                            <th>Domaine</th>
                            <th>Profession</th>
                            <th>Téléphone</th>
                            <th>Pays de résidence</th>
                            <th>CV</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($cvs as $key => $cv)
                            <tr>
                                <td>{{ $key + 1 }}</td>
                                <td>{{ $cv->prenom }}</td>
                                <td>{{ $cv->nom }}</td>
                                <td>{{ $cv->email }}</td>
                                <td>{{ $cv->diplome ?? 'Non renseigné' }}</td>
                                <td>{{ $cv->domaine ?? 'Non renseigné' }}</td>
                                <td>{{ $cv->profession ?? 'Non renseigné' }}</td>
                                <td>{{ $cv->telephone ?? 'Non renseigné' }}</td>
                                <td>{{ $cv->country?->title ?? 'Non renseigné' }}</td>
                                <td>
                                    @if($cv->documents && $cv->documents->count() > 0)
                                        @foreach($cv->documents as $doc)
                                            @if($doc->cv)
                                                <a href="{{ asset('storage/' . $doc->cv) }}" target="_blank"
                                                    class="btn btn-sm btn-outline-primary">
                                                    <i class="fas fa-file-pdf"></i> Voir CV
                                                </a>
                                                @break
                                            @endif
                                        @endforeach
                                    @else
                                        <span class="text-muted">Aucun CV</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="10" class="text-center text-muted">
                                    <i class="fas fa-inbox fa-3x mb-3"></i>
                                    <br>
                                    Aucun CV trouvé.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

    </div>

    <script>
        $(document).ready(function () {
            // Initialize DataTable
            if ($.fn.DataTable.isDataTable('#cvTable')) {
                $('#cvTable').DataTable().destroy();
            }
            $('#cvTable').DataTable({
                "language": {
                    "url": "//cdn.datatables.net/plug-ins/1.10.25/i18n/French.json"
                },
                "responsive": true,
                "pageLength": 25,
                "order": [[0, "asc"]]
            });

            // Auto-hide alerts after 5 seconds
            setTimeout(function () {
                $('#alert-container').fadeOut();
            }, 5000);
        });
    </script>

@endsection