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

<div>

    @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">
                <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="#" wire:click="add()"><i class="ico--ui big add primary"></i></a></header>
                </div>
            </div>
        @endif

    </header>

        <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">
                <option selected>Open this select menu</option>
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
                </select>
                <button type="submit" class="btn--ui">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">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>{{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


        <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">
            <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 @error('supplier_id') is-invalid @enderror" aria-label="Seleziona un fornitore" wire:model="supplier_id">
                                    <option value="">--Seleziona--
                                    @foreach($suppliers as $supplier)
                                        <option value="{{$supplier->id}}">{{$supplier->name}}
                                    @endforeach
                                </select>
                            </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 @error('causal_id') is-invalid @enderror" aria-label="Seleziona una causale" wire:model="causal_id">
                                    <option value="">--Seleziona--
                                    @foreach($causals as $causal)
                                        <option value="{{$causal["id"]}}">{{$causal["name"]}}
                                    @endforeach
                                </select>
                            </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 @error('payment_method_id') is-invalid @enderror" aria-label="Seleziona un metodo di pagamento" wire:model="payment_method_id">
                                    <option value="">--Seleziona--
                                    @foreach($payments as $payment)
                                        <option value="{{$payment->id}}">{{$payment->name}}
                                    @endforeach
                                </select>
                            </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>