@extends('layouts.app')
@section('seo')
    <title>Pago realizado con éxito | {{infoEmail()->host}}</title>
    <meta name="description" content="Pago realizado con éxito" />
    <meta name="keywords" content="pago exitoso, pago completado">
@stop
@section('content')
    <!-- Fin sección migas de pan -->

    <section class="bj_shop_area sec_padding" data-bg-color="#f5f5f5">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    @if($user)
                        <div class="card mt-3">
                            <div class="card-header">
                                <h2 style="font-size: 1.5rem;font-weight: bold;padding: 20px 0;">¡Gracias por tu pedido!</h2>
                                <span>Tu pago ha sido procesado correctamente. Hemos recibido tu pedido y lo estamos tramitando.<br>
                                Se ha enviado un correo de confirmación con todos los detalles del pedido a tu dirección de correo electrónico.
                                </span>
                            </div>

                            <div class="card-body">
                                <ul class="nav nav-tabs" id="nav-tab" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" href="#nav-home"
                                           role="tab" aria-controls="nav-home" aria-selected="true">
                                            Tu dirección
                                        </a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" href="#nav-profile"
                                           role="tab" aria-controls="nav-profile" aria-selected="false">
                                            Editar
                                        </a>
                                    </li>
                                </ul>

                                <div class="tab-content" id="nav-tabContent">
                                    <!-- Bloque dirección de envío -->
                                    <div class="tab-pane fade show active" id="nav-home" role="tabpanel"
                                         aria-labelledby="nav-home-tab">
                                        <ul class="list-group">
                                            <li class="list-group-item">{{ $user->name }}</li>
                                            <li class="list-group-item">{{ $user->phone }}</li>
                                            <li class="list-group-item">{{ $user->email }}</li>
                                            <li class="list-group-item">{{ $user->country }}</li>
                                            <li class="list-group-item">{{ $user->state }} {{ $user->city }} {{ $user->street1 }}</li>
                                            @if($user->street2)
                                                <li class="list-group-item">{{ $user->street2 }}</li>
                                            @endif
                                            <li class="list-group-item">{{ $user->postal }}</li>
                                        </ul>
                                    </div>

                                    <!-- Formulario edición datos -->
                                    <div class="tab-pane fade" id="nav-profile" role="tabpanel"
                                         aria-labelledby="nav-profile-tab">
                                        <form action="{{ url('paypal/success') }}" method="POST" id="form">
                                            <input type="hidden" name="type" value="form">
                                            @csrf
                                            <input type="hidden" name="trans_id" value="{{ $user->trans_id }}">

                                            <div class="row">
                                                <div class="col-md-6 mb-3">
                                                    <label for="country" class="form-label small text-gray">País/región <span style="color: red;">*</span></label>
                                                    <select class="nice-select" name="country" id="country" required>
                                                        @foreach($countries as $k=>$v)
                                                            <option {{ $k === $user->country ? 'selected' : '' }} value="{{ $k }}">{{ $v }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>

                                                <div class="col-md-6 mb-3">
                                                    <label for="first-name" class="form-label small text-gray">Nombre y apellidos <span style="color: red;">*</span></label>
                                                    <input class="form-control" name="name" id="first-name" type="text"
                                                           value="{{ $user->name }}" data-validate="required" required>
                                                </div>

                                                <div class="col-md-6 mb-3">
                                                    <label for="email-address" class="form-label small text-gray">Correo electrónico <span style="color: red;">*</span></label>
                                                    <input class="form-control" name="email" id="email-address" type="email"
                                                         data-validate="required|email"  required value="{{ $user->email }}">
                                                </div>

                                                <div class="col-md-6 mb-3">
                                                    <label for="phone-number" class="form-label small text-gray">Número de teléfono <span style="color: red;">*</span></label>
                                                    <input class="form-control" name="phone" id="phone-number" type="text"  data-validate="required"
                                                           required value="{{ $user->phone }}">
                                                </div>

                                                <div class="col-md-6 mb-3">
                                                    <label for="notice" class="form-label small text-gray">Línea de dirección 1 <span style="color: red;">*</span></label>
                                                    <input class="form-control" name="street1" id="notice" required data-validate="required"
                                                           value="{{ $user->street1 }}">
                                                </div>

                                                <div class="col-md-6 mb-3">
                                                    <label for="zip" class="form-label small text-gray">Código postal <span style="color: red;">*</span></label>
                                                    <input class="form-control" name="postal" id="zip" type="text" required data-validate="required"
                                                           value="{{ $user->postal }}">
                                                </div>

                                                <div class="col-md-6 mb-3">
                                                    <label for="city" class="form-label small text-gray">Ciudad <span style="color: red;">*</span></label>
                                                    <input class="form-control" name="city" id="city" type="text" required data-validate="required"
                                                           value="{{ $user->city }}">
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <label for="city" class="form-label small text-gray">Provincia/Ciudad autónoma <span style="color: red;">*</span></label>
                                                    <input class="form-control" name="state" id="state" type="text" required data-validate="required"
                                                           value="{{ $user->state }}">
                                                </div>
                                                <div class="col-12 text-center mt-4">
                                                    <button type="button" id="form-update"
                                                            class="btn btn-lg btn-success">
                                                        Confirmar
                                                    </button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @else
                        <p>
                            Si necesitas ayuda, contacta con nuestro servicio de atención al cliente en el correo
                            <a href="mailto:{{ infoEmail()->email }}">{{ infoEmail()->email }}</a>.
                        </p>
                    @endif
                </div>
            </div>
        </div>
    </section>
@stop

@section('js')
    <!-- Script validación formulario -->
    <script src="/static/js/form-validate.js"></script>

    <script>
        // Gestión manual de pestañas Bootstrap
        $(function () {
            $('#nav-tab a').on('click', function (e) {
                e.preventDefault();
                $(this).tab('show');
            });
        });

        // Lógica envío formulario AJAX
        document.getElementById('form-update').addEventListener('click', function () {
            let validator = new FormValidator('form');
            if (validator.validateForm()) {
                const form = document.getElementById('form');
                const formDataArray = [];
                const elements = form.elements;
                for (let i = 0; i < elements.length; i++) {
                    const elem = elements[i];
                    if (!elem.name || elem.disabled || ['submit', 'reset', 'button'].includes(elem.type)) {
                        continue;
                    }
                    if (['checkbox', 'radio'].includes(elem.type) && !elem.checked) {
                        continue;
                    }
                    if (elem.tagName === 'SELECT') {
                        const selectedOption = elem.options[elem.selectedIndex];
                        formDataArray.push({
                            name: elem.name,
                            value: selectedOption.value || selectedOption.textContent
                        });
                        continue;
                    }
                    formDataArray.push({
                        name: elem.name,
                        value: elem.value
                    });
                }
                const formData = {};
                formDataArray.forEach(field => {
                    if (formData[field.name]) {
                        if (!Array.isArray(formData[field.name])) {
                            formData[field.name] = [formData[field.name]];
                        }
                        formData[field.name].push(field.value);
                    } else {
                        formData[field.name] = field.value;
                    }
                });

                $.ajax({
                    url: '{{ url('paypal/success') }}',
                    method: 'post',
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    },
                    data: formData,
                    success: function (response) {
                        if (response.status === 'success') {
                       
                            window.location.reload();
                        }
                    }
                });
                return false;
            }
        });
    </script>
@stop