@extends('layouts.dashboard')
@section('css')

@endsection

@section('content')
    <div class="app-page-title d-xs-none">
        <div class="page-title-wrapper">
            <div class="col-sm-4">
                <div class="page-title-heading">
                    <div>{{ $title }}
                        <div class="page-title-subheading">
                            {{ $subtitle }}
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-8">
                <div class="page-header float-right">
                    <nav class="" aria-label=" breadcrumb">
                        <ol class="breadcrumb text-right">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">Inicio</a></li>
                            <li class="active breadcrumb-item" aria-current="page">Mis compras</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    @if (session('message'))
        <div class="alert alert-success alert-dismissable col-lg-4 col-md-12"
            style="text-align: center;margin: auto;margin-bottom: 1rem;">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <strong>{{ session('message') }}</strong>
        </div>
    @endif

    @can('receptores.create')
        <div class="animated fadeIn">
            <!-- /Widgets -->
            <div class="h4 mb-0" style="margin-top: 0px;text-align: end;padding-bottom: 15px;">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            </div>
            <!-- .row -->
        </div>
    @endcan

    <div class="main-card mb-3 card">
        <div class="card-body">
            <div id="example_wrapper" class="dataTables_wrapper dt-bootstrap4">
                <div class="row">

                    <div class="col-sm-12 col-md-6">

                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <table style="width: 100%;" id="tbl_users"
                            class="table table-hover table-striped table-bordered dataTable dtr-inline" role="grid"
                            aria-describedby="example_info">
                            <thead style="font-size: 14px;">
                                <tr role="row">
                                    <th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                        style="width: 100.2px;" aria-sort="descending">Concepto</th>

                                    <th class="sorting" tabindex="1" aria-controls="example" rowspan="1" colspan="1"
                                    style="width: 100.2px;" >Importe total</th>

                                    <th class="sorting" tabindex="2" aria-controls="example" rowspan="1" colspan="1"
                                        style="width: 50.2px;">
                                        Estatus factura</th>

                                    <th class="sorting" tabindex="3" aria-controls="example" rowspan="1" colspan="1"
                                        style="width: 50.2px;">
                                        Fecha de pago</th>

                                    <th class="sorting" tabindex="4" aria-controls="example" rowspan="1" colspan="1"
                                        style="width: 150.2px;">
                                        Método de pago</th>

                                    <th class="sorting" tabindex="5" aria-controls="example" rowspan="1" colspan="1"
                                        style="width: 70.2px;">
                                        Acciones</th>
                                </tr>
                            </thead>
                            <tbody style="font-size: 14px;">
                            </tbody>

                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('js')
    <script>
        $(document).ready(function() {
            $('#tbl_users').DataTable({
                "order": [[ 3, "desc" ]],
                "processing": true,
                "serverSide": true,
                "responsive": true,
                "ajax": base_url + "/facturas",
                "dataType": "JSON",
                "type": "POST",
                "columns": [{
                        "data": "descripcion"
                    },
                    {
                        "data": "total_facturacion",
                        render: function(data, type) {
                            var number = $.fn.dataTable.render.number(',', '.', 2, '$ ').display(
                                data);
                            
                            return number;
                        }
                    },
                    {
                        "data": "desc_status_factura"
                    },
                    {
                        "data": "fecha_pago",
                        render: function(data, type) {
                            let out = '';
                            const fecha = new Date(data);
                            if (type === 'display') {
                                out = fecha.getDate() + '/' + (fecha.getMonth() + 1).toString().padStart(2, "0") + '/' + fecha.getFullYear();
                            }
                            return out;
                        }
                    },
                    {
                        "data": "payment_type_id"
                    },
                    {
                        data: 'action',
                        name: 'Acciones',
                        orderable: true,
                        searchable: false
                    }
                ]
            });
        });
    </script>
@endsection