@extends("ushuaia.web.plantilla")
@section("contenido")
<script>
    globalId = '0';
    </script>

<!--contenido-->
<section class="nuevo-descuento pb-5">
    <div class="container">

        <div class="row py-sm-5 atras">
            <div class="col-12">
                <a href="/comercio/sucursales" class="fas fa-arrow-left icon"></a>
                <h2 class="d-inline-block text">Volver a las sucursales</h2>
            </div>
        </div>

        <form action="" method="post" id="form1">
            <div class="row fondo-sucursales">
                <div class="col-sm-6 col-12 text-left">
                    <div class="pr-4 pl-4">
                        <h3 class="text-uppercase py-3">Nueva sucursal</h3>

                        <input type="hidden" name="_token" value="{{ csrf_token() }}"></input>
                        <input type="hidden" id="id" name="id" class="form-control" value="{{$globalId}}" required>
                        <div class="form-group">
                            <input class="form-control" type="text" name="txtNombre" id="txtNombre" placeholder="Nombre de la sucursal. Ej: Sucursal Caballito..." value="{{$sucursal->nombre}}">
                        </div>
                        <div class="form-group">
                            <input class="form-control mb-2" type="text" id="txtDomicilio" name="txtDomicilio" value="{{$sucursal->domicilio}}" placeholder="Dirección">
                        </div>
                        <div class="form-group">
                            <select name="lstProvincia" id="lstProvincia" class="form-control" onchange="fBuscarLocalidad();" required>
                                @if (isset($sucursal) && $sucursal->fk_idprovincia > 0)
                                <option selected value="{{ $sucursal->fk_idprovincia }}">{{ $sucursal->provincia }}</option>
                                @if ($sucursal->fk_idprovincia == 2)
                                <option value="23">Tierra del Fuego</option>
                                @else
                                <option value="2">Capital Federal</option>
                                @endif
                                @else
                                <option selected disabled value="">Seleccionar</option>
                                <option value="2">Capital Federal</option>
                                <option value="23">Tierra del Fuego</option>
                                @endif
                            </select>
                        </div>
                        <div class="form-group">
                            <select name="lstLocalidad" id="lstLocalidad" class="form-control" required>
                            </select>
                        </div>

                    </div>
                </div>
                <div class="col-sm-6 col-12">
                    <div class="row pt-4">
                        <div class="col-12">
                            <div class="card-sucursales mb-3">
                                <div class="card-header tabla-sucursales">
                                    <span style="color: white;">Horarios</span>
                                    <div class="pull-right">
                                        <button type="button" class="btn fas fa-trash" onclick="abrirDialogoEliminarSucursales()"></button>
                                    </div>
                                </div>
                                <div class="panel-body p-2">
                                    <table id="grillaSucursales" class="display" style="width:98%">
                                        <thead>
                                            <tr>
                                                <th style="width: 70px;"></th>
                                                <th>Día</th>
                                                <th>Horarios de atenci&oacute;n</th>
                                                <th>Editar</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                            <div class="pull-left">
                                <button type="button" class="btn fas fa-plus" data-target="modalSucursales" onclick="abrirModalSucursales()"></button><span style="color:white;"> Agregar días</span>
                            </div>
                        </div>

                    </div>

                </div>

                <div class="col-12">
                    <div class="text-center my-2 mt-5">
                        <button type="button" class="btn py-1 px-5 mb-3" onclick='guardar()'>Guardar</button>
                    </div>
                </div>

                <!--Modal sucursales-->
                <div class="modal fade modal-sucursal" id="modalSucursales" tabindex="-1" role="dialog" aria-labelledby="modalSucursalesLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="modalSucursalesLabel" style="color: #1B00B5 !important;">Días y horarios</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-sm-12 text-left my-1">
                                        <select name="lstDias" id="lstDias" class="form-control" style="color: #1B00B5 !important;">
                                            <option selected disabled value="0">Seleccionar día</option>
                                            @for($i=0; $i < count($array_dias); $i++) <option value="{{$array_dias[$i]->iddia}}">{{$array_dias[$i]->descdia}}</option>
                                                @endfor
                                        </select>
                                    </div>
                                    <div class="col-sm-6 text-left my-1">
                                        <label for="txtHoraDesde"></label>
                                        <input type="time" class="form-control" id="txtHoraInicio" name="txtHoraInicio">
                                    </div>
                                    <div class="col-sm-6 text-left my-1">
                                        <label for="txtHoraHasta"></label>
                                        <input type="time" class="form-control" id="txtHoraFin" name="txtHoraFin">
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn-modal" data-dismiss="modal">Cerrar</button>
                                <button id="btnAgregarHorario" type="button" class="btn-modal" onclick="fAgregarHorario()">Agregar</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade" id="modalmsg" tabindex="-1" role="dialog" aria-labelledby="modalmsg">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="modalBuscarLabel">Eliminar</h5>
                                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">×</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="form-group col-lg-6">
                                        &#191;Desea confirmar la operacion?
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                                <button type="button" class="btn btn-primary" onclick="eliminarSucursales();">Aceptar</button>
                            </div>
                        </div>
                    </div>
                </div>


        </form>
    </div>
</section>

<script>
    $("#form1").validate();

    function guardar() {
        if ($("#form1").valid()) {
            modificado = false;
            form1.submit();
        }
    }

    function abrirDialogoEliminarSucursales() {
        $('#modalmsg').modal('toggle');
    }

    function fAgregarHorario() {
        var grilla = $('#grillaSucursales').DataTable();
        grilla.row.add([
            "<input type='checkbox' name='txtId[]' value=''>",
            $("#lstDias option:selected").text() + "<input type='hidden' name='txtDias[]' value='" + $("#lstDias option:selected").val() + "'>",
            $('#txtHoraInicio').val() + "<input type='hidden' name='txtHoraDesde[]' value='" + $('#txtHoraInicio').val() + "'> - " +
            $('#txtHoraFin').val() + "<input type='hidden' name='txtHoraHasta[]' value='" + $('#txtHoraFin').val() + "'>",
            ""
        ]).draw();
        $('#modalSucursales').modal('toggle');
        limpiarFormulario();
    }

    function limpiarFormulario() {
        $("#lstDias").val(0);
        $("#txtHoraInicio").val("");
        $("#txtHoraFin").val("");
    }

    function abrirModalSucursales() {
        limpiarFormulario();
        $("#btnAgregarHorario").attr("onclick", "fAgregarHorario()");
        $('#modalSucursales').modal('toggle');
    }

    function eliminarSucursales() {
        var grilla = $('#grillaSucursales').DataTable();
        $('#grillaSucursales input[type=checkbox]').each(function() {
            if (this.checked) {
                $(this.parentElement.parentNode).addClass('borrar');
            }
        });
        grilla.rows('.borrar').remove().draw(false);
        $('#modalmsg').modal('toggle');
    }


    var dataTable = $('#grillaSucursales').DataTable({
        "processing": true,
        "serverSide": false,
        "bFilter": false,
        "bInfo": true,
        "bSearchable": false,
        "paging": false,
        "pageLength": 25,
        "order": [
            [0, "asc"]
        ],
        "ajax": "{{ asset('/sucursales/cargarGrillaDias?idSucursal='.$globalId)}}"
    });

    function eliminarSucursales() {
        var grilla = $('#grillaSucursales').DataTable();
        $('#grillaSucursales input[type=checkbox]').each(function() {
            if (this.checked) {
                $(this.parentElement.parentNode).addClass('borrar');
            }
        });
        grilla.rows('.borrar').remove().draw(false);
        $('#modalmsg').modal('toggle');
    }

    if (globalId > 0) {
        fBuscarLocalidad();
    }

    function fBuscarLocalidad() {
        idProvincia = $("#lstProvincia option:selected").val();
        $.ajax({
            type: "GET",
            url: "/obtenerLocalidades",
            data: {
                id: idProvincia
            },
            async: true,
            dataType: "json",
            success: function(aLocalidades) {
                $("#lstLocalidad option").remove();
                let lstLocalidad = document.getElementById('lstLocalidad');
                let option = document.createElement('option');
                for (i = 0; i < aLocalidades.length; i++) {
                    option = document.createElement('option');
                    option.text = aLocalidades[i]["nombre"];
                    option.value = aLocalidades[i]["idlocalidad"];
                    if (aLocalidades[i]["idlocalidad"] == 0) {
                        option.setAttribute('selected', true);
                    }
                    lstLocalidad.appendChild(option);
                }
            }
        });
    }

    function fEditarHorario(idRango) {
        $.ajax({
            type: "GET",
            url: "/sucursal/editarHorarios",
            data: {
                idRango: idRango,
                idDia: $("#lstDias option:selected").val(),
                horaDesde: $("#txtHoraInicio").val(),
                horaHasta: $("#txtHoraFin").val()
            },
            async: true,
            dataType: "json",
            success: function(data) {
                $('#modalSucursales').modal('toggle');
                $("#grillaSucursales").DataTable().ajax.reload();
            }
        });
    }

    function editarHorarios(idRango) {
        $.ajax({
            type: "GET",
            url: "/sucursal/obtenerHorarios",
            data: {
                idRango: idRango
            },
            async: true,
            dataType: "json",
            success: function(data) {
                $("#lstDias").val(data.fk_iddia);
                $("#txtHoraInicio").val(data.hora_desde);
                $("#txtHoraFin").val(data.hora_hasta);
                $("#btnAgregarHorario").attr("onclick", "fEditarHorario(" + idRango + ")");
                $('#modalSucursales').modal('toggle');
            }
        });
    }
</script>

@endsection