@extends('layouts.app')

@section('css')
    <link href="{{ asset('plugins/jquery-datatable/skin/bootstrap/css/dataTables.bootstrap.css') }}" rel="stylesheet">
    <link href="{{ asset('css/responsive.dataTables.min.css') }}" rel="stylesheet">
    <link href="{{ asset('plugins/select2/select2.min.css') }}" rel="stylesheet" />
@endsection


@section('contenido')
        <div class="container-fluid">
            <div class="row clearfix">
                <div class="card">
                    <div class="header">
                    <div class="user-info">
        <div class="image">
            <img src="{{ asset('img/logo.png') }}" width="250" height="100" alt="Logo" />
        </div>
    </div>
    <P></P>
                        <div class="row clearfix">
                            <div class="col-xs-8 col-sm-10 col-md-10">
                                <h1>
                                    Retiros
                                </h1>
                            </div>
                        </div>
                        <div class="body">
                            <div class="row clearfix">
                                <ul class="nav nav-tabs tab-col-red" role="tablist">
                                    <li role="presentation" class="active">
                                        <a href="#pendientes_md_col_1" data-toggle="tab" aria-expanded="true">PENDIENTES</a>
                                    </li>
                                    <li role="presentation" >
                                        <a href="#retirados_md_col_1" data-toggle="tab" aria-expanded="false" >RETIRADOS</a>
                                    </li>
                                </ul>
                                <div class="tab-content">
                                    <div role="tabpanel" class="tab-pane fade active in" id="pendientes_md_col_1">
                                        <div class="col-md-12">
                                            <table id="dataTable" class="table table-striped table-bordered table-condensed table-hover dt-responsive nowrap" style="width: 100%">
                                                <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Sucursal</th>
                                                        <th>Caja</th>
                                                        <th>Usuario</th>
                                                        <th>Fecha Cierre</th>
                                                        <th>Monto Incial</th>
                                                        <th>Efectivo</th>
                                                        <th>Tarjeta</th>
                                                        <th>Total</th>
                                                        <th>Retiro</th>
                                                      
                                                    </tr>
                                                </thead>
                                            </table>
                                        </div>
                                    </div>
                                    <div role="tabpanel" class="tab-pane fade" id="retirados_md_col_1">
                                        <div class="col-md-12">
                                            <table id="retirosdataTable" class="table table-striped table-bordered table-condensed table-hover dt-responsive nowrap" style="width: 100%">
                                                <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Sucursal</th>
                                                        <th>Caja</th>
                                                        <th>Usuario</th>
                                                        <th>Fecha Cierre</th>
                                                        <th>Monto retirado</th>
                                                    </tr>
                                                </thead>
                                            </table>
                                        </div>
                                    </div>

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

    <!-- Modal retiro dinero-->
	<div class="modal fade" id="retiroModal" role="dialog" style="display: none;">
	    <div class="modal-dialog modal-lg" role="document">
	        <div class="modal-content">
	            <div class="modal-header">
	                <h2 class="modal-title" id="largeModalLabel">Retirar dinero</h2>
	            </div>
                <form action="{{route('ventas.retiro')}}" method="POST">
                    @csrf
                    <input type="hidden" name="id" id="venta_id">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Monto a retirar</b>
                                        <input type="text" class="form-control" id="venta_monto_final" disabled readonly>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-success waves-effect">Guardar</button>
                        <button type="button" class="btn btn-link waves-effect" data-dismiss="modal">CERRAR</button>
                    </div>
                </form>
	        </div>
	    </div>
    </div>




@endsection

@section('scripts')
    <script src="{{ asset('plugins/jquery-datatable/jquery.dataTables.js') }}"></script>
    <script src="{{ asset('js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('plugins/jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js') }}"></script>
    <script src="{{ asset('plugins/jquery-datatable/extensions/export/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>
    <script src="{{ asset('plugins/select2/select2.min.js') }}"></script>
    <script src="{{ asset('plugins/select2/es.js') }}"></script>
    <script>
            $('#dataTable').DataTable({
                dom: 'Bfrltip',
                stateSave: false,
                pageLength: 50,
                processing: true,
                serverSide: true,
                responsive: true,
                deferRender: true,
                order: [0, 'asc'],
                buttons: [
                    'excel'
                ],
                ajax:{
                    url: '{{route('informes.retiro.datatable')}}',
                },
                columns: [
                    {data: 'id'},
                    {data: 'caja.sucursal.nombre'},
                    {data: 'caja.nombre'},
                    {data: 'user.name'},
                    {data: 'fecha_cierre'},
                    {data: 'monto_inicial'},
                    {data: 'monto_efectivo'},
                    {data: 'monto_tarjeta'},
                    {data: 'monto_final'},
                    {data: 'action'}
                ],
            });

            $('#retirosdataTable').DataTable({
                dom: 'Bfrltip',
                stateSave: false,
                pageLength: 50,
                processing: true,
                serverSide: true,
                responsive: true,
                deferRender: true,
                order: [0, 'asc'],
                buttons: [
                    'excel'
                ],
                ajax:{
                    url: '{{route('informes.retiro.retirados.datatable')}}',
                },
                columns: [
                    {data: 'id'},
                    {data: 'caja.sucursal.nombre'},
                    {data: 'caja.nombre'},
                    {data: 'user.name'},
                    {data: 'fecha_cierre'},
                    {data: 'monto_efectivo'},
                ],
            });


            function retiraDinero(id, monto) {
                $('#venta_id').val(id);
                $('#venta_monto_final').val(monto);
                $('#retiroModal').modal('show');
            }

            function retiroDinero($id){


                location.href = `{{route('informes.retiro.exporta',':id')}}`.replace(':id', $id);

           

            }


    </script>
@endsection