@extends('dashboard.body.main')

@section('container')
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="card card-block">
                <div class="card-header d-flex justify-content-between bg-primary">
                    <div class="iq-header-title">
                        <h4 class="card-title mb-0">Factura</h4>
                    </div>

                    <div class="invoice-btn d-flex">
                        <form action="{{ route('pos.printInvoice') }}" method="post">
                            @csrf
                            <input type="hidden" name="customer_id" value="{{ $customer->id }}">
                            <button type="submit" class="btn btn-primary-dark mr-2"><i class="las la-print"></i> Imprimir</button>
                        </form>

                        <button type="button" class="btn btn-primary-dark mr-2" data-toggle="modal" data-target=".bd-example-modal-lg">Crear</button>

                        <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    <div class="modal-header bg-white">
                                        <h3 class="modal-title text-center mx-auto">Invoice of {{ $customer->name }}<br/>Cantidad total ${{ Cart::total() }}</h3>
                                    </div>
                                    <form action="{{ route('pos.storeOrder') }}" method="post">
                                        @csrf
                                        <div class="modal-body">
                                            <input type="hidden" name="customer_id" value="{{ $customer->id }}">

                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label for="payment_status">Método de Pago</label>
                                                    <select class="form-control @error('payment_status') is-invalid @enderror" name="payment_status" id="payment_status">
                                                        <option selected="" disabled="">-- Seleccione método de pago --</option>
                                                        <option value="HandCash">Efectivo</option>
                                                        <option value="Transferencia">Transferencia</option>
                                                        <option value="Tarjeta">Tarjeta</option>
                                                        <option value="Due">Pendiente (Crédito)</option>
                                                    </select>
                                                    @error('payment_status')
                                                    <div class="invalid-feedback">
                                                        {{ $message }}
                                                    </div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-12" id="pay-input-container" style="display: none;">
                                                <div class="form-group">
                                                    <label for="pay" id="pay-label">Paga con (Efectivo)</label>
                                                    <input type="number" class="form-control font-weight-bold font-size-16 @error('pay') is-invalid @enderror" id="pay" name="pay" value="{{ old('pay') }}" placeholder="Monto recibido...">
                                                    @error('pay')
                                                    <div class="invalid-feedback">
                                                        {{ $message }}
                                                    </div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-12" id="vuelto-field-container" style="display: none;">
                                                <div class="form-group">
                                                    <label for="vuelto" class="text-success font-weight-bold">Vuelto al cliente</label>
                                                    <input type="text" class="form-control font-weight-bold font-size-20 text-success" id="vuelto" readonly value="$0" style="background-color: #e8f5e9; border-color: #81c784; text-align: center;">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                            <button type="submit" class="btn btn-primary">Guardar</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <img src="{{ asset('assets/images/logo.png') }}" class="logo-invoice img-fluid mb-3">
                            <h5 class="mb-3">Hola, {{ $customer->name }}</h5>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-12">
                            <div class="table-responsive-sm">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th scope="col">Fecha de orden</th>
                                            <th scope="col">Estado del pedido</th>
                                            <th scope="col">Dirección de Envio</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>{{ Carbon\Carbon::now()->format('M d, Y') }}</td>
                                            <td><span class="badge badge-danger">No pagado</span></td>
                                            <td>
                                                <p class="mb-0">{{ $customer->address }}<br>
                                                    Nombre de tienda: {{ $customer->shopname ? $customer->shopname : '-' }}<br>
                                                    Teléfono: {{ $customer->phone }}<br>
                                                    Email: {{ $customer->email }}<br>
                                                </p>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-12">
                            <h5 class="mb-3">Resumen del pedido</h5>
                            <div class="table-responsive-lg">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th class="text-center" scope="col">#</th>
                                            <th scope="col">Artículo</th>
                                            <th class="text-center" scope="col">Cantidad</th>
                                            <th class="text-center" scope="col">Precio</th>
                                            <th class="text-center" scope="col">Totales</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($content as $item)
                                        <tr>
                                            <th class="text-center" scope="row">{{ $loop->iteration }}</th>
                                            <td>
                                                <h6 class="mb-0">{{ $item->name }}</h6>
                                            </td>
                                            <td class="text-center">{{ $item->qty }}</td>
                                            <td class="text-center">{{ $item->price }}</td>
                                            <td class="text-center"><b>{{ $item->subtotal }}</b></td>
                                        </tr>

                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-12">
                            <b class="text-danger">Notas:</b>
                            <p class="mb-0">Es un hecho establecido desde hace mucho tiempo que el lector se distraerá con el contenido legible de una página.
                                al mirar en su trazado. El objetivo de utilizar Lorem Ipsum es que tiene una distribución de letras más o menos normal,
                                en lugar de usar "Contenido aquí, contenido aquí", lo que hace que parezca un inglés legible.</p>
                        </div>
                    </div>

                    <div class="row mt-4 mb-3">
                        <div class="offset-lg-8 col-lg-4">
                            <div class="or-detail rounded">
                                <div class="p-3">
                                    <h5 class="mb-3">Detalles del pedido</h5>
                                    <div class="mb-2">
                                        <h6>Sub Total</h6>
                                        <p>${{ Cart::subtotal() }}</p>
                                    </div>
                                    <div>
                                        <h6>IVA (18%)</h6>
                                        <p>${{ Cart::tax() }}</p>
                                    </div>
                                </div>
                                <div class="ttl-amt py-2 px-3 d-flex justify-content-between align-items-center">
                                    <h6>Total</h6>
                                    <h3 class="text-primary font-weight-700">${{ Cart::total() }}</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const paymentStatus = document.getElementById('payment_status');
        const payInputContainer = document.getElementById('pay-input-container');
        const payInput = document.getElementById('pay');
        const payLabel = document.getElementById('pay-label');
        const vueltoContainer = document.getElementById('vuelto-field-container');
        const vueltoInput = document.getElementById('vuelto');
        const totalAmount = parseInt("{{ Cart::total() }}".replace(/[^0-9]/g, '')) || 0;

        if (paymentStatus && payInput) {
            paymentStatus.addEventListener('change', function() {
                const val = this.value;
                if (val === 'HandCash') {
                    // Efectivo: Mostrar pago y vuelto
                    payLabel.textContent = 'Paga con (Efectivo)';
                    payInput.value = totalAmount; // por defecto pago exacto
                    payInputContainer.style.display = 'block';
                    vueltoContainer.style.display = 'block';
                    calculateChange();
                } else if (val === 'Due') {
                    // Pendiente: Mostrar pago para abono inicial, ocultar vuelto
                    payLabel.textContent = 'Abono inicial (Opcional)';
                    payInput.value = 0;
                    payInputContainer.style.display = 'block';
                    vueltoContainer.style.display = 'none';
                } else {
                    // Tarjeta o Transferencia: Pago exacto automático, ocultar ambos
                    payInput.value = totalAmount;
                    payInputContainer.style.display = 'none';
                    vueltoContainer.style.display = 'none';
                }
            });

            payInput.addEventListener('input', calculateChange);
        }

        function calculateChange() {
            const payValue = parseFloat(payInput.value) || 0;
            const change = Math.max(0, payValue - totalAmount);
            vueltoInput.value = '$' + change.toLocaleString('es-CL', { minimumFractionDigits: 0, maximumFractionDigits: 0 });
        }
    });
</script>
@endsection