@extends('layouts.layout')
@section('title', 'Importação de saldos')

@section('content')
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3">
        <h1 class="title">Importação de saldos</h1>
        <div class="btn-toolbar mb-2 mb-md-0">
        </div>
    </div>

    <!-- Alertas de Sistema -->
    <div class="alert alert-sistema-success alert-dismissible fade show" role="alert" id="alert" style="display: none;">
        <span class="badge badge-pill badge-secondary alert-icon mr-3">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
        </span>
        <strong>Importação realizada com sucesso.</strong> 
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <div class="alert alert-sistema-info alert-dismissible fade show" role="alert" id="alert" style="display: none;">
        <span class="badge badge-pill badge-secondary alert-icon mr-3">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
        </span>
        <strong>A importar o ficheiro. Esta operação pode demorar alguns segundos.</strong> 
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <div class="alert alert-sistema-danger alert-dismissible fade show" role="alert" id="alert" style="display: none;">
        <span class="badge badge-pill badge-secondary alert-icon mr-3">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
        </span>
        <strong>Não foi possível concluir a importação.</strong> 
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <div class="card">
        <div class="card-header">

            <div class="mb-4">
                <div class="form-row">
                <div class="col-7">
                    <input type="text" class="form-control" placeholder="Procurar" id="pesquisa">
                </div>
                <div class="col-auto">
                    <button type="button" class="btn btn-client px-3" onclick="search()">ok</button>
                </div>
                </div>
            </div>

            <ul class="nav nav-tabs card-header-tabs">
                    <li class="nav-item">
                        <a class="nav-link empresa active" href="#" data-toggle="tab" data-id="0">Todas as empresas</a>
                    </li>
                @foreach ($empresas as $i => $empresa)
                    <li class="nav-item">
                        <a class="nav-link empresa" href="#" data-toggle="tab" data-id="{{ $empresa->id }}">{{ $empresa->nome }}</a>
                    </li>
                @endforeach
            </ul>
        </div>
        
        <div class="card-body">
            <form id="import-form">
                @csrf

                <input type="hidden" name="empresa" id="empresa" value="0">

                <div class="row" id="carregar-ficheiro-row" style="display:none;">
                    <div class="form-group col-8">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text">Carregar ficheiro</span>
                            </div>
        
                            <div class="custom-file">
                              <input type="file" class="custom-file-input" id="ficheiro" name="ficheiro" aria-describedby="saldos" accept=".csv,.xls,.xlsx">
                              <label class="custom-file-label" for="ficheiro" data-browse="Procurar" style="font-size: 1rem;">Escolher ficheiro</label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group col-auto">
                        <button type="button" class="btn btn-client px-3 float-right" onclick="importar()">Importar</button>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table tabelaSaldos" id="tabelaSaldos" style="width: 100%;" data-clientes="{{ asset('clientes') }}"
                           data-criar="{{ auth()->user()->can('Criar') ? 1 : 0 }}" data-csrf="{{ csrf_token() }}">
                        <thead>
                            {{-- <tr>
                                <th scope="col"><input type="checkbox" name="select-all" id="select-all"/></th>
                                <th scope="col">NIFC</th>
                                <th scope="col">Cliente</th>
                                <th scope="col">Valor divida (€)</th>
                                <th scope="col" class="text-right" style="width:10%;">Acções</th>
                            </tr> --}}
                            <tr>
                                <th scope="col"><input type="checkbox" name="select-all" id="select-all"/></th>
                                <th scope="col">NIFC</th>
                                <th scope="col">Cliente</th>
                                <th scope="col">A Receber (€)</th>
                                <th scope="col">A Pagar (€)</th>
                                <th scope="col">Saldo (€)</th>
                                <th scope="col" class="text-right" style="width:10%;">Acções</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </form>
        </div>
    </div>

    @include('layouts.scripts')

    <script>
        $('.empresa').click(function () {
            $('#empresa').val(this.dataset.id);

            if (this.dataset.id == 0) {
                $('#carregar-ficheiro-row').hide();
            } else {
                $('#carregar-ficheiro-row').show();
            }

            tabelaSaldos.ajax.reload();
        });


        $('input[type=file]').change(function (e) {
            $(this).siblings('label').text('...' + this.value.substring(11, this.value.length));
        });


        function importar() {
            $('.alert-sistema-success').hide();
            $('.alert-sistema-danger').hide();
            $('.alert-sistema-info').show();

            $.ajax({
                url: '{!! asset("saldos/importar") !!}',
                type: 'POST',
                contentType: false,
                processData: false,
                data: new FormData($('#import-form')[0]),
                success: function (result) {
                    console.log(result);

                    tabelaSaldos.ajax.reload();

                    $('.alert-sistema-danger').hide();
                    $('.alert-sistema-info').hide();
                    $('.alert-sistema-success').show();
                },
                error: function (error) {
                    console.log(error);
                    $('.alert-sistema-success').hide();
                    $('.alert-sistema-info').hide();
                    $('.alert-sistema-danger').show();
                }
            });
        }

        var tabelaSaldos = $('#tabelaSaldos').DataTable({
                order: [[ 1, 'desc' ]],
                processing: true,
                searching: false,
                serverSide: true,
                ajax: {
                    url: 'getSaldos',
                    type: 'GET',
                    data: function ( d ) {
                        d.pesquisa = $('#pesquisa').val(),
                        d.empresa = $('#empresa').val()
                    }
                },
                select: {
                    style: 'single'
                },
                language: {
                    lengthMenu: 'Mostrar _MENU_ registos por página',
                    zeroRecords: 'Sem registos',
                    info: 'Página _PAGE_ de _PAGES_',
                    infoEmpty: 'Sem registos disponiveis',
                    infoFiltered: '(Filtrado _MAX_ do total de registos)',
                    search: 'Procurar:',
                    processing: 'A processar',
                    paginate: {
                        previous: 'Anterior',
                        next: 'Próximo'
                    }
                },
		        columns: [
				    {
                        sortable: false,
                        render: function (data, type, full, meta) {
                            return '<input type="checkbox" class="checkSaldos" id="' + full.id + '">';
                        }
                    },
                    {
                        title: 'NIFC',
                        render: function (data, type, full, meta) {
                            if (full.c_nif) {
                                return full.c_nif;
                            } else if (full.nif) {
                                return full.nif;
                            } else {
                                return '';
                            }
                        }
                    },
                    {
                        title: 'Cliente',
                        render: function (data, type, full, meta) {
                            if (full.c_nome) {
                                return full.c_nome;
                            } else if (full.nome) {
                                return full.nome;
                            } else {
                                return '';
                            }
                        }
                    },
                    // {
                    //     title: 'Valor divida (€)',
                    //     data: 'valor_divida'
                    // },
                    {
                        title: 'A Receber (€)',
                        data: 'receber'
                    },
                    {
                        title: 'A Pagar (€)',
                        data: 'pagar'
                    },
                    {
                        title: 'Saldo (€)',
                        data: 'saldo'
                    },
                    {
                        title: 'Acções',
                        sortable: false,
                        className: 'text-right',
                        render: function (data, type, full, meta) {
                            var html = '';

                            if (!full.c_nif && $('#tabelaSaldos').attr('data-criar') == 1) {
                                html += `<a href="#" title="Adicionar Cliente" onclick="adicionarCliente('` + full.nif + `', '` + full.nome + `', ` + full.empresa + `)">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
                                        </a>`;
                            }

                            html += `<a href="#" title="Ver Saldos" onclick="detalhes('` + full.id + `')">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
                                    </a>`;

                            return html;
                        }
                    }
				],
            });
            

        function adicionarCliente(_nif, _nome, _empresa) {
            $.ajax({
                url: $('#tabelaSaldos').attr('data-clientes') + '/create',
                type: 'GET',
                data: {
                    nif: _nif,
                    nome: _nome,
                    empresa: _empresa
                },
                success: function (result) {
                    console.log(result);

                    if (result.code == 200) {
                        var bb = bootbox.dialog({
                        title: result.content.title,
                        message: result.content.message,
                        size: result.content.size,
                        buttons: {
                            cancel: {
                                label: result.content.buttons.cancel.label,
                                className: result.content.buttons.cancel.className,
                            },
                            noclose: {
                                label: result.content.buttons.noclose.label,
                                className: result.content.buttons.noclose.className,
                                callback: function () {
                                    guardarCliente(bb);

                                    return false;
                                }
                            }
                        }
                        });

                        initSelectPicker();
                    }
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }


        // Guardar / Editar Cliente
        function guardarCliente(_bb) {
            $.ajax({
                url: $('#tabelaSaldos').attr('data-clientes'),
                type: 'POST',
                data: {
                    _token: $('#tabelaSaldos').data('csrf'),
                    empresa: $('#modal-empresa').val(),
                    nome: $('#modal-nome').val(),
                    codCliente: $('#modal-codCliente').val(),
                    nif: $('#modal-nifc').val(),
                    morada: $('#modal-morada').val(),
                    codPostal: $('#modal-codPostal').val(),
                    localidade: $('#modal-localidade').val(),
                    obs: $('#modal-obs').val(),
                    utilizador: $('#modal-utilizador').val()
                },
                success: function (result) {
                    console.log(result);

                    if (result.code == 200) {
                        _bb.modal('hide');
                        tabelaSaldos.ajax.reload();

                    } else if (result.code == 400) {
                        var errors = '<ul style="margin-bottom:0;">';

                        $.each(result.content.errors, function (key, value) {
                            errors += '<li>' + value + '</li>';
                        });

                        errors += '</ul>';

                        $('#alert-modal').empty().append(errors).show();
                    }
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }

        
        /**
         * Iniciar o select picker
         */
        function initSelectPicker() {
            $('.selectpicker').selectpicker({ 
                liveSearch: true, 
                width: '100%'
            });
        }

        function search() {
            if (tabelaSaldos) {
                tabelaSaldos.ajax.reload();
            }
        }

        $('#pesquisa').on('keyup', function (e) {
            if (e.key == 'Enter') {
                search();
            }
        });

        function detalhes(id) {
            $.ajax({
                url: '{{ asset("saldos/details") }}/' + id,
                type: 'GET',
                success: function (result) {
                    console.log(result);

                    if (result.code == 200) {
                        var dialog = bootbox.dialog({
                            title: result.title,
                            message: result.data,
                            size: 'large',
                            buttons: {
                                cancel: {
                                    label: 'Fechar',
                                    className: 'btn btn-sm btn-default',
                                }
                            }
                        });
                    }
                },
                error: function (errors) {
                    console.log(errors);
                }
            });
        }
    </script>
@endsection