@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('sucursales.destroy'))
    <form method='POST' id='delete-form' action="{{route('sucursales.destroy')}}">
        @csrf
        @method('DELETE')
        <input type="hidden" name="id" id="sucursal_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>
                                    Sucursales
                                </h1>
                            </div>
                            <div class="col-xs-4 col-sm-2  col-md-2 align-right">
                                @if(auth()->user()->hasRole('sucursales.store'))
                                    <button class='btn bg-blue btn-circle-lg waves-effect waves-circle waves-float' data-color="indigo" data-toggle="modal" data-target="#sucursalModal"><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>Direccion</th>
                                        <th>Comuna</th>
                                        <th>Telefono</th>
                                        <th width='30px'></th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    <!-- Modal Crea sucursal-->
	<div class="modal fade" id="sucursalModal" 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 Sucursal </h2>
	            </div>
                <form action="{{route('sucursales.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="100">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Direccion</b>
                                        <input type="text" class="form-control" name="direccion" required maxlength="150">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <b>Comuna</b><br/>
                                    <select class="list_comuna" name="comuna_id" id="comuna_id" required lang="es"></select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Telefono</b>
                                        <input type="text" class="form-control" required name="telefono" maxlength="20">
                                    </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 Sucursal-->
	<div class="modal fade" id="EditasucursalModal" 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 Sucursal </h2>
	            </div>
                <form action="{{route('sucursales.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="100">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Direccion</b>
                                        <input type="text" class="form-control" name="direccion" id="edita_direccion" required maxlength="150">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <b>Comuna</b><br/>
                                    <select class="list_comuna" name="comuna_id" id="edita_comuna_id"required lang="es"></select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Telefono</b>
                                        <input type="text" class="form-control" name="telefono" id="edita_telefono" required maxlength="20">
                                    </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('sucursales.datatable')}}',
                columns: [
                    {data: 'nombre'},
                    {data: 'direccion'},
                    {data: 'comuna.nombre', defaultContent: ''},
                    {data: 'telefono'},
                    {data: 'function_buttons', name: 'function_buttons', orderable: false, searchable: false}
                ],
            });

        $('.list_comuna').select2({
            ajax: {
                url: function (params) {
                    url="{{route('comunas.ajax.find', ':q')}}";
                    return  url.replace(':q', params.term);
                },
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        q: params.term // search term
                    };
                },
                processResults: function (data) {
                    return {
                        results: data
                    };
                },
                cache: true
            },
            minimumInputLength: 2,
            placeholder: "Ingresa un Nombre",
            allowClear: true
        });

    function clear(){
        $('#edita_id').val('');
        $('#edita_nombre').val('');
        $('#edita_direccion').val('');
        $('#edita_telefono').val('');
        $('#edita_comuna_id').empty();
    }

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

    function getSucursal(id){
        if(id=='')return;
        clear();
        $.ajax({
            url: '{{route('sucursales.ajax.get', ':id')}}'.replace(':id', id),
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                $('#edita_id').val(data.id);
                $('#edita_nombre').val(data.nombre);
                $('#edita_telefono').val(data.telefono);
                $('#edita_direccion').val(data.direccion);
                if(data.comuna_id){
                    var opt = $("<option selected  value='"+data.comuna.id+"'>").text(data.comuna.nombre);
                    $('#edita_comuna_id').append(opt);
                }
                $('#EditasucursalModal').modal('show');
            },
            error: function (data) {
                errorDialog(data.responseJSON.msg);
            }
        });
    }

    </script>
@endsection