@extends('adminlte::page')

@section('title', 'Fornecedores')

@section('content_header')
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-2 w-100">
        <div class="d-flex w-100 justify-content-between align-items-center">
            <h1>Fornecedores</h1>
            <a href="{{ route('suppliers.create') }}" class="btn btn-primary">
                Novo Fornecedor
            </a>
        </div>
    </div>  
@stop

@section('content')
    @if(Session::has('success'))
        @php
            $data = Session::get('success');
        @endphp

        @if (is_array($data))
            @foreach ($data as $msg)
                <div class="alert alert-success" role="alert">
                    <i class="fa fa-check"></i>
                    {{ $msg }}
                </div>
            @endforeach
        @else
            <div class="alert alert-success" role="alert">
                <i class="fa fa-check"></i>
                {{ $data }}
            </div>
        @endif
    @endif

    @if(Session::has('error'))
        @php
            $data = Session::get('error');
        @endphp

        @if (is_array($data))
            @foreach ($data as $msg)
                <div class="alert alert-danger" role="alert">
                    <i class="fa fa-times"></i>
                    {{ $msg }}
                </div>
            @endforeach
        @else
            <div class="alert alert-danger" role="alert">
                <i class="fa fa-times"></i>
                {{ $data }}
            </div>
        @endif
    @endif
    <div class="mb-3">
        <form method="get" action="suppliers" class="form-inline">
            <div class="input-group w-50">
                <input id="pesquisa" type="text" class="form-control" name="pesquisa"
                    placeholder="Pesquise pelo fornecedor"
                    value="{{ $filtros['pesquisa'] ?? '' }}">
                <div class="input-group-append">
                    <button class="btn btn-primary" type="submit">Buscar</button>
                </div>
            </div>
            <div class="ml-3 form-check">
                <input class="form-check-input" type="checkbox" name="bloqueado" id="bloqueado"
                    @if(!empty($filtros['bloqueado'])) checked @endif>
                <label class="form-check-label" for="bloqueado">Mostrar Inativos</label>
            </div>
        </form>
    </div>

    <div id="detalhes-fornecedor" class="card mt-3" style="display:none;">
    
        <div class="card-header detalhes-header">
            <h5 class="mb-0">Detalhes do Fornecedor</h5>

            <div class="acoes-header">
                <button id="btn-editar-fornecedor" class="btn btn-primary btn-sm" title="Editar Produto">
                    <i class="fa fa-pencil-alt"></i>
                </button>
                <button id="btn-fechar-detalhes" class="btn btn-danger btn-sm" title="Fechar">
                    <i class="fa fa-times"></i>
                </button>
            </div>
        </div>

        <div class="card-body p-3">
            <div class="row">
                <div class="col-md-6">
                    <p><strong>Código:</strong> <span id="det-codigo"></span></p>
                    <p><strong>Razão Social / Nome:</strong> <span id="det-nome"></span></p>
                    <p><strong>Fantasia:</strong> <span id="det-fantasia"></span></p>
                    <p><strong>CNPJ/CPF:</strong> <span id="det-cnpj"></span></p>
                    <p><strong>Inscrição Estadual / RG:</strong> <span id="det-ie"></span></p>
                    <p><strong>Tipo Pessoa:</strong> <span id="det-tipo-pessoa"></span></p>
                    <p><strong>Fornecedor/Editora:</strong> <span id="det-tipo-fornecedor"></span></p>
                    <p><strong>Bloqueado:</strong> <span id="det-bloqueado"></span></p>
                </div>

                <div class="col-md-6">
                    <p><strong>Endereço:</strong> <span id="det-endereco"></span></p>
                    <p><strong>Bairro:</strong> <span id="det-bairro"></span></p>
                    <p><strong>Cidade:</strong> <span id="det-cidade"></span></p>
                    <p><strong>Estado:</strong> <span id="det-estado"></span></p>
                    <p><strong>CEP:</strong> <span id="det-cep"></span></p>
                    <p><strong>Telefone:</strong> <span id="det-telefone"></span></p>
                    <p><strong>Celular:</strong> <span id="det-celular"></span></p>
                </div>
            </div>

            <hr>

            <div class="row">
                <div class="col-md-6">
                    <p><strong>Acum. Entradas:</strong> <span id="det-acumulo-entrada"></span></p>
                    <p><strong>Acum. Vendas:</strong> <span id="det-acumulo-venda"></span></p>
                </div>
                <div class="col-md-6">
                    <p><strong>Último Acerto:</strong> <span id="det-ultimo-acerto"></span></p>
                    <p><strong>Próximo Acerto:</strong> <span id="det-proximo-acerto"></span></p>
                </div>
            </div>
        </div>
    </div>


    <div class="card table-responsive">
        <table class="table table-hover table-bordered">
            <thead>
            <tr>
                <th scope="col">Código</th>
                <th scope="col">Razão Social/Nome</th>
                <th scope="col">Fantasia/Apelido</th>
                <th scope="col">CNPJ/CPF</th>
                <th scope="col">Ação</th>
            </tr>
            </thead>
            <tbody>
                @if(count($fornecedores) == 0)
                    <tr>
                        <td colspan="5" class="text-center text-muted">
                            Nenhuma edição registrada
                        </td>
                    </tr>
                @endif
                @foreach($fornecedores as $fornecedor)
                    
                    <tr class="linha-fornecedor"
                        data-id="{{ $fornecedor->id }}"
                        data-codigo="{{ $fornecedor->codigo }}"
                        data-nome="{{ $fornecedor->razao_social_nome }}"
                        data-fantasia="{{ $fornecedor->fantasia }}"
                        data-cnpj="{{ $fornecedor->cnpj_cpf }}"
                        data-ie="{{ $fornecedor->incricao_estadual_rg }}"
                    >
                        <th data-id="{{$fornecedor->id}}" scope="row">{{$fornecedor->codigo}}</th>
                        <td data-fornecedor="{{$fornecedor->razao_social_nome}}">{{$fornecedor->razao_social_nome}}</td>
                        <td>{{$fornecedor->fantasia}}</td>
                        <td>{{$fornecedor->cnpj_cpf}}</td>
                        <td>
                            <div class="d-grid gap-2 d-md-flex">
                                <a href="{{ route('suppliers.edit', $fornecedor->id) }}" title="Editar" class="btn btn-primary btn-sm ml-1 w-100 w-md-auto">
                                    <i class="fa fa-pencil-alt"></i>
                                </a>
                
                                <button type="button" class="btn btn-danger btn-sm ml-1 w-100 w-md-auto delete-button" title="Excluir" data-id="{{ $fornecedor->id }}" data-toggle="modal" data-target="#ModalDelete">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
        {{ $fornecedores->onEachSide(4)->links() }}
    </div>


   
    <form id="ModalDeleteForm" method="POST" action="">
        @method('DELETE')
        @csrf
        <div class="modal fade" id="ModalDelete" tabindex="-1" aria-labelledby="DeleteModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="DeleteModalLabel">Deletar Registro</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        Deseja Realmente Excluir este Registro?
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-danger">Excluir</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <style>
        .detalhes-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }

        .detalhes-header .acoes-header {
            display: flex;
            gap: 8px;
            margin-left: auto;
        }
    </style>
   
@stop

@section('js')
    <script>

        document.addEventListener("DOMContentLoaded", function () {
            let fornecedorAtualId = null;

            document.querySelectorAll(".linha-fornecedor").forEach(function (linha) {
                linha.addEventListener("click", function () {
                    const fornecedorId = this.dataset.id;
                    fornecedorAtualId = fornecedorId;

                    fetch(`/suppliers/${fornecedorId}/detalhes`)
                        .then(res => res.json())
                        .then(data => {
                            const f = data.fornecedor;
                            const detalhesCard = document.getElementById("detalhes-fornecedor");
                            detalhesCard.style.display = "block";

                            document.getElementById("det-codigo").textContent = f.codigo ?? '';
                            document.getElementById("det-nome").textContent = f.razao_social_nome ?? '';
                            document.getElementById("det-fantasia").textContent = f.fantasia ?? '';
                            document.getElementById("det-cnpj").textContent = f.cnpj_cpf ?? '';
                            document.getElementById("det-ie").textContent = f.incricao_estadual_rg ?? '';

                            document.getElementById("det-tipo-pessoa").textContent = 
                                f.tipo_pessoa == 1 ? "Pessoa Física" : "Pessoa Jurídica";

                            let tipoFornecedor = "Fornecedor";
                            if (f.tipo_fornecedor == 1) tipoFornecedor = "Editora";
                            if (f.tipo_fornecedor == 2) tipoFornecedor = "Fornecedor/Editora";
                            document.getElementById("det-tipo-fornecedor").textContent = tipoFornecedor;

                            document.getElementById("det-bloqueado").textContent = f.bloqueado == 1 ? "Sim" : "Não";

                            document.getElementById("det-endereco").textContent = f.logradouro ?? '';
                            document.getElementById("det-bairro").textContent = f.bairro ?? '';
                            document.getElementById("det-cidade").textContent = f.cidade ?? '';
                            document.getElementById("det-estado").textContent = f.estado ?? '';
                            document.getElementById("det-cep").textContent = f.cep ?? '';
                            document.getElementById("det-telefone").textContent = f.telefone ?? '';
                            document.getElementById("det-celular").textContent = f.celular ?? '';

                            document.getElementById("det-acumulo-entrada").textContent = formatMoney(f.acumulo_entrada);
                            document.getElementById("det-acumulo-venda").textContent = formatMoney(f.acumulo_venda);
                            document.getElementById("det-ultimo-acerto").textContent = formatMoney(f.ultimo_acerto);
                            document.getElementById("det-proximo-acerto").textContent = formatMoney(f.proximo_acerto);

                            window.scrollTo({ top: 0, behavior: 'smooth' });
                        });
                });
            });

            document.getElementById("btn-fechar-detalhes").addEventListener("click", function () {
                document.getElementById("detalhes-fornecedor").style.display = "none";
            });

            document.getElementById("btn-editar-fornecedor").addEventListener("click", function () {
                if (fornecedorAtualId) {
                    window.location.href = `/suppliers/${fornecedorAtualId}/edit`;
                }
            });

            function formatMoney(valor) {
                if (!valor) return "0,00";
                return parseFloat(valor).toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
            }
        });

        $(document).ready(function () {
            $('.delete-button').on('click', function () {
                const id = $(this).data('id');
                const actionUrl = "{{ url('suppliers') }}/" + id;
                $('#ModalDeleteForm').attr('action', actionUrl);
            });
            
            setTimeout(() => {
                document.querySelectorAll('.alert').forEach(el => {
                    el.style.transition = 'opacity 0.5s ease';
                    el.style.opacity = '0';
                    setTimeout(() => el.remove(), 500);
                });
            }, 3000);
        });
    </script>
@stop