@extends('layouts.app')
@section('breadcrumbs')
    @include('__partials.breadcrumbs', [
        'data' => [
            ['route' => 'home', 'name' => 'Home'],
            ['route' => '', 'name' => 'Parametros'],
            ['route' => '', 'name' => 'Lista de juzgados']
        ],
        'show_add_button' => false,
        'add_button_route' => route('parametros.area')
    ])
@endsection
@section('content')
<div class="row">
    <div class="col-md-12 grid-margin">
        <div class="card">
            <div class="card-body">
                <center><h5>PARAMETRIZACIÓN JUZGADOS</h5></center>
                <br>
                <form action="{{route('parametros.juzgados')}}" method="get">
                    <div class="row">
                        <div class="col-md-12">
                            <label><b>Nombres</b></label>
                            <div class="input-group mb-3">
                                {{csrf_field()}}
                                <input type="text" name="search" class="form-control border border-primary" placeholder="Nombre a buscar" aria-label="Nombre" aria-describedby="Nombre">
                                <div class="input-group-append">
                                    <button class="btn btn-outline-success" id="BtnBuscar"><i class="fa fa-search" aria-hidden="true"></i> Buscar</button>
                                    @if($flag)
                                        <button href="#" onclick="window.location.reload(true);" class="btn btn-outline-warning" id="BtnVolver">Volver</button>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                <br>
                <div class="table-responsive">
                    <div class="col-md-12">
                        <table class="table table-hover table-striped">
                            <thead class="thead-light">
                                <tr>
                                    <th scope="col" class="align-middle">#</th>
                                    <th scope="col">Nombre<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-crear-juzgado">Crear juzgado <i class="fa fa-plus-circle" aria-hidden="true"></i> </button></th>
                                    <th scope="col" class="align-middle"></th>
                                </tr>
                            </thead>
                            <tbody>
                                @if(count($documento) > 0)
                                    @foreach($documento as $juzgados)
                                        <tr>
                                            <td>{{ $juzgados->id }}</td>
                                            <td>{{ $juzgados->nombre }}</td>
                                            <td>
                                                <div class="btn-group" role="group" aria-label="Basic example">
                                                    <a href="#" type="Button" data-placement="top" title="Editar juzgado" data-url="{{route('parametros.modaleditarjuzgados', $juzgados->id)}}" data-toggle="modal" data-target="#newmodal-editar-juzgado{{$juzgados->id}}" class="btn btn-success text-light"><i class="fas fa-pencil"></i></a>
                                                    <form id="frm-eliminar-juzgado" name="frm-eliminar-juzgado" method="post" class="form-inline" action="{{route('parametros.eliminarJuzgados')}}">
                                                        {{csrf_field()}}
                                                        <input type="hidden" id="id" name="id" value="{{$juzgados->id }}">
                                                        <a href="#" type="Button" data-id="{{ $juzgados->id }}" class="btn-eliminar-juzgado btn bg-danger text-light"><i class="fas fa-trash"></i></a>
                                                    </form>
                                                </div>
                                                <!-- modal editar JUZGADO-->
                                                <div class="modal fade" id="newmodal-editar-juzgado{{$juzgados->id}}" tabindex="-1" role="dialog" aria-labelledby="newmodal-editar-juzgado{{$juzgados->id}}" aria-hidden="true">
                                                    <div class="modal-dialog modal-dialog-centered modal-md" role="document">
                                                        <div class="modal-content">
                                                            <div class="modal-header bg-primary text-light">
                                                                <h5 class="modal-title" id="titulo" >Editar juzgado <i class="fa fa-plus-circle" aria-hidden="true"></i> </h5>
                                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                    <span aria-hidden="true">&times;</span>
                                                                </button>
                                                            </div>
                                                            <div class="modal-body">
                                                                <form action="{{route('parametros.actualizarJuzgados')}}" method="POST">
                                                                    {{csrf_field()}}
                                                                    <div class="form-group">
                                                                        <label for="exampleInputEmail1">Nombre</label>
                                                                        <input type="text" class="nombre form-control" id="nombre" name="nombre" value="{{$juzgados->nombre}}" aria-describedby="nombre" placeholder="Insertar nombre" required>
                                                                        <small id="nombreHelp" class="form-text text-muted">Nombre que llevará el juzgado</small>
                                                                        <small class="form-text text-muted"><i>No debe contener números, debe registrarse tal cual aparece en el oficio.</i></small>
                                                                    </div>
                                                                    <br>
                                                                    <div class="form-group">
                                                                        <label for="JuzgadoEmail">Email</label>
                                                                        <input class="form-control" placeholder="Insertar correo electrónico" type="email" name="email_juzgado" id="email_juzgado" value="{{$juzgados->email }}" required>
                                                                    </div>
                                                                    <br>
                                                                    <div class="form-group">
                                                                        <label>Departamento</label>
                                                                        <select id="departamento_juzgado_edit{{$juzgados->id }}" name="departamento_juzgado_edit" data-url="{{url('/')}}/getciudad/" class="form-control" onchange="buscarCiudadEdit({{$juzgados->id }})" required>
                                                                            <option value="" selected>-- Seleccionar --</option>
                                                                            @foreach($departamentos as $dpto)
                                                                                <option value="{{ $dpto->id }}" @if($dpto->id == $juzgados->departamento) selected @endif>{{ $dpto->nombre }}</option>
                                                                            @endforeach
                                                                        </select>
                                                                    </div>
                                                                    <br>
                                                                    <div class="form-group">
                                                                        <label>Ciudad / Municipio</label>
                                                                        <select id="ciudad_juzgado_edit{{$juzgados->id }}" name="ciudad_juzgado_edit" class="form-control " required>
                                                                            <option value="">-- Seleccionar --</option>
                                                                            @foreach($ciudades as $ciud)
                                                                                <option value="{{ $ciud->id }}" @if($ciud->id == $juzgados->ciudad) selected @endif>{{ $ciud->nombre }}</option>
                                                                            @endforeach
                                                                        </select>
                                                                    </div>
                                                                    <br>
                                                                    <input type="hidden" name="id_juzgado" value="{{$juzgados->id }}">
                                                                    <div class="modal-footer">
                                                                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar <i class="fa fa-times-circle" aria-hidden="true"></i></button>
                                                                        <button type="submit" class="btn btn-primary">Actualizar <i class="fa fa-plus-circle" aria-hidden="true"></i></button>
                                                                    </div>
                                                                </form>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                    <div class="alert alert-danger" role="alert">No hay juzgados registrados</div>
                                @endif
                           </tbody>
                        </table>
                        @if(!$flag) {{$documento->appends(Input::except('page'))->links()}} @endif 
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal  crear JUZGADO-->
    <div class="modal fade" id="modal-crear-juzgado" tabindex="-1" role="dialog" aria-labelledby="modal-crear-juzgado" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary text-light">
                    <h5 class="modal-title" id="titulo">Nuevo juzgado <i class="fa fa-plus-circle" aria-hidden="true"></i></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form  id="form" action="{{route('parametros.guardarJuzgados')}}" method="POST">
                        {{csrf_field()}}
                        <div class="form-group">
                            <label for="exampleInputEmail1">Nombre</label>
                            <input type="text" class="nombre form-control" id="searchInput" name="nombre" aria-describedby="nombre" placeholder="Insertar nombre" required>
                            <div class="juzgados">
                                <table class="data" id="fbody" style="display:none;">
                                    @foreach($juzgados_all as $juzgadoall)
                                        <tr>
                                            <td style="font-size: 0.75em;">{{mb_strtoupper($juzgadoall->nombre)}}</td>
                                        </tr>
                                    @endforeach
                                </table>
                            </div>
                            <small id="nombreHelp" class="form-text text-muted">Nombre que llevará el nuevo juzgado</small>
                            <small class="form-text text-muted"><i>No debe contener números, debe registrarse tal cual aparece en el oficio.</i></small>
                        </div>
                        <br>
                        <div class="form-group">
                            <label for="JuzgadoEmail">Email</label>
                            <input class="form-control" placeholder="Insertar correo electrónico" type="email" name="email_juzgado" id="email_juzgado" required>
                        </div>
                        <br>
                        <div class="form-group">
                            <label>Departamento</label>
                            <select id="departamento_juzgado" name="departamento_juzgado" data-url="{{url('/')}}/getciudad/" class="form-control" required>
                                <option value="">-- Seleccionar --</option>
                                @foreach($departamentos as $dpto)
                                    <option value="{{ $dpto->id }}">{{ $dpto->nombre }}</option>
                                @endforeach
                            </select>
                        </div>
                        <br>
                        <div class="form-group">
                            <label>Ciudad / Municipio</label>
                            <select id="ciudad_juzgado" name="ciudad_juzgado" class="form-control" required>
                                <option value="">-- Seleccionar --</option>
                            </select>
                        </div>
                        <br>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar <i class="fa fa-times-circle" aria-hidden="true"></i></button>
                            <button type="submit" class="btn btn-primary">Guardar <i class="fa fa-plus-circle" aria-hidden="true"></i></button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div> 
<script src="{{asset('assets/js/parametros/juzgados.js')}}"></script>
<script>
    $(document).ready(function(){
        $("#searchInput").keyup(function () {
            $("#fbody").css("display", "block");
            //split the current value of searchInput
            var data = this.value.split(" ");

            //create a jquery object of the rows
            var jo = $("#fbody").find("tr");

            if (this.value == "") {
                $("#fbody").css("display", "none");
            }

            //hide all the rows
            jo.hide();

            //Recusively filter the jquery object to get results and show.
            jo.filter(function (i, v) {
                var $t = $(this);
                for (var d = 0; d < data.length; ++d) {
                    if ($t.is(":contains('" + data[d].toUpperCase() + "')")) {
                        return true;
                    }
                }
                return false;
            }).show();
        });
    });

    $(document).ready(function(){
        $("#modal-crear-juzgado").mouseup(function () {
            $("#fbody").css("display", "none");
        });
    });

    var vm = new Vue({
        el: '#modal-crear-juzgado',
        data: {
            juzgados: [],
            juzgados_str: '',
            nombres: 0
        },
        watch: {
            juzgados() {
                this.nombres = 0;
                this.juzgados_str = '';

                if(this.juzgados.length > 0){
                    this.juzgados_str += this.juzgados;
                    axios.get('/parametros/buscarjuzgados/' + this.juzgados_str).then(response => this.nombres = response.data);
                }
            }
        }
    });
</script>
@endsection