@extends('layouts.admin')
@section('menu', 'active')
@section('page_titulo', "Criar $titulo => $numero")
@section('titulo', 'Facturas')
@section('conteudo')
    <div class="card shadow mb-4">
        <div class="card-body">
            <form method="POST" action="{{ route('factura.recibos') }}">
                @csrf
                <!-- ROW PRINCIPAL -->
                <div class="row">
                    <!-- CLIENTE -->
                    <div class="col-md-3">
                        <label>Cliente</label>
                        <select name="cliente_id" id="client_id" class="form-control" required>
                            <option value="" hidden>Selecionar cliente</option>
                            @foreach ($clientes as $cliente)
                                <option value="{{ $cliente['id'] }}">
                                    {{ $cliente['nome'] }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- DATA -->
                    <div class="col-md-2">
                        <label>Data</label>
                        <input type="date" name="data_factura" class="form-control" value="{{ date('Y-m-d') }}" required>
                    </div>

                    <!-- FORMA PAGAMENTO -->
                    <div class="col-md-2">
                        <label>Forma de Pagamento</label>
                        <select name="metodo" id="metodo" class="form-control" required>
                            <option value="" hidden>Selecione</option>
                            <option value="Dinheiro">Dinheiro</option>
                            <option value="Transferência">Transferência</option>
                            <option value="Multicaixa">Multicaixa</option>
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label>Conta de Pagamento</label>
                        <select name="conta_id" id="idconta" class="form-control">
                            <option value="" hidden>Selecione</option>
                            @foreach ($contas as $item)
                                <option value="{{ $item['id'] }}">{{ $item['banco'] }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- BOTÃO -->
                    <div class="col-md-2 d-flex align-items-end">
                        <button type="submit" class="btn btn-success w-100 " id="salvar">
                            Salvar
                        </button>
                    </div>

                </div>

                <!-- FATURAS EM ABERTO -->
                <div class="mt-4">
                    <h5>Facturas em aberto</h5>
                    <table class="table table-bordered" id="dataTable">
                        <thead>
                            <tr>
                                <th>Selecionar</th>
                                <th>Factura</th>
                                <th>Data</th>
                                <th>Total</th>
                                <th>Pago</th>
                                <th>Saldo</th>
                                <th>Valor a pagar</th>
                            </tr>
                        </thead>

                        <tbody id="faturas-body">
                            <!-- preenchido via JS -->
                        </tbody>
                    </table>
                </div>

            </form>
        </div>
        <div class="card-footer">
            <a href="{{ route('factura.index') }}" class="btn btn-secondary btn-user">
                Cancelar
            </a>
        </div>
    </div>
@endsection

@include('partials.datatable')
@push('script')
    <script>
        document.getElementById('client_id').addEventListener('change', function() {
            let clientId = this.value;
            //`/produtos/${categoriaId}`
            fetch(`/cliente/${clientId}/faturas`)
                .then(res => res.json())
                .then(data => {

                    let tbody = document.getElementById('faturas-body');
                    tbody.innerHTML = '';

                    data.forEach(f => {

                        let saldo = f.total - f.pago;

                        tbody.innerHTML += `
                    <tr>
                        <td>
                            <input type="checkbox" name="facturas[]" value="${f.id}">
                        </td>
                        <td>${f.number}</td>
                        <td>${f.date}</td>
                        <td>${f.total}</td>
                        <td>${f.pago}</td>
                        <td>${saldo}</td>
                        <td>
                            <input type="number" 
                                   name="amounts[${f.id}]" 
                                   value="${saldo}" 
                                   class="form-control">
                        </td>
                    </tr>
                `;
                    });

                });
        });
    </script>
@endpush