@extends('masushuaia.plantilla')
@section('titulo', 'Datos del cupon')
@section('scripts')
    <link href="{{ asset('css/datatables.min.css') }}" rel="stylesheet">
    <link href="{{ asset('css/bootstrap-select.min.css') }}" rel="stylesheet">
    <script src="{{ asset('js/datatables.min.js') }}"></script>
    <script src="{{ asset('js/bootstrap-select.min.js') }}"></script>
    <script>
        globalId = '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 ($cuponDeDescuento->idcupon != 198)
        @if ($globalId > 0)
            <a title="Eliminar" id="btnEliminar" href="#" class="btn-blue py-1 px-4 mr-2" aria-hidden="true"
                onclick="javascript: $('#mdlEliminar').modal('toggle');"><span>Eliminar</span></a>
        @endif
        <a title="Guardar" id="btnGuardar" href="#" class="btn-blue py-1 px-4" aria-hidden="true"
            onclick="javascript: $('#modalGuardar').modal('toggle');"><span>Guardar</span></a>
    @endif

    <script>
        function fsalir() {
            location.href = "/cupones";
        }
    </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="/cupones">Descuentos</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>
            <div class="form-group col-sm-6">
                <label for="txtNombre">Promoción *</label>
                <input type="text" class="form-control" id="txtNombre" name="txtNombre"
                    value="{{ $cuponDeDescuento->nombre }}" required>
            </div>
            <div class="from-group col-sm-6">
                <label for="txtAclaracion">Legales</label>
                <input type="text" id="txtAclaracion" name="txtAclaracion" class="form-control"
                    value="{{ $cuponDeDescuento->aclaracion }}" maxlength="78">
            </div>
            <div class="form-group col-sm-6">
                <label for="lstTipoDescuento">Tipo de descuento</label>
                <select class="form-control" id="lstTipoDescuento" name="lstTipoDescuento">
                    <option selected disabled value="">Seleccionar</option>
                    <option value="1"
                        {{ isset($cuponDeDescuento) && $cuponDeDescuento->tipo_descuento == 1 ? 'selected' : '' }}>
                        Precio fijo
                    </option>
                    <option value="2"
                        {{ isset($cuponDeDescuento) && $cuponDeDescuento->tipo_descuento == 2 ? 'selected' : '' }}>
                        Porcentaje
                        fijo</option>
                </select>
            </div>
            @if (isset($aTipoCompra))
                <div class="form-group col-sm-6">
                    <label>Tipo de compra *</label>
                    <select class="form-control" id="lstTipoCompra" name="lstTipoCompra" required>
                        <option @if (!isset($cuponDeDescuento->tipoCompra)){{ 'selected' }}@endif disabled value="">Seleccionar</option>
                        @foreach ($aTipoCompra as $item)
                            <option @if (isset($cuponDeDescuento->tipoCompra) && $cuponDeDescuento->tipoCompra == $item->idtipocompra){{ 'selected' }}@endif value="{{ $item->idtipocompra }}">
                                {{ $item->descripcion }}
                            </option>
                        @endforeach
                    </select>
                </div>
            @endif
            <div class="form-group col-sm-6">
                <label for="txtDescuento">Descuento *</label>
                <input type="number" class="form-control" id="txtDescuento" name="txtDescuento"
                    value="{{ $cuponDeDescuento->descuento }}" required>
            </div>
            @if (isset($aRubros))
                <div class="form-group col-sm-6">
                    <label for="lstRubros">Rubro *</label>
                    <select class="form-control selectpicker" data-live-search="true" id="lstRubros" name="lstRubros"
                        required>
                        @if (isset($cuponDeDescuento->fk_idrubro))
                            <option class="selected" selected value="{{ $cuponDeDescuento->fk_idrubro }}">
                                {{ $cuponDeDescuento->nombre_rubro }}</option>
                        @else
                            <option class="selected" selected disabled value="">Seleccionar rubro</option>
                        @endif
                        @foreach ($aRubros as $rubro)
                            @if ($rubro->idrubro != $cuponDeDescuento->fk_idrubro)
                                <option value="{{ $rubro->idrubro }}">{{ $rubro->nombre }}</option>
                            @endif
                        @endforeach
                    </select>
                </div>
            @endif
            <div class="from-group col-sm-6">
                <label for="lstActivo">Activo *</label>
                <select id="lstActivo" name="lstActivo" class="form-control" required>
                    <option value="" disabled selected>Seleccionar </option>
                    <option value="1"
                        {{ isset($cuponDeDescuento) && $globalId > 0 && $cuponDeDescuento->activo == 1 ? 'selected' : '' }}>
                        Si</option>
                    <option value="0"
                        {{ isset($cuponDeDescuento) && $globalId > 0 && $cuponDeDescuento->activo == 0 ? 'selected' : '' }}>
                        No</option>
                </select>
            </div>
            <div class="from-group col-sm-6">
                <label for="txtUrlDescuento">URL</label>
                <input class="form-control" type="url" name="txtUrlDescuento" id="txtUrlDescuento"
                    value="{{ $cuponDeDescuento->urlDescuento }}">
            </div>
        </div>

        @if ($globalId > 0)
            <div class="row pt-4">
                <div class="col">
                    <div class="card">
                        <div class="card-header">
                            Tags de búsqueda
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="form-group col-lg-6">
                                    <div class="row">
                                        <div class="col-6 align-self-center">
                                            <input type="text" class="form-control" id="txtTagInput">
                                        </div>
                                        <div class="col-6 align-self-center pl-0">
                                            <i class="fa fa-plus-circle" aria-hidden="true"
                                                onclick="addTag($('#txtTagInput').val())"
                                                style="font-size: 1.4em;cursor: pointer;vertical-align: middle;color: green;"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" name="tags" value="1">
                            <div class="row mx-0" id="container-tags"></div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <div class="row pt-4">
            <div class="col-12">
                <div class="card mb-3">
                    <div class="card-header">
                        Comercio y sucursales
                        @if ($cuponDeDescuento->idcupon != 198)
                            <div class="pull-right">
                                <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"
                                    onclick="abrirModalSucursales()"></button>
                            </div>
                        @endif
                    </div>
                    <div class="panel-body">
                        <table id="grilla" class="display" style="width:98%">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>Sucursal</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <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">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12 form-group">
                            @if (isset($aComercios))
                                <label>Comercio</label>
                                <select class="form-control selectpicker" data-live-search="true" name="lstComercios"
                                    id="lstComercios" onchange="setSucursales(this.value);">
                                    <option disabled selected value="">Seleccionar</option>
                                    @foreach ($aComercios as $comercio)
                                        <option value="{{ $comercio->idcomercio }}">{{ $comercio->nombre }}</option>
                                    @endforeach
                                </select>
                            @endif
                        </div>
                        <div class="col-12 form-group">
                            <div id="msgSucursales" class="alert alert-info" style="display: none;">
                            </div>
                        </div>
                        <div id="divSucursales" class="col-12 form-group" style="display: none;">
                            <label>Sucursal</label>
                            <select class="form-control" name="lstSucursales" id="lstSucursales">
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                    <button type="button" class="btn btn-primary" onclick="fAgregarSucursales()">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="eliminarGrupoSucursales();">Aceptar</button>
                </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">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">¿Deseas eliminar el registro actual?</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>
    <script>
        window.onload = function() {
            $('#spinner-btn-tags').hide();
            if (globalId > 0) {
                $.ajax({
                    type: 'GET',
                    dataType: 'json',
                    data: {
                        id: globalId
                    },
                    url: '/cupon/get-tags',
                    success: function({
                        code,
                        msg,
                        tags
                    }) {
                        if (code == 200) {
                            tags.forEach(function({
                                tag
                            }) {
                                let divPadre = document.getElementById('container-tags');

                                let col = document.createElement('div');
                                col.classList = 'col-auto alert alert-info p-2 m-1';

                                let id = Math.random().toString(36).substring(2, 15) + Math.random()
                                    .toString(36).substring(2, 15);

                                col.id = `tag_${id}`;
                                col.innerHTML =
                                    `<div class="row"><div class="col-auto pr-2"><p class="m-0" id="text_${tag}">${tag}<input type="hidden" value="${tag}" name="txtTags[]"></p></div><div class="col-auto pl-0"><i class="fa fa-times" aria-hidden="true" style="cursor: pointer;" onclick="remove('tag_${id}');"></i></div></div>`;

                                divPadre.appendChild(col);
                            });
                        }
                    }
                });
            }
        }

        function setSucursales(comercio) {
            $('#msgSucursales').hide();
            $('#divSucursales').hide();
            let lstSucursales = document.getElementById('lstSucursales');
            for (let i = lstSucursales.options.length; i >= 0; i--) {
                lstSucursales.remove(i);
            }
            if (comercio != '') {
                $.ajax({
                    type: 'GET',
                    dataType: 'json',
                    async: true,
                    url: '/cupones/comercio/getSucursales',
                    data: {
                        idComercio: comercio
                    },
                    success: function(data) {
                        if (data.error == 0) {
                            let option = document.createElement('option');
                            option.value = '';
                            option.text = 'Seleccionar';
                            option.setAttribute('disabled', '');
                            option.setAttribute('selected', '');
                            lstSucursales.appendChild(option);
                            data.sucursales.forEach(function(sucursal) {
                                let option = document.createElement('option');
                                option.value = sucursal.idsucursal;

                                if ((sucursal.localidad == '' || sucursal.localidad == null) && (
                                        sucursal.provincia == '' || sucursal.provincia == null) && (
                                        sucursal.domicilio == '' || sucursal.domicilio == null))
                                    option.text = `${sucursal.nombre}`;
                                else if ((sucursal.localidad == '' || sucursal.localidad == null) && (
                                        sucursal.provincia == '' || sucursal.provincia == null) && (
                                        sucursal.domicilio != '' || sucursal.domicilio != null))
                                    option.text = `${sucursal.domicilio}`;
                                else if ((sucursal.localidad == '' || sucursal.localidad == null) && (
                                        sucursal.provincia != '' || sucursal.provincia != null) && (
                                        sucursal.domicilio == '' || sucursal.domicilio == null))
                                    option.text = `${sucursal.provincia}`;
                                else if ((sucursal.localidad == '' || sucursal.localidad == null) && (
                                        sucursal.provincia != '' || sucursal.provincia != null) && (
                                        sucursal.domicilio != '' || sucursal.domicilio != null))
                                    option.text = `${sucursal.domicilio}, ${sucursal.provincia}`;
                                else if ((sucursal.localidad != '' || sucursal.localidad != null) && (
                                        sucursal.provincia == '' || sucursal.provincia == null) && (
                                        sucursal.domicilio == '' || sucursal.domicilio == null))
                                    option.text = `${sucursal.localidad}`;
                                else if ((sucursal.localidad != '' || sucursal.localidad != null) && (
                                        sucursal.provincia == '' || sucursal.provincia == null) && (
                                        sucursal.domicilio != '' || sucursal.domicilio != null))
                                    option.text = `${sucursal.domicilio}, ${sucursal.localidad}`;
                                else if ((sucursal.localidad != '' || sucursal.localidad != null) && (
                                        sucursal.provincia != '' || sucursal.provincia != null) && (
                                        sucursal.domicilio == '' || sucursal.domicilio == null))
                                    option.text = `${sucursal.localidad}, ${sucursal.provincia}`;
                                else if ((sucursal.localidad != '' || sucursal.localidad != null) && (
                                        sucursal.provincia != '' || sucursal.provincia != null) && (
                                        sucursal.domicilio != '' || sucursal.domicilio != null))
                                    option.text =
                                    `${sucursal.domicilio}, ${sucursal.localidad}, ${sucursal.provincia}`;

                                lstSucursales.appendChild(option);
                            });
                            $('#divSucursales').show();
                        } else {
                            $('#msgSucursales').show();
                            document.getElementById('msgSucursales').innerHTML = data.msg;
                        }
                    }
                });
            }
        }

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

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

        function guardar() {
            if ($("#form1").valid()) {
                modificado = false;
                form1.submit();
            } else {
                $("#modalGuardar").modal('toggle');
                msgShow("Corrija los errores e intente nuevamente.", "danger");
                return false;
            }
        }

        function eliminar() {
            $.ajax({
                type: "GET",
                url: "{{ asset('/cupon/eliminar') }}",
                data: {
                    id: globalId
                },
                async: true,
                dataType: "json",
                success: function(data) {
                    if (data.err = "0") {
                        msgShow("Registro eliminado exitosamente.", "success");
                        $("#btnGuardar").hide();
                        $("#btnEliminar").hide();
                        $("#form1").hide();
                        $('#mdlEliminar').modal('toggle');
                    } else {
                        msgShow("Error al eliminar.", "danger");
                        $('#mdlEliminar').modal('toggle');
                    }
                }
            });
        }

        function fAgregarSucursales() {
            if (($("#lstSucursales option:selected").val() != '') && ($("#lstSucursales option:selected").val() !=
                    undefined)) {
                let existe = false;
                $('#grilla input[type=hidden]').each(function(index, item) {
                    if (!existe) {
                        if ($("#lstSucursales option:selected").val() == item.value) {
                            existe = true;
                        }
                    }
                });
                if (!existe) {
                    var grilla = $('#grilla').DataTable();
                    grilla.row.add([
                        "<input type='checkbox' name='txtId[]' value=''>",
                        $("#lstComercios option:selected").text() + ' - ' + $("#lstSucursales option:selected")
                        .text() + "<input type='hidden' name='txtSucursal[]' value='" + $(
                            "#lstSucursales option:selected").val() + "'>",
                        ""
                    ]).draw();
                }
                $('#modalSucursales').modal('toggle');
                limpiarFormulario();
            }
        }

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

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

        function abrirModalSucursales() {
            $('#modalSucursales').modal('toggle');
        }

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

        function addTag(tag) {
            if (tag != '') {
                let tagExistente = document.getElementById(`text_${tag}`);
                if (tagExistente === null) {
                    let divPadre = document.getElementById('container-tags');

                    let col = document.createElement('div');
                    col.classList = 'col-auto alert alert-info p-2 m-1';

                    let id = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);

                    col.id = `tag_${id}`;
                    col.innerHTML =
                        `<div class="row"><div class="col-auto pr-2"><p class="m-0" id="text_${tag}">${tag}<input type="hidden" value="${tag}" name="txtTags[]"></p></div><div class="col-auto pl-0"><i class="fa fa-times" aria-hidden="true" style="cursor: pointer;" onclick="remove('tag_${id}');"></i></div></div>`;

                    divPadre.appendChild(col);
                }
            }
        }

        function remove(id) {
            $(`#${id}`).remove();
        }
    </script>
@endsection