@extends('layouts.app')
@section('content')
    @can('facturas-listado')
        <div>
            <a href="{{ route('factura.create') }}" class="btn btn-success mb-3">Nuevo factura </a>
        </div>
    @endcan
    <div class="card">
        <div class="card-header d-flex justify-content-between">
            <div class="header-title">
                <h4 class="card-title">Facturas</h4>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="factura-table" class="table table-striped">
                    <thead>
                        <tr>
                            <th>No.</th>
                            <th>Folio</th>
                            <th>Cliente</th>
                            <th>Metodo Pago</th>
                            <th>Monto</th>
                            <th>Estatus</th>
                            <th>Pagado</th>
                            <th>Creación</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="modal fade" id="pagoModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <form action="" id="form-pago">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Pago Total de Factura PUE</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-12">
                                <input type="hidden" name="factura_id" id="factura_id">
                                <label for="">Fecha de Pago</label>
                                <input type="date" name="fecha_pago" id="fecha_pago" class="form-control" required>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cerrar</button>
                        <button type="submit" class="btn btn-primary" id="btnSubmit">
                            <span class="" role="status" aria-hidden="true" id="spinner"></span>
                            Guardar Factura
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection
@push('javascript')
    <script>
        var pmostrar = false,
            peliminar = false,
            peditar = false,
            phistorial = false;
        @can('facturas-historial')
            phistorial = true;
        @endcan
        @can('facturas-mostrar')
            pmostrar = true;
        @endcan
        @can('facturas-editar')
            peditar = true;
        @endcan
        @can('facturas-eliminar')
            peliminar = true;
        @endcan
    </script>
    <script src="{{ asset('js/scripts/facturas/tblListadoFacturas.js') }}"></script>
    <script>
        $('#form-pago').on('submit', function(e) {
            e.preventDefault();
            var parameters = new FormData(this);
            submit_with_ajax_delay("{{ route('factura.pagar') }}", 'POST', parameters,
                function(data) {
                    Swal.fire({
                        title: 'Alerta',
                        text: data.message,
                        icon: 'success',
                        timer: 1000,
                        onClose: () => {
                            location.href = "{{ route('factura.index') }}";
                        }
                    });
                });
        });
    </script>
@endpush