@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')
@if(auth()->user()->hasRole('cajas.destroy'))
    <form method='POST' id='delete-form' action="{{route('cajas.destroy')}}">
        @csrf
        @method('DELETE')
        <input type="hidden" name="id" id="caja_id">
    </form>
@endif
        <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>
                                    Cajas
                                </h1>
                            </div>
                            <div class="col-xs-4 col-sm-2  col-md-2 align-right">
                                @if(auth()->user()->hasRole('cajas.store'))
                                    <button class='btn bg-blue btn-circle-lg waves-effect waves-circle waves-float' data-color="indigo" data-toggle="modal" data-target="#cajaModal"><i class="material-icons">add</i></button>
                                @endif
                            </div>
                        </div>
                        <div class="body">
                            <table id="dataTable" class="table table-striped table-bordered table-condensed table-hover dt-responsive nowrap" style="width: 100%">
                                <thead>
                                    <tr>
                                        <th>Nombre</th>
                                        <th>Sucursal</th>
                                        <th width='30px'></th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    <!-- Modal Crea caja-->
	<div class="modal fade" id="cajaModal" 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">Crea Caja </h2>
	            </div>
                <form action="{{route('cajas.store')}}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Nombre</b>
                                        <input type="text" class="form-control" name="nombre" required maxlength="150">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Sucursal Asignada</b>
                                        <select name="sucursal_id" required class="form-control">
                                            <option value="">Seleccione Sucursal</option>
                                            @foreach ($sucursales as $sucursal)
                                                <option value="{{$sucursal->id}}">{{$sucursal->nombre}}</option>
                                            @endforeach
                                        </select>

                                    </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>

    <!-- Modal Edita caja-->
	<div class="modal fade" id="EditacajaModal" 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">Edita Caja </h2>
	            </div>
                <form action="{{route('cajas.update')}}" method="POST">
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="id" id="edita_id">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Nombre</b>
                                        <input type="text" class="form-control" name="nombre" id="edita_nombre" required maxlength="150">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Sucursal Asignada</b>
                                        <select name="sucursal_id" required id="edita_sucursal_id"  class="form-control">
                                            <option value="">Seleccione Sucursal</option>
                                            @foreach ($sucursales as $sucursal)
                                                <option value="{{$sucursal->id}}">{{$sucursal->nombre}}</option>
                                            @endforeach
                                        </select>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-success waves-effect">EDITAR</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: '{{route('cajas.datatable')}}',
                columns: [
                    {data: 'nombre'},
                    {data: 'sucursal.nombre', defaultContent: ''},
                    {data: 'function_buttons', name: 'function_buttons', orderable: false, searchable: false}
                ],
            });

    function clear(){
        $('#edita_id').val('');
        $('#edita_nombre').val('');
        $('#edita_sucursal_id option[value=""]').attr('selected', true);
    }

    function deleteCaja(id){
        if(id=='')return;
        $('#caja_id').val(id);
        deleteDialog('delete-form','¿Esta seguro de eliminar esta Caja?');
    }

    function getCaja(id){
        if(id=='')return;
        clear();
        $.ajax({
            url: '{{route('cajas.ajax.get', ':id')}}'.replace(':id', id),
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                $('#edita_id').val(data.id);
                $('#edita_nombre').val(data.nombre);
                if(data.sucursal_id){
                    $('#edita_sucursal_id option[value='+data.sucursal_id+']').attr('selected', true);
                    $('#edita_sucursal_id').trigger('change');
                }
                $('#EditacajaModal').modal('show');
            },
            error: function (data) {
                errorDialog(data.responseJSON.msg);
            }
        });
    }

    </script>
@endsection