@extends('layouts.admin')
@section('content')
    <style>
        /* Estilos para la tabla responsive */
        .table-responsive {
            overflow-x: auto;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            padding: 8px;
            border: 1px solid #ddd;
        }

        /* Botón tipo PSE */
        .btn-pse {
            display: inline-flex;
            /* Para que se ajuste al contenido y no ocupe todo el ancho */
            align-items: center;
            justify-content: center;
            background-color: #fff;
            color: #333;
            border: 2px solid #ccc;
            padding: 10px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 20px;
            font-weight: bold;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .btn-pse img {
            height: 40px;
            margin-right: 10px;
        }

        /* Hover efecto */
        .btn-pse:hover {
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
            transform: translateY(-2px);
        }

        /* Centrado en contenedor */
        .col-md-12.text-center {
            display: flex;
            justify-content: center;
        }
    </style>

    <div class="clear">&nbsp;</div>
    <div class="shop-page padding-top">
        <div class="container">

            <div class="widget widget-post recent-product">
                <div class="widget-header">
                    <h5 style="font-size: 30px;">DETALLES DE SU COMPRA</h5>
                    <p style="font-size: 20px; text-align:justify">
                        <span style="color: #e0314d;"><b>NOTA IMPORTANTE:</b></span>
                        Recibirás tus Megas por correo después de completar el pago en la plataforma. Este proceso puede
                        tardar de 1 a 24 horas.
                    </p>
                </div>

                <form id="formCompra">
                    @csrf
                    <ul class="lab-ul widget-wrapper">
                        <li class="d-flex flex-wrap justify-content-between">
                            <div class="post-thumb">
                                <img src="{{ url('assets/images/imagesRifas/' . $dataRifa->foto) }}"
                                    style="width: 100px; height:170px;" alt="product">
                            </div>
                            <div class="post-content ps-4">
                                <h6 style="color: #fff; font-size:30px;">{{ $dataRifa->nombre }}</h6>
                                <p>
                                    @for ($i = 0; $i < 5; $i++)
                                        <i class="icofont-star" style="color: #FFD700"></i>
                                    @endfor
                                </p>
                                <hr>

                                <p style="color: #fff; display: inline-block; width: 100px; margin-right: -15px;">
                                    <b>Precio Unidad:</b>
                                </p>
                                <b id="precio"
                                    style="color: #FFD700; font-size:20px;">${{ number_format($dataRifa->valor) }}</b>
                                <input type="hidden" name="precio" id="valRifa" value="{{ $dataRifa->valor }}">
                                <input type="hidden" name="idRifa" id="idRifa" value="{{ $dataRifa->id }}">
                                <hr>

                                <div style="display: flex; align-items: center;">
                                    <p style="color: #fff; margin-right: 10px;"><b>Cantidad:</b></p>
                                    <div class="clear">&nbsp;</div>
                                    <input id="cantidadInput" min="4" type="number" name="cantidad"
                                        style="width: 70px; height: 30px; background:#fff" value="{{ $cantidad ?? 1 }}"
                                        required>
                                </div>
                                <small style="color: #FFD700">Selecciona la cantidad de megas que deseas</small> <br>
                                <small style="color: #fff;">La cantidad mínima son 4 megas por cliente</small>

                                <div id="msj" class="col-lg-12">
                                    @if (\Session::has('error'))
                                        <div class="alert alert-warning" style="border:1px solid #E8F8F5; color:#000;">
                                            <ul>
                                                <li style="font-size: 16px;">{!! \Session::get('error') !!}</li>
                                            </ul>
                                        </div>
                                    @endif
                                </div>
                                <hr>

                                <p style="color: #fff; display: inline-block; width: 100px; margin-right: -15px;"><b>Sub
                                        Total:</b></p>
                                <b id="subtotal" style="color:#FFD700;"><b>$0 COP</b></b>
                                <input type="hidden" id="subtotalHidden" name="subtotal" value="">
                            </div>
                        </li>
                    </ul>
                    <hr>

                    <h3>Total a Pagar</h3>
                    <div class="table-responsive">
                        <table>
                            <tbody>
                                <tr>
                                    <th style="color: #fff; width: 50%;">Subtotal</th>
                                    <td id="subtotalTable" style="color:#FFD700;"><b>$0</b></td>
                                </tr>
                                <tr>
                                    <th style="color: #fff">Total</th>
                                    <td id="totalTable" style="color:#FFD700;"><b>$0</b></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="clear">&nbsp;</div>
                    <hr>

                    <h2>¡Ingresa tus datos!</h2>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="contact-form-wrapper">
                                <div class="form-group mb-4">
                                    <input type="text" class="form-control" placeholder="Nombre*" id="nombre"
                                        name="nombre" required>
                                </div>
                                <div class="form-group mb-4">
                                    <input type="text" class="form-control" placeholder="Apellidos*" id="apellidos"
                                        name="apellido" required>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="contact-form-wrapper">
                                <div class="form-group mb-4">
                                    <input type="number" class="form-control" placeholder="Celular*" id="celular"
                                        name="celular" required>
                                </div>
                                <div class="form-group mb-4">
                                    <input type="email" class="form-control" placeholder="Correo Electrónico*"
                                        id="correo" name="correo" required>
                                    <div class="clear">&nbsp;</div>

                                    <input type="email" class="form-control" placeholder="Confirmar Correo Electrónico*"
                                        id="confirmar_correo" name="confirmar_correo" required>
                                    <div class="form-check">
                                        <div class="clear">&nbsp;</div>

                                        <input class="form-check-input" type="checkbox" id="terminosCondiciones"
                                            name="terminosCondiciones" required>
                                        <label class="form-check-label" for="terminosCondiciones">
                                            Acepto los <a href="{{ url('terminosCondiciones') }}" target="_blank"
                                                style="color: #FFD700">términos y condiciones</a>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12 text-center">
                        <div class="clear">&nbsp;</div>
                        <button type="submit" class="btn-pse">
                            <img src="https://santafedeantioquia-antioquia.gov.co/Ciudadanos/PublishingImages/Paginas/Pagos-en-Linea/pse-logo.png"
                                alt="PSE">
                            Continuar con PSE
                        </button>
                    </div>

                </form>
            </div>
        </div>
    </div>

    <script>
        // Calcular subtotal dinámico
        const cantidadInput = document.getElementById('cantidadInput');
        const subtotalElement = document.getElementById('subtotal');
        const subtotalTableElement = document.getElementById('subtotalTable');
        const totalTableElement = document.getElementById('totalTable');
        const subtotalHiddenInput = document.getElementById('subtotalHidden');

        function numberFormat(number) {
            return number.toLocaleString('es-ES');
        }

        function calcularSubtotal() {
            const precio = parseFloat(document.getElementById('valRifa').value);
            const cantidad = parseInt(cantidadInput.value) || 1;
            const subtotal = precio * cantidad;

            subtotalElement.textContent = '$' + numberFormat(subtotal);
            subtotalTableElement.textContent = '$' + numberFormat(subtotal) + ' COP';
            totalTableElement.textContent = '$' + numberFormat(subtotal) + ' COP';
            subtotalHiddenInput.value = subtotal;
        }

        cantidadInput.addEventListener('input', calcularSubtotal);
        calcularSubtotal();

        // Validar correos
        const correoInput = document.getElementById('correo');
        const confirmarCorreoInput = document.getElementById('confirmar_correo');
        correoInput.addEventListener('input', () => {
            confirmarCorreoInput.setCustomValidity(correoInput.value !== confirmarCorreoInput.value ?
                'Los correos electrónicos no coinciden' : '');
        });
        confirmarCorreoInput.addEventListener('input', () => {
            confirmarCorreoInput.setCustomValidity(correoInput.value !== confirmarCorreoInput.value ?
                'Los correos electrónicos no coinciden' : '');
        });

        const form = document.getElementById('formCompra');
        form.addEventListener('submit', async (e) => {
            e.preventDefault();

            const data = {
                full_name: document.getElementById('nombre').value + ' ' + document.getElementById(
                    'apellidos').value,
                email: document.getElementById('correo').value,
                phone: document.getElementById('celular').value,
                quantity: document.getElementById('cantidadInput').value,
                unit_price: document.getElementById('valRifa').value,
                rifa_id: document.getElementById('idRifa').value,
                subtotal: document.getElementById('subtotalHidden').value
            };

            console.log("📦 Datos que se enviarán al backend:", data);

            try {
                const response = await fetch("{{ route('checkout.store') }}", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify(data)
                });

                console.log("🔹 Response HTTP:", response);

                const result = await response.json().catch(err => {
                    console.error("❌ Error al parsear JSON:", err);
                    return {};
                });

                console.log("📥 Respuesta JSON del backend:", result);

                if (result.id) {
                    console.log("✅ Redirigiendo a MercadoPago con pref_id:", result.id);
                    window.location.href =
                        `https://www.mercadopago.com.co/checkout/v1/redirect?pref_id=${result.id}`;
                } else {
                    console.warn("⚠️ No se generó ID de preferencia:", result);
                    alert("Ocurrió un error al generar el pago. Revisa la consola.");
                }
            } catch (error) {
                console.error("❌ Error al procesar la compra:", error);
                alert("Error al procesar la compra. Revisa la consola para más detalles.");
            }
        });
    </script>
@endsection