@extends('layout')

@section('content')
<nav class="breadcrumb">
    <a class="breadcrumb-item" href="/">Home</a>
    <a class="breadcrumb-item" href="/tiendas">Tiendas</a>
    <span class="breadcrumb-item active">{{ $datos->nombre }}</span>
</nav>

<header class="content__title">
    <div class="float-right text-right">
        <div class="form-group m-0" style="width:300px">
            <label>Seleccionar fecha</label><br>
            <div class="input-group mb-0">
                <input type="text" class="form-control form-filter text-right fecha-rango" data-url="/tiendas/detalle/{{ $datos->id }}" placeholder="" autocomplete="off" data-fi="{{ $fecha_inicio }}" data-ft="{{ $fecha_termino }}">
                <div class="input-group-append">
                    <span class="input-group-text"><i class="zmdi zmdi-calendar"></i></span>
                </div>
            </div>
            <i class="form-group__bar"></i>
        </div>
    </div>
    <h1>{{ $datos->nombre }}</h1>
    <small>
        <strong>Ciudad: </strong>{{ $datos->comuna->nombre }}
        &nbsp; - &nbsp;
        <strong>Grupos: </strong>
        @php $aux = '' @endphp
        @foreach($datos->grupos as $g)
        {{ $aux.$g->nombre }}
        @php $aux = ', ' @endphp
        @endforeach
    </small>
</header>

<div class="card">
    <div class="card-body p-0">
        <div class="row no-gutters">
            <div class="col-sm-4">
                <div class="invoice__attrs__item bg-success mb-0">
                    <small class="text-white">Total Ventas</small>
                    <h3 class="text-white">${{ number_format($totales->ventas,0,'.','.') }}</h3>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="invoice__attrs__item bg-blue mb-0">
                    <small class="text-white">Total Retiros</small>
                    <h3 class="text-white">${{ number_format($totales->retiros,0,'.','.') }}</h3>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="invoice__attrs__item bg-red mb-0">
                    <small class="text-white">Total Gastos</small>
                    <h3 class="text-white">${{ number_format($totales->gastos,0,'.','.') }}</h3>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <div class="tab-container">
            <ul class="nav nav-tabs nav-tabs--black nav-fill" role="tablist">
                <li class="nav-item">
                    <a class="nav-link show active" data-toggle="tab" href="#ventas" role="tab" aria-selected="true">Ventas</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link show" data-toggle="tab" href="#retiros" role="tab" aria-selected="false">Retiros</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link show" data-toggle="tab" href="#gastos" role="tab" aria-selected="false">Gastos</a>
                </li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane fade active show" id="ventas" role="tabpanel">
                    <p>
                        Listado de ventas registradas en la tienda.
                    </p>
                    <div class="table-responsive">
                        <table class="table table-hover mt-0" id="datatable_ventas">
                            <thead class="thead-default">
                                <tr>
                                    <th>DOCUMENTO</th>
                                    <th>CLIENTE</th>
                                    <th>FECHA</th>
                                    <th class="text-right">MONTO</th>
                                    {{-- <th class="text-center" width="50">ESTADO</th> --}}
                                </tr>
                                <tr class="filter">
                                    <td>
                                        <div class="form-group mb-0">
                                            <input type="text" class="form-control form-filter" placeholder="" data-column="0" autocomplete="off">
                                            <i class="form-group__bar"></i>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group mb-0">
                                            <input type="text" class="form-control form-filter" placeholder="" data-column="1" autocomplete="off">
                                            <i class="form-group__bar"></i>
                                        </div>
                                    </td>
                                    <td></td>
                                    <td>
                                        <div class="form-group mb-0">
                                            <input type="text" class="form-control form-filter" placeholder="" data-column="3" autocomplete="off">
                                            <i class="form-group__bar"></i>
                                        </div>
                                    </td>
                                    {{-- <td>
                                        <div class="form-group">
                                            <div class="select">
                                                <select class="form-control form-filter">
                                                    <option></option>
                                                    <option value="2">CON ERRORES</option>
                                                    <option value="1">SINCRONIZADA</option>
                                                    <option value="0">NO SINCRONIZADA</option>
                                                </select>
                                                <i class="form-group__bar"></i>
                                            </div>
                                        </div>
                                    </td> --}}
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="tab-pane fade" id="retiros" role="tabpanel">
                    <p>
                        Listado de retiros registrados.
                    </p>
                    <div class="table-responsive">
                        <table class="table table-hover mt-0" id="datatable_retiros" width="100%">
                            <thead class="thead-default">
                                <tr>
                                    <th>FECHA</th>
                                    <th class="text-right">MONTO</th>
                                </tr>
                                <tr class="filter">
                                    <td></td>
                                    <td>
                                        <div class="form-group mb-0">
                                            <input type="text" class="form-control form-filter" placeholder="" data-column="1" autocomplete="off">
                                            <i class="form-group__bar"></i>
                                        </div>
                                    </td>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="tab-pane fade" id="gastos" role="tabpanel">
                    <p>
                        Listado de gastos registrados.
                    </p>
                    <div class="table-responsive">
                        <table class="table table-hover mt-0" id="datatable_gastos" width="100%">
                            <thead class="thead-default">
                                <tr>
                                    <th>ITEM</th>
                                    <th>FECHA</th>
                                    <th class="text-right">MONTO</th>
                                </tr>
                                <tr class="filter">
                                    <td>
                                        <div class="form-group mb-0">
                                            <input type="text" class="form-control form-filter" placeholder="" data-column="0" autocomplete="off">
                                            <i class="form-group__bar"></i>
                                        </div>
                                    </td>
                                    <td></td>
                                    <td>
                                        <div class="form-group mb-0">
                                            <input type="text" class="form-control form-filter" placeholder="" data-column="2" autocomplete="off">
                                            <i class="form-group__bar"></i>
                                        </div>
                                    </td>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script type="text/javascript" src="/vendors/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/vendors/datatables/input.js"></script>
<script type="text/javascript">
$(function() {
    var parametros_url = "fi={{$fecha_inicio}}&ft={{$fecha_termino}}";
    $.extend( true, $.fn.dataTable.defaults, datatables_options);
    $.fn.dataTable.ext.errMode = function ( settings, helpPage, message ) { 
        mensaje('error','ERROR',message);
    };
    var table_ventas = $('#datatable_ventas').DataTable({
        ajax: '/tiendas/ventas-datatables/{{ $datos->id }}?' + parametros_url,
        columns: [
            { 
                data: 'folio',
                name: 'folio',
                render: function(data,type,row){
                    return  '<a href="'+(row.tipo == 'm' ? '{{ url('ventas/detalle-manual') }}' : '{{ url('ventas/detalle') }}') + '/' + row.id +'" data-nc="'+(row.nota_credito ? true : false)+'">' + (row.tipo == 'b' ? 'BOLETA' : (row.tipo == 'f' ? 'FACTURA' : 'MANUAL')) + ' N°'+ row.folio +'</a>'
                }
            },
            { 
                data: 'cliente.nombre', 
                name: 'cliente.nombre',
                render: function(data,type,row){
                    if(row.clientes_id){
                        if(row.cliente.tipo == 'e'){
                            return '<a href="{{ url('clientes/detalle') }}/'+ row.cliente.id +'">'+ row.cliente.razon_social +'</a>'
                        }else{
                            return '<a href="{{ url('clientes/detalle') }}/'+ row.cliente.id +'">'+ row.cliente.nombre +' '+ (row.cliente.apellidos ? row.cliente.apellidos : '') +'</a>'
                        }
                    }else{
                        return 'No indicado'
                    }
                }
            },
            { data: 'fecha', name: 'fecha' },
            { data: 'monto', name: 'monto', sClass: 'text-right text-green pr-5' },
        ],
        createdRow: function(row,data,index){
            if($(row,'td:eq(0)').find('a[data-nc="true"]').length){
                $(row).addClass('table-danger');
            }
        }
    });
    $('#datatable_ventas .form-filter').keyup(function(){
        var $this = $(this);
        delay(function(){
            table_ventas.columns($this.data('column'))
                .search($this.val())
                .draw();
        },600);
    });
    var table_ventas = $('#datatable_retiros').DataTable({
        ajax: '/tiendas/retiros-datatables/{{ $datos->id }}?' + parametros_url,
        columns: [
            { 
                data: 'fecha', 
                name: 'fecha',
                render: function(data,type,row){
                    return '<a href="{{ url('cierres/detalle') }}' + '/' + row.id +'">'+ row.fecha +'</a>'
                }
            },
            { data: 'retiro', name: 'retiro', sClass: 'text-right text-blue pr-5' },
        ]
    });
    $('#datatable_retiros .form-filter').keyup(function(){
        var $this = $(this);
        delay(function(){
            table_ventas.columns($this.data('column'))
                .search($this.val())
                .draw();
        },600);
    });
    var table_gastos = $('#datatable_gastos').DataTable({
        ajax: '/tiendas/gastos-datatables/{{ $datos->id }}?' + parametros_url,
        columns: [
            { data: 'item', name: 'item' },
            {
                data: 'fecha', 
                name: 'fecha',
                render: function(data,type,row){
                    return '<a href="{{ url('cierres/detalle') }}' + '/' + row.id +'">'+ row.fecha +'</a>'
                }
            },
            { data: 'monto', name: 'monto', sClass: 'text-right text-red pr-5' },
        ]
    });
    $('#datatable_gastos .form-filter').keyup(function(){
        var $this = $(this);
        delay(function(){
            table_gastos.columns($this.data('column'))
                .search($this.val())
                .draw();
        },600);
    });

    $('.fecha-rango').change(function(){
        var fecha_inicio = $(this).data('daterangepicker').startDate.format('DD/MM/YYYY');
        var fecha_termino = $(this).data('daterangepicker').endDate.format('DD/MM/YYYY');
        parametros_url = "fi="+fecha_inicio+"&ft="+fecha_termino;
        window.location.href = "/tiendas/detalle/{{$datos->id}}?" + parametros_url;
    });
});
</script>
@endpush