iao_team/resources/views/livewire/records.blade.php

<div class="col card--ui" id="card--dashboard">

     <header id="title--section" style="display:none !important"  class="d-flex align-items-center justify-content-between">
        <div class="title--section_name d-flex align-items-center justify-content-between">
            <i class="ico--ui title_section utenti me-2"></i>
            <h2 class="primary">Prima nota</h2>
        </div>

    </header>
    <section id="subheader" class="">
        <div class="row g-3">
            <div class="col-md-3">
                Utente
                <select name="search_member_id" class="form-select filterMember" wire:model="filterMember">
                    <option value="">--Seleziona--
                    @foreach($members as $member)
                        <option value="{{$member->id}}">{{$member->last_name}} {{$member->first_name}}
                    @endforeach
                </select>
            </div>
            <div class="col-md-4">
                Causale
                <select name="search_causal_id[]" class="form-select filterCausals me-2" multiple="multiple" wire:model="filterCausals">
                    @foreach($causals as $causal)
                        <option value="{{$causal["id"]}}">{!!$causal["name"]!!}
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                Periodo
                <div class="col-12 mb-3">
                    <select wire:model="selectedPeriod" class="form-select" @if($isFiltering) disabled @endif style="height: 43px!important;">
                        <option value="OGGI">Oggi</option>
                        <option value="IERI">Ieri</option>
                        <option value="GIORNO_PERSONALIZZATO">Giorno Personalizzato</option>
                        <option value="MESE CORRENTE">Mese Corrente</option>
                        <option value="MESE PRECEDENTE">Mese Precedente</option>
                        <option value="MESE_PERSONALIZZATO">Mese Personalizzato</option>
                        <option value="ULTIMO TRIMESTRE">Ultimo Trimestre</option>
                        <option value="ULTIMO QUADRIMESTRE">Ultimo Quadrimestre</option>
                    </select>
                </div>

                @if($selectedPeriod === 'GIORNO_PERSONALIZZATO')
                <div class="col-12 mb-2" wire:transition>
                    <div class="day-picker-container position-relative">
                        <div class="input-group">
                            <input type="date"
                                wire:model="selectedDay"
                                class="form-control"
                                style="height: 43px!important;"
                                @if($isFiltering) disabled @endif>
                        </div>

                        @if($showDayPicker)
                        <div class="day-picker-dropdown position-absolute bg-white border rounded shadow-lg p-3 mt-1"
                            style="z-index: 1060; width: 100%; max-width: 350px;">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h6 class="mb-0 text-primary">
                                    <i class="fa-regular fa-calendar me-2"></i>
                                    Seleziona Giorno
                                </h6>
                                <button type="button"
                                        class="btn-close btn-sm"
                                        wire:click="toggleDayPicker"></button>
                            </div>

                            <div class="row g-2 mb-3">
                                <div class="col-6">
                                    <button type="button"
                                            class="btn btn-sm btn-outline-primary w-100"
                                            wire:click="selectToday">
                                        <i class="fas fa-calendar-day me-1"></i>
                                        Oggi
                                    </button>
                                </div>
                                <div class="col-6">
                                    <button type="button"
                                            class="btn btn-sm btn-outline-secondary w-100"
                                            wire:click="selectYesterday">
                                        <i class="fas fa-step-backward me-1"></i>
                                        Ieri
                                    </button>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label small">Anno</label>
                                <select wire:model="selectedYear" class="form-select form-select-sm">
                                    @php
                                        $currentYear = date('Y');
                                        $selectedDayYear = $selectedDay ? substr($selectedDay, 0, 4) : $currentYear;
                                    @endphp
                                    @for($year = $currentYear - 3; $year <= $currentYear + 1; $year++)
                                        <option value="{{ $year }}" {{ $year == $selectedDayYear ? 'selected' : '' }}>
                                            {{ $year }}
                                        </option>
                                    @endfor
                                </select>
                            </div>

                            <div class="mb-3">
                                <label class="form-label small">Mese</label>
                                <div class="row g-1">
                                    @php
                                        $months = [
                                            '01' => 'Gen', '02' => 'Feb', '03' => 'Mar', '04' => 'Apr',
                                            '05' => 'Mag', '06' => 'Giu', '07' => 'Lug', '08' => 'Ago',
                                            '09' => 'Set', '10' => 'Ott', '11' => 'Nov', '12' => 'Dic'
                                        ];
                                        $currentMonth = $selectedDay ? substr($selectedDay, 5, 2) : date('m');
                                        $currentYear = $selectedDay ? substr($selectedDay, 0, 4) : date('Y');
                                    @endphp

                                    @foreach($months as $monthNum => $monthName)
                                        <div class="col-3">
                                            <button type="button"
                                                    class="btn btn-sm w-100 month-selector {{ $monthNum === $currentMonth ? 'btn-primary' : 'btn-outline-secondary' }}"
                                                    data-month="{{ $monthNum }}">
                                                {{ $monthName }}
                                            </button>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label small">Giorno</label>
                                <div class="day-grid" id="dayGrid">
                                </div>
                            </div>

                            <div class="row g-2">
                                <div class="col-6">
                                    <button type="button"
                                            class="btn btn-sm btn-success w-100"
                                            id="confirmDaySelection">
                                        <i class="fas fa-check me-1"></i>
                                        Conferma
                                    </button>
                                </div>
                                <div class="col-6">
                                    <button type="button"
                                            class="btn btn-sm btn-outline-secondary w-100"
                                            wire:click="toggleDayPicker">
                                        <i class="fas fa-times me-1"></i>
                                        Annulla
                                    </button>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>

                @if($selectedDay && $selectedPeriod === 'GIORNO_PERSONALIZZATO')
                <div class="col-12 mb-2">
                    <div class="alert alert-info py-2 px-3 mb-0" style="font-size: 0.875rem;">
                        <i class="fas fa-info-circle me-1"></i>
                        <strong>Giorno selezionato:</strong><br>
                        {{ \Carbon\Carbon::createFromFormat('Y-m-d', $selectedDay)->locale('it')->isoFormat('dddd, D MMMM YYYY') }}
                    </div>
                </div>
                @endif
                @endif

                @if($selectedPeriod === 'MESE_PERSONALIZZATO')
                <div class="col-12 mb-2" wire:transition>
                    <div class="month-picker-container position-relative">
                        <div class="input-group">
                            <input type="month"
                                wire:model="selectedMonth"
                                class="form-control"
                                style="height: 43px!important;"
                                @if($isFiltering) disabled @endif>
                        </div>

                        @if($showMonthPicker)
                        <div class="month-picker-dropdown position-absolute bg-white border rounded shadow-lg p-3 mt-1"
                            style="z-index: 1060; width: 100%; max-width: 300px;">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h6 class="mb-0 text-primary">
                                    <i class="fa-regular fa-calendar me-2"></i>
                                    Seleziona Mese
                                </h6>
                                <button type="button"
                                        class="btn-close btn-sm"
                                        wire:click="toggleMonthPicker"></button>
                            </div>

                            <div class="mb-3">
                                <label class="form-label small">Anno</label>
                                <select wire:model="selectedYear" class="form-select form-select-sm">
                                    @php
                                        $currentYear = date('Y');
                                        $selectedYear = $selectedMonth ? substr($selectedMonth, 0, 4) : $currentYear;
                                    @endphp
                                    @for($year = $currentYear - 3; $year <= $currentYear + 1; $year++)
                                        <option value="{{ $year }}" {{ $year == $selectedYear ? 'selected' : '' }}>
                                            {{ $year }}
                                        </option>
                                    @endfor
                                </select>
                            </div>

                            <div class="row g-1 mb-3">
                                @php
                                    $months = [
                                        '01' => 'Gen', '02' => 'Feb', '03' => 'Mar', '04' => 'Apr',
                                        '05' => 'Mag', '06' => 'Giu', '07' => 'Lug', '08' => 'Ago',
                                        '09' => 'Set', '10' => 'Ott', '11' => 'Nov', '12' => 'Dic'
                                    ];
                                    $currentMonth = $selectedMonth ?: date('Y-m');
                                @endphp

                                @foreach($months as $monthNum => $monthName)
                                    <div class="col-3">
                                        <button type="button"
                                                class="btn btn-sm w-100 {{ ($selectedYear . '-' . $monthNum) === $currentMonth ? 'btn-primary' : 'btn-outline-secondary' }}"
                                                wire:click="selectMonth('{{ $selectedYear }}-{{ $monthNum }}')">
                                            {{ $monthName }}
                                        </button>
                                    </div>
                                @endforeach
                            </div>

                            <div class="row g-1">
                                <div class="col-6">
                                    <button type="button"
                                            class="btn btn-sm btn-outline-primary w-100"
                                            wire:click="selectMonth('{{ date('Y-m') }}')">
                                        <i class="fas fa-calendar-day me-1"></i>
                                        Questo Mese
                                    </button>
                                </div>
                                <div class="col-6">
                                    <button type="button"
                                            class="btn btn-sm btn-outline-secondary w-100"
                                            wire:click="selectMonth('{{ date('Y-m', strtotime('-1 month')) }}')">
                                        <i class="fas fa-step-backward me-1"></i>
                                        Mese Scorso
                                    </button>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>

                @if($selectedMonth && $selectedPeriod === 'MESE_PERSONALIZZATO')
                <div class="col-12 mb-2">
                    <div class="alert alert-info py-2 px-3 mb-0" style="font-size: 0.875rem;">
                        <i class="fas fa-info-circle me-1"></i>
                        <strong>Periodo selezionato:</strong><br>
                        {{ \Carbon\Carbon::createFromFormat('Y-m', $selectedMonth)->locale('it')->isoFormat('MMMM YYYY') }}
                    </div>
                </div>
                @endif
                @endif
            </div>
            <div class="col-md-2">
                <div class="prima--nota_buttons ms-auto" style="float:right; margin-top:25px;">
                    <button class="btn--ui primary" wire:click="applyFilters" style="margin-right:5px;" @if($isFiltering) disabled @endif>
                        @if($isFiltering)
                            <i class="fas fa-spinner fa-spin"></i> CARICAMENTO...
                        @else
                            FILTRA
                        @endif
                    </button>
                    <button class="btn--ui lightGrey reset reset" style="margin-left:5px;color:#10172A;" wire:click="resetFilters" @if($isFiltering) disabled @endif>RESET</button>
                </div>
            </div>
        </div>
        {{-- Custom loader --}}
        <div wire:loading>
            <div class="custom_loader">
                <i class="fas fa-spinner fa-spin"></i>
            </div>
        </div>

        <style>
            .custom_loader {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                display: flex;
                flex-direction: column;
                flex-wrap: nowrap;
                align-content: center;
                justify-content: center;
                align-items: center;
                padding: 10px;
                background: #ffffff80;
                z-index: 1000;
            }
            
            .custom_loader i {
                font-size: 50px;
                color: #0c6197;
            }
        </style>
        {{-- END Custom loader --}}
        
        <div style="float:left; margin-top:10px; margin-bottom:10px;">
            <div class="dropdown">
            <button class="btn--ui_outline light dropdown-toggle" type="button" id="exportDropdown" data-bs-toggle="dropdown" aria-expanded="false"
            style="color:#10172A;" @if($isFiltering) disabled @endif>
                ESPORTA
            </button>
            <ul class="dropdown-menu" aria-labelledby="exportDropdown">
                <li><a class="dropdown-item" href="#" wire:click="openExportModal">Excel</a></li>
                <li><a class="dropdown-item" href="#" id="print">Stampa</a></li>
            </ul>
            </div>
        </div>
    </section>

    <section id="resume-table" class="scrollTable records-table" style="position: relative;">

        @if($isFiltering)
            <div class="loading-overlay">
                <div class="loading-content">
                    <i class="fas fa-spinner fa-spin fa-3x"></i>
                    <p>Caricamento dati in corso...</p>
                </div>
            </div>
        @endif

        <table class="table tablesaw tableHead tablesaw-stack" id="tablesaw-350" width="100%">
            <thead>
                <tr>
                    <th scope="col">Data</th>
                    <th scope="col">Tipologia</th>
                    <th scope="col">Causale</th>
                    <th scope="col">Nominativo</th>
                    <th scope="col">Stato</th>
                    <th scope="col">Entrata</th>
                    <th scope="col">Uscita</th>
                    <th scope="col">Origine</th>
                    <th scope="col">Destinazione</th>
                    <th scope="col">Metodo di pagamento</th>
                </tr>
                <tr>
                    <th scope="col"></th>
                    <th scope="col"></th>
                    <th scope="col"></th>
                    <th scope="col"></th>
                    <th scope="col"></th>
                    <th scope="col"></th>
                    <th scope="col"></th>
                    <th scope="col"></th>
                    <th scope="col"></th>
                    <th scope="col"></th>
                </tr>
            </thead>
            <tbody id="checkall-target">
                @php $count = 0; @endphp
                @foreach($records as $record)
                    @if($record->date != '')
                        <tr>
                            <td style="background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">{{date("d/m/Y", strtotime($record->date))}}</td>
                            <td style="background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">{{$record->commercial ? 'Commerciale' : 'Non commerciale'}}</td>
                            <td style="background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">{{$record->causal_name}}</td>
                            <td style="background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">{{$record->type == 'IN' ? ($record->member->first_name . " " . $record->member->last_name) : @$record->supplier->name}}</td>
                            <td style="background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">{{$record->deleted ? 'Annullata' : ''}}</td>
                            <td style="background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}};text-align:right;">{{$record->type == 'IN' ? formatPrice($record->amount) : ''}}</td>
                            <td style="background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}};text-align:right;">{{$record->type == 'OUT' ? formatPrice($record->amount) : ''}}</td>
                            <td style="background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">{{$record->type == 'OUT' ? $record->origin : ''}}</td>
                            <td style="background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">{{$record->type == 'IN' ? $record->destination : ''}}</td>
                            <td style="background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">{{$record->payment_method->name}}</td>
                        </tr>
                        @php $count++; @endphp
                    @endif
                @endforeach
            </tbody>
            @if($total_in > 0 || $total_out > 0)
                <tfoot>
                    <tr>
                        <td colspan="5"><b>Totale</b></td>
                        <td style="text-align:right;"><b>{{$total_in > 0 ? formatPrice($total_in) : ''}}</b></td>
                        <td style="text-align:right;"><b>{{$total_out > 0 ? formatPrice($total_out) : ''}}</b></td>
                        <td colspan="3"></td>
                    </tr>
                </tfoot>
            @endif
        </table>
        <button type="button" class="btn btn-floating btn-lg" id="btn-back-to-bottom"><i class="fas fa-arrow-down"></i></button>
        <button type="button" class="btn btn-floating btn-lg" id="btn-back-to-top"><i class="fas fa-arrow-up"></i></button>
    </section>

    <div class="modal fade" id="causalsModal" tabindex="-1" aria-labelledby="causalsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header" style="background-color: #0C6197!important;">
                    <h5 class="modal-title" id="causalsModalLabel">
                        <i class="me-2"></i>
                        Dettaglio Causali
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="CHIUDI"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h6 class="mb-0">
                                    <i class="me-2 text-primary"></i>
                                    Causali incluse:
                                </h6>
                            </div>
                            <div class="border rounded" style="max-height: 400px; overflow-y: auto;">
                                <ul id="causalsList" class="list-group list-group-flush mb-0">
                                    <!-- Causals will be populated here by JavaScript -->
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer" style="background-color: #FFF!important;">
                    <button type="button" class="btn--ui lightGrey me-2" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i>
                        CHIUDI
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="exportModal" tabindex="-1" aria-labelledby="exportModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #0C6197!important;">
                <h5 class="modal-title" id="exportModalLabel">Seleziona Periodo per Export</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="CHIUDI"></button>
            </div>
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label for="exportFromDate" class="form-label">Data Inizio</label>
                        <input type="date" class="form-control" id="exportFromDate" wire:model.defer="exportFromDate">
                    </div>
                    <div class="col-md-6">
                        <label for="exportToDate" class="form-label">Data Fine</label>
                        <input type="date" class="form-control" id="exportToDate" wire:model.defer="exportToDate">
                    </div>
                </div>

                <div class="row mt-4">
                    <div class="col-12">
                        <div class="form-check export-method-check">
                            <input class="form-check-input" type="checkbox" id="sendViaEmail" wire:model.defer="sendViaEmail">
                            <label class="form-check-label" for="sendViaEmail">
                                <i class="fas fa-envelope me-2"></i>Invia via Email
                                <small class="d-block text-muted mt-1">L'export verrà elaborato in background e inviato alla tua email</small>
                            </label>
                        </div>
                    </div>
                </div>

                <div class="row mt-3" style="display: none;" id="emailAddressRow">
                    <div class="col-12">
                        <label for="exportEmailAddress" class="form-label">
                            <i class="fas fa-envelope me-1"></i>Indirizzo Email
                        </label>
                        <input type="email" class="form-control" id="exportEmailAddress"
                               wire:model.defer="exportEmailAddress"
                               placeholder="inserisci@email.com">
                        <div class="invalid-feedback" id="emailValidationFeedback">
                            Inserisci un indirizzo email valido
                        </div>
                        <small class="form-text text-muted">
                            Il file Excel verrà inviato a questo indirizzo
                        </small>
                    </div>
                </div>

                <div class="row mt-3" style="display: none;" id="emailSubjectRow">
                    <div class="col-12">
                        <label for="exportEmailSubject" class="form-label">
                            <i class="fas fa-tag me-1"></i>Oggetto Email
                        </label>
                        <input type="text" class="form-control" id="exportEmailSubject"
                               wire:model.defer="exportEmailSubject"
                               placeholder="Prima Nota - Export">
                        <small class="form-text text-muted">
                            Personalizza l'oggetto dell'email
                        </small>
                    </div>
                </div>

                <div class="row mt-3">
                    <div class="col-12">
                        <div class="alert alert-info d-flex align-items-start">
                            <i class="fas fa-info-circle me-2 mt-1"></i>
                            <div>
                                <strong>Informazioni Export:</strong>
                                <ul class="mb-0 mt-1">
                                    <li>L'export includerà tutti i record nel periodo selezionato</li>
                                    <li>Verranno applicati i filtri attualmente attivi</li>
                                    <li id="emailProcessingInfo" style="display: none;">L'elaborazione avverrà in background, potrai continuare a usare l'applicazione</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer" style="background-color: #FFF!important;">
                <button type="button" class="btn--ui lightGrey me-2" data-bs-dismiss="modal">ANNULLA</button>
                <button type="button" class="btn--ui primary" onclick="handleExportClick()" id="exportButton">
                    <span id="loadingState" style="display: none;">
                        <div class="spinner-border spinner-border-sm me-2" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        ELABORAZIONE...
                    </span>
                    <span id="normalState">
                        <i class="fas fa-download me-1"></i>
                        ESPORTA
                    </span>
                </button>
            </div>
        </div>
    </div>
</div>

<div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 11000;">
    <!-- Toasts will be dynamically added here -->
</div>
</div>

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@endpush

@push('scripts')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.9);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            border-radius: 4px;
        }

        .loading-content {
            text-align: center;
            color: #0C6197;
        }

        .loading-content i {
            margin-bottom: 15px;
            color: #0C6197;
        }

        .loading-content p {
            margin: 0;
            font-size: 16px;
            font-weight: 500;
            color: #10172A;
        }

        .modal {
            z-index: 9999 !important;
        }

        .modal-backdrop {
            z-index: 9998 !important;
            background-color: rgba(0, 0, 0, 0.6) !important;
        }

        .modal-content {
            border-radius: 8px;
            border: none;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            z-index: 10000 !important;
        }

        .modal-header {
            color: white;
            border-bottom: none;
            border-radius: 8px 8px 0 0;
        }

        .modal-header .btn-close {
            filter: invert(1);
        }

        .modal-title {
            font-weight: 600;
        }

        .varie-link:hover {
            color: #084c6b !important;
            text-decoration: underline !important;
        }

        #btn-back-to-top {
            background-color: #0C6197;
            color: white;
            position: fixed;
            display: none;
        }

        #btn-back-to-bottom {
            background-color: #0C6197;
            color: white;
            position: fixed;
            z-index: 9999;
            display: none;
        }

        button[disabled] {
            opacity: 0.7;
            cursor: not-allowed;
        }

        .btn--ui .fa-spinner {
            margin-right: 5px;
        }

        .scrollTable {
            margin-left: 0px;
            margin-right: 0px;
            padding: 15px;
            overflow-x: auto;
            overflow-y: auto;
            white-space: nowrap;
            border: 1px solid #ddd;
        }

        ::-webkit-scrollbar-thumb {
            background: #e4e4e4;
            border-radius: 10px;
        }

        table thead {
            position: sticky;
            z-index: 100;
            top: 0;
        }

        .select2-container--default .select2-selection--single {
            background-color: #E9F0F5;
            border: 0.0625rem solid #DFE5EB;
            font-size: 0.75rem;
            height: 38px !important;
        }

        .select2-selection__rendered {
            padding-top: 3px;
        }

        .select2 {
            width: 100% !important;
        }

        .select2-selection--multiple {
            overflow: hidden !important;
            height: auto !important;
        }

        .select2-container {
            box-sizing: border-box;
            display: inline-block;
            margin: 0;
            position: relative;
            vertical-align: middle;
            z-index: 999 !important;
        }

        .select2-dropdown {
            z-index: 999 !important;
        }

        .select2-container .select2-selection--single {
            box-sizing: border-box;
            cursor: pointer;
            display: block;
            height: 38px;
            user-select: none;
            -webkit-user-select: none;
        }

        .select2-container .select2-selection--single .select2-selection__rendered {
            display: block;
            padding-left: 8px;
            padding-right: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        button#exportDropdown.btn--ui_outline.light {
            font-weight: normal !important;
        }

        .btn--ui_outline.light.dropdown-toggle:active,
        .btn--ui_outline.light.dropdown-toggle:focus,
        .btn--ui_outline.light.dropdown-toggle.show {
            background-color: transparent !important;
            color: #10172A !important;
            box-shadow: none !important;
        }

        .btn--ui_outline.light.dropdown-toggle:hover {
            background-color: transparent !important;
            color: #10172A !important;
        }

        .form-select {
            height: 38px !important;
        }

        .form-control {
            height: 43px !important;
        }

        #exportModal .modal-body {
            padding: 1.5rem;
        }

        #exportModal .form-label {
            font-weight: 600;
            color: #10172A;
            margin-bottom: 0.5rem;
        }

        #exportModal .text-muted {
            font-size: 0.875rem;
        }

        .btn--ui[disabled] .fa-spinner {
            margin-right: 0.5rem;
        }

        body.modal-open {
            overflow: hidden;
        }

        .modal-dialog {
            z-index: 10001 !important;
            margin: 1.75rem auto;
        }

        .list-group-item {
            border-left: none;
            border-right: none;
            border-top: 1px solid #dee2e6;
            padding: 12px 15px;
        }

        .list-group-item:first-child {
            border-top: none;
        }

        .list-group-item:last-child {
            border-bottom: none;
        }

        @media (max-width: 768px) {
            .col-md-2, .col-md-3, .col-md-4 {
                margin-bottom: 10px;
            }

            .prima--nota_buttons {
                float: none !important;
                margin-top: 10px !important;
                text-align: center;
            }
        }

        .export-method-check {
            padding: 16px 16px 16px 50px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 8px;
            border: 2px solid #e9ecef;
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
        }

        .export-method-check:hover {
            border-color: #0C6197;
            background: linear-gradient(135deg, #e8f4f8 0%, #d1ecf1 100%);
        }

        .export-method-check .form-check-input {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            margin: 0;
            width: 20px;
            height: 20px;
            background-color: #fff;
            border: 2px solid #dee2e6;
            border-radius: 4px;
            cursor: pointer;
        }

        .export-method-check .form-check-input:checked {
            background-color: #0C6197;
            border-color: #0C6197;
        }

        .export-method-check .form-check-input:checked ~ .form-check-label {
            color: #0C6197;
            font-weight: 600;
        }

        .export-method-check .form-check-label {
            font-weight: 500;
            color: #495057;
            cursor: pointer;
            margin-left: 0;
            display: block;
        }

        .form-check-input:focus {
            border-color: #0C6197;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(12, 97, 151, 0.25);
        }
        #emailAddressRow.show, #emailSubjectRow.show {
            display: block !important;
            animation: slideDown 0.3s ease-out;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .invalid-feedback {
            display: none;
        }

        .is-invalid ~ .invalid-feedback {
            display: block;
        }

        .alert-info {
            background-color: rgba(12, 97, 151, 0.1);
            border-color: rgba(12, 97, 151, 0.2);
            color: #0C6197;
        }

        .spinner-border-sm {
            width: 1rem;
            height: 1rem;
        }

        .toast {
            min-width: 300px;
        }

        .toast-body {
            font-weight: 500;
        }

        .btn--ui:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }

        .list-group-item {
            border-left: none;
            border-right: none;
            border-top: 1px solid #dee2e6;
            padding: 12px 15px;
        }

        .list-group-item:first-child {
            border-top: none;
        }

        .list-group-item:last-child {
            border-bottom: none;
        }

        .list-group-item.d-flex {
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
        }

        .list-group-item .badge {
            font-size: 0.875rem;
            font-weight: 600;
        }

        .list-group-item:hover {
            background-color: rgba(12, 97, 151, 0.05);
            transition: background-color 0.2s ease;
        }

        #causalsModal .modal-body {
            padding: 1rem 0;
        }

         .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.9);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            border-radius: 4px;
        }

        /* New styles for Custom Day Picker */
        .day-picker-container {
            position: relative;
        }

        .day-picker-dropdown {
            max-height: 600px;
            overflow-y: auto;
            border: 1px solid #dee2e6;
            background: white;
            border-radius: 8px;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
            z-index: 1060;
            animation: slideDown 0.2s ease-out;
            transform-origin: top;
        }

        .day-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 2px;
            margin-bottom: 1rem;
        }

        .day-grid .day-header {
            text-align: center;
            font-weight: bold;
            font-size: 0.75rem;
            padding: 0.25rem;
            background-color: #f8f9fa;
            border-radius: 3px;
            color: #6c757d;
        }

        .day-grid .day-button {
            padding: 0.375rem 0.25rem;
            font-size: 0.75rem;
            border: 1px solid #dee2e6;
            background: white;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.15s ease-in-out;
            text-align: center;
            min-height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .day-grid .day-button:hover:not(.disabled) {
            background-color: #e9ecef;
            border-color: #0C6197;
        }

        .day-grid .day-button.selected {
            background-color: #0C6197;
            border-color: #0C6197;
            color: white;
        }

        .day-grid .day-button.today {
            border-color: #28a745;
            font-weight: bold;
        }

        .day-grid .day-button.disabled {
            color: #6c757d;
            background-color: #f8f9fa;
            cursor: not-allowed;
            opacity: 0.5;
        }

        .day-grid .day-button.other-month {
            color: #adb5bd;
            background-color: #f8f9fa;
        }

        .month-selector.btn-primary {
            background-color: #0C6197;
            border-color: #0C6197;
        }

        .month-selector.btn-outline-secondary:hover {
            background-color: #6c757d;
            border-color: #6c757d;
            color: white;
        }

        input[type="date"] {
            background-color: #E9F0F5;
            border: 0.0625rem solid #DFE5EB;
            font-size: 0.75rem;
        }

        input[type="date"]:focus {
            border-color: #0C6197;
            box-shadow: 0 0 0 0.2rem rgba(12, 97, 151, 0.25);
        }

        input[type="date"]::-webkit-calendar-picker-indicator {
            cursor: pointer;
            opacity: 0.7;
            transition: opacity 0.15s ease-in-out;
        }

        input[type="date"]::-webkit-calendar-picker-indicator:hover {
            opacity: 1;
        }

        @media (max-width: 768px) {
            .day-picker-dropdown {
                width: 100% !important;
                max-width: none !important;
            }

            .day-grid .day-button {
                font-size: 0.7rem;
                padding: 0.25rem;
                min-height: 28px;
            }
        }

        .month-picker-container {
            position: relative;
        }

        .month-picker-dropdown {
            max-height: 500px;
            overflow-y: auto;
            border: 1px solid #dee2e6;
            background: white;
            border-radius: 8px;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
            z-index: 1060;
        }

        .month-picker-dropdown .btn {
            font-size: 0.75rem;
            padding: 0.375rem 0.5rem;
            border-radius: 4px;
            transition: all 0.15s ease-in-out;
        }

        .month-picker-dropdown .btn-sm {
            font-size: 0.875rem;
            padding: 0.25rem 0.5rem;
        }

        .month-picker-dropdown .btn-close {
            padding: 0.25rem;
            font-size: 0.75rem;
        }

        .month-picker-dropdown .btn-primary {
            background-color: #0C6197;
            border-color: #0C6197;
        }

        .month-picker-dropdown .btn-outline-primary {
            color: #0C6197;
            border-color: #0C6197;
        }

        .month-picker-dropdown .btn-outline-primary:hover {
            background-color: #0C6197;
            border-color: #0C6197;
        }

        .month-picker-dropdown .btn-outline-secondary:hover {
            background-color: #6c757d;
            border-color: #6c757d;
        }

        input[type="month"] {
            background-color: #E9F0F5;
            border: 0.0625rem solid #DFE5EB;
            font-size: 0.75rem;
        }

        input[type="month"]:focus {
            border-color: #0C6197;
            box-shadow: 0 0 0 0.2rem rgba(12, 97, 151, 0.25);
        }

        input[type="month"]::-webkit-calendar-picker-indicator {
            cursor: pointer;
            opacity: 0.7;
            transition: opacity 0.15s ease-in-out;
        }

        input[type="month"]::-webkit-calendar-picker-indicator:hover {
            opacity: 1;
        }

        .alert-info {
            background-color: rgba(12, 97, 151, 0.1);
            border-color: rgba(12, 97, 151, 0.2);
            color: #0C6197;
            border-radius: 6px;
        }

        .month-picker-dropdown {
            animation: slideDown 0.2s ease-out;
            transform-origin: top;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px) scaleY(0.8);
            }
            to {
                opacity: 1;
                transform: translateY(0) scaleY(1);
            }
        }

        @media (max-width: 768px) {
            .month-picker-dropdown {
                width: 100% !important;
                max-width: none !important;
            }

            .month-picker-dropdown .row.g-1 .col-3 {
                flex: 0 0 25%;
                max-width: 25%;
            }
        }

        [wire\:transition] {
            transition: all 0.3s ease-in-out;
        }

        .select2-container {
            z-index: 999 !important;
        }

        .select2-dropdown {
            z-index: 999 !important;
        }

        .month-picker-dropdown {
            z-index: 1060 !important;
        }

        .month-picker-dropdown .btn-group-sm .btn {
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
        }

        .month-picker-container .form-label {
            font-weight: 600;
            color: #10172A;
            margin-bottom: 0.5rem;
        }

        .month-picker-container .input-group .btn {
            border-left: 0;
            background-color: #f8f9fa;
            border-color: #DFE5EB;
            color: #6c757d;
        }

        .month-picker-container .input-group .btn:hover {
            background-color: #e9ecef;
            color: #0C6197;
        }

    </style>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="/assets/js/aCollapTable.js"></script>
@endpush

@push('scripts')
    <script>
         let selectedDayValue = '';
        let currentDisplayMonth = '';
        let currentDisplayYear = '';

        function initializeDayPicker() {
            const today = new Date();
            const selectedDay = @this.get('selectedDay');

            if (selectedDay) {
                selectedDayValue = selectedDay;
                const selectedDate = new Date(selectedDay);
                currentDisplayMonth = String(selectedDate.getMonth() + 1).padStart(2, '0');
                currentDisplayYear = String(selectedDate.getFullYear());
            } else {
                currentDisplayMonth = String(today.getMonth() + 1).padStart(2, '0');
                currentDisplayYear = String(today.getFullYear());
            }

            updateDayGrid();
        }

        function updateDayGrid() {
            const dayGrid = document.getElementById('dayGrid');
            if (!dayGrid) return;

            const year = parseInt(currentDisplayYear);
            const month = parseInt(currentDisplayMonth);
            const today = new Date();
            const selectedDate = selectedDayValue ? new Date(selectedDayValue) : null;

            dayGrid.innerHTML = '';

            const dayHeaders = ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab'];
            dayHeaders.forEach(header => {
                const headerDiv = document.createElement('div');
                headerDiv.className = 'day-header';
                headerDiv.textContent = header;
                dayGrid.appendChild(headerDiv);
            });

            const firstDay = new Date(year, month - 1, 1);
            const lastDay = new Date(year, month, 0);
            const startDate = new Date(firstDay);
            startDate.setDate(startDate.getDate() - firstDay.getDay());

            for (let i = 0; i < 42; i++) {
                const currentDate = new Date(startDate);
                currentDate.setDate(startDate.getDate() + i);

                const dayButton = document.createElement('button');
                dayButton.type = 'button';
                dayButton.className = 'day-button';
                dayButton.textContent = currentDate.getDate();

                const isCurrentMonth = currentDate.getMonth() === month - 1;
                const isToday = currentDate.toDateString() === today.toDateString();
                const isSelected = selectedDate && currentDate.toDateString() === selectedDate.toDateString();

                if (!isCurrentMonth) {
                    dayButton.classList.add('other-month');
                }

                if (isToday) {
                    dayButton.classList.add('today');
                }

                if (isSelected) {
                    dayButton.classList.add('selected');
                }

                const dateString = currentDate.getFullYear() + '-' +
                                 String(currentDate.getMonth() + 1).padStart(2, '0') + '-' +
                                 String(currentDate.getDate()).padStart(2, '0');

                dayButton.addEventListener('click', function() {
                    document.querySelectorAll('.day-button.selected').forEach(btn => {
                        btn.classList.remove('selected');
                    });

                    this.classList.add('selected');
                    selectedDayValue = dateString;
                });

                dayGrid.appendChild(dayButton);
            }
        }

        document.addEventListener('click', function(event) {
            if (event.target.classList.contains('month-selector')) {
                const month = event.target.getAttribute('data-month');
                currentDisplayMonth = month;

                document.querySelectorAll('.month-selector').forEach(btn => {
                    btn.classList.remove('btn-primary');
                    btn.classList.add('btn-outline-secondary');
                });
                event.target.classList.remove('btn-outline-secondary');
                event.target.classList.add('btn-primary');

                updateDayGrid();
            }
        });

        document.addEventListener('click', function(event) {
            if (event.target.id === 'confirmDaySelection') {
                if (selectedDayValue) {
                    @this.call('selectDay', selectedDayValue);
                }
            }
        });

        document.addEventListener('click', function(event) {
            const dayPicker = document.querySelector('.day-picker-dropdown');
            const dayPickerContainer = document.querySelector('.day-picker-container');

            if (dayPicker && dayPickerContainer && !dayPickerContainer.contains(event.target)) {
                @this.set('showDayPicker', false);
            }
        });

        document.addEventListener('livewire:updated', function() {
            const dayPicker = document.querySelector('.day-picker-dropdown');
            if (dayPicker) {
                initializeDayPicker();
            }
        });

        function closeSelect2Dropdowns() {
            $('.filterCausals').each(function() {
                if ($(this).hasClass('select2-hidden-accessible')) {
                    $(this).select2('close');
                }
            });
            $('.filterMember').each(function() {
                if ($(this).hasClass('select2-hidden-accessible')) {
                    $(this).select2('close');
                }
            });
        }

        function load() {
            $(document).ready(function(){
                $(document).on("keypress", $('.filterCausals'), function (e) {
                    setTimeout(() => {
                        $(".select2-results__option").each(function(){
                            var txt = $(this).html();
                            var count = (txt.match(/-/g) || []).length;
                            $(this).addClass('paddingLeftSelect' + count);
                        });
                    }, 100);
                });

                if (!$('.filterCausals').hasClass('select2-hidden-accessible')) {
                    $('.filterCausals').select2({
                        "language": {"noResults": function(){return "Nessun risultato";}},
                        "dropdownParent": $('body'),
                        "width": "100%"
                    });
                }

                $('.filterCausals').off('change.customHandler').on('change.customHandler', function (e) {
                    var data = $('.filterCausals').select2("val");
                    @this.set('filterCausals', data);
                });

                $('.filterCausals').off('select2:open.customHandler').on('select2:open.customHandler', function (e) {
                    if ($('#causalsModal').hasClass('show')) {
                        $('#causalsModal').modal('hide');
                    }

                    setTimeout(() => {
                        $(".select2-results__option").each(function(){
                            var txt = $(this).html();
                            var count = (txt.match(/-/g) || []).length;
                            $(this).addClass('paddingLeftSelect' + count);
                        });
                    }, 100);
                });

                if (!$('.filterMember').hasClass('select2-hidden-accessible')) {
                    $('.filterMember').select2({
                        "language": {"noResults": function(){return "Nessun risultato";}},
                        "dropdownParent": $('body'),
                        "width": "100%"
                    });
                }

                $('.filterMember').off('change.customHandler').on('change.customHandler', function (e) {
                    var data = $('.filterMember').select2("val");
                    @this.set('filterMember', data);
                });

                $('.filterMember').off('select2:open.customHandler').on('select2:open.customHandler', function (e) {
                    if ($('#causalsModal').hasClass('show')) {
                        $('#causalsModal').modal('hide');
                    }
                });
            });
        }

        function printData() {
            var divToPrint = document.getElementById("tablesaw-350");
            newWin = window.open("");
            var htmlToPrint = '' +
                '<style type="text/css">' +
                'table th, table td {' +
                'border:1px solid #000;' +
                'padding:0.5em;' +
                '}' +
                '</style>';
            htmlToPrint += divToPrint.outerHTML;
            newWin.document.write(htmlToPrint);
            newWin.document.close();
            newWin.print();
            newWin.close();
        }

        function scrollFunction() {
            const element = document.getElementById('resume-table');
            const mybuttonBottom = document.getElementById("btn-back-to-bottom");
            const mybutton = document.getElementById("btn-back-to-top");

            if (element.scrollTop > 20) {
                mybutton.style.display = "block";
                mybuttonBottom.style.display = "block";
            } else {
                mybutton.style.display = "none";
                mybuttonBottom.style.display = "none";
            }
        }

        function backToTop() {
            $('#resume-table').scrollTop(0);
        }

        function backToBottom() {
            $('#resume-table').scrollTop($('#resume-table')[0].scrollHeight);
        }

        $(document).ready(function() {
            load();

            document.querySelector("#print").addEventListener("click", function(){
                printData();
            });

            const element = document.getElementById('resume-table');
            element.onscroll = scrollFunction;

            const mybuttonBottom = document.getElementById("btn-back-to-bottom");
            const mybutton = document.getElementById("btn-back-to-top");

            mybutton.addEventListener("click", backToTop);
            mybuttonBottom.addEventListener("click", backToBottom);

            $(document).on('click', '.varie-link', function(e) {
                e.preventDefault();
                e.stopPropagation();

                closeSelect2Dropdowns();

                const causalsData = $(this).data('causals');

                if (causalsData) {
                    const causals = causalsData.split('|');

                    $('#causalsList').empty();

                    causals.forEach(function(causal) {
                        if (causal.trim()) {
                            if (causal.includes(':::')) {
                                const parts = causal.split(':::');
                                const causalName = parts[0].trim();
                                const amount = parts[1].trim();

                                $('#causalsList').append(
                                    '<li class="list-group-item d-flex justify-content-between align-items-center">' +
                                    '<div>' +
                                    '<i class="fas fa-tags me-2" style="color: #0C6197;"></i>' +
                                    causalName +
                                    '</div>' +
                                    '<span class="badge bg-primary rounded-pill" style="background-color: #0C6197 !important;">' +
                                    amount +
                                    '</span>' +
                                    '</li>'
                                );
                            } else {
                                $('#causalsList').append(
                                    '<li class="list-group-item">' +
                                    '<i class="fas fa-tags me-2" style="color: #0C6197;"></i>' +
                                    causal.trim() +
                                    '</li>'
                                );
                            }
                        }
                    });

                    $('#causalsModal').modal('show');

                    $('#causalsModal').on('shown.bs.modal', function () {
                        $(this).find('.btn-close').focus();
                    });
                }
            });
        });
        Livewire.on('load-table', () => {
            load();
        });

        Livewire.on('load-select', () => {
            load();
        });

        Livewire.on('filters-reset', () => {
            $('.filterMember').val('').trigger('change');
            $('.filterCausals').val('').trigger('change');
            load();
        });

        Livewire.on('show-export-modal', () => {
            $('#exportModal').modal('show');
        });

        Livewire.on('hide-export-modal', () => {
            $('#exportModal').modal('hide');
        });

        function showToast(type, message, duration = 5000) {
            const toastContainer = document.querySelector('.toast-container');
            if (!toastContainer) {
                console.error('Toast container not found');
                return;
            }

            const toastId = 'toast-' + Date.now();

            const toastColors = {
                success: 'bg-success',
                error: 'bg-danger',
                warning: 'bg-warning',
                info: 'bg-info'
            };

            const toastIcons = {
                success: 'fa-check-circle',
                error: 'fa-exclamation-circle',
                warning: 'fa-exclamation-triangle',
                info: 'fa-info-circle'
            };

            const toast = document.createElement('div');
            toast.id = toastId;
            toast.className = `toast align-items-center text-white ${toastColors[type]} border-0`;
            toast.setAttribute('role', 'alert');
            toast.innerHTML = `
                <div class="d-flex">
                    <div class="toast-body">
                        <i class="fas ${toastIcons[type]} me-2"></i>
                        ${message}
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
                </div>
            `;

            toastContainer.appendChild(toast);

            if (typeof bootstrap !== 'undefined') {
                const bsToast = new bootstrap.Toast(toast, { delay: duration });
                bsToast.show();

                toast.addEventListener('hidden.bs.toast', function() {
                    if (toastContainer.contains(toast)) {
                        toastContainer.removeChild(toast);
                    }
                });

                return bsToast;
            } else {
                toast.style.display = 'block';
                setTimeout(() => {
                    if (toastContainer.contains(toast)) {
                        toastContainer.removeChild(toast);
                    }
                }, duration);
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            const sendViaEmailCheckbox = document.getElementById('sendViaEmail');
            const emailAddressRow = document.getElementById('emailAddressRow');
            const emailSubjectRow = document.getElementById('emailSubjectRow');
            const emailProcessingInfo = document.getElementById('emailProcessingInfo');
            const exportIcon = document.getElementById('exportIcon');
            const exportButtonText = document.getElementById('exportButtonText');
            const emailInput = document.getElementById('exportEmailAddress');

            function toggleEmailFields() {
                if (sendViaEmailCheckbox && sendViaEmailCheckbox.checked) {
                    if (emailAddressRow) {
                        emailAddressRow.style.display = 'block';
                        emailAddressRow.classList.add('show');
                    }
                    if (emailSubjectRow) {
                        emailSubjectRow.style.display = 'block';
                        emailSubjectRow.classList.add('show');
                    }
                    if (emailProcessingInfo) {
                        emailProcessingInfo.style.display = 'list-item';
                    }

                    if (exportIcon) exportIcon.className = 'fas fa-paper-plane me-1';
                    if (exportButtonText) exportButtonText.textContent = 'INVIA EMAIL';
                } else {
                    if (emailAddressRow) {
                        emailAddressRow.style.display = 'none';
                        emailAddressRow.classList.remove('show');
                    }
                    if (emailSubjectRow) {
                        emailSubjectRow.style.display = 'none';
                        emailSubjectRow.classList.remove('show');
                    }
                    if (emailProcessingInfo) {
                        emailProcessingInfo.style.display = 'none';
                    }

                    if (exportIcon) exportIcon.className = 'fas fa-download me-1';
                    if (exportButtonText) exportButtonText.textContent = 'ESPORTA';
                }
            }

            function validateEmail(email) {
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                return emailRegex.test(email);
            }

            if (sendViaEmailCheckbox) {
                sendViaEmailCheckbox.addEventListener('change', toggleEmailFields);
            }

            if (emailInput) {
                emailInput.addEventListener('blur', function() {
                    if (sendViaEmailCheckbox && sendViaEmailCheckbox.checked && this.value) {
                        if (validateEmail(this.value)) {
                            this.classList.remove('is-invalid');
                            this.classList.add('is-valid');
                        } else {
                            this.classList.remove('is-valid');
                            this.classList.add('is-invalid');
                        }
                    }
                });

                emailInput.addEventListener('input', function() {
                    this.classList.remove('is-invalid', 'is-valid');
                });
            }

            if (typeof $ !== 'undefined') {
                $('#exportModal').on('shown.bs.modal', function() {
                    toggleEmailFields();
                });
            }
        });

        document.addEventListener('livewire:load', function () {
            console.log('Livewire loaded, setting up export event listeners');

            Livewire.on('export-email-queued', function() {
                console.log('Export email queued event received');
                showToast('info',
                    '<strong>Export avviato!</strong><br>' +
                    'L\'elaborazione è in corso in background. Riceverai l\'email a breve.',
                    8000
                );
            });

            Livewire.on('export-email-sent', function() {
                console.log('Export email sent event received');
                showToast('success',
                    '<strong>Email inviata!</strong><br>' +
                    'L\'export è stato completato e inviato alla tua email.',
                    6000
                );
            });

            Livewire.on('export-email-error', function(message) {
                console.log('Export email error event received:', message);
                showToast('error',
                    '<strong>Errore nell\'export:</strong><br>' +
                    (message || 'Si è verificato un errore durante l\'elaborazione.'),
                    10000
                );
            });

            Livewire.on('show-export-modal', function() {
                console.log('Show export modal event received');
                if (typeof $ !== 'undefined') {
                    $('#exportModal').modal('show');
                }
            });

            Livewire.on('hide-export-modal', function() {
                console.log('Hide export modal event received');
                if (typeof $ !== 'undefined') {
                    $('#exportModal').modal('hide');
                }
            });
        });

        if (typeof Livewire !== 'undefined') {
            document.addEventListener('livewire:initialized', function () {
                console.log('Livewire initialized, setting up export event listeners');

                Livewire.on('export-email-queued', function() {
                    showToast('info',
                        '<strong>Export avviato!</strong><br>' +
                        'L\'elaborazione è in corso in background. Riceverai l\'email a breve.',
                        8000
                    );
                });

                Livewire.on('export-email-sent', function() {
                    showToast('success',
                        '<strong>Email inviata!</strong><br>' +
                        'L\'export è stato completato e inviato alla tua email.',
                        6000
                    );
                });

                Livewire.on('export-email-error', function(message) {
                    showToast('error',
                        '<strong>Errore nell\'export:</strong><br>' +
                        (message || 'Si è verificato un errore durante l\'elaborazione.'),
                        10000
                    );
                });

                Livewire.on('show-export-modal', function() {
                    if (typeof $ !== 'undefined') {
                        $('#exportModal').modal('show');
                    }
                });

                Livewire.on('hide-export-modal', function() {
                    if (typeof $ !== 'undefined') {
                        $('#exportModal').modal('hide');
                    }
                });
            });
        }

        window.addEventListener('load', function() {
            if (typeof showToast === 'function') {
                console.log('showToast function is available globally');
            } else {
                console.error('showToast function is not available globally');
            }
        });


        function handleExportClick() {
            showExportLoading();

            @this.call('exportData');
            //@this.call('exportWithDateRange');
        }

        function showExportLoading() {
            document.getElementById('normalState').style.display = 'none';
            document.getElementById('loadingState').style.display = 'inline-flex';
            document.getElementById('exportButton').disabled = true;
        }

        function hideExportLoading() {
            document.getElementById('normalState').style.display = 'inline-flex';
            document.getElementById('loadingState').style.display = 'none';
            document.getElementById('exportButton').disabled = false;
        }

        Livewire.on('export-complete', function() {
            hideExportLoading();
        });

        Livewire.on('hide-export-modal', function() {
            hideExportLoading();
        });

        function setupSimpleExportListeners() {
            if (typeof Livewire !== 'undefined') {
                Livewire.on('export-email-queued', function() {
                    setTimeout(() => {
                        hideExportLoading();
                        $('#exportModal').modal('hide');

                        showToast('success',
                            '<i class="fas fa-paper-plane me-2"></i>' +
                            '<strong>Export avviato!</strong><br>' +
                            'Riceverai l\'email a breve.',
                            6000
                        );
                    }, 1500);
                });

                Livewire.on('export-complete', function() {
                    hideExportLoading();
                });

                Livewire.on('hide-export-modal', function() {
                    hideExportLoading();
                    $('#exportModal').modal('hide');
                });
            }
        }
        document.addEventListener('DOMContentLoaded', function() {
            document.addEventListener('click', function(event) {
                const monthPicker = document.querySelector('.month-picker-dropdown');
                const monthPickerContainer = document.querySelector('.month-picker-container');

                if (monthPicker && monthPickerContainer && !monthPickerContainer.contains(event.target)) {
                    if (typeof @this !== 'undefined') {
                        @this.set('showMonthPicker', false);
                    }
                }
            });

            document.addEventListener('keydown', function(event) {
                if (event.key === 'Escape') {
                    if (typeof @this !== 'undefined') {
                        @this.set('showMonthPicker', false);
                    }
                }
            });

            document.addEventListener('click', function(event) {
                const monthPickerDropdown = event.target.closest('.month-picker-dropdown');
                if (monthPickerDropdown) {
                    event.stopPropagation();
                }
            });
        });

        function resetFiltersWithMonthPicker() {
            $('.filterMember').val('').trigger('change');
            $('.filterCausals').val('').trigger('change');

            if (typeof @this !== 'undefined') {
                @this.call('resetFilters');
            }

            load();
        }

        if (typeof Livewire !== 'undefined') {
            Livewire.on('filters-applied', function() {
                console.log('Filters applied with month picker');
            });

            Livewire.on('filters-reset', function() {
                console.log('Filters reset including month picker');
                load();
            });
        }

        function initializeMonthPicker() {
            const monthPickerDropdown = document.querySelector('.month-picker-dropdown');
            if (monthPickerDropdown) {
                monthPickerDropdown.style.opacity = '0';
                monthPickerDropdown.style.transform = 'translateY(-10px)';

                setTimeout(() => {
                    monthPickerDropdown.style.transition = 'all 0.2s ease-out';
                    monthPickerDropdown.style.opacity = '1';
                    monthPickerDropdown.style.transform = 'translateY(0)';
                }, 10);
            }
        }

        document.addEventListener('livewire:updated', function() {
            initializeMonthPicker();
        });
    </script>
@endpush