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

@section('cabecera')
<h1>
    Códigos de Promociones
</h1>

@endsection
@section('style')
<style type="text/css">
    .table {
        background-color: #ffffff;
    }

    .box-body {
        background-color: #ffffff;
    }

    .oblLabel {
        color: #FF0000;
    }
</style>

<style media="screen">
    .preview {
        overflow: hidden;
        width: 160px;
        height: 160px;
        margin: 10px;
        border: 1px solid red;
    }

    .modal-lg {
        max-width: 1000px !important;
    }
</style>

@endsection

@section('title')
Promo Codes
@endsection




@section('contenido')
<div class="row">
    <div class="col-12">
        <div class="box-body">
            <div class="box-header with-border">
                <div class="col-md-12 text-right">
                        <a class="btn btn-info" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                            <i class="fa fa-filter" aria-hidden="true"></i>
                        </a>
                    <!-- Botón para crear código -->
                    <button class="btn btn-info" id="createCodeBtn" data-toggle="modal"
                        data-target="#createPromoCodeModal" onclick="resetCreatePromoCodeForm()">{{trans('promocodes.crearCodigo')}}</a>
                </div>
                    <div class="collapse" id="collapseExample">
                        <div class="card card-body">
                            <form class="form-group" action="" method="get">
                                <div class="row">
                                    <div class="col-2"></div>
                                    <div class="col-4">
                                        <label for="codeType">Tipo</label>
                                        <select class="form-control" name="codeType" id="codeType"
                                            onchange="onSelectChange(this)">
                                                <option value="">{{trans('promocodes.seleccioneTipoCodigo')}}</option>
                                            @foreach ($valorParametro as $currentPromoCodeType)
                                            @if ($currentPromoCodeType->idValorParametro == 1701)
                                                    <option value="{{$currentPromoCodeType->idValorParametro}}">{{$currentPromoCodeType->nombre}}</option>
                                            @endif
                                            @if ($currentPromoCodeType->idValorParametro == 1702)
                                                <option value="{{$currentPromoCodeType->idValorParametro}}">{{$currentPromoCodeType->nombre}}</option>
                                            @endif
                                            @if ($currentPromoCodeType->idValorParametro == 1703)
                                                <option value="{{$currentPromoCodeType->idValorParametro}}">{{$currentPromoCodeType->nombre}}</option>
                                            @endif
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label for="codeStatus"> {{ trans('promocodes.estado') }} </label>
                                            <select id="codeStatus" name="codeStatus" class="form-control">
                                                <option value=""> {{ trans('promocodes.seleccionEstado') }} </option>
                                                <option value="1"> {{ trans('promocodes.activo') }} </option>
                                                <option value="0"> {{ trans('promocodes.inactivo') }} </option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-2"></div>
                                    </div>
                                    <div class="row">
                                        <div class="col-2"></div>
                                        <div class="col-4">
                                            <div class="form-group">
                                              <label for="codeValue"> {{  trans('promocodes.valor') }} </label>
                                              <input type="number"
                                                  name="codeValue"
                                                  class="form-control"
                                                  id="codeValue"
                                                  autocomplete="off"
                                                  placeholder="{{  trans('promocodes.valorPromoCode') }} ">
                                            </div>
                                        </div>
                                        <div class="col-4">

                                        </div>
                                        <div class="col-2"></div>
                                    </div>
                                    <div class="row">
                                        <div class="col-12 text-center">
                                            <input type="submit" class="btn btn-info btn-sm" value=" {{  trans('promocodes.buscar') }}">
                                            <a href="{{route("promocodes.index")}}" class="btn btn-info btn-sm">{{trans('promocodes.borrarFiltros')}}</a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                <br>
                <!-- Tabla para listar los códigos -->
                <table class="table table-bordered table-responsive" id="tablePromoCodes">
                    <thead>
                        <tr>
                            <th class="text-center">{{trans('promocodes.fecha')}}</th>
                            <th class="text-center">{{trans('promocodes.tipo')}}</th>
                            <th class="text-center">{{trans('promocodes.valor')}}</th>
                            <th class="text-center">{{trans('promocodes.codigo')}}</th>
                            <th class="text-center">{{trans('promocodes.estado')}}</th>
                            <th class="text-center">{{trans('promocodes.opciones')}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!--

                    <tr>

                        La tabla es de la forma...

                        <td class="text-center">04-06-2022</td>
                        <td class="text-center">General</td>
                        <td class="text-center">1500000</td>
                        <td class="text-center">Mauricio Martínez.</td>
                        <td class="text-center">
                            <button class="btn btn-info">
                            </button>
                            <button class="btn btn-info">
                                <i class="fa fa-pencil-square-o"></i>
                            </button>
                            <button class="btn btn-danger">
                                <i class='fa fa-trash'></i>
                            </button>
                    </tr>
                    -->
                        @foreach ($dataPromocodes["data"] as $currentPromocode)
                        <!--
                        array:9 [▼
                          "idPromoCode" => 1
                          "created_at" => "2022-05-18T21:18:59.000000Z"
                          "updated_at" => "2022-05-18T21:18:59.000000Z"
                          "state" => 1
                          "idRest" => 1
                          "idTipoCode" => 1
                          "code" => "DVR2A98"
                          "descripcion" => "Placeholder."
                          "data" => ["codeValue" =>"5000", "codeDate"]
                        ]
                    -->
                    @php
                        $currentPromocode->data = json_decode($currentPromocode->data);
                    @endphp
                        <tr>
                            <td class="text-center">{{ $currentPromocode->data->codeDate }}</td>
                            <td class="text-center">
                                    <!-- General -->
                                    @if ($currentPromocode->idTipoCode == 1701)
                                        General
                                    @endif
                                    <!-- Usuario Definido -->
                                    @if ($currentPromocode->idTipoCode == 1702)
                                        Usuario Definido
                                    @endif
                                    <!-- Primer Pedido -->
                                    @if ($currentPromocode->idTipoCode == 1703)
                                        Primer Pedido
                                    @endif
                            </td>

                            <td class="text-center">
                                <!-- Absoluto -->
                                    @if (isset($currentPromocode->tipovalor) and ($currentPromocode->tipovalor == 2 ) )
                                        {{App\Helpers\monedaH::getCurrentSimbol()}}
                                    @endif
                                        {{ $currentPromocode->valor }}
                                <!-- Porcentual -->
                                    @if (isset($currentPromocode->tipovalor) and ($currentPromocode->tipovalor == 1 ) )
                                        %
                                    @endif
                            </td>
                            <td class="text-center">{{ $currentPromocode->code }}</td>
                            <td class="text-center">
                                @if ( $currentPromocode->state == 1 )
                                <a href="javaScript:;" onclick="cambiarEstado({{$currentPromocode->idPromoCode}})">
                                    <span class="badge" id="selectEstado_{{ $currentPromocode->idPromoCode }}"
                                        style="background:rgb(1, 151, 1)"> {{ trans('promocodes.activo') }} </span>
                                </a>
                                @endif

                                @if ($currentPromocode->state == 3 )

                                    <span class="badge" id="selectEstado_{{ $currentPromocode->idPromoCode }}"
                                        style="background:rgb(79, 36, 210)"> {{ trans('promocodes.usado') }} </span>

                                @endif

                                @if($currentPromocode->state == 0)
                                <a href="javaScript:;" onclick="cambiarEstado({{$currentPromocode->idPromoCode}})">
                                    <span class="badge" id="selectEstado_{{ $currentPromocode->idPromoCode }}"
                                        style="background:rgb(212, 10, 10)"> {{ trans('promocodes.inactivo') }} </span>
                                </a>
                                @endif
                            </td>
                            <td class="text-center">

                                <button class="btn btn-info" id="viewCodeBtn"
                                    data-toggle="modal" data-target="#viewPromoCodeModal" onclick="preparePromoCodeForm({{$currentPromocode->idPromoCode}}, 'view')">
                                    <i class="fa fa-eye"></i>
                                </button>
                                <button class="btn btn-info" id="editCodeBtn"
                                    data-toggle="modal" data-target="#editPromoCodeModal" onclick="preparePromoCodeForm({{$currentPromocode->idPromoCode}}, 'edit')">
                                    <i class="fa fa-pencil-square-o"></i>
                                </button>
                                <button class="btn btn-danger" id="deleteCodeBtn"
                                    data-toggle="modal" data-target="#deletePromoCodeModal" onclick="preparePromoCodeForm({{$currentPromocode->idPromoCode}}, 'delete')">
                                    <i class='fa fa-trash'></i>
                                </button>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>


<x-modal-crear-promo-code :valor-parametro="$valorParametro"></x-modal-crear-promo-code>
<x-modal-editar-promo-code :valor-parametro="$valorParametro"></x-modal-editar-promo-code>
<x-modal-ver-promo-code :valor-parametro="$valorParametro"></x-modal-ver-promo-code>
<x-modal-eliminar-promo-code :valor-parametro="$valorParametro"></x-modal-eliminar-promo-code>

@endsection

@section('js')
<script>

    function randomString(length) {
        return Math.round((Math.pow(36, length + 1) - Math.random() * Math.pow(36, length))).toString(36).slice(1);
    }

    // codeInput

    function generatePromoCode(formType) {

        let form;
        if (formType == 'create') {
            form = document.getElementById('createpromocodeform');
        }
        if (formType == 'edit') {
            form = document.getElementById('editpromocodeform');

        }
        let codeInput = form.elements['codeInput'];
        codeInput.value = randomString(7).toUpperCase();
    }

    function resetCreatePromoCodeForm() {
        let createPromoCodeForm = document.getElementById('createpromocodeform');
        createpromocodeform.reset();
        let extraInputCollection = document.getElementsByClassName("codeUserDefinedForm");
        for (let currentElement of extraInputCollection) {
            currentElement.style.display = "none";
        }
    }

    function preparePromoCodeForm(promocodeId, formType){
        var host = "{{$_SERVER["HTTP_HOST"]}}";
        var data = {
            codeId: promocodeId
        };
        if (formType == 'delete') {
            let deletePromoCodeModal = document.getElementById('deletePromoCodeModal');
            deletePromoCodeModal.setAttribute('data-promocodeId', promocodeId);
            return;
        }
        let form;
        if (formType == 'view') {
            $('#tbViewPedidosPromocode tbody').empty();
            form = document.getElementById('viewpromocodeform');

        }
        if (formType == 'edit') {
            form = document.getElementById('editpromocodeform');

        }
        $.ajax({
            url: "{{route("promocodes.show")}}",
            data: data,
            type: 'get',
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function () {
                swal({
                    title: "{{trans('promocodes.cargandoDatosDelCodigo')}}...",
                    text: "{{trans('promocodes.espereUnMomento')}}...",
                    showConfirmButton: false,
                });
            },
            success: function (response) {
                if (response.code == 200) {
                    form.elements['codeDate'].value = response.data.data.codeDate;
                    form.elements['codeType'].value = response.data.idTipoCode;
                    form.elements['codeInput'].value = response.data.code;
                    if (response.data.tipovalor == 1) {
                        form.elements['codeRelative'].checked = true;
                        form.elements['codeAbsolute'].checked = false;
                    }
                    if (response.data.tipovalor == 2) {
                        form.elements['codeAbsolute'].checked = true;
                        form.elements['codeRelative'].checked = false;
                    }
                    form.elements['codeValue'].value = response.data.valor;
                    form.elements['codeDescription'].value = response.data.descripcion;
                    form.elements['codeId'].value = promocodeId;
                    form.elements['codeUser'].value = response.data.data.codeUser;
                    onSelectChange(form.elements['codeType']);
                    swal.close();
                    if (response.data.codeUsage.length != 0) {
                        populateViewProductoTable(response.data.codeUsage);
                    }
                } else {
                    swal("{{trans('promocodes.error')}}", "{{trans('promocodes.errorAlCargarDatosDelCodigo')}}", "error");
                }
            },
            error: function (xhr) {
                swal("{{trans('promocodes.error')}}!", "{{trans('promocodes.errorAlCargarDatosDelCodigo')}}", "error");
            }
        });
    }

    function deletePromoCodeForm() {
        let deletePromoCodeModal = document.getElementById('deletePromoCodeModal');
        promocodeId = deletePromoCodeModal.getAttribute('data-promocodeId');
        //let information = document.getElementById();
        var host = "{{$_SERVER["HTTP_HOST"]}}";
        var data = {
            codeId: promocodeId
        };
        $.ajax({
            url: "{{route("promocodes.delete")}}",
            data: data,
            type: 'post',
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function () {
                swal({
                    title: "{{trans('promocodes.eliminando')}}...",
                    text: "{{trans('promocodes.espereUnMomento')}}",
                    showConfirmButton: false,
                });
            },
            success: function (response) {
                if (response.code == 200) {
                    swal("{{trans('promocodes.exito')}}", "{{trans('promocodes.seHaEliminadoCorrectamenteElCodigoDePromocion')}}", "success");
                    location.replace(location.href)
                } else {
                    swal("{{trans('promocodes.error')}}", "{{trans('promocodes.errorAlEliminarElCodigoDePromocion')}}", "error");
                }
            },
            error: function (xhr) {
                swal("Error!", "{{trans('promocodes.errorAlEliminarElCodigoDePromocion')}}", "error");
            }
        });
    }

    // Usuarios Definidos.
    function onSelectChange(selectObject) {

        let currentValue = selectObject.value;
        let extraInputCollection = document.getElementsByClassName("codeUserDefinedForm");

        switch (currentValue) {
            // Usuario Definido
          case "1702":
            for (let currentElement of extraInputCollection) {
                currentElement.style.display = "block";
            }
            break;
        default:
            for (let currentElement of extraInputCollection) {
                currentElement.style.display = "none";
            }
        }
    }

    function sendCreatePromoCodeForm() {

        // Buscamos el formulario específico

        let fields = $("#createpromocodeform").serializeArray();
        let data = {};

        // Iteramos sobre toda su data y la colocamos en un objeto plato

        for (let currentElement of fields) {
            data[currentElement.name] = currentElement.value;
        }

        // Removemos el usuario si el código no es usuario definido

        if (data["codeType"] != 1702) {
            data["codeUser"] = null;
        }

        // Enviamos por AJAX y creamos el código de promoción


        $.ajax({
            url: "{{route("promocodes.store")}}",
            data: data,
            type: 'post',
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function () {
                swal({
                    title: "Creando código...",
                    text: "Espere un momento",
                    showConfirmButton: false,
                });
            },
            success: function (response) {
                if (response.code == 200) {
                    swal("{{trans('promocodes.exito')}}", "{{trans('promocodes.seHaCreadoCorrectamenteElCodigoDePromocion')}}", "success");
                    location.replace(location.href)
                    return;
                }

                if (response.code == 302) {
                    swal("{{trans('promocodes.error')}}", "{{trans('promocodes.eseUsuarioNoExiste')}}.", "error");
                    return;
                }

                if (response.code == 303) {
                    swal("{{trans('promocodes.error')}}", "{{trans('promocodes.esteUsuarioNoEstaPermitido')}}", "error");
                    return;
                }

                swal("{{trans('promocodes.error')}}", "{{trans('promocodes.errorAlCrearElCódigoDePromocion')}}.", "error");

            },
            error: function (xhr) {
                swal("{{trans('promocodes.error')}}", "{{trans('promocodes.errorAlCrearElCódigoDePromocion')}}.", "error");
            }
        });
    }

    function sendEditPromoCodeForm() {

        // Buscamos el formulario específico

        let fields = $("#editpromocodeform").serializeArray();
        let data = {};

        // Iteramos sobre toda su data y la colocamos en un objeto plato

        for (let currentElement of fields) {
            data[currentElement.name] = currentElement.value;
        }


        // Removemos el usuario si el código no es usuario definido

        if (data["codeType"] != 1702) {
            data["codeUser"] = null;
        }
        // Enviamos por AJAX y creamos el código de promoción

        $.ajax({
            url: "{{route("promocodes.edit")}}",
            data: data,
            type: 'post',
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function () {
                swal({
                    title: "Editando código...",
                    text: "Espere un momento",
                    showConfirmButton: false,
                });
            },
            success: function (response) {
                if (response.code == 200) {
                    swal("{{trans('promocodes.exito')}}", "{{trans('promocodes.seHaEditadoCorrectamenteElCodigoDePromocion')}}", "success");
                    location.replace(location.href)
                    return;
                }

                if (response.code == 302) {
                    swal("{{trans('promocodes.error')}}", "{{trans('promocodes.eseUsuarioNoExiste')}}.", "error");
                    return;
                }

                if (response.code == 303) {
                    swal("{{trans('promocodes.error')}}", "{{trans('promocodes.esteUsuarioNoEstaPermitido')}}", "error");
                    return;
                }

                swal("{{trans('promocodes.error')}}", "{{trans('promocodes.errorAlEditarElCodigoDePromocion')}}.", "error");

            },
            error: function (xhr) {
                swal("Error!", "{{trans('promocodes.errorAlEditarElCodigoDePromocion')}}.", "error");
            }
        });
    }

    function cambiarEstado(idPromoCode) {
        var host = "{{$_SERVER["HTTP_HOST"]}}";
        var data = {
            codeId: idPromoCode,
        };
        $.ajax({
            url: "{{route("promocodes.state")}}",
            data: data,
            type: 'post',
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function () {
                swal({
                    title: "{{trans('promocodes.cargando')}}...",
                    text: '{{trans('promocodes.cambiandoEstadoDePromocode')}}...',
                    showConfirmButton: false
                });
            },
            success: function (response) {
                if (response.code == 200) {
                    swal.close();
                    obj = document.getElementById('selectEstado_' + idPromoCode);
                    if (response.data.state == 0) {
                        obj.textContent = '{{ trans('promocodes.inactivo') }}';
                        obj.style = "background:rgb(212, 10, 10)";
                    }
                    if (response.data.state == 1) {
                        obj.textContent = '{{ trans('promocodes.activo') }}';
                        obj.style = "background:rgb(1, 151, 1)";
                    }
                } else {
                    swal({
                        title: "{{trans('promocodes.error')}}",
                        text: "{{trans('promocodes.errorAlActualizarElEstadoDelPromocode')}}",
                        showConfirmButton: true
                    });
                }
            },
            error: function (xhr) {
                swal({
                    title: "{{trans('promocodes.error')}}",
                    text: "{{trans('promocodes.errorAlActualizarElEstadoDelPromocode')}}",
                    showConfirmButton: true
                });
            }
        });

    }

    function updateCodeValueType(radioButton, type) {
        let form;

        if (type == 'create') {
            form = document.getElementById('createpromocodeform');
        }

        if (type == 'edit') {
            form = document.getElementById('editpromocodeform');
        }
        if (radioButton.id == "codeAbsolute") {
            form.elements['codeValue'].max=10000000;
            form.elements['codeValue'].value=1;
        }
        if (radioButton.id == "codeRelative") {
            form.elements['codeValue'].max=100;
            form.elements['codeValue'].value=0;
        }
    }

  function deleteElementEditTable(id) {
    let row = document.getElementById("row_id_pedido_" + id);
    row.remove();
  }

  function populateViewProductoTable(pedidos) {
    $('#tbViewPedidosPromocode tbody').empty();
    let detallePedidoRuta = "{{route('detallePedidos', 0)}}";
    detallePedidoRuta = detallePedidoRuta.slice(0, -1);
    pedidos.forEach(function (value, index, array) {
      $('#tbViewPedidosPromocode tbody').append(
        '<tr class="text-center">'+
            '<td>' + value["Referencia"] + '</td>'+
            '<td>' +
                '<a href="'+detallePedidoRuta+value["pedidoId"]+'" class="btn btn-info" type="button" id="viewOrderDetailBtn" data-pedidoId="">'+
                    '<i class="fa fa-eye"></i>'+
                '</a>'+
            '</td>'+
        '</tr>');


    });
  }

</script>
@endsection