@extends('masushuaia.plantilla')
@section('titulo', 'Datos del comercio')
@section('scripts')
    <link href="{{ asset('css/datatables.min.css') }}" rel="stylesheet">
    <script src="{{ asset('js/datatables.min.js') }}"></script>
    <script>
        globalId = '0';
                contSucursales = '0';
            </script>
@endsection
@section('breadcrumb1')
    <a title="Salir" href="#" class="btn-blue py-1 px-2 mr-2" aria-hidden="true"
        onclick="javascript: $('#modalSalir').modal('toggle');"><span><i class="fas fa-arrow-left"></i></span></a>
@endsection
@section('breadcrumb')

    @if (Patente::autorizarOperacion('COMERCIOELIMINAR'))
        @if ($globalId > 0)
            <div id="btnEliminar" class="d-inline-block">
                <a title="Eliminar" href="#" class="btn-blue py-1 px-4 mr-2" aria-hidden="true"
                    onclick="javascript: $('#mdlEliminar').modal('toggle');"><span>Eliminar</span></a>
            </div>
        @endif
    @endif

    <div id="btnGuardar" class="d-inline-block">
        <a title="Guardar" href="#" class="btn-blue py-1 px-4" aria-hidden="true"
            onclick="javascript: $('#modalGuardar').modal('toggle');"><span>Guardar</span></a>
    </div>

    <script>
        function fsalir() {
            location.href = "/comercios";
        }
    </script>
@endsection
@section('breadcrumb-list')
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/">Inicio</a></li><span class="px-2">/</span>
        <li class="breadcrumb-item"><a href="/comercios">Comercios</a></li>
        <li class="breadcrumb-item active">Nuevo</li>
    </ol>
@endsection
@section('contenido')
        <div class="row">
        <div class="col-12">
            <div id="msg"></div>
                    </div>
    </div>
    <form id="form1" method="POST" enctype="multipart/form-data">
        <div class="row">
            <input type="hidden" name="_token" value="{{ csrf_token() }}"></input>
            <input type="hidden" id="id" name="id" class="form-control" value="{{ $globalId }}" required>
            <input type="hidden" id="idsSucursalesEliminar" name="aIdsSucursalesEliminar">
            <div class="form-group col-sm-6">
                <label for="txtNombre">Nombre *</label>
                <input type="text" class="form-control" id="txtNombre" name="txtNombre" value="{{ $comercio->nombre }}"
                    required>
            </div>
            <div class="form-group col-sm-6">
                <label for="txtRazonSocial">Raz&oacute;n social *</label>
                <input type="text" class="form-control" id="txtRazonSocial" name="txtRazonSocial"
                    value="{{ $comercio->razon_social }}" required>
            </div>
            <div class="form-group col-sm-6">
                <label for="txtCuit">CUIT</label>
                <input type="text" class="form-control" id="txtCuit" name="txtCuit" value="{{ $comercio->cuit }}">
            </div>
            <div class="from-group col-sm-6 mb-2">
                <label for="txtTelefono">Tel&eacute;fono</label>
                <input type="text" id="txtTelefono" name="txtTelefono" class="form-control"
                    value="{{ $comercio->telefono }}">
            </div>
            <div class="from-group col-sm-6 mb-2">
                <label for="txtContacto">Contacto</label>
                <input type="text" id="txtContacto" name="txtContacto" class="form-control"
                    value="{{ $comercio->contacto }}">
            </div>
            <div class="form-group col-sm-6">
                <label for="txtUsuario">Nombre de usuario *</label>
                <input type="text" id="txtUsuario" name="txtUsuario" class="form-control"
                    value="{{ $comercio->usuario }}"  required onkeyup="correct(this);">
            </div>
            <div class="from-group col-sm-6 mb-2">
                <label for="txtEmail">Email</label>
                <input type="email" id="txtEmail" name="txtEmail" class="form-control" value="{{ $comercio->email }}">
            </div>
            <div class="from-group col-sm-6">
                <label for="txtImagenComercio">Imagen</label>
                <input type="file" id="txtImagenComercio" name="txtImagenComercio" class="form-control"
                    value="{{ $comercio->imagen }}">
            </div>
            @if ($comercio->imagen && file_exists('ushuaia/images/' . $comercio->imagen))
                <div class="form-group col-sm-6">
                    <img class="img-fluid mt-2" src="/ushuaia/images/{{ $comercio->imagen }}" width="60">
                </div>
            @endif
            <!--Modal sucursales-->
            <div class="modal fade" 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="modalSucursalesLaben">Sucursal</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true"><i class="fa fa-times" aria-hidden="true"></i></span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <input type="hidden" id="edicion" name="edicion" value="0">
                                <input type="hidden" id="idSucursal" name="idSucursal" value="">
                                <input type="hidden" id="aIdsHorariosEliminar" name="aIdsHorariosEliminar">
                                <div class="col-6 form-group">
                                    <label>Tipo de tienda *</label>
                                    <select class="form-control" name="lstTipoTienda" id="lstTipoTienda"
                                        onchange="setTipoTienda(this.value);">
                                        <option selected value="1">Física</option>
                                        <option value="2">Online</option>
                                    </select>
                                </div>
                                <div id="domicilio-sucursal" class="col-6 form-group">
                                    <label>Domicilio:</label>
                                    <input type="text" class="form-control" id="txtDomicilioSucursal"
                                        name="txtDomicilioSucursal">
                                </div>
                                <div id="url-sucursal" class="col-6 form-group" style="display: none;">
                                    <label>URL:</label>
                                    <input type="url" class="form-control" id="txtUrlSucursal" name="txtUrlSucursal">
                                </div>
                                <div id="sucursal-datos-localidad" class="col-12">
                                    <div class="row">
                                        <div class="col-sm-6 form-group">
                                            <label>Provincia:</label>
                                            <select name="lstProvincia" id="lstProvincia" onchange="fBuscarLocalidad();"
                                                class="form-control " data-live-search="true" required>
                                                <option selected disabled value="0">Seleccionar</option>
                                                @for ($i = 0; $i < count($array_provincia); $i++)
                                                    @if (isset($comercio) && $array_provincia[$i]->idprov == $comercio->fk_idprovincia)
                                                        <option selected value="{{ $array_provincia[$i]->idprov }}">
                                                            {{ $array_provincia[$i]->descprov }}</option>
                                                    @else
                                                        <option value="{{ $array_provincia[$i]->idprov }}">
                                                            {{ $array_provincia[$i]->descprov }}</option>
                                                    @endif
                                                @endfor
                                            </select>
                                        </div>
                                        <div class="col-sm-6 form-group">
                                            <label>Localidad:</label>
                                            <select name="lstLocalidad" id="lstLocalidad" class="form-control "
                                                data-live-search="true" required>
                                                <option value="" disabled selected>Seleccionar</option>
                                            </select>
                                        </div>
                                        <div class="col-12 pb-3">
                                            <label>Coordenadas de Google Maps (Ej.: xxxxxxx, xxxxxxxx):</label>
                                            <input type="text" class="form-control" id="txtLatitudLongitud"
                                                name="txtLatitudLongitud">
                                        </div>
                                        <div class="col-12 pb-3">
                                            <label>URL Mapa embebido: </label>
                                            <input type="text" class="form-control" id="txtMapaEmbebido"
                                                name="txtMapaEmbebido">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-12 text-left my-1 p-0">
                                    <table class="table tablaDialunes m-0" style="width: 100% !important;">
                                        <tbody id="divDiaLunes">
                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-sm-12 text-left my-1 p-0">
                                    <table class="table tablaDiaMartes m-0" style="width: 100% !important;">
                                        <tbody id="divDiaMartes">
                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-sm-12 text-left my-1 p-0">
                                    <table class="table tablaDiaMiercoles m-0" style="width: 100% !important;">
                                        <tbody id="divDiaMiercoles">
                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-sm-12 text-left my-1 p-0">
                                    <table class="table tablaDiaJueves m-0" style="width: 100% !important;">
                                        <tbody id="divDiaJueves">
                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-sm-12 text-left my-1 p-0">
                                    <table class="table tablaDiaViernes m-0" style="width: 100% !important;">
                                        <tbody id="divDiaViernes">
                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-sm-12 text-left my-1 p-0">
                                    <table class="table tablaDiaSabado m-0" style="width: 100% !important;">
                                        <tbody id="divDiaSabado">
                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-sm-12 text-left my-1 p-0">
                                    <table class="table tablaDiaDomingo m-0" style="width: 100% !important;">
                                        <tbody id="divDiaDomingo">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                            <button id="btnAgregarSucursales" type="button" class="btn btn-primary"
                                onclick="fAgregarSucursales()">Agregar</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <div id="grilla-sucursales" class="row pt-4">
        <div class="col-12">
            <div class="card mb-3">
                <div class="card-header">
                    Sucursales
                    <div class="pull-right">
                        <button type="button" class="btn btn-secondary"
                            onclick="$('#mdlImportar').modal('toggle');">Importar Excel</button>
                        <button type="button" class="btn btn-secondary fa fa-minus-circle"
                            onclick="abrirDialogoEliminarSucursales()"></button>
                        <button type="button" class="btn btn-secondary fa fa-plus-circle" data-target="modalSucursales"
                            onclick="abrirModalSucursales()"></button>
                    </div>
                </div>
                <div class="panel-body">
                    <table id="grillaSucursales" class="display" style="width:98%">
                        <thead>
                            <tr>
                                <th></th>
                                <th>Tipo de tienda</th>
                                <th>Ubicación</th>
                                <th>Horarios de atenci&oacute;n</th>
                                <th>Descargar QR</th>
                                <th>Editar</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="mdlEliminar" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">¿Eliminar registro?</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <i class="fa fa-times" aria-hidden="true"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <h2>Confirmación</h2>
                    <p>Esta acción eliminará todos los datos asociados del comercio, incluyendo descuentos, sucursales,
                        solicitudes, historial de consumos y acceso a la aplicación.</p>
                    <p class="font-weight-bold">Esta acción no se puede deshacer, ¿desea continuar?</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">No</button>
                    <button type="button" class="btn btn-primary" onclick="eliminar();">Sí</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="mdlImportar" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Importar</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">x</span>
                    </button>
                </div>
                <form id="formImportar" action="/comercio/importarSucursales" enctype="multipart/form-data" method="POST">
                    <div class="modal-body">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <input type="hidden" name="txtCuitExcel" value="{{ $comercio->cuit }}">
                        <input type="hidden" name="id" class="form-control" value="{{ $globalId }}" required>
                        <div class="row">
                            <div class="col-12 form-group">
                                <label for="txtArchivo">Importar archivo:</label>
                                <input type="file" id="excelSucursales" name="excelSucursales" class="form-control">
                            </div>
                            <div class="col-12 form-group">
                                <label for="txtDescargarFormato" class="d-block">Descargar formato:</label>
                                <a href="/files/formato_sucursales.xlsx" download class="btn btn-primary">
                                    <i class="fas fa-download"></i> Descargar
                                </a>
                            </div>
                            <div class="col-12 form-group">
                                <p class="mt-2"><strong>NOTA:</strong> Las columnas cuyo encabezado es de color
                                    <span class="font-weight-bold">ROJO</span> son obligatorias, en cambio las de color
                                    <span class="font-weight-bold">NARANJA</span> son opcionales. El único formato de
                                    archivo excel que se deberá importar será el que se descarga haciendo clic en el botón
                                    "Descargar".<br>Adicionalmente, se deberá prestar atención al formato de las columnas en
                                    si.
                                </p>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                        <button type="submit" class="btn btn-primary">Cargar</button>
                    </div>
                </form>
            </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>
    </div>
    <!-- -->
    <script>
        let sucursalesEliminadas = [];

        let horariosEliminar = [];

        let edicion = false;

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

        let usuarioExiste = false;

        $("#txtUsuario").change(function() {
            validarUsuario();
        });

        function setTipoTienda(tipoTienda) {
            if (tipoTienda == 1) {
                $('#domicilio-sucursal').show();
                $('#url-sucursal').hide();
                $('#sucursal-datos-localidad').show();
            } else if (tipoTienda == 2) {
                $('#domicilio-sucursal').hide();
                $('#url-sucursal').show();
                $('#sucursal-datos-localidad').hide();
            }
        }

        const validarUsuario = () => {
            let usuario = $("#txtUsuario").val();
            if (usuario != "") {
                $.ajax({
                    type: "GET",
                    url: '/comercio/usuarioExiste',
                    data: {
                        usuario: usuario
                    },
                    async: true,
                    dataType: 'json',
                    success: function(data) {
                        usuarioExiste = data.existe;
                        if (usuarioExiste == "true") {
                            msgShow(data.MSG, data.ESTADO);
                        }
                    }
                });
            }
        }

        $("#form1").validate();

        function guardar() {
            validarUsuario();
            if (usuarioExiste == "false" || usuarioExiste == false) {
                if ($("#form1").valid()) {
                    modificado = false;
                    form1.submit();
                } else {
                    $("#modalGuardar").modal('toggle');
                    msgShow("Corrija los errores e intente nuevamente.", "danger");
                    return false;
                }
            } else {
                msgShow("Usuario ya existente, ingrese uno distinto", "danger");
            }
        }

        function eliminar() {
            $.ajax({
                type: "GET",
                url: "{{ asset('/comercio/eliminar') }}",
                data: {
                    id: globalId
                },
                async: true,
                dataType: "json",
                success: function(data) {
                    if (data.err == "0") {
                        msgShow("Registro eliminado exitosamente.", "success");
                        $("#btnGuardar").removeClass('d-inline-block');
                        $("#btnEliminar").removeClass('d-inline-block');
                        $("#btnGuardar").hide();
                        $("#btnEliminar").hide();
                        $('#form1').hide();
                        $('#grilla-sucursales').hide();
                        $('#mdlEliminar').modal('toggle');
                    } else {
                        msgShow(data.MSG, data.ESTADO);
                        $('#mdlEliminar').modal('toggle');
                    }
                }
            });
        }

        //funcionalidad modal sucursales
        function fAgregarSucursales() {
            $("#form1").submit();
            limpiarFormulario();
        }

        function limpiarFormulario() {
            $("#txtNombreSucursal").val();
            $("#txtDomicilioSucursal").val();
        }

        function abrirDialogoEliminarSucursales() {
            if (globalId == '0') {
                msgShow("Debe dar de alta un beneficiario para poder asignar un familiar asociado", "danger");
            } else {
                $('#modalmsg').modal('toggle');
            }
        }

        function abrirModalSucursales() {
            if (globalId == '0') {
                msgShow("Debe dar de alta un beneficiario para poder asignar un familiar asociado", "danger");
            } else {
                $("#idSucursal").val("");
                $("#edicion").val("0");
                $("#txtNombreSucursal").val("");
                $("#txtDomicilioSucursal").val("");
                $("#txtUrlSucursal").val("");
                $("#lstTipoTienda").val(1);

                setTipoTienda(1);

                $("#lstProvincia").val(0);
                $("#lstLocalidad").val(0);
                $("#divDiaLunes").html("");
                $("#divDiaMartes").html("");
                $("#divDiaMiercoles").html("");
                $("#divDiaJueves").html("");
                $("#divDiaViernes").html("");
                $("#divDiaSabado").html("");
                $("#divDiaDomingo").html("");
                agregarHorarios('divDiaLunes', 0, "Lunes");
                agregarHorarios('divDiaMartes', 0, "Martes");
                agregarHorarios('divDiaMiercoles', 0, "Miercoles");
                agregarHorarios('divDiaJueves', 0, "Jueves");
                agregarHorarios('divDiaViernes', 0, "Viernes");
                agregarHorarios('divDiaSabado', 0, "Sabado");
                agregarHorarios('divDiaDomingo', 0, "Domingo");
                $('#modalSucursales').modal('toggle');
            }
        }

        function eliminarSucursales() {
            var grilla = $('#grillaSucursales').DataTable();
            $('#grillaSucursales input[type=checkbox]').each(function() {
                if (this.checked) {
                    $(this.parentElement.parentNode).addClass('borrar');
                    sucursalesEliminadas.push($(this).attr("id").replace("chk_sucursal-", ""));
                }
            });
            $("#idsSucursalesEliminar").val(sucursalesEliminadas);
            grilla.rows('.borrar').remove().draw(false);
            $('#modalmsg').modal('toggle');
        }

        const correct = (e) => {
            e.value = e.value.toLowerCase().replace(/ /g, "");
            $("#txtUsuario").val(e.value);
        }

        function agregarHorarios(idDiv, parametro, dia, idRango) {
            var num = parametro + 1;
            $("<tr>", {
                id: "divCelda_" + num
            }).appendTo("#" + idDiv);
            if (idRango) {
                $("#" + idDiv + " #divCelda_" + num).append("<input type='hidden' id='rango_" + idDiv + num +
                    "' name=rango" + idDiv + "[] value=" + idRango + ">");
            }

            $("<td>").append($("<span>", {
                id: "spanDia" + dia,
                name: "spanDia" + idDiv + "[]",
                text: dia
            })).appendTo("#" + idDiv + " #divCelda_" + num);

            $("<td>").append($("<input>", {
                id: "txtDia" + dia + "_" + num,
                name: "txtDia" + idDiv + "[]",
                class: "form-control",
                type: "hidden",
                style: "display:inline"
            })).appendTo("#" + idDiv + " #divCelda_" + num);

            $("<td>").append($("<input>", {
                id: "txtCheckDia" + dia + "_" + num,
                name: "txtCheckDia" + idDiv + "[]",
                class: "form-control checkbox",
                type: "checkbox",
                style: "display:inline; width:15px;",
                'data-toggle': "toggle",
                'data-on': "Abierto",
                'data-off': "Cerrado"
            })).appendTo("#" + idDiv + " #divCelda_" + num);

            $("<td>").append($("<input>", {
                id: "txtHoraInicio" + dia + num,
                name: "txtHoraInicio" + idDiv + "[]",
                class: "form-control",
                type: "time",
                style: "display:inline"
            })).appendTo("#" + idDiv + " #divCelda_" + num);

            $("<td>").append($("<input>", {
                id: "txtHoraFin" + dia + "_" + num,
                name: "txtHoraFin" + idDiv + "[]",
                class: "form-control",
                type: "time",
                style: "display:inline"
            })).appendTo("#" + idDiv + " #divCelda_" + num);

            $("<td>").append($("<td>", {
                id: "divAddAtt_" + num,
                class: "fa fa-plus boton-agregar px-0 text-center col-lg-1",
                onclick: "agregarHorarios('" + idDiv + "'," + num + ",'" + dia + "')"
            })).appendTo("#" + idDiv + " #divCelda_" + num);
            $("<td>").append($("<td>", {
                id: "divAddAtt_" + num,
                class: "fa fa-minus boton-quitar px-0 col-lg-1",
                onclick: "quitarHorario('" + idDiv + "'," + num + ")"
            })).appendTo("#" + idDiv + " #divCelda_" + num);
        }

        function quitarHorario(idDiv, parametro) {
            horariosEliminar.push($("#" + idDiv + " #divCelda_" + parametro + " #rango_" + idDiv + parametro).val());
            $("#aIdsHorariosEliminar").val(horariosEliminar);
            $("#" + idDiv + " #divCelda_" + parametro).remove();
        }

        function quitarHorarios(idDiv, parametro) {
            $(" #divCelda_" + parametro).remove();
        }

        function fBuscarLocalidad() {
            idProvincia = $("#lstProvincia option:selected").val();
            $.ajax({
                type: "GET",
                url: "/legajo/cliente/nuevo/obtenerLocalidades",
                data: {
                    id: idProvincia
                },
                async: false,
                dataType: "json",
                success: function(aLocalidades) {
                    $("#lstLocalidad option").remove();
                    $("<option>", {
                        value: 0,
                        text: "Seleccionar",
                        disabled: true,
                        selected: true
                    }).appendTo("#lstLocalidad");

                    for (i = 0; i < aLocalidades.length; i++) {
                        $("<option>", {
                            value: aLocalidades[i]["idlocalidad"],
                            text: aLocalidades[i]["nombre"]
                        }).appendTo("#lstLocalidad");
                    }
                    $("#lstLocalidad").prop("selectedIndex", "0");
                }
            });
        }

        function accion(idSucursal, accion) {
            if (accion == 1) {
                accion = 'descargar_qr';
            } else if (accion == 0) {
                accion = 'generar_qr';
            }
            $.ajax({
                type: "GET",
                url: "/comercio/sucursal/accion",
                data: {
                    accion: accion,
                    idSucursal: idSucursal
                },
                async: true,
                dataType: "json",
                success: function(data) {
                    if (data.accion = "generar_qr") {
                        window.open("/comercio/sucursal/qr/" + data.idSucursal);
                        $("#grillaSucursales").DataTable().ajax.reload();
                    } else if (data.accion = "descargar_qr") {
                        window.open("/comercio/sucursal/qr/" + data.idSucursal);
                        $("#grillaSucursales").DataTable().ajax.reload();
                    }
                }
            });
        }

        function editarSucursal(idSucursal) {
            $.ajax({
                type: "GET",
                url: "/comercios/obtenerDatosSucursal",
                data: {
                    idSucursal: idSucursal
                },
                async: true,
                dataType: "json",
                success: function(data) {
                    $("#idSucursal").val(idSucursal);
                    $("#txtNombreSucursal").val(data.sucursal.nombre);
                    $('#txtUrlSucursal').val(data.sucursal.urlSucursal);
                    $("#txtDomicilioSucursal").val(data.sucursal.domicilio);
                    $("#lstProvincia").val(data.sucursal.fk_idprovincia);
                    if(data.sucursal.mapa_embebido != null)
                        $('#txtMapaEmbebido').val(data.sucursal.mapa_embebido);

                    if (data.sucursal.latitud != null && data.sucursal.longitud != null)
                        $('#txtLatitudLongitud').val(`${data.sucursal.latitud}, ${data.sucursal.longitud}`);

                    fBuscarLocalidad();
                    $("#lstLocalidad").val(data.sucursal.fk_idlocalidad);

                    let lstTiposSucursales = document.getElementById('lstTipoTienda');
                    $('#lstTipoTienda').empty();

                    let option = document.createElement('option');
                    option.value = 1;
                    option.text = 'Física';
                    lstTiposSucursales.appendChild(option);

                    option = document.createElement('option');
                    option.value = 2;
                    option.text = 'Online';
                    lstTiposSucursales.appendChild(option);

                    $('#lstTipoTienda').val(data.sucursal.tipoTienda);

                    setTipoTienda(data.sucursal.tipoTienda);

                    if (data.horarios.lunes) {
                        for (let i = 0; i < data.horarios.lunes.length; i++) {
                            if (!edicion) {
                                agregarHorarios('divDiaLunes', i, "Lunes", data.horarios.lunes[i].idrango);
                            }
                            $("#txtHoraInicioLunes" + (i + 1)).val(data.horarios.lunes[i].hora_desde);
                            $("#txtHoraFinLunes_" + (i + 1)).val(data.horarios.lunes[i].hora_hasta);
                        }
                    } else {
                        if (!edicion) {
                            agregarHorarios('divDiaLunes', 0, "Lunes");
                        }
                    }
                    if (data.horarios.martes) {
                        for (let i = 0; i < data.horarios.martes.length; i++) {
                            if (!edicion) {
                                agregarHorarios('divDiaMartes', i, "Martes", data.horarios.martes[i].idrango);
                            }
                            $("#txtHoraInicioMartes" + (i + 1)).val(data.horarios.martes[i].hora_desde);
                            $("#txtHoraFinMartes_" + (i + 1)).val(data.horarios.martes[i].hora_hasta);
                        }
                    } else {
                        if (!edicion) {
                            agregarHorarios('divDiaMartes', 0, "Martes");
                        }
                    }
                    if (data.horarios.miercoles) {
                        for (let i = 0; i < data.horarios.miercoles.length; i++) {
                            if (!edicion) {
                                agregarHorarios('divDiaMiercoles', i, "Miercoles", data.horarios.miercoles[i]
                                    .idrango);
                            }
                            $("#txtHoraInicioMiercoles" + (i + 1)).val(data.horarios.miercoles[i].hora_desde);
                            $("#txtHoraFinMiercoles_" + (i + 1)).val(data.horarios.miercoles[i].hora_hasta);
                        }
                    } else {
                        if (!edicion) {
                            agregarHorarios('divDiaMiercoles', 0, "Miercoles");
                        }
                    }
                    if (data.horarios.jueves) {
                        for (let i = 0; i < data.horarios.jueves.length; i++) {
                            if (!edicion) {
                                agregarHorarios('divDiaJueves', i, "Jueves", data.horarios.jueves[i].idrango);
                            }
                            $("#txtHoraInicioJueves" + (i + 1)).val(data.horarios.jueves[i].hora_desde);
                            $("#txtHoraFinJueves_" + (i + 1)).val(data.horarios.jueves[i].hora_hasta);
                        }
                    } else {
                        if (!edicion) {
                            agregarHorarios('divDiaJueves', 0, "Jueves");
                        }
                    }
                    if (data.horarios.viernes) {
                        for (let i = 0; i < data.horarios.viernes.length; i++) {
                            if (!edicion) {
                                agregarHorarios('divDiaViernes', i, "Viernes", data.horarios.viernes[i]
                                    .idrango);
                            }
                            $("#txtHoraInicioViernes" + (i + 1)).val(data.horarios.viernes[i].hora_desde);
                            $("#txtHoraFinViernes_" + (i + 1)).val(data.horarios.viernes[i].hora_hasta);
                        }
                    } else {
                        if (!edicion) {
                            agregarHorarios('divDiaViernes', 0, "Viernes");
                        }
                    }
                    if (data.horarios.sabado) {
                        for (let i = 0; i < data.horarios.sabado.length; i++) {
                            if (!edicion) {
                                agregarHorarios('divDiaSabado', i, "Sabado", data.horarios.sabado[i].idrango);
                            }
                            $("#txtHoraInicioSabado" + (i + 1)).val(data.horarios.sabado[i].hora_desde);
                            $("#txtHoraFinSabado_" + (i + 1)).val(data.horarios.sabado[i].hora_hasta);
                        }
                    } else {
                        if (!edicion) {
                            agregarHorarios('divDiaSabado', 0, "Sabado");
                        }
                    }
                    if (data.horarios.domingo) {
                        for (let i = 0; i < data.horarios.domingo.length; i++) {
                            if (!edicion) {
                                agregarHorarios('divDiaDomingo', i, "Domingo", data.horarios.domingo[i]
                                    .idrango);
                            }
                            $("#txtHoraInicioDomingo" + (i + 1)).val(data.horarios.domingo[i].hora_desde);
                            $("#txtHoraFinDomingo_" + (i + 1)).val(data.horarios.domingo[i].hora_hasta);
                        }
                    } else {
                        if (!edicion) {
                            agregarHorarios('divDiaDomingo', 0, "Domingo");
                        }
                    }
                    edicion = true;
                    $("#edicion").val("1");
                    $('#modalSucursales').modal('toggle');
                }
            });
        }
    </script>
@endsection