@extends('adminlte::page')

@section('title', 'CAMINOS - Inconcert')

@section('content_header')
@stop

@section('content')
    <section class="card card-primary">
        <div class="card-header">
            <div class="card-title">
                <h5 class="text-bold">
                    <i class="fas fa-fw fa-dollar-sign"></i>
                    Facturación
                </h5>
            </div>
        </div>
        <div class="card-body">
            <x-forms.form name="formFacturacionTaller" action="{{ route('posventa.dashboard.reports.ventas.ot') }}" method="GET">
                <div class="row">
                    <x-forms.select-group classes="col-12 col-sm-3 col-md-3" classesSelect="select2" name="codBodega" label="Taller" />
                    <x-forms.select-group classes="col-12 col-sm-3 col-md-3" classesSelect="select2" name="area" label="Taller" />
                    <x-forms.input-group type="date" classes="col col-sm-3 col-md-2" name="desde" label="Desde:" value="{{ $desde ?? date('Y-m-01') }}" />
                    <x-forms.input-group type="date" classes="col col-sm-3 col-md-2" name="hasta" label="Hasta:" value="{{ $hasta ?? date('Y-m-d') }}" />
                    <div class="col form-group align-self-end">
                        <button class="btn btn-sm btn-primary">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
            </x-forms.form>
            {{-- <div class="row">
                <canvas id="cardIndicadoresFacturacion"></canvas>
            </div> --}}
            <div class="row">
                <div class="col table-responsive">
                    <table id="tableOrdenes" class="table table-sm table-hover nowrap">
                        <thead>
                            <tr>
                                <th>CodBodega</th>
                                <th>OT</th>
                                <th>Prefijo</th>
                                <th>Factura</th>
                                <th>Área</th>
                                <th>Placa</th>
                                <th>Kilometraje</th>
                                <th>Vehículo</th>
                                <th>Marca</th>
                                <th>Tipo Vehículo</th>
                                <th>VIN</th>
                                <th>Cliente</th>
                                <th>Mano de Obra</th>
                                <th>TOT</th>
                                <th>Repuestos</th>
                                <th>Descuento</th>
                                <th>Deducible</th>
                                <th>SMS Enviados</th>
                                <th>SMS Facturados</th>
                                <th>Asesor</th>
                                <th>Recepción</th>
                                <th>Terminada</th>
                                <th>Entrega</th>
                                <th>Fecha Factura</th>
                                <th>Estado Factura</th>
                                <th>Tipo Cliente</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($ots as $ot)
                                <tr>
                                    <td>{{ $ot->codBodega }}</td>
                                    <td>{{ $ot->codBodega }}-{{ $ot->numOrdTrabajo }}</td>
                                    <td>{{ $ot->prefijo }}</td>
                                    <td>{{ $ot->prefijo }}-{{ $ot->numFactura }}</td>
                                    <td>{{ $ot->area }}</td>
                                    <td>{{ $ot->placa }}</td>
                                    <td>{{ $ot->kilometraje }}</td>
                                    <td>{{ $ot->estilo }}</td>
                                    <td>{{ $ot->marca ?? '' }}</td>
                                    <td>{{ $ot->tipoVehiculo ?? '' }}</td>
                                    <td>{{ $ot->numeroSerie }}</td>
                                    <td>{{ $ot->cliente }}</td>
                                    <td>${{ number_format($ot->vrManObra, 0) }}</td>
                                    <td>${{ number_format($ot->vrTOT, 0) }}</td>
                                    <td>${{ number_format($ot->vrRepuestos, 0) }}</td>
                                    <td>${{ number_format($ot->vrDescuento, 0) }}</td>
                                    <td>${{ number_format($ot->vrDeducible, 0) }}</td>
                                    <td>{{ $ot->cant_sms_ot ?? 0 }}</td>
                                    <td>{{ $ot->cant_sms_fac ?? 0 }}</td>
                                    <td>{{ ucwords(strtolower($ot->vendedor)) }}</td>
                                    <td>{{ $ot->fechaEntrada->format('Y-m-d') }}</td>
                                    <td>{{ $ot->fechaTerminada->format('Y-m-d') }}</td>
                                    <td>{{ $ot->fechaEntrega ? $ot->fechaEntrega->format('Y-m-d') : '' }}</td>
                                    <td>{{ $ot->fecha }}</td>
                                    <td>{{ $ot->estadoFactura }}</td>
                                    <td>{{ $ot->codTipoCliente }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
    @include('layouts.cliente.create')
    @include('layouts.vehiculo.create')
    @include('layouts.vehiculo.search')
    @include('layouts.facturas.search')
@stop

@section('css')
    <link href="{!! asset('/vendor/icheck-bootstrap/icheck-bootstrap.min.css') !!}" rel="stylesheet">
    <link href="{!! asset('/css/caminos.css') !!}" rel="stylesheet">
@stop

@section('plugins.Chartjs', true)

@section('js')
    <script>
        const formFacturacionTaller = document.formFacturacionTaller;
        const codBodega = @json($codBodega);

        let table_ots = null;

        document.addEventListener('DOMContentLoaded', function(){
            $('#tableOrdenes thead tr')
                .clone(true)
                .addClass('filters')
                .appendTo('#tableOrdenes thead');

            table_ots = $('#tableOrdenes').DataTable({
                lengthMenu: [10, 20, 50, 100, 200, 500],
                orderCellsTop: true,
                fixedHeader: true,
                dom: 'Blfrtip',
                buttons: [
                    'copy', 'excel', 'pdf'
                ],
                exportOptions: {
                    rows: ':visible'
                },
                language: {
                    url: '//cdn.datatables.net/plug-ins/1.12.1/i18n/es-ES.json'
                },
                // responsive: true,
                columnDefs: [
                    {
                        targets: [ 0, 2 ],
                        visible: false,
                        searchable: false,
                    }
                ],
                initComplete: function () {
                    var api = this.api();
        
                    // For each column
                    api
                        .columns()
                        .eq(0)
                        .each(function (colIdx) {
                            if(colIdx>=0)
                            {
                                // Set the header cell to contain the input element
                                let cell = $('.filters th').eq(
                                    $(api.column(colIdx).header()).index()
                                );
                                let title = $(cell).text();
                                $(cell).html('<input type="text" placeholder="' + title + '" />');
            
                                // On every keypress in this input
                                $(
                                    'input',
                                    $('.filters th').eq($(api.column(colIdx).header()).index())
                                )
                                    .off('keyup change')
                                    .on('keyup change', function (e) {
                                        e.stopPropagation();
            
                                        // Get the search value
                                        $(this).attr('title', $(this).val());
                                        var regexr = '({search})'; //$(this).parents('th').find('select').val();
            
                                        var cursorPosition = this.selectionStart;
                                        // Search the column for that value
                                        api
                                            .column(colIdx)
                                            .search(
                                                this.value != ''
                                                    ? regexr.replace('{search}', '(((' + this.value + ')))')
                                                    : '',
                                                this.value != '',
                                                this.value == ''
                                            )
                                            .draw();
            
                                        $(this)
                                            .focus()[0]
                                            .setSelectionRange(cursorPosition, cursorPosition);
                                    });
                            }
                        });
                },
                orderCellsTop: true,
                fixedHeader: true,
            });
        })

        fetch(`${urlOrigenOrlando}/api/posventa/bodegas`, {
            headers: {
                Authorization: `Bearer ${tokenSession}`
            }
        }).then(response => response.json())
        .then(bodegas => {
            bodegas.forEach(bodega => {
                const seleccionar = codBodega && codBodega === bodega.codBodega ? 'selected' : ''
                formFacturacionTaller.codBodega.innerHTML += `<option value="${bodega.codBodega}" ${seleccionar}>${bodega.codBodega} - ${ucwords(bodega.bodega)}</option>`;
            });
            return true;
        }).then(validar => {
            $('#codBodega').select2({
                placeholder: 'Seleccionar',
                allowClear: true
            });
        }).then(asignarEvento => {
            $('#codBodega').on('select2:select', function (e) {
                const codBodega = e.params.data.id;
            });
        });

        /* formFacturacionTaller.addEventListener('submit', (e)=>{
            e.preventDefault();
        }); */

        $('#codBodega').on('select2:select', function (e) {
            const cod_bodega = e.params.data.id;
            getAreas(cod_bodega)
        });

        function getAreas(cod_bodega){
            fetch(`${urlOrigenOrlando}/api/posventa/bodegas/areas/${cod_bodega}`, {
                    headers: {
                        Authorization: `Bearer ${tokenSession}`
                    }
                })
                .then(response=>response.json())
                .then(areas=>{
                    formFacturacionTaller.area.innerHTML = ''
                    areas.forEach(area=>{
                        formFacturacionTaller.area.innerHTML += `
                            <option value="${area.area}">${area.area}</option>
                        `
                    })
                })
        }
    </script>
@stop