@extends('layouts.app')

@section('custom_style')
    <script src="https://www.google.com/recaptcha/api.js?render={{ config('recaptcha.key') }}" async defer></script>
    <script type="text/javascript" src="https://js.openpay.mx/openpay.v1.min.js"></script>
    <script type='text/javascript' src="https://js.openpay.mx/openpay-data.v1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            OpenPay.setId("{{ config('openpay.merchant_id') }}");
            OpenPay.setApiKey("{{ config('openpay.public_key') }}");
            OpenPay.setSandboxMode({{ config('openpay.production') == true ? 'false' : 'true' }});
            var deviceSessionId = OpenPay.deviceData.setup(
                "purchasesForm",
                "deviceIdHiddenFieldName");
        });
    </script>
@endsection

@section('content')
    <div class="container my-5">
        <h2 class="text-center mb-4 custom-text-color">Finalizar resuscripción</h2>
        <div class="row justify-content-center">
            <!-- Información de la suscripción -->
            <div class="col-md-5">
                <div class="card shadow-sm">
                    <div class="card-header bg-dark text-white">
                        <h4 class="mb-0">Resumen de la Suscripción</h4>
                    </div>
                    <div class="card-body">
                        @if ($slug == 'basic')
                            <div>
                                <h5 class="fw-bold" id="plan-name">Plan Básico</h5>
                                <p id="plan-description">Muestra tu página por 1 mes en nuestra sitio web</p>
                            </div>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">✔ Cancelación en cualquier momento</li>
                                <li class="list-group-item">✔ 1 mes de publicación en IndustryAll Market</li>
                                <li class="list-group-item">✔ Soporte programado</li>
                            </ul>

                            <div class="mt-3">
                                <h4>Total: <span id="plan-price" class="fw-bold">$99.00 MXN</span></h4>
                            </div>
                        @endif
                        @if ($slug == 'premium')
                            <div>
                                <h5 class="fw-bold" id="plan-name">Plan {{ $slug }}</h5>
                                <p id="plan-description">Ten una página exclusiva para tu empresa en nuestro sitio web por 1
                                    año.</p>
                            </div>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">✔ Paga el año y ahorra un 15%</li>
                                <li class="list-group-item">✔ 1 año de publicación en IndustryAll Market</li>
                                <li class="list-group-item">✔ Soporte L-V</li>
                                <li class="list-group-item">✔ Reporte mensual de visitas</li>
                                <li class="list-group-item">✔ x1 Correo promocional Mensual con Banner publicitario a 50
                                    contactos</li>
                            </ul>

                            <div class="mt-3">
                                <h4>Total: <span id="plan-price" class="fw-bold">$1,000.00 MXN</span></h4>
                            </div>
                        @endif
                        @if ($slug == 'ultimate')
                            <div>
                                <h5 class="fw-bold" id="plan-name">Plan {{ $slug }}</h5>
                                <p id="plan-description">Todo para tu empresa en nuestro sitio web por 1 año.</p>
                            </div>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">✔ Reporte mensual de visitas al perfil</li>
                                <li class="list-group-item">✔ 1 año de publicación en IndustryAll Market</li>
                                <li class="list-group-item">✔ Listado en la página principal de servicios por 3 meses</li>
                                <li class="list-group-item">✔ 3x Banner promocionales. 1x FB 1200*1200 px , 1x Lkdn
                                    1200*1200
                                    px, 1x Instagram 1080*1080 px</li>
                                <li class="list-group-item">✔ x1 Video promocional de marca. Duración 15 seg</li>
                                <li class="list-group-item">✔ x1 Correo promocional Mensual con Banner publicitario a 250
                                    contactos validos</li>
                                <li class="list-group-item">✔ 1 Publicación mensual y mención en redes de IndustryAll Market
                                </li>
                            </ul>

                            <div class="mt-3">
                                <h4>Total: <span id="plan-price" class="fw-bold">$8,500.00 MXN</span></h4>
                            </div>
                        @endif

                        @isset($service)
                            <div class="mt-3">
                                <small class="custom-text-color">Importante:</small>
                                <p>Antes de volver a suscribirse al servicio. Por favor revisar los datos de tu empresa para
                                    saber si
                                    todo esta en orden. Si algun dato esta erróneo o falta datos, favor de enviarnos un correo
                                    para modificar datos <a
                                        href="mailto:contacto@industryallmarket.com">contacto@industryallmarket.com</a> o
                                    escríbenos por WP +52 442 790 6892</p>
                            </div>
                            <form action="{{ Route('getInfoService') }}" method="get" id="getInfoServiceForm">
                                @method('get')
                                <input type="hidden" name="serviceId" value="{{ $service->slug }}">
                            </form>
                            <button type="button" class="btn custom-bg-color mt-1" id="getInfoService">Ver infomación
                                proporcionada</button>
                            <div class="error-container" style="display: none;">
                                <small class="text-danger" id="errorInGet"></small>
                            </div>
                        @endisset
                    </div>
                </div>
            </div>

            <!-- Formulario de pago -->
            <div class="col-md-5">
                <div class="card shadow-sm">
                    <div class="card-header custom-bg-color text-white">
                        <h4 class="mb-0">Detalles de Pago</h4>
                    </div>
                    <div class="card-body">
                        <form id="purchasesForm" method="POST" action="{{ route('validatingRenew') }}">
                            @csrf
                            <input type="hidden" name="token_id" id="token_id" />
                            <input type="hidden" name="service_id" id="service_id" value="{{ $slug }}" />
                            <input type="hidden" name="pay_service" id="pay_service" value="{{ $service->slug }}">
                            <div class="pymnt-itm active">
                                {{-- <h5 class="fw-bold">Tarjeta de crédito o débito</h5> --}}
                                <div class="pymnt-cntnt">
                                    <div class="card-expl">
                                        <div class="credit">
                                            <small>Tarjetas de crédito</small><br>
                                            <img src="{{ Asset('assets/cards1.png') }}" alt="cards1" class="img-fluid">
                                        </div>
                                        <div class="debit">
                                            <small>Tarjetas de débito</small>
                                            <img src="{{ Asset('assets/cards2.png') }}" alt="cards2" class="img-fluid">
                                        </div>
                                    </div>
                                    <div class="card-js mt-2" id="theCard">
                                        <div class="sctn-row">
                                            <div class="sctn-col l">
                                                <label>Nombre del titular</label>
                                                <input type="text" class="form-control name"
                                                    placeholder="Como aparece en la tarjeta" autocomplete="off"
                                                    data-openpay-card="holder_name" />
                                            </div>
                                            <div class="sctn-col">
                                                <label>Número de tarjeta</label>
                                                <input type="text" class="form-control card-number" autocomplete="off"
                                                    data-openpay-card="card_number" placeholder="XXXX XXXX XXXX XXXX" />
                                            </div>
                                        </div>
                                        <div class="sctn-row">
                                            <div class="sctn-col l">
                                                <label>Fecha de expiración</label>
                                                <div class="row">
                                                    <div class="col-6 half l">
                                                        <input type="text" placeholder="Mes"
                                                            class="form-control expiry-month" id="expiry-month"
                                                            data-openpay-card="expiration_month" maxlength="2" />
                                                    </div>
                                                    <div class="col-6 half l">
                                                        <input type="text" placeholder="Año"
                                                            class="form-control expiry-year" id="expiry-year"
                                                            data-openpay-card="expiration_year" maxlength="2" />
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="sctn-col cvv">
                                                <label>Código de seguridad</label>
                                                <div class="row">
                                                    <div class="col half l">
                                                        <input type="text" placeholder="3 dígitos"
                                                            class="form-control cvc2" autocomplete="off"
                                                            data-openpay-card="cvv2" maxlength="4" />
                                                    </div>
                                                    <div class="col">
                                                        <img src="{{ Asset('assets/cvv.png') }}" alt="cvv"
                                                            class="img-fluid">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="openpay mt-3">
                                        <div class="row">
                                            <div class="logo col border-end">
                                                Transacciones realizadas vía: <img src="{{ Asset('assets/openpay.png') }}"
                                                    alt="openpay" class="img-fluid">
                                            </div>
                                            <div class="shield col">
                                                <img src="{{ Asset('assets/security.png') }}" alt="security"
                                                    class="img-fluid">
                                                Tus pagos se realizan de forma segura con encriptación de 256
                                                bits
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="submit_purchase" class="text-center">
                                <button type="submit" class="btn custom-bg-color w-100 mt-3"
                                    id="submitPurchaseButton">Pagar Ahora</button>
                                <div class="mt-3">
                                    <p class="text-center">Al hacer clic en "<span class="custom-text-color">Pagar
                                            Ahora</span>", aceptas nuestros <a href="#">Términos de Servicio</a> y <a
                                            href="#">Política de Privacidad</a>.</p>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

        {{-- Show service --}}
        <div class="modal fade" id="showServiceModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
            role="dialog" aria-labelledby="notLinkedModal" aria-hidden="true">
            <div class="modal-dialog modal-dialog-scrollable modal-xl" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title text-info" id="showServiceModalTitle">Detalles del servicio</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Cerrar">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body" id="showServicePartial">
                        {{-- Here a partial --}}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar detalles</button>
                    </div>
                </div>
            </div>
        </div>
@endsection

@section('custom_script')
    @vite('resources/js/services/suscriptions/validationsSuscriptions.js')
    <script>
        $(document).ready(function() {
            $('#purchasesForm').submit(function(e) {
                e.preventDefault();

                if (!$(this)[0].checkValidity()) {
                    $(this)[0].reportValidity();
                    return;
                }
                $("#submitPurchaseButton").html(`
                    <div class="spinner-border" role="status">
                    </div>
                `);
                $("#submitPurchaseButton").prop("disabled", true);

                var sucess_callbak = function(response) {
                    var token_id = response.data.id;
                    $("#token_id").val(token_id);
                    $("#purchasesForm").unbind("submit").submit();
                    $("#submitPurchaseButton").prop("disabled", true);
                    $("#submitPurchaseButton").html("Realizando el cobro...");
                };

                var error_callbak = function(response) {
                    var desc =
                        response.data.description != undefined ?
                        response.data.description :
                        response.message;
                    alert("ERROR [" + response.status + "] " + desc);
                    $("#submitPurchaseButton").prop("disabled", false);
                    $("#submitPurchaseButton").html("Pagar Ahora");
                };

                grecaptcha.ready(function() {
                    grecaptcha
                        .execute("{{ config('recaptcha.key') }}", {
                            action: "submit",
                        })
                        .then(function(token) {
                            $("#purchasesForm").prepend(
                                '<input type="hidden" name="g-recaptcha-response" value="' +
                                token +
                                '">'
                            );
                            var cardNumberInput = $(
                                'input[data-openpay-card="card_number"]');
                            var cleanCardNumber = cardNumberInput.val().replace(/\D/g,
                                '');
                            cardNumberInput.val(cleanCardNumber);

                            OpenPay.token.extractFormAndCreate(
                                "purchasesForm",
                                sucess_callbak,
                                error_callbak
                            );
                        });
                });
            });

        });
    </script>
@endsection