@extends('dashboard.layouts.app')

@section('title', 'Gestion des Congés - UAC eservices')

@section('page-title', 'Gestion des Congés')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('rh.dashboard') }}">RH</a></li>
    <li class="breadcrumb-item active" aria-current="page">Congés</li>
@endsection

@push('scripts')
<script>
function modifierSolde(userId, userName, currentSolde) {
    document.getElementById('modalUserId').value = userId;
    document.getElementById('modalUserName').textContent = userName;
    document.getElementById('modalCurrentSolde').textContent = currentSolde;
    document.getElementById('modalNewSolde').value = currentSolde;

    const modal = new bootstrap.Modal(document.getElementById('soldeModal'));
    modal.show();
}

function sauvegarderSolde() {
    const userId = document.getElementById('modalUserId').value;
    const newSolde = document.getElementById('modalNewSolde').value;

    if (!newSolde || newSolde < 0 || newSolde > 365) {
        toastr.error('Veuillez saisir un solde valide (0-365 jours)');
        return;
    }

    $.ajax({
        url: '/rh/conges/solde/' + userId,
        method: 'PUT',
        data: {
            solde_conge: newSolde,
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            if (response.success) {
                toastr.success(response.message);
                const modal = bootstrap.Modal.getInstance(document.getElementById('soldeModal'));
                modal.hide();
                // Recharge la page pour afficher les nouvelles valeurs
                setTimeout(() => location.reload(), 1000);
            } else {
                toastr.error('Erreur lors de la mise à jour');
            }
        },
        error: function() {
            toastr.error('Erreur lors de la mise à jour du solde');
        }
    });
}

function voirLettreDemande(url) {
    window.open(url, '_blank');
}

function voirLettreRefus(url) {
    window.open(url, '_blank');
}

function refuserConge(congeId, userName) {
    document.getElementById('refusCongeId').value = congeId;
    document.getElementById('refusUserName').textContent = userName;

    const modal = new bootstrap.Modal(document.getElementById('refusModal'));
    modal.show();
}

function sauvegarderRefus() {
    const congeId = document.getElementById('refusCongeId').value;
    const motifRefus = document.getElementById('motifRefus').value;
    const lettreRefus = document.getElementById('lettreRefus').files[0];

    if (!motifRefus.trim()) {
        toastr.error('Veuillez saisir le motif du refus');
        return;
    }

    if (!lettreRefus) {
        toastr.error('Veuillez joindre la lettre justificative de refus');
        return;
    }

    const formData = new FormData();
    formData.append('motif_refus', motifRefus);
    formData.append('lettre_refus', lettreRefus);
    formData.append('_token', '{{ csrf_token() }}');

    $.ajax({
        url: '/rh/conges/' + congeId + '/reject',
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            if (response.success) {
                toastr.success(response.message);
                const modal = bootstrap.Modal.getInstance(document.getElementById('refusModal'));
                modal.hide();
                setTimeout(() => location.reload(), 1000);
            } else {
                toastr.error('Erreur lors du refus');
            }
        },
        error: function(xhr) {
            const response = xhr.responseJSON;
            if (response && response.errors) {
                Object.values(response.errors).forEach(error => {
                    toastr.error(error[0]);
                });
            } else {
                toastr.error('Erreur lors du refus de la demande');
            }
        }
    });
}
</script>

<!-- Modal pour modifier le solde de congé -->
<div class="modal fade" id="soldeModal" tabindex="-1" aria-labelledby="soldeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="soldeModalLabel">Modifier le solde de congé</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="modalUserId">
                <p>Employé : <strong id="modalUserName"></strong></p>
                <p>Solde actuel : <strong id="modalCurrentSolde"></strong> jours</p>
                <div class="mb-3">
                    <label for="modalNewSolde" class="form-label">Nouveau solde (jours)</label>
                    <input type="number" class="form-control" id="modalNewSolde" min="0" max="365" required>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-primary" onclick="sauvegarderSolde()">Sauvegarder</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal pour refuser une demande de congé -->
<div class="modal fade" id="refusModal" tabindex="-1" aria-labelledby="refusModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="refusModalLabel">Refuser la demande de congé</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="refusCongeId">
                <p>Demande de : <strong id="refusUserName"></strong></p>

                <div class="mb-3">
                    <label for="motifRefus" class="form-label">Motif du refus *</label>
                    <input type="text" class="form-control" id="motifRefus" placeholder="Saisissez le motif du refus..." required>
                </div>

                <div class="mb-3">
                    <label for="lettreRefus" class="form-label">Lettre justificative de refus *</label>
                    <input type="file" class="form-control" id="lettreRefus" accept=".pdf,.doc,.docx" required>
                    <div class="form-text">
                        Formats acceptés: PDF, DOC, DOCX. Taille maximale: 5 Mo.
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-danger" onclick="sauvegarderRefus()">Refuser la demande</button>
            </div>
        </div>
    </div>
</div>
@endpush

@section('content')
<!-- -------------------------------------------------------------- -->
<!-- Start Page Content -->
<!-- -------------------------------------------------------------- -->
<div class="row">
    <!-- Statistiques des congés -->
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Statistiques des Congés {{ now()->year }}</h4>
                <div class="row mt-4">
                    <div class="col-md-3">
                        <div class="card bg-info text-white">
                            <div class="card-body text-center">
                                <h2 class="font-light">{{ $stats['demandes_total'] }}</h2>
                                <p class="mb-0">Demandes totales</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card bg-success text-white">
                            <div class="card-body text-center">
                                <h2 class="font-light">{{ $stats['demandes_approuvees'] }}</h2>
                                <p class="mb-0">Approuvées</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card bg-warning text-white">
                            <div class="card-body text-center">
                                <h2 class="font-light">{{ $stats['demandes_en_attente'] }}</h2>
                                <p class="mb-0">En attente</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card bg-danger text-white">
                            <div class="card-body text-center">
                                <h2 class="font-light">{{ $stats['demandes_refusees'] }}</h2>
                                <p class="mb-0">Refusées</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title mb-0">Soldes de Congés des Employés</h4>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>Employé</th>
                                <th>Rôle</th>
                                <th>Solde de congé</th>
                                <th>Congés pris ({{ now()->year }})</th>
                                <th>Congés restants</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($employes as $employe)
                                @php
                                    $solde = app(\App\Services\CongeCalculatorService::class)->calculateSolde($employe);
                                @endphp
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="ms-3">
                                                <h6 class="mb-0">{{ $employe->name }}</h6>
                                                <small class="text-muted">{{ $employe->email }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>{{ $employe->role->nom }}</td>
                                    <td>
                                        <span class="badge bg-primary">{{ $solde['acquis'] }} jours</span>
                                    </td>
                                    <td>
                                        <span class="badge bg-info">{{ $solde['pris'] }} jours</span>
                                    </td>
                                    <td>
                                        @if($solde['dus'] > 0)
                                            <span class="badge bg-success">{{ $solde['dus'] }} jours</span>
                                        @else
                                            <span class="badge bg-danger">{{ $solde['dus'] }} jours</span>
                                        @endif
                                    </td>
                                    <td>
                                        <button class="btn btn-sm btn-warning" onclick="modifierSolde({{ $employe->id }}, '{{ $employe->name }}', {{ $employe->solde_conge }})" title="Modifier le solde">
                                            <i class="mdi mdi-pencil"></i> Modifier solde
                                        </button>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center">Aucun employé trouvé.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title mb-0">Demandes de Congés</h4>
            </div>
            <div class="card-body">
                <!-- Filtres -->
                <div class="row mb-4">
                    <div class="col-md-6">
                        <form method="GET" class="d-flex">
                            <input type="text" name="search" class="form-control" placeholder="Rechercher par nom..."
                                value="{{ request('search') }}">
                            <button type="submit" class="btn btn-outline-secondary ms-2">
                                <i class="mdi mdi-magnify"></i>
                            </button>
                        </form>
                    </div>
                    <div class="col-md-6">
                        <form method="GET" class="d-flex justify-content-end">
                            <select name="status" class="form-select" style="width: auto;">
                                <option value="">Tous les statuts</option>
                                <option value="Demandé" {{ request('status') === 'Demandé' ? 'selected' : '' }}>En attente</option>
                                <option value="Approuvé" {{ request('status') === 'Approuvé' ? 'selected' : '' }}>Approuvé</option>
                                <option value="Refusé" {{ request('status') === 'Refusé' ? 'selected' : '' }}>Refusé</option>
                            </select>
                            <button type="submit" class="btn btn-outline-primary ms-2">Filtrer</button>
                        </form>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>Employé</th>
                                <th>Type de congé</th>
                                <th>Période</th>
                                <th>Jours</th>
                                <th>Statut</th>
                                <th>Date demande</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($demandesConges as $conge)
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="ms-3">
                                                <h6 class="mb-0"></h6>
                                                <small class="text-muted"></small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>{{ $conge->type_conge }}</td>
                                    <td>
                                        {{ $conge->date_debut->format('d/m/Y') }} -
                                        {{ $conge->date_fin->format('d/m/Y') }}
                                    </td>
                                    <td>{{ number_format($conge->nombre_jours, 0) }}</td>
                                    <td>
                                        @if($conge->statut === 'Approuvé')
                                            <span class="badge bg-success">Approuvé</span>
                                        @elseif($conge->statut === 'Refusé')
                                            <span class="badge bg-danger">Refusé</span>
                                        @else
                                            <span class="badge bg-warning">En attente</span>
                                        @endif
                                    </td>
                                    <td>{{ $conge->created_at->format('d/m/Y') }}</td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <a href="{{ route('rh.conges.show', $conge) }}" class="btn btn-sm btn-info" title="Voir détails">
                                                <i class="mdi mdi-eye"></i>
                                            </a>
                                            {{-- @if($conge->lettre_demande_path)
                                                <button class="btn btn-sm btn-primary" onclick="voirLettreDemande('{{ asset('storage/' . $conge->lettre_demande_path) }}')" title="Voir lettre de demande">
                                                    <i class="mdi mdi-file-document"></i>
                                                </button>
                                            @endif --}}
                                            @if($conge->statut === 'Demandé')
                                                <form action="{{ route('rh.conges.approve', $conge) }}" method="POST" class="d-inline">
                                                    @csrf
                                                    @method('POST')
                                                    <button type="submit" class="btn btn-sm btn-success" title="Approuver">
                                                        <i class="mdi mdi-check"></i>
                                                    </button>
                                                </form>
                                                <button type="button" class="btn btn-sm btn-danger" onclick="refuserConge({{ $conge->id }}, '')" title="Refuser avec justificatif">
                                                    <i class="mdi mdi-close"></i>
                                                </button>
                                            @endif
                                            {{-- @if($conge->statut === 'Refusé' && $conge->lettre_refus_path)
                                                <button class="btn btn-sm btn-warning" onclick="voirLettreRefus('{{ asset('storage/' . $conge->lettre_refus_path) }}')" title="Voir lettre de refus">
                                                    <i class="mdi mdi-file-alert"></i>
                                                </button>
                                            @endif --}}
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center">Aucune demande de congé trouvée.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <x-pagination :paginator="$demandesConges" />
            </div>
        </div>
    </div>
</div>
<!-- -------------------------------------------------------------- -->
<!-- End PAge Content -->
<!-- -------------------------------------------------------------- -->
@endsection