@extends('layouts.admin',['activePage' => 'facturas', 'menuParent' => 'Facturas', 'titlePage'=>('Facturas')])


@section('titulo', 'Facturas')

@section('breadcrumb')
    <li class="breadcrumb-item active">@yield('titulo')</li>
@endsection
@section('estilos')

@endsection


@section('contenido')

    <div class="col-12 table-responsive" style=" height: 400px; overflow-x: auto">
        <table class="table table-bordered table-striped table-sm" id="gridWeb" width="100%">
            <thead class="bg-secondary">
            <!-- <th class="text-white text-xxs font-weight-bolder opacity-7">ID</th> -->
            <th class="xt-xxs font-weight-bolder opacity-7">Fecha</th>
            <th class="xt-xxs font-weight-bolder opacity-7">Concepto</th>
            <th class="xt-xxs font-weight-bolder opacity-7">Folio</th>
            <th class="xt-xxs font-weight-bolder opacity-7">Referencia</th>
            <th class="xt-xxs font-weight-bolder opacity-7">Días Vencido</th>
            <th class="xt-xxs font-weight-bolder opacity-7">Importe Original</th>
            <th class="xt-xxs font-weight-bolder opacity-7">Pagos</th>
            <th class="xt-xxs font-weight-bolder opacity-7">Otros</th>
            <th class="xt-xxs font-weight-bolder opacity-7">Saldo</th>
            <th class="xt-xxs font-weight-bolder opacity-7">Saldo Vencido</th>
            <th class="xt-xxs font-weight-bolder opacity-7">#</th>
            </thead>
            <tbody>
            @foreach($documentos as $p)
                @php
                    $label="badge-secondary";
                    if($p['Estatus']=="Cancelado"){
                    $label="badge-danger";
                    }
                @endphp
                <tr>
                    <td>{{date("d/m/Y", strtotime($p['Fecha']))}}</td>
                    <td>{{$p['Concepto']}}</td>
                    <td>{{$p['Folio']}}</td>
                    <td>{{$p['Referencia']}}</td>
                    <td>{{$p['DiasVencido']}}</td>
                    <td align="right">$ {{number_format($p['Total'],2)}}</td>
                    <td align="right">$ {{number_format($p['Pagos'],2)}}</td>
                    <td align="right">$ {{number_format($p['Otros'],2)}}</td>
                    <td align="right">$ {{number_format($p['Saldo'],2)}}</td>
                    <td align="right">$ {{number_format($p['SaldoVencido'],2)}}</td>
                    <td>
                        <button class="btn btn-primary bg-blue" onclick="verDetalle('{{$p['Folio']}}')">
                            <i class=" fa fa-bars"></i>
                        </button>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>

    <div class="modal fade" id="detalleFactura" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="card">
                        <div class="card-header card-header-primary">
                            <div class="card-title text-center">
                                <h5>Factura <label id="nPedido">#</label></h5>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-12 table-responsive">
                                    <table class="table table-bordered table-striped table-sm" id="tb_detalleFactura"
                                           width="100%">
                                        <thead class="bg-secondary">
                                        <!-- <th class="text-white text-xxs font-weight-bolder opacity-7">ID</th> -->
                                        {{--<th class="xt-xxs font-weight-bolder opacity-7"></th>--}}
                                        <th class="xt-xxs font-weight-bolder opacity-7"></th>
                                        <th class="xt-xxs font-weight-bolder opacity-7">Codigo</th>
                                        <th class="xt-xxs font-weight-bolder opacity-7">Cant</th>
                                        <th class="xt-xxs font-weight-bolder opacity-7">Descripción</th>
                                        <th class="xt-xxs font-weight-bolder opacity-7">Pcio Unitario</th>
                                        <th class="xt-xxs font-weight-bolder opacity-7">Importe</th>
                                        <th class="xt-xxs font-weight-bolder opacity-7">Iva</th>
                                        <th class="xt-xxs font-weight-bolder opacity-7">Total</th>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                        <tfoot>
                                        <tr>
                                            <th colspan="7">Total:</th>
                                            <th style="text-align:right"></th>
                                        </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer text-right">
                            <button class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="loadingSave" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <h6 class="text-center">Guardando...</h6>
                    <label class="text-secondary">Se esta guardando la información, por favor espera.</label>
                    <div class="logo text-center" id="modalImg">
                        <img src="{{ asset('asset') }}/images/load.gif" class="img-responsive logo-mini" width="50">
                    </div>
                </div>
            </div>
        </div>
    </div>


@endsection
@section('scripts')
    <script>
		$(document).ready(function () {

			$.ajaxSetup({
				headers: {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				}
			});
		});

		function tbFacturas() {
			gridWeb
			$('#gridWeb').dataTable().fnDestroy();
			$('#gridWeb').DataTable({
				// lengthMenu: [10, 15, 20, 50, 100],
				dom: 'Bfrtip',
				processing: true,
				responsive: true,
				// scrollY: '50vh',
				scrollCollapse: true,
			});
		}



		function verDetalle(folio) {

			$("#detalleFactura").modal("show");
			$("#nPedido").html('#' + folio);

			$('#tb_detalleFactura').dataTable().fnDestroy();
			$('#tb_detalleFactura').DataTable({
				// lengthMenu: [10, 15, 20, 50, 100],
				dom: 'Bfrtip',
				processing: true,
				responsive: true,
				// scrollY: '50vh',
				scrollCollapse: true,
				ajax: {
					url: "{{ url('admin/get_detalle_factura')}}", dataSrc: "",
					type: "POST",
					data: {
						folio: folio
					}
				},
				columns: [{
					data: "URL",
					"render": function (data) {
						return '<img src="' + data + '" width="40px">';
					}
				},
					{
						data: "Codigo"
					}, {
						data: "Cantidad"
					},
					{
						data: "Descripcion"
					},
					{
						data: "PrecioUnitario"
					},
					{
						data: "Importe"
					},
					{
						data: "IVA"
					},
					{
						data: "Total"
					}
				],
				order: [
					[0, "asc"]
				],
				footerCallback: function (row, data, start, end, display) {
					let api = this.api();

					// Remove the formatting to get integer data for summation
					let intVal = function (i) {
						return typeof i === 'string'
							? i.replace(/[\$,]/g, '') * 1
							: typeof i === 'number'
								? i
								: 0;
					};


					total = api
						.column(7, {page: 'current'})
						.data()
						.reduce((a, b) => intVal(a) + intVal(b), 0);
					// Update footer
					api.column(7).footer().innerHTML = '$' + FormatoMiles(total);

				},
			});
		}

    </script>

@endsection