@extends('layouts.base')

@section('title', 'Gestion des Emails - E-Validation')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-1 fw-bold text-dark">Gestion des Emails</h1>
                    <p class="text-muted mb-0">Configuration des destinataires pour la ventilation des PV</p>
                </div>
                <div>
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#emailModal"
                        id="openCreateBtn">
                        Nouveau destinataire
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Filtres -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="searchInput" class="form-label fw-medium text-muted small">Rechercher</label>
                            <input type="text" id="searchInput" class="form-control" placeholder="Libellé ou email...">
                        </div>
                        <div class="col-md-6">
                            <label for="statusFilter" class="form-label fw-medium text-muted small">Statut</label>
                            <select id="statusFilter" class="form-select">
                                <option value="">Tous</option>
                                <option value="active">Actifs</option>
                                <option value="inactive">Inactifs</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tableau -->
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0 pb-0">
                    <div class="card-title mb-0 fw-semibold text-dark" id="listTitle">
                        Liste des destinataires
                    </div>
                </div>

                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0" id="recipientsTable">
                            <thead class="table-light">
                                <tr>
                                    <th class="border-0 fw-semibold text-muted small">Libellé</th>
                                    <th class="border-0 fw-semibold text-muted small d-none d-md-table-cell">Email</th>
                                    <th class="border-0 fw-semibold text-muted small text-center">Statut</th>
                                    <th class="border-0 fw-semibold text-muted small text-center">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- rempli par JS -->
                            </tbody>
                        </table>
                    </div>


                    <!-- Empty state -->
                    <div class="text-center py-5 d-none" id="emptyState">
                        <i class="ph-light ph-envelope-simple text-muted" style="font-size: 3rem;"></i>
                        <h5 class="text-muted mt-3">Aucun destinataire trouvé</h5>
                        <p class="text-muted">Crée ton premier destinataire email.</p>
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                            data-bs-target="#emailModal" id="emptyCreateBtn">
                            Créer un destinataire
                        </button>
                    </div>

                    <div class="card-footer bg-white border-0 pt-3">
                        <div aria-label="Pagination des destinataires">
                            <ul class="pagination pagination-sm justify-content-center mb-0" id="paginationContainer">
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal création/édition -->
<div class="modal fade" id="emailModal" tabindex="-1" aria-labelledby="emailModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="emailModalLabel">Nouveau destinataire</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
            </div>
            <form id="emailForm" novalidate>
                <input type="hidden" id="modal_id">
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="modal_label" class="form-label fw-medium text-muted small">Libellé <span
                                    class="text-danger">*</span></label>
                            <input type="text" id="modal_label" name="label" class="form-control"
                                placeholder="Ex: Support, Direction..." required>
                            <div class="invalid-feedback" id="label_error"></div>
                        </div>
                        <div class="col-md-6">
                            <label for="modal_email" class="form-label fw-medium text-muted small">Adresse email <span
                                    class="text-danger">*</span></label>
                            <input type="email" id="modal_email" name="email" class="form-control"
                                placeholder="exemple@domaine.com" required>
                            <div class="invalid-feedback" id="email_error"></div>
                        </div>
                        <div class="col-12">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="modal_is_active" name="is_active"
                                    value="1" checked>
                                <label class="form-check-label fw-medium text-muted small" for="modal_is_active">Activer
                                    ce destinataire</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" data-bs-dismiss="modal" type="button">Annuler</button>
                    <button class="btn btn-primary" id="submitBtn" type="submit">
                        <span id="submitText">Créer le destinataire</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal suppression -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">Confirmer la suppression</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
            </div>
            <div class="modal-body">
                <p>Supprimer le destinataire <strong id="deleteLabel"></strong> ?</p>
                <p class="text-muted small mb-0">Cette action est irréversible.</p>
                <input type="hidden" id="deleteId">
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-bs-dismiss="modal" type="button">Annuler</button>
                <button class="btn btn-danger" id="confirmDeleteBtn" type="button">Supprimer</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<meta name="csrf-token" content="{{ csrf_token() }}">
<style>
    /* Pagination personnalisée avec design vert foncé */
    .pagination .page-link {
        color: #198754;
        background-color: #fff;
        border: 1px solid #dee2e6;
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
        font-weight: 500;
        transition: all 0.15s ease-in-out;
    }

    .pagination .page-link:hover {
        color: #fff;
        background-color: #198754;
        border-color: #198754;
    }

    .pagination .page-item.active .page-link {
        color: #fff;
        background-color: #198754;
        border-color: #198754;
        font-weight: 600;
    }

    .pagination .page-item.disabled .page-link {
        color: #6c757d;
        background-color: #fff;
        border-color: #dee2e6;
        cursor: not-allowed;
    }

    .pagination .page-item.disabled .page-link:hover {
        color: #6c757d;
        background-color: #fff;
        border-color: #dee2e6;
    }

    .pagination .page-link:focus {
        box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
        outline: none;
    }
</style>
<script src="{{ asset('assets/js/evalidation/email-recipients.js') }}" defer></script>
@endsection