|
|
@@ -0,0 +1,1972 @@
|
|
|
+
|
|
|
+<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" style="border-left:3px solid white;">Causale</th>
|
|
|
+ <th scope="col" style="border-left:3px solid white;">Dettaglio Causale</th>
|
|
|
+ <th scope="col" style="border-left:3px solid white;">Stato</th>
|
|
|
+ <th scope="col" style="border-left:3px solid white;">Nominativo</th>
|
|
|
+ @foreach($payments as $p)
|
|
|
+ <th colspan="2" scope="col" style="text-align:center; border-left:3px solid white;">{{$p->name}}</th>
|
|
|
+ @endforeach
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th scope="col"></th>
|
|
|
+ <th scope="col" style="border-left:3px solid white;"></th>
|
|
|
+ <th scope="col" style="border-left:3px solid white;"></th>
|
|
|
+ <th scope="col" style="border-left:3px solid white;"></th>
|
|
|
+ <th scope="col" style="border-left:3px solid white;"></th>
|
|
|
+ @foreach($payments as $p)
|
|
|
+ @if($p->type == 'ALL')
|
|
|
+ <th scope="col" style="text-align:center; border-left:3px solid white;">Entrate</th>
|
|
|
+ <th scope="col" style="text-align:center">Uscite</th>
|
|
|
+ @elseif($p->type == 'IN')
|
|
|
+ <th scope="col" style="text-align:center; border-left:3px solid white;">Entrate</th>
|
|
|
+ <th scope="col" style="text-align:center;"></th>
|
|
|
+ @elseif($p->type == 'OUT')
|
|
|
+ <th style="border-left:3px solid white;"></th>
|
|
|
+ <th scope="col" style="text-align:center;">Uscite</th>
|
|
|
+ @endif
|
|
|
+ @endforeach
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody id="checkall-target">
|
|
|
+ @php $count = 0; @endphp
|
|
|
+ @foreach($records as $causal => $record)
|
|
|
+ <tr>
|
|
|
+ @php
|
|
|
+ $parts = explode("§", $causal);
|
|
|
+ $d = $parts[0] ?? '';
|
|
|
+ $c = $parts[1] ?? '';
|
|
|
+ $n = $parts[2] ?? '';
|
|
|
+ $det = $parts[3] ?? '';
|
|
|
+ $del = $parts[4] ?? '';
|
|
|
+
|
|
|
+ $detailParts = explode('|', $det);
|
|
|
+ $isMultiple = count($detailParts) > 1;
|
|
|
+ $displayDetail = $isMultiple ? 'Varie' : $det;
|
|
|
+ @endphp
|
|
|
+ <td style="background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">{{date("d/m/Y", strtotime($d))}}</td>
|
|
|
+ <td style="border-left:3px solid white !important;background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">{{$c}}</td>
|
|
|
+ <td style="border-left:3px solid white !important;background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">
|
|
|
+ @if($isMultiple)
|
|
|
+ <span class="varie-link" data-causals="{{implode('|', array_slice($detailParts, 1))}}" style="color: #0C6197; cursor: pointer; text-decoration: underline;">
|
|
|
+ {{$displayDetail}}
|
|
|
+ </span>
|
|
|
+ @else
|
|
|
+ {{$displayDetail}}
|
|
|
+ @endif
|
|
|
+ </td>
|
|
|
+ <td style="border-left:3px solid white !important;background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">
|
|
|
+ @if($del == 'DELETED')
|
|
|
+ <span style='color:red'>Annullata</span>
|
|
|
+ @endif
|
|
|
+ </td>
|
|
|
+ <td style="border-left:3px solid white !important;background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">{{$n}}</td>
|
|
|
+ @foreach($payments as $p)
|
|
|
+ @if(isset($record[$p->name]))
|
|
|
+ <td style="text-align:right; border-left:3px solid white !important;background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">
|
|
|
+ @if(isset($record[$p->name]["IN"]))
|
|
|
+ <span class="tablesaw-cell-content " style="color:green">{{formatPrice($record[$p->name]["IN"])}}</span>
|
|
|
+ @endif
|
|
|
+ </td>
|
|
|
+ <td style="text-align:right;background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">
|
|
|
+ @if(isset($record[$p->name]["OUT"]))
|
|
|
+ <span class="tablesaw-cell-content " style="color:red">{{formatPrice($record[$p->name]["OUT"])}}</span>
|
|
|
+ @endif
|
|
|
+ </td>
|
|
|
+ @else
|
|
|
+ <td style="border-left:3px solid white !important;background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}"></td>
|
|
|
+ <td style="background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}"></td>
|
|
|
+ @endif
|
|
|
+ @endforeach
|
|
|
+ </tr>
|
|
|
+ @php $count++; @endphp
|
|
|
+ @endforeach
|
|
|
+ </tbody>
|
|
|
+ <tfoot>
|
|
|
+ <tr>
|
|
|
+ <td></td>
|
|
|
+ <td></td>
|
|
|
+ <td></td>
|
|
|
+ <td></td>
|
|
|
+ <td><b>Totale</b></td>
|
|
|
+ @foreach($payments as $p)
|
|
|
+ @if(isset($totals[$p->name]))
|
|
|
+ @if($p->type == 'ALL')
|
|
|
+ <td style="text-align:right"><span class="tablesaw-cell-content primary" style="color:green; font-size:18px;"><b>{{formatPrice(isset($totals[$p->name]) ? $totals[$p->name]["IN"] : 0)}}</b></span></td>
|
|
|
+ <td style="text-align:right"><span class="tablesaw-cell-content primary" style="color:red; font-size:18px;"><b>{{formatPrice(isset($totals[$p->name]) ? $totals[$p->name]["OUT"] : 0)}}</b></span></td>
|
|
|
+ @elseif($p->type == 'IN')
|
|
|
+ <td style="text-align:right"><span class="tablesaw-cell-content primary" style="color:green; font-size:18px;"><b>{{formatPrice(isset($totals[$p->name]) ? $totals[$p->name]["IN"] : 0)}}</b></span></td>
|
|
|
+ <td style="text-align:right"><span class="tablesaw-cell-content primary" style="color:red; font-size:18px;"><b> </b></span></td>
|
|
|
+
|
|
|
+ @elseif($p->type == 'OUT')
|
|
|
+ <td style="text-align:right"><span class="tablesaw-cell-content primary" style="color:green; font-size:18px;"><b> </b></span></td>
|
|
|
+ <td style="text-align:right"><span class="tablesaw-cell-content primary" style="color:red; font-size:18px;"><b>{{formatPrice(isset($totals[$p->name]) ? $totals[$p->name]["OUT"] : 0)}}</b></span></td>
|
|
|
+ @endif
|
|
|
+ @else
|
|
|
+ @if($p->type == 'ALL')
|
|
|
+
|
|
|
+ <td style="text-align:right"><span class="tablesaw-cell-content primary" style="color:green; font-size:18px;"><b>{{formatPrice(isset($totals[$p->name]) ? $totals[$p->name]["IN"] : 0)}}</b></span></td>
|
|
|
+ <td style="text-align:right"><span class="tablesaw-cell-content primary" style="color:red; font-size:18px;"><b>{{formatPrice(isset($totals[$p->name]) ? $totals[$p->name]["OUT"] : 0)}}</b></span></td>
|
|
|
+ @elseif($p->type == 'IN')
|
|
|
+ <td style="text-align:right"><span class="tablesaw-cell-content primary" style="color:green; font-size:18px;"><b>{{formatPrice(isset($totals[$p->name]) ? $totals[$p->name]["IN"] : 0)}}</b></span></td>
|
|
|
+ <td style="text-align:center"><span class="tablesaw-cell-content primary" style="color:red; font-size:18px;"><b> </b></span></td>
|
|
|
+ @elseif($p->type == 'OUT')
|
|
|
+ <td style="text-align:right"><span class="tablesaw-cell-content primary" style="color:green; font-size:18px;"><b> </b></span></td>
|
|
|
+ <td style="text-align:center"><span class="tablesaw-cell-content primary" style="color:red; font-size:18px;"><b>{{formatPrice(isset($totals[$p->name]) ? $totals[$p->name]["OUT"] : 0)}}</b></span></td>
|
|
|
+
|
|
|
+ @endif
|
|
|
+ @endif
|
|
|
+ @endforeach
|
|
|
+ </tr>
|
|
|
+ <tr style="display:none">
|
|
|
+ <td></td>
|
|
|
+ <td><b>Differenza</b></td>
|
|
|
+ @foreach($payments as $p)
|
|
|
+ @if(isset($totals[$p->name]))
|
|
|
+ @php
|
|
|
+ $diff = $totals[$p->name]["IN"] - $totals[$p->name]["OUT"];
|
|
|
+ @endphp
|
|
|
+ @if($diff < 0)
|
|
|
+ <td></td>
|
|
|
+ @endif
|
|
|
+ <td style="text-align:right"><span class="tablesaw-cell-content primary" style="color:{{$diff > 0 ? 'green' : 'red'}}; font-size:18px;"><b>{{formatPrice($diff)}}</b></span></td>
|
|
|
+ @if($diff > 0)
|
|
|
+ <td></td>
|
|
|
+ @endif
|
|
|
+ @else
|
|
|
+ <td colspan="2" style="text-align:right"><b>{{formatPrice(0)}}</b></td>
|
|
|
+ @endif
|
|
|
+ @endforeach
|
|
|
+ </tr>
|
|
|
+ </tfoot>
|
|
|
+ </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('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
|
Luca Parisio