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

<div class="col">
    <div class="row h-100">

    <div class="col-auto filterWrapper" id="filter--section" wire:ignore.self>
        <aside>

            <header>
                <h2>Filtra Ricerca</h2>
            </header>

            <form action="" id="filter--form" class="dark-form row">
                <div class="filter--item">
                    <span class="filter--item_title">Tipologia</span>

                    <div class="filter--item_formElement">
                        <div class="form-check form-check-inline d-inline-flex align-items-center">
                            <input class="form-check-input" type="radio" value="0" id="all_commercial" wire:model="filterCommercial">
                            <label class="form-check-label ms-2" for="inlineCheckbox1">Entrambe</label>
                        </div>
                        <div class="form-check form-check-inline d-inline-flex align-items-center">
                            <input class="form-check-input" type="radio" value="1" id="commercial" wire:model="filterCommercial">
                            <label class="form-check-label ms-2" for="inlineCheckbox1">Commerciale</label>
                        </div>
                        <div class="form-check form-check-inline d-inline-flex align-items-center">
                            <input class="form-check-input" type="radio" value="2" id="not_commercial" wire:model="filterCommercial">
                            <label class="form-check-label ms-2" for="inlineCheckbox1">Non commerciale</label>
                        </div>
                    </div>
                </div>
                <!-- filter item -->

                <div class="filter--item">
                    <span class="filter--item_title">Persona</span>

                    <div class="filter--item_formElement">
                        <select name="search_member_id" class="form-select filterMember" wire:model="filterMember">
                            <option value="">
                            @foreach($members as $member)
                                <option value="{{$member->id}}">{{$member->last_name}} {{$member->first_name}}
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="filter--item">
                    <span class="filter--item_title">Pagamento</span>

                    <div class="filter--item_formElement">
                        <select name="search_payment_method_id" class="form-select filterPaymentMethod"  wire:model="filterPaymentMethod">
                            <option value="">
                            @foreach($payments as $payment)
                                <option value="{{$payment->id}}">{{$payment->name}}
                            @endforeach
                        </select>
                    </div>
                </div>
                <!-- filter item -->

                <div class="filter--item">
                    <span class="filter--item_title">Causali</span>

                    <div class="filter--item_formElement">
                        <select name="search_causal_id[]" class="form-select filterCausals" multiple="multiple" wire:model="filterCausals">
                            <option value="">
                            @foreach($causals as $causal)
                                <option value="{{$causal["id"]}}">{!!$causal["name"]!!}
                            @endforeach
                        </select>

                    </div>
                </div>
                <!-- filter item -->

                <div class="filter--item">
                    <span class="filter--item_title">Periodo </span>
                    <div class="filter--item_formElement">
                        <input id="date" type="date" class="form-control"  wire:model="filterFrom" style="background-color:white">
                    </div>
                    <div class="filter--item_formElement">
                        <input id="date" type="date" class="form-control"  wire:model="filterTo" style="background-color:white">
                    </div>

                </div>
                <!-- filter item -->
                <!--
                <div class="filter--item">
                    <span class="filter--item_title">Modalità di Pagamento</span>

                    <div class="filter--item_formElement row">
                        <div class="col-6">
                            <div class="form-check form-check-inline d-inline-flex align-items-center">
                                <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
                                <label class="form-check-label ms-2" for="inlineCheckbox1">Contanti</label>
                            </div>
                            <div class="form-check form-check-inline d-inline-flex align-items-center">
                                <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option2">
                                <label class="form-check-label ms-2" for="inlineCheckbox1">Borsellino</label>
                            </div>
                            <div class="form-check form-check-inline d-inline-flex align-items-center">
                                <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option3">
                                <label class="form-check-label ms-2" for="inlineCheckbox1">Bonifico</label>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-check form-check-inline d-inline-flex align-items-center">
                                <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option4">
                                <label class="form-check-label ms-2" for="inlineCheckbox1">POS</label>
                            </div>
                            <div class="form-check form-check-inline d-inline-flex align-items-center">
                                <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option5">
                                <label class="form-check-label ms-2" for="inlineCheckbox1">Playtomic</label>
                            </div>
                            <div class="form-check form-check-inline d-inline-flex align-items-center">
                                <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option6">
                                <label class="form-check-label ms-2" for="inlineCheckbox1">Assegno</label>
                            </div>
                        </div>
                    </div>

                </div>
                -->
                <!-- filter item -->

            </form>

            <footer>
                @if($hasFilter)
                    <div class="d-flex align-items-center">
                        Totale&nbsp;:&nbsp;<b>{{formatPrice($total)}}</b>
                    </div>
                @endif
                <div class="filter--buttons d-flex align-items-center justify-content-between">
                    <button class="btn--ui small dark disable" wire:click.prevent="disableSearch()">cancella</button>
                    <button class="btn--ui small white" wire:click.prevent="search()">filtra</button>
                </div>
            </footer>


        </aside>
    </div>

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

            @if(!$add && !$update)


                <header id="title--section" 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">@if(!$add && !$update)Elenco Entrate @else Inserimento/modifica entrata @endif</h2>
                    </div>

                    @if(!$add && !$update)
                        <div class="title--section_addButton" wire:click="add()" style="cursor: pointer;">
                            <div class="card--ui card--ui_btnAddHeaderUser entrata d-flex justify-items-between">
                                <header class="d-flex justify-content-between"><div class="card-title d-flex align-items-start"><h2><small>Registra</small><br>Nuova Entrata</h2></div><a href="#" wire:click="add()"><i class="ico--ui big add primary"></i></a></header>
                            </div>
                        </div>
                    @endif

                </header>

                <button id="open-filter" onclick="pcsh1()"></button>
                <button id="close-filter" onclick="pcsh2()"></button>

                <section id="subheader" class="d-flex align-items-center justify-content-between">
                    <form action="" class="group--action d-flex align-items-center">
                            <select class="form-select form-select-lg me-1" aria-label=".form-select-lg example" wire:model="multipleAction">
                                <option selected>Azione multipla</option>
                                <option value="delete">Elimina</option>
                                </select>
                                <button type="submit" class="btn--ui" wire:click.prevent="executeMultipleAction()">applica</button>
                            </form>

                    <form action="" class="compare--form d-flex align-items-center">
                        <select class="form-select form-select-lg me-1" aria-label=".form-select-lg example" wire:model="selectedFilter">
                            <option value="">--Seleziona--</option>
                            <option value="0">Oggi</option>
                            <option value="1">Questo mese: <span class="date-range">{{date("01/m/Y")}} - {{date("t/m/Y")}}</span></option>
                            <option value="2">Questo anno: <span class="date-range">{{date("01/01/Y")}} - {{date("31/12/Y")}}</span></option>
                            <option value="3">Tutte</option>
                            </select>
                        </form>
                </section>


                <section id="resume-table">
                    <div class="compare--chart_wrapper d-none"></div>

                    <table class="table tablesaw tablesaw-stack" data-tablesaw="" id="tablesaw-350">
                        <thead>
                            <tr>
                                <th scope="col"></th>
                                <th scope="col" wire:click.prevent="sortBy('date')" style="cursor:pointer">Data pagamento&nbsp;&nbsp;&nbsp;<i class="fa fa-sort"></i></th>
                                <th scope="col">Importo</th>
                                <th scope="col" wire:click.prevent="sortBy('first_name')" style="cursor:pointer">Nome&nbsp;&nbsp;&nbsp;<i class="fa fa-sort"></i></th>
                                <th scope="col" wire:click.prevent="sortBy('last_name')" style="cursor:pointer">Cognome&nbsp;&nbsp;&nbsp;<i class="fa fa-sort"></i></th>
                                <th scope="col">Causale</th>
                                <th scope="col" wire:click.prevent="sortBy('payment')" style="cursor:pointer">Pagamento&nbsp;&nbsp;&nbsp;<i class="fa fa-sort"></i></th>

                                <th scope="col">...</th>
                            </tr>
                        </thead>
                        <tbody id="checkall-target">
                            @foreach($datas as $record)
                                <tr>
                                    <td> <label><input class="table-check" type="checkbox" wire:model="multipleIds" value="{{$record->id}}"><span class="sr-only d-inline-block d-lg-none ms-2 mobile-row-selector"> Seleziona riga</span></label></td>
                                    <td>{{date("d/m/Y", strtotime($record->date))}}</td>
                                    <td><span class="tablesaw-cell-content primary">{{formatPrice($record->getTotal())}}</span></td>
                                    <td>
                                        {{$record->first_name}}
                                    </td>
                                    <td>
                                        {{$record->last_name}}
                                    </td>
                                    <td>
                                        @foreach($record->rows as $row)
                                            {{$row->causal->getTree()}}<br>
                                        @endforeach
                                    </td>
                                    <td>{{$record->payment_method->name}}</td>

                                    <td>
                                        <button type="button" class="btn btn-outline-primary btn-sm" wire:click="edit({{ $record->id }})">Modifica</button>
                                        <button type="button" class="btn btn-outline-danger btn-sm" onclick="confirm('Sei sicuro?') || event.stopImmediatePropagation()" wire:click="delete({{ $record->id }})">Elimina</button>
                                        <button type="button" class="btn btn-outline-default btn-sm" wire:click="duplicate({{ $record->id }})">Duplica</button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    {{ $datas->links() }}

                    <!--
                    <div class="paginator d-flex justify-content-center">
                        <nav aria-label="Page navigation example">
                            <ul class="pagination">
                                <li class="page-item">
                                <a class="page-link" href="#" aria-label="Previous">
                                    <span aria-hidden="true"></span>
                                </a>
                                </li>
                                <li class="page-item"><a class="page-link" href="#">1</a></li>
                                <li class="page-item"><a class="page-link" href="#">2</a></li>
                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                <li class="page-item"><a class="page-link" href="#">3</a></li>

                                <li class="page-item"><span class="more-page">...</span></li>

                                <li class="page-item">
                                <a class="page-link" href="#" aria-label="Next">
                                    <span aria-hidden="true"></span>
                                </a>
                                </li>
                            </ul>
                            </nav>
                    </div>
                    -->
                </section>

            @else

                @if (session()->has('error'))
                    <div class="alert alert-danger" role="alert">
                        {{ session()->get('error') }}
                    </div>
                @endif

                <header id="title--section" 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 entrate me-2"></i>
                        <h2 class="primary">{{$add ? 'Nuova' : 'Modifica'}} Entrata</h2>
                    </div>
                </header>

                <section id="accountingEntry" class="d-flex">
                    <div class="accountingEntry_data" wire:key='reload-{{$selectId}}'>
                        <form class="form--accounting" >

                                <div class="row gx-2">
                                    <div class="col-md-6">
                                        <span class="title-form d-block w-100">Data pagamento</span>
                                        <div class="input-group mb-3">
                                            <input id="date" type="date" class="form-control"  wire:model="date">
                                        </div>
                                    </div>
                                    <div class="col-md-6">&nbsp;</div>
                                    <div class="col-md-6">
                                        <span class="title-form d-block w-100">Persona</span>
                                        <select name="member_id" class="form-select memberClass @error('member_id') is-invalid @enderror" aria-label="Seleziona una persona" wire:model="member_id">
                                            <option value="">
                                            @foreach($members as $member)
                                                <option value="{{$member->id}}">{{$member->last_name}} {{$member->first_name}} ({{$member->fiscal_code}})
                                            @endforeach
                                        </select>
                                        @error('member_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <br><br>
                                        <button type="button" class="btn--ui primary" data-bs-toggle="modal" data-bs-target="#userModal">
                                            Aggiungi
                                        </button>
                                    </div>
                                    <div class="col-md-6">
                                        @if($this->member)
                                            <b>{{$this->member->first_name}} {{$this->member->last_name}}</b> {!! !$this->member->isAdult() ? '<span style="color:red;font-weight:bold">&nbsp;MINORENNE</span>' : '' !!}<br>
                                            <span class="title-form w-100">Codice fiscale</span> : {{$this->member->fiscal_code}}<br>
                                            <span class="title-form w-100">Email</span> : {{$this->member->email}}<br>
                                            <span class="title-form w-100">Borsellino virtuale</span>
                                            <b>{{number_format($virtual, 2, ".", "")}} &euro;</b><br>
                                            @if(sizeof($this->member->certificates) > 0)
                                                @php
                                                $cert = $this->member->certificates[0]
                                                @endphp
                                                @if($cert->expire_date < date("Y-m-d"))
                                                    <span class="title-form w-100">Certificato medico </span><span class="badge tessera-badge suspended">scaduto</span>
                                                @endif
                                            @endif
                                        @endif
                                    </div>
                                </div>

                                <div class="row gx-2 mt-5">
                                    <span class="title-form d-block w-100">Pagamento</span>

                                    <div class="col-md-12" >

                                        <select name="payment_method_id" class="form-select paymentClass @error('payment_method_id') is-invalid @enderror" aria-label="Seleziona un metodo di pagamento" wire:model="payment_method_id" style="width:100%">
                                            <option value="">
                                            @foreach($payments as $payment)
                                                <option value="{{$payment->id}}">{{$payment->name}}
                                            @endforeach
                                        </select>
                                        @error('payment_method_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                @foreach($rows as $idx => $row)

                                    <div class="row gx-2 mt-5" wire:ignore>
                                        <span class="title-form d-block w-100">Causale</span>
                                        <div class="col-md-12">

                                            <livewire:causals :type="$typeIN" :idx="$idx" :causal_id="$rows[$idx]['causal_id']" :wire:key="$idx" />



                                            @if(false)
                                            <select name="rows.{{$idx}}.causal_id" class="form-select causalClass @error('row.' . $idx . '.causal_id') is-invalid @enderror" aria-label="Seleziona una causale" wire:model="rows.{{$idx}}.causal_id">
                                                    <option value="">
                                                    @foreach($causals as $causal)
                                                        <option value="{{$causal["id"]}}">{!!$causal["name"]!!}
                                                    @endforeach

                                            </select>
                                            @endif


                                            @error('causal_id')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="row gx-2 mt-5">
                                        <span class="title-form d-block w-100">Dettaglio causale</span>
                                        <div class="col-md-12">
                                            <input class="form-control " type="text" placeholder="Dettaglio causale" wire:model="rows.{{$idx}}.note">
                                        </div>
                                    </div>

                                    <div class="row gx-2 mt-5">
                                        <span class="title-form d-block w-100">Tipologia</span>
                                        <div class="col-md-12">

                                                <div class="check--invoice d-flex align-items-center">
                                                <div class="form-check me-3">
                                                    <input class="form-check-input" type="radio" value="1" id="rows.{{$idx}}.commercial" wire:model="rows.{{$idx}}.commercial">
                                                    <label class="form-check-label" for="flexCheckChecked">&nbsp;Commerciale</label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" value="0" id="rows.{{$idx}}.commercial"  wire:model="rows.{{$idx}}.commercial">
                                                    <label class="form-check-label" for="flexCheck">&nbsp;Non Commerciale</label>
                                                </div>
                                                </div>

                                        </div>
                                    </div>

                                    <div class="row gx-2 mt-5 align-items-center">
                                        <div class="col-md-6">
                                            <span class="total primary">Importo</span>
                                        </div>
                                        <div class="col-md-6">
                                            @if($add)
                                                <input type="text" class="form-control totalInput text-end @error('amount') is-invalid @enderror" id="rows.{{$idx}}.amount" wire:model="rows.{{$idx}}.amount" wire:keydown.enter="store(false)" onkeyup="onlyNumberAmount(this)" placeholder="€ 0,00">
                                            @endif
                                            @if($update)
                                                <input type="text" class="form-control totalInput text-end @error('amount') is-invalid @enderror" id="rows.{{$idx}}.amount" placeholder="€ 0,00" wire:model="rows.{{$idx}}.amount"  onkeyup="onlyNumberAmount(this)" wire:keydown.enter="update(false)">
                                            @endif
                                            @error('amount')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="row gx-2 mt-5 align-items-center">
                                        <div class="col-md-4">
                                            <span class="total primary">Competenza</span>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="row">
                                                @foreach($row["when"] as $xxx => $w)
                                                    <div class="col-md-5">
                                                        <span class="title-form d-block w-100">Mese</span>
                                                        <div class="input-group mb-3">
                                                            <select class="form-select form-select-lg me-1"  wire:model="rows.{{$idx}}.when.{{$xxx}}.month">
                                                                <option value="1">Gennaio</option>
                                                                <option value="2">Febbraio</option>
                                                                <option value="3">Marzo</option>
                                                                <option value="4">Aprile</option>
                                                                <option value="5">Maggio</option>
                                                                <option value="6">Giugno</option>
                                                                <option value="7">Luglio</option>
                                                                <option value="8">Agosto</option>
                                                                <option value="9">Settembre</option>
                                                                <option value="10">Ottobre</option>
                                                                <option value="11">Novembre</option>
                                                                <option value="12">Dicembre</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-5">
                                                        <span class="title-form d-block w-100">Anno</span>
                                                        <div class="input-group mb-3">
                                                            <input type="number" class="form-control"  wire:model="rows.{{$idx}}.when.{{$xxx}}.year" >
                                                        </div>
                                                    </div>
                                                    <div class="col-md-2"><br>
                                                        <button type="button" class="btn--ui primary" wire:click.prevent="delPeriod({{$idx}}, {{$xxx}})" style="float:right">
                                                            -
                                                        </button>
                                                    </div>
                                                @endforeach
                                                <button type="button" class="btn--ui primary" wire:click.prevent="addPeriod({{$idx}})">
                                                    Aggiungi periodo
                                                </button>
                                            </div>
                                        </div>
                                    </div>

                                    <br><br>
                                    <button type="button" class="btn--ui primary" wire:click.prevent="delRow({{$idx}})" style="float:right">
                                        Rimuovi causale
                                    </button>
                                    <br><br>
                                    <hr size="1">

                                @endforeach

                                <br>
                                <button type="button" class="btn--ui primary" wire:click.prevent="addRow()">
                                    Aggiungi causale
                                </button>


                                <div class="accountingEntry--btn d-flex align-items-center justify-content-between">
                                    <button class="btn--ui lightGrey"  type="submit" wire:click.prevent="cancel()">annulla</button>
                                    @if($canSave)
                                        @if($add)
                                            <button class="btn--ui primary"  type="submit" wire:click.prevent="store(false)">inserisci</button>
                                        @endif
                                        @if($update)
                                            <button class="btn--ui primary"  type="submit" wire:click.prevent="update(false)">salva</button>
                                        @endif
                                    @else
                                        <span style="color:red">Attenzione : non c'è credito sufficiente sul borsellino virtuale</span>
                                    @endif

                                </div>
                    </form>
                    </div>
                    <div class="accountingEntry_resume card--ui" style="max-height:800px;">
                        <header>
                            <div class="username d-flex align-items-start">
                                <i class="ico--ui accountingResume me-2"></i>
                                <div class="user--resume_name d-flex flex-column"><span class="primary">Ricevuta {{$currentReceip ? $currentReceip->number . "/" . $currentReceip->year : ''}}</span></div></div>
                        </header>

                        <div class="resume--body d-flex justify-content-between flex-column">
                            <header>
                                @if($this->member)
                                    <ul class="resume-item mb-4 p-0">

                                        @if($this->member->isAdult())
                                            <li>
                                                <span class="evidence_name">{{$this->member->last_name}} {{$this->member->first_name}}</span> ({{$this->member->fiscal_code}})
                                            </li>
                                            <li><span>Nato/a il {{$this->member->birth_date ? date("d/m/Y", strtotime($this->member->birth_date)) : ''}}</span></li>
                                        @else
                                            <li>
                                                <span class="evidence_name">{{$this->member->father_name != '' ? $this->member->father_name : $this->member->mother_name}}</span>
                                            </li>
                                        @endif

                                    </ul>
                                @endif
                                <ul class="resume-item date p-0">
                                    <li><strong>Data di Pagamento</strong></li>
                                    <li>{{ date("d/m/Y", strtotime($date)) }}</li>
                                </ul>

                                @if(sizeof($rows) > 0)
                                    <ul class="resume-item date p-0">
                                        <li><strong>Causale</strong></li>
                                        <li>
                                            @foreach($rows as $row)
                                                {{$this->getCausal($row["causal_id"])}} <span style="float:right"><b>{{$row["amount"]}}</b></span><br>
                                            @endforeach
                                        </li>
                                    </ul>
                                @endif

                            </header>

                            <footer>
                                <div class="total--wrapper">
                                    <div class="total--wrapper_amount d-flex align-items-center justify-content-between w-100 mb-3">
                                        <span class="amount_p"><strong>Importo</strong></span><span class="amount_data"><strong>{{$this->getTotal()}}</strong></span>
                                    </div>
                                    <!--<div class="total--wrapper_tax d-flex align-items-center justify-content-between w-100 mb-2 pb-3">
                                        <span class="taxt_p">Ritenuta d’acconto (20%):</span><span class="tax_data">€ 20,00</span>
                                    </div>-->
                                    <div class="total--wrapper_netprice d-flex align-items-center justify-content-between w-100">
                                        <span class="netprice_p"><strong>Totale Netto</strong></span><span class="netprice_data"><strong>{{$this->getTotal()}}</strong></span>
                                    </div>
                                </div>

                                @if($add)
                                    <button class="btn--ui primary sendInvoice mt-5 d-flex ms-auto" wire:click.prevent="store(true)"><i class="ico--ui sendingBtn"></i>inserisci e genera ricevuta</button>
                                @endif
                                @if($update)
                                    @if($currentReceip)
                                        @if($currentReceip->status == 99)
                                            <br><b style="float:right">Annullata</b>
                                            <button class="btn--ui primary sendInvoice mt-5 d-flex ms-auto" wire:click.prevent="update(true)"><i class="ico--ui sendingBtn"></i>salva e rigenera ricevuta</button>
                                        @else
                                            <div class="mt-5">
                                                <button class="btn--ui " wire:click="printReceipt()"><i class="ico--ui sendingBtn"></i>stampa ricevuta</button>
                                                <button class="btn--ui " wire:click.prevent="removeReceipt()"><i class="ico--ui "></i>annulla ricevuta</button>
                                            </div>
                                        @endif
                                    @else
                                        <button class="btn--ui primary sendInvoice mt-5 d-flex ms-auto" wire:click.prevent="update(true)"><i class="ico--ui sendingBtn"></i>salva e genera ricevuta</button>
                                    @endif
                                @endif

                            </footer>
                        </div>
                    </div>
                </section>

                <div  wire:ignore.self class="modal fade" id="userModal" tabindex="-1" aria-labelledby="userModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="userModalLabel">Inserimento nuovo utente</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <label for="newMemberFirstName" class="form-label">Nome</label>
                                    <input class="form-control @error('newMemberFirstName') is-invalid @enderror" type="text" id="newMemberFirstName" placeholder="Nome" wire:model="newMemberFirstName">
                                </div>
                                <div class="col-md-6">
                                    <label for="newMemberLastName" class="form-label">Cognome</label>
                                    <input class="form-control @error('newMemberLastName') is-invalid @enderror" type="text" id="newMemberLastName" placeholder="Cognome" wire:model="newMemberLastName">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <label for="newMemberFiscalCode" class="form-label">Codice fiscale</label>
                                    <input class="form-control @error('newMemberFiscalCode') is-invalid @enderror" type="text" id="newMemberFiscalCode" placeholder="Codice fiscale" maxlength="16" wire:model="newMemberFiscalCode">
                                    @if($newMemberFiscalCodeExist)
                                        <span style="color:red">Il codice fiscale inserito esiste</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annulla</button>
                            <button type="button" class="btn btn-primary" wire:click.prevent="createMember()">Salva</button>
                        </div>
                        </div>
                    </div>
                </div>

            @endif
        </div>
    </div>
</div>

@push('scripts')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .select2-container--default .select2-selection--single{
            background-color: #E9F0F5;
            border: 0.0625rem solid #DFE5EB;
            font-size: 0.75rem;
        }
        .select2-selection
        {
            height: 38px !important;
        }
        .select2-selection__rendered
        {
            padding-top:3px;
        }
        .select2 {
            width:100% !important;
        }
        .page-link.active, .active > .page-link {
            background-color:#006099 !important;
        }
    </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>
@endpush

@push('scripts')
    <script>

        function formatResult(node) {
            var output = node.text.split(/[,-]+/).pop();
            var $result = $('<span style="padding-left:' + (20 * (node.text.match(/-/g) || []).length) + 'px;">' + output + '</span>');
            return $result;
        };

        function matchStart(params, data) {
            params.term = params.term || '';
            if (data.text.toUpperCase().indexOf(params.term.toUpperCase()) == 0) {
                return data;
            }
            return false;
        }
        @if($refreshAfter == 1)
            setTimeout(() => {
                // $('.causalClass').select2();
                $('.causalClass').select2({
                    matcher: function(params, data) {
                        return matchStart(params, data);
                    }
                });
                $('.memberClass').select2({
                    tags: false
                });
                $('.paymentClass').select2({
                    matcher: function(params, data) {
                        return matchStart(params, data);
                    }
                });
            }, 100)
        @endif
        window.livewire.on('refresh', () => {
            // $('.causalClass').select2();
            $('.memberClass').select2({
                tags: false
            });
            $('.paymentClass').select2({
                matcher: function(params, data) {
                    return matchStart(params, data);
                }
            });
        });
        Livewire.on('load-select', () => {

            $('.causalClass').each(function(i, obj) {
                $(obj).select2({
                    //data: data,
                    /*formatSelection: function(item) {
                    return item.text
                    },*/
                    templateResult: formatResult
                });
                $(obj).on('change', function (e) {
                    var data = $(obj).select2("val");
                    var name = $(obj).select2().attr("name");
                    @this.set(name, data);
                });
            });

            $('.memberClass').select2({
                tags: false
            });
            $('.memberClass').on('change', function (e) {
                var data = $('.memberClass').select2("val");
                @this.set('member_id', data);
            });
            $('.paymentClass').select2({
                matcher: function(params, data) {
                    return matchStart(params, data);
                }
            });
            $('.paymentClass').on('change', function (e) {
                var data = $('.paymentClass').select2("val");
                @this.set('payment_method_id', data);
            });

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

        });

        Livewire.on('hide-search', () => {
            pcsh2();
        });

        window.livewire.on('saved', () => {
            $('#userModal').modal('hide');
        });
        window.livewire.on('reloadMembers', () => {
            $('.memberClass').select2("destroy");
            $('.memberClass').select2({
                tags: false
            });
        });

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

        function onlyNumberAmount(input) {
            let v = input.value.replace(/\D+/g, '');
            if (v.length > 14) v = v.slice(0, 14);
            input.value = "€ " + v.replace(/(\d)(\d\d)$/, "$1,$2").replace(/(^\d{1,3}|\d{3})(?=(?:\d{3})+(?:,|$))/g, '$1.');
        }

    </script>

@endpush