@extends('layouts.base')

@section('title')
    Gestion des Opérations de Caisse
@endsection

@section('styles')
<link href="{{ asset('assets/vendor/select/select2.min.css') }}" rel="stylesheet" type="text/css">

<style>
    .card {
        border: 2px solid #e9ecef;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        overflow: hidden;
    }
    
    .card-header {
        background: linear-gradient(135deg, #007bff, #0056b3) !important;
        border-bottom: 2px solid #004085;
        padding: 15px 20px;
    }
    
    .card-header h5 {
        font-weight: 700;
        font-size: 1.3rem;
        letter-spacing: 0.5px;
        text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        color: white !important;
    }
    
    .card-header h5 i {
        color: white !important;
    }
    
    .card-body {
        padding: 25px;
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    }
    
    .year-selector {
        background: white;
        border: 2px solid #e9ecef;
        border-radius: 12px;
        padding: 12px 18px;
        font-weight: 500;
        color: #495057;
        min-width: 160px;
        text-align: center;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        margin-top: 10px;
    }
    
    .year-selector:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
        transform: translateY(-1px);
    }
    
    .year-selector:hover {
        border-color: #007bff;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
    }
    
    .current-period-display {
        background: linear-gradient(135deg, #28a745, #20c997);
        color: white;
        padding: 35px 45px;
        border-radius: 40px;
        font-weight: 700;
        text-align: center;
        min-width: 350px;
        box-shadow: 0 12px 35px rgba(40, 167, 69, 0.4);
        position: relative;
        overflow: hidden;
        border: 4px solid #1e7e34;
        margin: 25px 0;
        transform: scale(1.05);
        transition: all 0.3s ease;
        z-index: 10;
    }
    
    .current-period-display:hover {
        transform: scale(1.08);
        box-shadow: 0 15px 40px rgba(40, 167, 69, 0.5);
        border-color: #155724;
    }
    
    .month-year-text {
        font-size: 2.2rem;
        font-weight: 900;
        letter-spacing: 2px;
        text-shadow: 0 4px 8px rgba(0,0,0,0.5);
        display: block;
        margin-top: 10px;
        text-transform: uppercase;
        line-height: 1.1;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        position: relative;
        z-index: 2;
    }
    
    .current-period-display i {
        font-size: 1.8rem;
        margin-bottom: 10px;
        display: block;
        position: relative;
        z-index: 2;
    }
    
    /* Animation de pulsation pour attirer l'attention */
    @keyframes pulse {
        0% { transform: scale(1.05); }
        50% { transform: scale(1.08); }
        100% { transform: scale(1.05); }
    }
    
    .current-period-display {
        animation: pulse 3s ease-in-out infinite;
    }
    
    .current-period-display::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(45deg, transparent, rgba(255,255,255,0.15), transparent);
        transform: rotate(45deg);
        animation: shine 3s infinite;
    }
    
    @keyframes shine {
        0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
        100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
    }
    
    .nav-buttons {
        display: flex;
        gap: 20px;
        align-items: center;
        justify-content: center;
        margin: 20px 0;
    }
    
    .btn-month-nav {
        background: linear-gradient(135deg, #007bff, #0056b3);
        color: white;
        border: none;
        border-radius: 15px;
        padding: 15px 25px;
        font-weight: 600;
        font-size: 1.1rem;
        transition: all 0.3s ease;
        min-width: 160px;
        box-shadow: 0 4px 15px rgba(0, 123, 255, 0.25);
        position: relative;
        overflow: hidden;
        text-transform: capitalize;
    }
    
    .btn-month-nav::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        transition: left 0.5s;
    }
    
    .btn-month-nav:hover::before {
        left: 100%;
    }
    
    .btn-month-nav:hover {
        background: linear-gradient(135deg, #0056b3, #004085);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 123, 255, 0.35);
    }
    
    .btn-month-nav:disabled {
        background: #6c757d;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }
    
    .btn-month-nav:disabled::before {
        display: none;
    }

    .form-label {
        font-size: 1.1rem;
        color: #212529 !important;
        margin-bottom: 0.5rem;
        font-weight: 700 !important;
    }
    
    .form-label.fw-bold {
        font-weight: 700 !important;
        color: #212529 !important;
    }
</style>
@endsection

@section('content')
<div class="row">
            {{--@include('includes.alert.alert_success_error') --}}



    
    {{-- Section Filtre bien organisée --}}
    <div class="col-12 mb-4">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0 text-center text-white">
                    <i class="ph-light ph-funnel me-2"></i>Filtres de Période
                </h5>
            </div>
            <div class="card-body">
                <div class="row align-items-center justify-content-center">
                    <div class="col-md-3 text-center">
                        <label class="form-label fw-bold mb-2 text-dark">Sélectionner l'année</label>
                        <select id="yearSelector" class="year-selector select-example form-select select-basic">
                            @for($year = 2025; $year >= 2010; $year--)
                                <option value="{{ $year }}" {{ $year == $selectedYear ? 'selected' : '' }}>
                                    {{ $year }}
                                </option>
                            @endfor
                        </select>
                    </div>
                    
                    <div class="col-md-4 text-center">
                        <div class="current-period-display">
                            <i class="ph-light ph-calendar me-2"></i>
                            <span class="month-year-text">{{ \Carbon\Carbon::createFromDate($selectedYear, $selectedMonth, 1)->locale('fr')->isoFormat('MMMM YYYY') }}</span>
                        </div>
                    </div>
                    
                    <div class="col-md-5">
                        <div class="nav-buttons">
                            @if($prevMonth)
                                <a href="{{ route('gestion_operation_caisse.dashboard', ['year' => $selectedYear, 'month' => $prevMonth]) }}" 
                                   class="btn btn-month-nav" id="prevMonthBtn">
                                    <i class="ph-light ph-caret-left me-1"></i>
                                    {{ \Carbon\Carbon::createFromDate($selectedYear, $prevMonth, 1)->locale('fr')->isoFormat('MMMM') }}
                                </a>
                            @else
                                <button class="btn btn-month-nav" disabled>
                                    <i class="ph-light ph-caret-left me-1"></i>
                                    Précédent
                                </button>
                            @endif
                            
                            @if($nextMonth)
                                <a href="{{ route('gestion_operation_caisse.dashboard', ['year' => $selectedYear, 'month' => $nextMonth]) }}" 
                                   class="btn btn-month-nav" id="nextMonthBtn">
                                    {{ \Carbon\Carbon::createFromDate($selectedYear, $nextMonth, 1)->locale('fr')->isoFormat('MMMM') }}
                                    <i class="ph-light ph-caret-right ms-1"></i>
                                </a>
                            @else
                                <button class="btn btn-month-nav" disabled>
                                    Suivant
                                    <i class="ph-light ph-caret-right ms-1"></i>
                                </button>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    {{-- Contenu principal --}}
    @if($isSuperAdmin)
        @include('gestion_operation_caisse.partials.superadmin')
    @else
        @include('gestion_operation_caisse.partials.user')
    @endif
</div>
@endsection

@section('script')
<!-- Scripts externes -->
<script src="{{ asset('assets/vendor/select/select2.min.js') }}"></script>
<script src="{{ asset('assets/js/select.js') }}"></script>

<script>
// Fonction pour changer d'année
function changeYear(yearValue) {
    let url = '{{ route("gestion_operation_caisse.dashboard") }}?year=' + yearValue;
    window.location.href = url;
}

// Initialisation quand la page est chargée
document.addEventListener('DOMContentLoaded', function() {
    const yearSelector = document.getElementById('yearSelector');
    
    if (yearSelector) {
        // Attendre que Select2 soit initialisé
        setTimeout(() => {
            // Vérifier si Select2 est initialisé
            if ($(yearSelector).hasClass('select2-hidden-accessible')) {
                // Utiliser l'événement Select2
                $(yearSelector).on('select2:select', function(e) {
                    changeYear(e.params.data.id);
                });
                
                // Utiliser aussi l'événement change de Select2
                $(yearSelector).on('change', function(e) {
                    changeYear(this.value);
                });
            } else {
                // Ajouter l'événement change natif
                yearSelector.addEventListener('change', function(e) {
                    changeYear(this.value);
                });
            }
        }, 500); // Attendre 500ms pour que Select2 soit initialisé
    }
});
</script>

<!-- Inclure le script du modal pour les détails -->
@include('gestion_operation_caisse.partials.operation_details_modal_script')
@endsection