@extends('layouts.app', [
    'navClass' => 'navbar-light bg-secondary',
    'parentSection' => 'laravel',
    'elementName' => 'client-management'
])

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

@section('title', 'Gerar Faturas |')

@section('content')
    @component('layouts.headers.auth')
        @component('layouts.headers.breadcrumbs')
            @slot('title')
            Lista de Faturas
            @endslot
        @endcomponent
    @endcomponent

    <div class="container-fluid mt--6">
        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-header">
                        <div class="row align-items-center">
                            <div class="col-8">
                                <h3 class="mb-0">Lista de Faturas</h3>
                                <p class="text-sm mb-0">
                                    Abaixo você ver as faturas das vendas do TravelTogether
                                </p>
                            </div>
                            <div class="col-4 text-right">
                                <a href="{{ route('faturas.create') }}" class="btn btn-sm btn-primary">Nova Fatura</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 mt-2">
                        @include('alerts.success')
                        @include('alerts.errors')
                    </div>
                    <div class="table-responsive py-4" id="users-table">
                        <table class="table align-items-center table-flush"  id="datatable-basic10">
                            <thead class="thead-light">
                                <tr>
                                    <th scope="col-1">ID</th>
                                    <th scope="col-1">Cliente</th>
                                    <th scope="col-1">Data de Início</th>
                                    <th scope="col-1">Data de Fim</th>
                                    <th scope="col-1">Ações</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($faturas as $fatura)
                                    <tr>
                                        <td><a href="{{ route('faturas.show', $fatura->id) }}" class="btn btn-sm btn-primary" target="_blank" rel="noopener noreferrer">{{ $fatura->id}}</a></td>
                                        <td>{{ $fatura->cliente }}</td>
                                        <td>{{ date('d/m/Y', strtotime($fatura->start_date)) }}</td>
                                        <td>{{ date('d/m/Y', strtotime($fatura->end_date)) }}</td>
                                        <td class="text-center">
                                            <div class="dropdown">
                                                <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i class="fas fa-ellipsis-v"></i>
                                                </a>
                                                <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                                                    <a class="dropdown-item" href="{{ route('faturas.show', $fatura->id) }}"><i class="ni ni-ruler-pencil text-dark text-sm opacity-10"></i> Ver</a>
                                                    <form action="{{ route('faturas.destroy', $fatura->id) }}" method="post">
                                                        @csrf
                                                        @method('delete')

                                                        <button type="button" class="dropdown-item" onclick="confirm('Tem certeza que deseja excluir essa fatura?') ? this.parentElement.submit() : ''">
                                                        <i class="ni ni-basket text-dark text-sm opacity-10"></i> Excluir
                                                        </button>
                                                    </form>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        @include('layouts.footers.auth')
    </div>
@endsection

@push('css')
    <link rel="stylesheet" href="{{ asset('argon') }}/vendor/datatables.net-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="{{ asset('argon') }}/vendor/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css">
    <link rel="stylesheet" href="{{ asset('argon') }}/vendor/datatables.net-select-bs4/css/select.bootstrap4.min.css">
    <link rel="stylesheet" href="{{ asset('argon/vendor/select2/dist/css/select2.min.css') }}">
@endpush

@push('js')
@if(isset($sales[0]))
    <script>
        var clientName = "{{ $sales[0]->client }}"; // Define o nome do cliente se existir
        var period = "{{ date('d.m.Y', strtotime($data['start_date'])) }} a {{ date('d.m.Y', strtotime($data['end_date'])) }}"; // Formata o período com pontos
    </script>
@else
    <script>
        var clientName = "Cliente"; // Nome padrão caso $sales esteja vazio
        var period = "";
    </script>
@endif
    <script src="{{ asset('argon/vendor/select2/dist/js/select2.min.js') }}"></script>
    <script src="{{ asset('argon') }}/vendor/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="{{ asset('argon') }}/vendor/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
    <script src="{{ asset('argon') }}/vendor/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
    <script src="{{ asset('argon') }}/vendor/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js"></script>
    <script src="{{ asset('argon') }}/vendor/datatables.net-buttons/js/buttons.html5.min.js"></script>
    <script src="{{ asset('argon') }}/vendor/datatables.net-buttons/js/buttons.flash.min.js"></script>
    <script src="{{ asset('argon') }}/vendor/datatables.net-buttons/js/buttons.print.min.js"></script>
    <script src="{{ asset('argon') }}/vendor/datatables.net-select/js/dataTables.select.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="{{ asset('argon') }}/vendor/chart.js/dist/Chart.min.js"></script>
    <script src="{{ asset('argon') }}/vendor/chart.js/dist/Chart.extension.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.3.0/chart.min.js" integrity="sha512-mlz/Fs1VtBou2TrUkGzX4VoGvybkD9nkeXWJm3rle0DPHssYYx4j+8kIS15T78ttGfmOjH0lLaBXGcShaVkdkg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        var DatatableButtons = (function() {
        // Variables

        var $dtButtons = $('#datatable-basic10');


        // Methods

        function init($this) {

            // For more options check out the Datatables Docs:
            // https://datatables.net/extensions/buttons/


            // Basic options. For more options check out the Datatables Docs:
            // https://datatables.net/manual/options

            var options = {

                lengthChange: !1,
                dom: 'frtip',
                order: [[0, 'desc']],
                // select: {
                // 	style: "multi"
                // },
                language: {
                    paginate: {
                        previous: "<i class='fas fa-angle-left'>",
                        next: "<i class='fas fa-angle-right'>"
                    },
                    search: "Busca rápida:",
                    emptyTable: "Nenhum registro encontrado",
                    info: "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                    infoEmpty: "Mostrando 0 até 0 de 0 registros",
                    infoFiltered: "(Filtrados de _MAX_ registros)",
                    infoThousands: ".",
                    loadingRecords: "Carregando...",
                    processing: "Processando...",
                    zeroRecords: "Nenhum registro encontrado",
                    lengthMenu: "Exibir _MENU_ registros",
                    decimal: ",",
                },
                info: "Mostrando de _START_ até _END_ de _TOTAL_ registros",
            };

            // Init the datatable

            var table = $this.on('init.dt', function() {
                $('.dt-buttons .btn').removeClass('btn-secondary').addClass('btn-sm btn-default');
            }).DataTable(options);
        }


        // Events

        if ($dtButtons.length) {
            init($dtButtons);
        }

        })();
    </script>
@endpush