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

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

    <div class="col-auto filterWrapper" id="filter--section">
        <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">Commerciale</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="checkbox" id="inlineCheckbox1" value="option1">
                            <label class="form-check-label ms-2" for="inlineCheckbox1">Si</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">No</label>
                        </div>
                    </div>
                </div>
                <!-- filter item -->

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

                    <div class="filter--item_formElement">
                        <select name="search_supplier_id" class="form-select ">
                            <option value="">
                            @foreach($suppliers as $supplier)
                                <option value="{{$supplier->id}}">{{$supplier->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 ">
                            <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">Competenze</span>

                    <div class="filter--item_formElement">
                        <select name="search_causal_id" class="form-select ">
                            <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 competenza</span>

                    <div class="filter--item_formElement d-flex">
                        <div class="col me-1">
                            <select id="provincia" class="form-select mb-1" aria-label="Default select example">
                                <option value="">
                                <option value="1">Gennaio
                                <option value="2">Febbraio
                                <option value="3">Marzo
                                <option value="4">Aprile
                                <option value="5">Maggio
                                <option value="6">Giugno
                                <option value="7">Luglio
                                <option value="8">Agosto
                                <option value="9">Settembre
                                <option value="10">Ottobre
                                <option value="11">Novembre
                                <option value="12">Dicembre
                            </select>
                        </div>
                        <div class="col-auto">
                            <select id="provincia" class="form-select mb-1" aria-label="Default select example">
                                <option value="">
                                @for($year=date("Y");$year>date("Y") - 2;$year--)
                                    <option value="{{$year}}">{{$year}}
                                @endfor
                            </select>
                        </div>
                    </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>
                <div class="filter--buttons d-flex align-items-center justify-content-between">
                    <button class="btn--ui small dark disable">cancella</button><button class="btn--ui small white">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 Uscite @else Inserimento/modifica uscita @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 Uscita</h2></div><a href="#" ><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="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">Data</th>
                                <th scope="col">Importo</th>
                                <th scope="col">Fornitore</th>
                                <th scope="col">Causale</th>
                                <th scope="col">Pagamento</th>

                                <th scope="col">...</th>
                            </tr>
                        </thead>
                        <tbody id="checkall-target">
                            @foreach($records 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">€ {{$record->amount}}</span></td>
                                    <td>{{$record->supplier->name}}</td>
                                    <td>{{$record->causal->getTree()}}</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>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <!--
                    <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'}} Uscita</h2>
                    </div>

                    <div class="title--section_invoice d-flex align-items-center">
                        <span class="tipology me-2">Tipologia:</span>
                        <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="commercial" wire:model="commercial">
                            <label class="form-check-label" for="flexCheckChecked">
                                Commerciale
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" value="0" id="commercial" wire:model="commercial">
                            <label class="form-check-label" for="flexCheck">
                                Non Commerciale
                            </label>
                        </div>
                        </div>
                    </div>

                </header>

                <section id="accountingExit" class="d-flex"  wire:key='reload-{{$selectId}}'>
                    <div class="accountingExit_data">
                        <form class="form--accounting">
                                <div class="row gx-2">
                                    <div class="col-md-6">
                                        <span class="title-form d-block w-100">Data di 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-3">
                                        <span class="title-form d-block w-100">Mese di Compentenza</span>
                                        <div class="input-group mb-3">
                                            <select class="form-select form-select-lg me-1"  wire:model="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-3">
                                        <span class="title-form d-block w-100">Anno di Compentenza</span>
                                        <div class="input-group mb-3">
                                            <input id="month" type="number" class="form-control"  wire:model="year" >
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <label for="supplier_id" class="form-label ">Fornitore</label>
                                        <select name="supplier_id" class="form-select supplierClass @error('supplier_id') is-invalid @enderror" aria-label="Seleziona un fornitore" wire:model="supplier_id">
                                            <option value="">
                                            @foreach($suppliers as $supplier)
                                                <option value="{{$supplier->id}}">{{$supplier->name}}
                                            @endforeach
                                        </select>
                                        @error('supplier_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">Casuale</span>
                                    <div class="col-md-12">
                                        <select name="causal_id" class="form-select causalClass @error('causal_id') is-invalid @enderror" aria-label="Seleziona una causale" wire:model="causal_id">
                                            <option value="">
                                            @foreach($causals as $causal)
                                                <option value="{{$causal["id"]}}">{{$causal["name"]}}
                                            @endforeach
                                        </select>
                                        @error('causal_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </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="number" class="form-control totalInput text-end @error('amount') is-invalid @enderror" id="amount" placeholder="€ 0,00" wire:model="amount" wire:keydown.enter="save()">
                                        @endif
                                        @if($update)
                                            <input type="number" class="form-control totalInput text-end @error('amount') is-invalid @enderror" id="amount" placeholder="€ 0,00" wire:model="amount" wire:keydown.enter="update()">
                                        @endif
                                        @error('amount')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

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

                                    <div class="col-md-12">
                                        <label for="payment_method_id" class="form-label">Modalità di Pagamento</label>
                                        <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">
                                            <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>
                                <div class="accountingExit--btn d-flex align-items-center justify-content-between">
                                <button class="btn--ui lightGrey"  type="submit" wire:click.prevent="cancel()">annulla</button>
                                    @if($add)
                                        <button class="btn--ui secondary"  type="submit" wire:click.prevent="store()">inserisci</button>
                                    @endif
                                    @if($update)
                                        <button class="btn--ui secondary"  type="submit" wire:click.prevent="update()">salva</button>
                                    @endif

                                </div>
                    </form>
                    </div>
                    <div class="accountingExit_resume card--ui">
                        <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</span></div></div>
                        </header>

                        <div class="resume--body d-flex justify-content-between flex-column">
                            <header>
                                @if($this->supplier)
                                    <ul class="resume-item mb-4 p-0">
                                        <li><span class="evidence_name">{{$this->supplier->name}}</span></li>
                                        <li><span>P.IVA: {{$this->supplier->vat}}</span></li>
                                    </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($this->causal)
                                    <ul class="resume-item date p-0">
                                        <li><strong>Casuale</strong></li>
                                        <li>{{$this->causal->getTree()}}</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>€ {{$amount}}</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">IVA (22%):</span><span class="tax_data">€ 22,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>€ {{$amount}}</strong></span>
                                    </div>
                                </div>
                            </footer>
                        </div>
                    </div>
                </section>

            @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;
        }
    </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>
        window.livewire.on('refresh', () => {
            $('.causalClass').select2();
            $('.supplierClass').select2();
            $('.paymentClass').select2();
        });
        Livewire.on('load-select', () => {
            $('.causalClass').select2();
            $('.causalClass').on('change', function (e) {
                var data = $('.causalClass').select2("val");
                @this.set('causal_id', data);
            });
            $('.supplierClass').select2();
            $('.supplierClass').on('change', function (e) {
                var data = $('.supplierClass').select2("val");
                @this.set('supplier_id', data);
            });
            $('.paymentClass').select2();
            $('.paymentClass').on('change', function (e) {
                var data = $('.paymentClass').select2("val");
                @this.set('payment_method_id', data);
            });
        });
    </script>

@endpush