@extends('layouts.app')

@section('content')
    @php
        $website = \App\Models\Website::first();
        $paypalKey = \App\Models\PaypalKey::first();
        $urlInicio = $website ? url("/sitios/{$website->domain}/home") : url('/');
    @endphp

    <div class="container py-5">
        <h2 class="mb-4 text-center">📦 Resumen de tu Pedido</h2>

        @if($cart && $cart->items->count())
            <div class="table-responsive mb-4">
                <table class="table align-middle shadow-sm">
                    <thead class="table-light">
                        <tr>
                            <th>Producto</th>
                            <th class="text-center">Cantidad</th>
                            <th class="text-end">Precio</th>
                            <th class="text-end">Subtotal</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($cart->items as $item)
                            <tr>
                                <td>{{ $item->product->name }}</td>
                                <td class="text-center">{{ $item->quantity }}</td>
                                <td class="text-end">${{ number_format($item->product->price, 2) }}</td>
                                <td class="fw-bold text-success text-end">
                                    ${{ number_format($item->product->price * $item->quantity, 2) }}
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="text-end fs-4 mb-4">
                <strong>Total:</strong>
                <span class="text-success">
                    ${{ number_format($cart->items->sum(fn($i) => $i->product->price * $i->quantity), 2) }}
                </span>
            </div>

            <form method="POST" action="{{ route('pedido.procesar') }}" class="shadow p-4 rounded bg-light" id="formPedido">
                @csrf

                <div class="mb-3">
                    <label class="form-label">📍 Dirección de Envío</label>
                    <textarea name="direccion_envio" class="form-control" rows="3"
                        required>{{ old('direccion_envio', $cliente->address_line1 ?? '') }}</textarea>
                </div>

                <div class="mb-3">
                    <label class="form-label">📌 Referencia del lugar de entrega</label>
                    <input type="text" name="referencia" class="form-control" required>
                </div>

                <div class="mb-3">
                    <label class="form-label">👤 Nombre de quien recibe</label>
                    <input type="text" name="nombre_recibe" class="form-control" required>
                </div>

                <input type="hidden" name="metodo_pago" value="paypal">

                <div class="mb-3">
                    <label class="form-label">💳 Método de Pago</label>
                    <div id="paypal-button-container"></div>
                </div>

                <input type="hidden" name="paypal_transaction_id" id="paypal_transaction_id">
                <input type="hidden" name="paypal_payer_email" id="paypal_payer_email">
                <input type="hidden" name="paypal_status" id="paypal_status">


                {{-- Este botón será oculto porque PayPal enviará el formulario --}}
                <button type="submit" class="btn btn-success w-100 py-2 d-none" id="btnSubmit">
                    <i class="fas fa-check-circle me-2"></i> Confirmar Pedido
                </button>

                <a href="{{ $urlInicio }}" class="btn btn-primary mt-4">
                    <i class="fas fa-home me-1"></i> Volver a la página principal
                </a>
            </form>
        @else
            <div class="alert alert-info text-center">
                <i class="fas fa-info-circle me-1"></i> Tu carrito está vacío.
            </div>
            <a href="{{ $urlInicio }}" class="btn btn-primary mt-4">
                <i class="fas fa-home me-1"></i> Volver a la página principal
            </a>
        @endif
    </div>

    {{-- PayPal Script --}}
    @if(isset($paypalKey))
        <script
            src="https://www.paypal.com/sdk/js?client-id={{ $paypalKey->client_id }}&currency=MXN{{ $paypalKey->sandbox_mode ? '&intent=capture' : '' }}"></script>

    @endif
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        const referenciaInput = document.querySelector('input[name="referencia"]');
        const nombreRecibeInput = document.querySelector('input[name="nombre_recibe"]');
        const paypalContainer = document.getElementById('paypal-button-container');

        // Ocultar PayPal inicialmente
        paypalContainer.style.display = 'none';

        function verificarCampos() {
            const referencia = referenciaInput.value.trim();
            const nombreRecibe = nombreRecibeInput.value.trim();

            if (referencia !== '' && nombreRecibe !== '') {
                paypalContainer.style.display = 'block';
                if (!paypalContainer.hasAttribute('data-rendered')) {
                    paypal.Buttons({
                        createOrder: function (data, actions) {
                            return actions.order.create({
                                purchase_units: [{
                                    amount: {
                                        value: '{{ number_format($cart->items->sum(fn($i) => $i->product->price * $i->quantity), 2, '.', '') }}'
                                    }
                                }]
                            });
                        },
                        onApprove: function (data, actions) {
                            return actions.order.capture().then(function (details) {
                                document.getElementById('paypal_transaction_id').value = details.id;
                                document.getElementById('paypal_payer_email').value = details.payer.email_address;
                                document.getElementById('paypal_status').value = details.status;
                                document.getElementById('formPedido').submit();
                            });
                        },
                        onError: function (err) {
                            console.error(err);
                            Swal.fire({
                                icon: 'error',
                                title: 'Error con PayPal',
                                text: 'No se pudo completar el pago. Intenta nuevamente.',
                            });
                        }
                    }).render('#paypal-button-container');

                    paypalContainer.setAttribute('data-rendered', 'true');
                }
            } else {
                paypalContainer.style.display = 'none';
            }
        }

        referenciaInput.addEventListener('input', verificarCampos);
        nombreRecibeInput.addEventListener('input', verificarCampos);
    });
</script>

@endsection