@extends('template.layoutAdmin', ['activeButton'=>'productos'])

@section('title')
    {{ trans('ciudad.title') }}

@endsection

@section('contenido')
    <div class="row">

    </div>
    <div class="row">
        <div class="col">
            <div class="box">
                <div class="box-header">
                    <div class="row">
                        <div class="col">
                            <h3 class="box-title">
                                {{ trans('ciudad.paises') }}
                            </h3>
                        </div>
                        <div class="float-left mr-10">
                            <button class="btn btn-info" onclick="AbrirVentanaNuevoValor()">
                                <i class="fa fa-plus"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="box-body">
                    <table class="table table-bordered table-responsive" id="tbPaises">
                        <thead>
                            <tr>
                                <th class="text-center"> {{ trans('ciudad.id') }} </th>
                                <th class="text-center"> {{ trans('ciudad.nombre') }} </th>
                                <th class="text-center"> {{ trans('ciudad.estado') }} </th>
                                <th class="text-center"> {{ trans('ciudad.opciones') }} </th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($paises as $item)
                                <tr>
                                    <td style="vertical-align: middle;" class="text-center">{{ $item->idPais }}</td>
                                    <td style="vertical-align: middle;" class="text-center">{{ $item->nombre }}</td>
                                    <td style="vertical-align: middle;" class="text-center">
                                        @if ($item->idEstado == 1)
                                            <span class="badge  " style="cursor: pointer;background: #00DB38"
                                                onclick="changeStatePais({{ $item->idPais }})">
                                                {{ trans('ciudad.active') }}
                                            </span>
                                        @else
                                            <span class="badge  " style="cursor: pointer;background: red"
                                                onclick="changeStatePais({{ $item->idPais }})">
                                                {{ trans('ciudad.inactive') }}
                                            </span>
                                        @endif
                                    </td>
                                    <td style="vertical-align: middle;" class="text-center">
                                        @if ($item->idEstado == 1)
                                        <a href="javascript:;"
                                        onclick="showPais({{ $item->idPais }}, '{{ $item->nombre }}')"
                                        class="btn btn-sm btn-info"><i class="fa fa-share"></i></a>

                                    @endif

                                    </td>
                                </tr>
                            @endforeach
                        </tbody>

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

        <div class="col">
            <div class="box">
                <div class="box-header">
                    <div class="row">
                        <div class="col">
                            <h3 class="box-title" id="titleDepa" style="visibility: hidden">
                                {{ trans('ciudad.departamentos') }}
                            </h3>
                        </div>
                        <div class="float-left mr-10" id="btnDepa" style="visibility: hidden">
                            <button class="btn btn-info" onclick="abrirAddDepa()">
                                <i class="fa fa-plus"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="box-body">
                    <table class="table table-bordered table-responsive" id="tbDepartamento">
                        <thead>
                            <tr>
                                <th class="text-center"> {{ trans('ciudad.nombre') }} </th>
                                <th class="text-center"> {{ trans('ciudad.estado') }} </th>
                                <th class="text-center"> {{ trans('ciudad.opciones') }} </th>
                            </tr>
                        </thead>
                        <tbody id="bodyDeparts">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="box">
                <div class="box-header">
                    <div class="row">
                        <div class="col">
                            <h3 class="box-title" id="titleCiudad" style="visibility: hidden">
                                {{ trans('ciudad.ciudades') }}
                            </h3>
                        </div>
                        <div class="float-left mr-10" id="btnCiudad" style="visibility: hidden">
                            <button class="btn btn-info" onclick="AbrirVentanaNuevoValorCiudad()">
                                <i class="fa fa-plus"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="box-body">
                    <table class="table table-bordered table-responsive" id="tbCiudades">
                        <thead>
                            <tr>
                                <th class="text-center"> {{ trans('ciudad.nombre') }} </th>
                                <th class="text-center"> {{ trans('ciudad.estado') }} </th>
                                {{-- <th class="text-center"> {{ trans('ciudad.opciones') }} </th> --}}
                            </tr>
                        </thead>
                        <tbody id="bodyCiudad">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Modal para Paises -->
        <div class=" modal fade modal-dialog-centered" id="modalPais" data-backdrop="static" data-keyboard="false"
            tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" onclick="cerrarEditar()">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="Nombre"> {{ trans('ciudad.nombre') }} <span class="text text-danger">*</span>
                            </label>
                            <input type="text" name="nombre" id="nombreEditarPais" class="form-control"
                                placeholder="Ingrese nombre del valor" required>
                        </div>


                        <div class="form-group">
                            <label for="Nombre"> {{ trans('ciudad.codigo') }} <span class="text text-danger">*</span>
                            </label>
                            <input type="text" name="descripcion" id="codigoPais" class="form-control"
                                placeholder="Ingrese el codigo del pais" required>
                        </div>
                        <input type="hidden" name="idEditar">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" onclick="cerrarEditar()">
                            {{ trans('ciudad.cerrar') }} </button>
                        <button type="button" class="btn btn-primary" onclick="sendPais()"> {{ trans('ciudad.editar') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>


        <!-- Modal para Departamento -->
        <div class=" modal fade modal-dialog-centered" id="modalDepartamento" data-backdrop="static" data-keyboard="false"
            tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" onclick="cerrarDepa()">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="Nombre"> {{ trans('ciudad.nombre') }} <span class="text text-danger">*</span>
                            </label>
                            <input type="text" name="nombre" id="nombreDepa" class="form-control"
                                placeholder="Ingrese nombre del valor" required>
                        </div>


                        <input type="hidden" name="idEditarDepa">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" onclick="cerrarEditarDepa()">
                            {{ trans('ciudad.cerrar') }} </button>
                        <button type="button" class="btn btn-primary" onclick="EditarDepartamento()">
                            {{ trans('ciudad.editar') }} </button>
                    </div>
                </div>
            </div>
        </div>


        <!-- Modal para Ciudades -->
        <div class=" modal fade modal-dialog-centered" id="modalCiudad" data-backdrop="static" data-keyboard="false"
            tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" onclick="cerrarEditarCiudad()">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="Nombre"> {{ trans('ciudad.nombre') }} <span class="text text-danger">*</span>
                            </label>
                            <input type="text" name="nombre" id="nombreCiudad" class="form-control"
                                placeholder="Ingrese nombre del valor" required>
                        </div>

                        <input type="hidden" name="idEditar">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" onclick="cerrarEditarCiudad()">
                            {{ trans('ciudad.cerrar') }} </button>
                        <button type="button" class="btn btn-primary" onclick="EditarParametroCiudad()">
                            {{ trans('ciudad.editar') }} </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
 
@endsection
@section('js')
    <script>
        var idPais = 0;
        var idDepartament = 0;
        var idEditar = 0;
        var idCiudad =0;

        function AbrirVentanaNuevoValor() {
            $('#modalPais').modal('show'); // abrir
        }

        function cerrarEditar() {
            $('#modalPais').modal('hide'); // cerrar
            document.getElementById('nombreEditarPais').value = "";
        }

        function AbrirVentanaNuevoValorCiudad() {
            $('#modalCiudad').modal('show'); // abrir
        }

        function cerrarEditarCiudad() {
            $('#modalCiudad').modal('hide'); // cerrar
            document.getElementById('nombreCiudad').value = "";
        }

        function EditarParametroCiudad() {
            var edit = idEditar;
            if (idEditar == 0) {
                edit = null;
            }
            var host = "{{ $_SERVER['HTTP_HOST'] }}";
            var data = {
                // "idDepartamento": idDepartament,
                "idDepa": idDepartament,
                "nombre": document.getElementById('nombreCiudad').value,
                "edit": edit
            }
            //console.log(data);
            $.ajax({
                url: UrlHost_ + "/administrator/ciudades/create/ciudad",
                data: data,
                type: 'post',
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    // console.log(data);
                    swal({
                        title: "Loading...",
                        text: "",
                        showConfirmButton: false
                    });
                },
                success: function(response) {
                    if (response.code == 200) {
                        location.reload();
                        swal.close();


                    }
                }
            });

        }

        function EditarDepartamento() {
            var edit = idEditar;
            if (idEditar == 0) {
                edit = null;
            }
            var host = "{{ $_SERVER['HTTP_HOST'] }}";
            var data = {
                // "idDepartamento": idDepartament,
                "idPais": idPais,
                "nombre": document.getElementById('nombreDepa').value,
                "edit": edit
            }
            //console.log(data);
            $.ajax({
                url: UrlHost_ + "/administrator/ciudades/create/depa",
                data: data,
                type: 'post',
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    // console.log(data);
                    swal({
                        title: "Loading...",
                        text: "",
                        showConfirmButton: false
                    });
                },
                success: function(response) {
                    if (response.code == 200) {
                        location.reload();
                        swal.close();


                    }
                }
            });

        }

        function abrirAddDepa() {
            $('#modalDepartamento').modal('show'); // abrir
        }

        function cerrarEditarDepa() {
            $('#modalDepartamento').modal('hide'); // cerrar
            document.getElementById('nombreDepa').value = "";
            idEditar = 0;

        }

        function cerrarDepa() {
            $('#modalDepartamento').modal('hide'); // cerrar
            document.getElementById('nombreDepa').value = "";
        }

        function changeStatePais(idPais) {

            var host = "{{ $_SERVER['HTTP_HOST'] }}";
            var data = {
                // "idDepartamento": idDepartament,
                "idPais": idPais
            }
            //console.log(data);
            $.ajax({
                url: UrlHost_ + "/administrator/ciudades/change/pais",
                data: data,
                type: 'post',
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    // console.log(data);
                    swal({
                        title: "Loading...",
                        text: "",
                        showConfirmButton: false
                    });
                },
                success: function(response) {
                    if (response.code == 200) {
                        location.reload();
                        swal.close();


                    }
                }
            });

        }

        function sendPais() {
            if (document.getElementById('nombreEditarPais').value.length != 0 &&
                document.getElementById('codigoPais').value.length != 0
            ) {

                var host = "{{ $_SERVER['HTTP_HOST'] }}";
                var data = {
                    // "idDepartamento": idDepartament,
                    "nombre": document.getElementById('nombreEditarPais').value,
                    "codigo": document.getElementById(
                        'codigoPais').value
                }
                //console.log(data);
                $.ajax({
                    url: UrlHost_ + "/administrator/ciudades/create/pais",
                    data: data,
                    type: 'post',
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    beforeSend: function() {
                        // console.log(data);
                        swal({
                            title: "Loading...",
                            text: "",
                            showConfirmButton: false
                        });
                    },
                    success: function(response) {
                        if (response.code == 200) {
                            location.reload();
                            swal.close();


                        }
                    }
                });
            } else {
                swal({
                    title: "Error",
                    text: "",
                    showConfirmButton: true
                });
            }

        }

        function abrirEditarCiudad(id) {
            var host = "{{ $_SERVER['HTTP_HOST'] }}";
            var data = {
                "idDepa": id
            }

            //console.log(data);
            $.ajax({
                url: UrlHost_ + "/administrator/ciudades/get/ciudad/edit",
                data: data,
                type: 'post',
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    // console.log(data);
                    swal({
                        title: "Loading...",
                        text: "",
                        showConfirmButton: false
                    });
                },
                success: function(response) {
                    if (response.code == 200) {
                        swal.close();
                        idEditar = response.data.idCiudad;
                        document.getElementById('nombreCiudad').value = response.data.nombre;
                        AbrirVentanaNuevoValorCiudad();
                    }
                }
            });
        }

        function showPais(id, name) {
            var name = String(name);
            document.getElementById('bodyCiudad').innerHTML = "";

            document.getElementById("titleCiudad").style.visibility = "hidden";
            document.getElementById("btnCiudad").style.visibility = "hidden";
            var host = "{{ $_SERVER['HTTP_HOST'] }}";
            var data = {
                "idPais": id
            }
            //console.log(data);
            $.ajax({
                url: UrlHost_ + "/administrator/ciudades/get/departamentos",
                data: data,
                type: 'post',
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    // console.log(data);
                    swal({
                        title: "Loading...",
                        text: "",
                        showConfirmButton: false
                    });
                },
                success: function(response) {
                    if (response.code == 200) {

                        swal.close();

                        document.getElementById("titleDepa").style.visibility = "visible";
                        document.getElementById("btnDepa").style.visibility = "visible";
                        document.getElementById("titleDepa").innerHTML =
                            "{{ trans('ciudad.departamentos') }} " + name;
                        idPais = id;

                        document.getElementById('bodyDeparts').innerHTML = "";
                        var array = response.data;
                        console.log(array);
                        for (let index2 = 0; index2 < array.length; index2++) {
                            var element = array[index2];
                            var idEd = element.idDepartamento;
                            if (element.idEstado == 1) {
                                var agregar = '<tr id="rowEditar' + index2 + '" >' +
                                    '<td style="vertical-align: middle;" class="text-center">' +
                                    element.nombre +

                                    ' </td>' +
                                    '<td style="vertical-align: middle;" class="text-center">' +
                                    '<a href="javascript:;" onclick="cambiarEstadoDepa(' + idEd + ',' + 1 +
                                    ')">' +
                                    '<span class="badge"  style="background: #00DB38" >' +
                                    'Activo</span>' +
                                    '</a>' +
                                    '</td>' +
                                    '<td style="vertical-align: middle;" class="text-center">' +
                                    '<div class="row">'+
                                    '<div class="col">'+
                                        '<button class="btn btn-info" onclick="abrirEditarDepar(' + element
                                    .idDepartamento + ')"><i class="fa fa-edit"></i></button>' +     
                                    '</div>'+
                                    '<div class="col">'+
                                        '<a href="javascript:;"' +
                                    'onclick="showCiudades(' + element.idDepartamento + ')"' +
                                    'class="btn btn-info "><i class="fa fa-share"></i></a>' +
                                    '</div>'+
                                    '</div>'+
                                    
                                    
                                    '</td>' +
                                    '</tr>';

                            } else {
                                var agregar = '<tr id="rowEditar' + index2 + '" >' +
                                    '<td style="vertical-align: middle;" class="text-center">' +
                                    element.nombre +

                                    ' </td>' +
                                    '<td style="vertical-align: middle;" class="text-center">' +
                                    '<a href="javascript:;" onclick="cambiarEstadoDepa(' + idEd + ',' + 2 +
                                    ')">' +
                                    '<span class="badge"  style="background: red">' +
                                    'Inactivo</span>' +
                                    '</a>' +
                                    '</td>' +
                                    '<td style="vertical-align: middle;" class="text-center">' +
                                    '<button class="btn btn-info" onclick="abrirEditarDepar(' + element
                                    .idDepartamento + ')"><i class="fa fa-edit"></i></button>' +
                                    '</td>' +
                                    '</tr>';
                            }

                            document.getElementById('bodyDeparts').insertRow(-1).innerHTML = agregar;
                            //console.log("Element" + element.nombre + " " + "idEd " + idEd);
                        }
                    }
                }
            });
        }

        function abrirEditarDepar(id) {
            var host = "{{ $_SERVER['HTTP_HOST'] }}";
            var data = {
                "idDepa": id
            }
            idEditar = id;
            //console.log(data);
            $.ajax({
                url: UrlHost_ + "/administrator/ciudades/get/depa/edit",
                data: data,
                type: 'post',
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    // console.log(data);
                    swal({
                        title: "Loading...",
                        text: "",
                        showConfirmButton: false
                    });
                },
                success: function(response) {
                    if (response.code == 200) {
                        swal.close();
                        idEditar = response.data.idDepartamento;
                        document.getElementById('nombreDepa').value = response.data.nombre;
                        abrirAddDepa();

                    }
                }
            });
        }

        function cambiarEstadoDepa(id, state) {
            idDepartament = id
            var host = "{{ $_SERVER['HTTP_HOST'] }}";
            var data = {
                "idDepa": id
            }
            //console.log(data);
            $.ajax({
                url: UrlHost_ + "/administrator/ciudades/change/depa",
                data: data,
                type: 'post',
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    // console.log(data);
                    swal({
                        title: "Loading...",
                        text: "",
                        showConfirmButton: false
                    });
                },
                success: function(response) {
                    if (response.code == 200) {
                        location.reload();
                        swal.close();

                    }
                }
            });
        }

        function showCiudades(id) {
            var name = String(name);

            idDepartament = id;
            var host = "{{ $_SERVER['HTTP_HOST'] }}";
            var data = {
                "idDepa": id
            }
            //console.log(data);
            $.ajax({
                url: UrlHost_ + "/administrator/ciudades/get/ciudades",
                data: data,
                type: 'post',
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    // console.log(data);
                    swal({
                        title: "Loading...",
                        text: "",
                        showConfirmButton: false
                    });
                },
                success: function(response) {
                    if (response.code == 200) {

                        swal.close();

                        document.getElementById("titleCiudad").style.visibility = "visible";
                        document.getElementById("btnCiudad").style.visibility = "visible";
                        idDepartamento = id;

                        document.getElementById('bodyCiudad').innerHTML = "";
                        var array = response.data;
                        console.log(array);
                        for (let index2 = 0; index2 < array.length; index2++) {
                            const element = array[index2];
                            const idEd = element.idCiudad;
                            if (element.idEstado == 1) {
                                var agregar = '<tr id="rowEditar' + index2 + '" >' +
                                    '<td style="vertical-align: middle;" class="text-center">' +
                                    element.nombre +

                                    ' </td>' +
                                    '<td style="vertical-align: middle;" class="text-center">' +
                                    '<a href="javascript:;" onclick="cambiarEstado(' + idEd + ',' + 1 + ')">' +
                                    '<span class="badge"  style="background: #00DB38" >' +
                                    'Activo</span>' +
                                    '</a>' +
                                    '</td>' +
                                    '<td style="vertical-align: middle;" class="text-center">' +
                                    ''
                                    '<button class="btn btn-info" onclick="abrirEditarCiudad(' + element.idCiudad + ')"><i class="fa fa-edit"></i></button>' +

                                    '</td>' +
                                    '</tr>';

                            } else {
                                var agregar = '<tr id="rowEditar' + index2 + '" >' +
                                    '<td style="vertical-align: middle;" class="text-center">' +
                                    element.nombre +

                                    ' </td>' +
                                    '<td style="vertical-align: middle;" class="text-center">' +
                                    '<a href="javascript:;" onclick="cambiarEstado(' + idEd + ',' + 2 + ')">' +
                                    '<span class="badge"  style="background: red">' +
                                    'Inactivo</span>' +
                                    '</a>' +
                                    '</td>' +
                                    '<td style="vertical-align: middle;" class="text-center">' +
                                    '<button class="btn btn-info" onclick="abrirEditarCiudad(' + element.idDepartamento + ')"><i class="fa fa-edit"></i></button>' +
                                    '</td>' +
                                    '</tr>';
                            }

                            document.getElementById('bodyCiudad').insertRow(-1).innerHTML = agregar;
                            //console.log("Element" + element.nombre + " " + "idEd " + idEd);
                        }
                    }
                }
            });
        }
    </script>
@endsection