@extends('layouts.backoffice')

@section('styles')

@endsection

@section('content')

{{-- Bloco separado para renderizar o alerta --}}
<div class="row">
    <div class="col-md-12" id="wrapper_alerta">

    </div>
</div>

<div class="row">
    <div class="col-md-4">
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">Últimos pedidos processados</h3>
            </div>
            <div class="box-body table-responsive no-padding" id="pedidos-processados">
                @include('partials.pedidos-processados')
            </div>
        </div>
    </div>
    <div class="col-md-4">

        <div class="box">
            <div class="box-header with-border">
                <h3 class="box-title">Localizar cliente</h3>
            </div>
            <form action="/transportadora/buscar-cliente" id="form-busca-cliente" class="form-horizontal">
                @csrf
                <div class="box-body">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">Complemento</label>
                        <div class="col-sm-8">
                            <input type="text" name="complemento" class="form-control" placeholder="Complemento"
                                required>
                        </div>
                    </div>
                </div>
                <div class="box-footer">
                    <button type="submit" class="btn pull-right">Localizar</button>
                </div>
            </form>
        </div>

        <div class="box">
            <div class="box-header">
                <h3 class="box-title">Dados do cliente</h3>
            </div>
            <div class="box-body">
                <table class="table">
                    <tbody>
                        <tr>
                            <th>Cliente</th>
                            <td id="nome-cliente">-</td>
                        </tr>
                        <tr>
                            <th>Telefone</th>
                            <td id="telefone-cliente">-</td>
                        </tr>
                        <tr>
                            <th>Locker</th>
                            <td id="nome-locker">-</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
    <div class="col-md-4">

        <div class="box">
            <div class="box-header with-border">
                <h3 class="box-title">Gerar pedido</h3>
            </div>
            <form action="/transportadora/processar-salvar" method="post" class="form-horizontal form-ajax-transportadora" id="form-gerar-pedido">
                @csrf
                <input type="hidden" id="ignora_numero_rastreio" name="ignora_numero_rastreio" value="0">
                <input type="hidden" id="id-cliente" name="id_cliente" value="">
                <input type="hidden" id="locker-id" name="locker_id" value="">
                <div class="box-body">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">Tamanho da gaveta</label>
                        <div class="col-sm-8">
                            <select class="form-control" name="tamanho_gaveta" style="width: 100%;" id="gavetas-locker"
                                disabled="disabled">
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">Valor declarado</label>
                        <div class="col-sm-8">
                            <input type="text" name="valor_declarado" min="1" max="5000"
                                class="form-control ValoresItens" placeholder="Valor declarado" disabled="disabled">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">Número do rastreio</label>
                        <div class="col-sm-8">
                            <input type="text" name="numero_rastreio" class="form-control"
                                placeholder="Número do rastreio" disabled="disabled">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">Loja de origem</label>
                        <div class="col-sm-8">
                            <select class="form-control select2" name="loja" style="width: 100%;" disabled="disabled">
                                {{ \App\Helpers\Utilidade::escreveOpcoesSelect($lojas, 'companyclient_id', 'companyclient_name') }}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="box-footer">
                    <button type="submit" class="btn pull-right" disabled="disabled">Gerar pedido</button>
                </div>
            </form>
        </div>

    </div>
</div>

<div class="modal fade" id="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Atenção</h4>
            </div>
            <div class="modal-body">
                <p class="lead">
                    O número de rastreio informado já foi utilizado, você deseja mesmo assim criar um novo pedido?
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger pull-left" id="btn-ignora-numero-rastreio">Processar o
                    pedido</button>
                <button type="button" class="btn btn-default" data-dismiss="modal" id="dismiss"
                    autofocus="true">Cancelar e fechar</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script src="{{ asset('plugins/select2/js/select2.min.js') }}"></script>
<script>

    var windowObjectReference;
    var strWindowFeatures = "directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0,scrollbars=no,resizable=no,width=400,height=500";
    function openRequestedPopup(url) {
        windowObjectReference = window.open(
            url,
            "DescriptiveWindowName",
            strWindowFeatures
        );
    }

    $('.select2').select2();

    $("body").on("submit", "#form-busca-cliente", function (event) {

        var form = $(this);

        event.preventDefault();
        var serialize = new FormData(this);

        $(this).find(".has-error").removeClass("has-error");
        $(this).find(".help-block").remove();
        $("body").find("#mensagem_alerta").remove();

        var renderInId = $(this).data('render-in-id');
    
        console.log( $(this).attr('action') );

        $.ajax({
            type: "POST",
            url: $(this).attr('action'),
            data: serialize,
            dataType: "json",
            processData: false,
            contentType: false,
            beforeSend: function () {
                activateCenterLoadingScreen(true);
            },
            success: function (data) {

                $("#form-gerar-pedido").find('input, select, button').each(function() {
                    $(this).removeAttr('disabled');
                });
                
                $("#id-cliente").val(data.dados.id_cliente);
                $("#nome-cliente").text(data.dados.nome);
                $("#telefone-cliente").text(data.dados.telefone);
                $("#nome-locker").text(data.dados.lockerName);
                $("#locker-id").val(data.dados.lockerId);
                $("#gavetas-locker").html(data.dados.gavetasSelect);

                console.log( data.dados.gavetasSelect );

                activateCenterLoadingScreen(false);

            },
            error: function (data) {

                $("#nome-cliente").text(data.responseJSON.dados.nome);
                $("#telefone-cliente").text(data.responseJSON.dados.telefone);
                $("#nome-locker").text(data.responseJSON.dados.lockerName);

                activateCenterLoadingScreen(false);

                $('#wrapper_alerta').html(data.responseJSON.html);

                $.each(data.responseJSON.errors, function (key, data) {

                    // Adiciona a classe 'has-danger no elemento pai do input'
                    var input = form.find("input[name='"+key+"'], select[name='"+key+"']");
                    var parentElement = input.closest('div.form-group');
                    parentElement.addClass("has-error");
                    // Adiciona a dica de validação para cada elemento
                    $.each(data, function (index, data) {
                        var errorText = '<span class="help-block">' + data + '</span>';
                        input.after(errorText);
                    });

                    // Adiciona a classe 'has-danger na versão select alternativa'
                    var select = form.find("input[data-field-validation='"+key+"'], select[data-field-validation='"+key+"']");
                    var parentElement = select.closest('div.form-group');
                    parentElement.addClass("has-error");
                    // Adiciona a dica de validação para cada elemento
                    $.each(data, function (index, data) {
                        var errorText = '<div class="help-block">' + data + '</div>';
                        select.after(errorText);
                    });

                });

                $("#form-gerar-pedido").find('input, select, button').each(function() {
                    $(this).attr('disabled','disabled');
                });

            }
        });

    });

    $(".ValoresItens").maskMoney({
        prefix: "R$ ",
        decimal: ",",
        thousands: "."
    });

    $("body").on("submit", "form.form-ajax-transportadora", function (event) {

        var form = $(this);

        event.preventDefault();
        var serialize = new FormData(this);

        $(this).find(".has-error").removeClass("has-error");
        $(this).find(".help-block").remove();
        $("body").find("#mensagem_alerta").remove();

        var renderInId = $(this).data('render-in-id');

        $.ajax({
            type: "POST",
            url: $(this).attr('action'),
            data: serialize,
            dataType: "json",
            processData: false,
            contentType: false,
            beforeSend: function () {
                activateCenterLoadingScreen(true);
                $('#modal').modal('hide');
            },
            success: function (data) {

                if(data.statusCode == 302) {
                    window.location.replace(data.redirectTo);
                    return;
                }

                $("#pedidos-processados").html(data.html);
                
                activateCenterLoadingScreen(false);
                $("#ignora_numero_rastreio").val("0");

            },
            error: function (data) {

                activateCenterLoadingScreen(false);
                $("#ignora_numero_rastreio").val("0");

                $('#wrapper_alerta').html(data.responseJSON.html);

                $.each(data.responseJSON.errors, function (key, data) {

                    if(key == "numero_rastreio") {
                        $('#modal').modal('show');
                    }

                    // Adiciona a classe 'has-danger no elemento pai do input'
                    var input = form.find("input[name='"+key+"'], select[name='"+key+"']");
                    var parentElement = input.closest('div.form-group');
                    parentElement.addClass("has-error");
                    // Adiciona a dica de validação para cada elemento
                    $.each(data, function (index, data) {
                        var errorText = '<span class="help-block">' + data + '</span>';
                        input.after(errorText);
                    });

                    // Adiciona a classe 'has-danger na versão select alternativa'
                    var select = form.find("input[data-field-validation='"+key+"'], select[data-field-validation='"+key+"']");
                    var parentElement = select.closest('div.form-group');
                    parentElement.addClass("has-error");
                    // Adiciona a dica de validação para cada elemento
                    $.each(data, function (index, data) {
                        var errorText = '<div class="help-block">' + data + '</div>';
                        select.after(errorText);
                    });

                });

                $("#dismiss").focus();

            }
        });

    });

    $("body").on("click", "#btn-ignora-numero-rastreio", function(event){
        $("#ignora_numero_rastreio").val("1");
        $("#form-gerar-pedido").submit();
    });

    $("body").on("click", ".btn-sticker-pdf", function(event) {
        var idPedido = $(this).data("id-pedido");
        console.log(idPedido);
    });

</script>
@endsection