@extends('layouts.landing.app')

@section('title', 'Eliminacion de cuenta - Arya')

@push('css_or_js')
    <style>
        .account-deletion-section {
            background: #f7fbf9;
            color: #1f2d2a;
        }

        .account-deletion-panel {
            background: #ffffff;
            border: 1px solid rgba(4, 176, 97, 0.16);
            border-radius: 8px;
            box-shadow: 0 18px 50px rgba(16, 33, 28, 0.08);
            padding: 32px;
        }

        .account-deletion-panel h1,
        .account-deletion-panel h2,
        .account-deletion-panel h3 {
            color: #15332a;
            letter-spacing: 0;
        }

        .account-deletion-panel h1 {
            font-size: 36px;
            line-height: 1.16;
            margin-bottom: 14px;
        }

        .account-deletion-panel h2 {
            font-size: 22px;
            margin-top: 28px;
            margin-bottom: 12px;
        }

        .account-deletion-panel h3 {
            font-size: 17px;
            margin-bottom: 8px;
        }

        .account-deletion-panel p,
        .account-deletion-panel li,
        .account-deletion-panel label {
            color: #49615a;
            font-size: 15px;
            line-height: 1.7;
        }

        .account-deletion-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin: 24px 0;
        }

        .account-deletion-link {
            align-items: center;
            border: 1px solid rgba(4, 176, 97, 0.35);
            border-radius: 6px;
            color: #087747;
            display: inline-flex;
            font-weight: 700;
            justify-content: center;
            min-height: 44px;
            padding: 10px 18px;
        }

        .account-deletion-link:hover {
            color: #045f39;
        }

        .account-deletion-grid {
            display: grid;
            gap: 18px;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .account-deletion-card {
            border: 1px solid #dbe9e4;
            border-radius: 8px;
            padding: 18px;
        }

        .account-deletion-form {
            border-top: 1px solid #e5efeb;
            margin-top: 28px;
            padding-top: 24px;
        }

        .account-deletion-form .form-control,
        .account-deletion-form .custom-select {
            border-color: #d5e2dd;
            border-radius: 6px;
            min-height: 44px;
        }

        @media (max-width: 767px) {
            .account-deletion-panel {
                padding: 22px;
            }

            .account-deletion-panel h1 {
                font-size: 28px;
            }

            .account-deletion-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
@endpush

@section('content')
    <section class="account-deletion-section py-5">
        <div class="container">
            <div class="account-deletion-panel">
                <h1>Eliminacion de cuenta Arya</h1>
                <p>
                    Esta pagina permite solicitar la eliminacion de una cuenta de Arya y de los datos personales
                    asociados a esa cuenta, incluso si ya no tienes instalada la app.
                </p>

                <div class="account-deletion-actions">
                    <a href="#request-account-deletion" class="cmn--btn">Solicitar eliminacion</a>
                    <a class="account-deletion-link" href="mailto:{{ $supportEmail }}?subject=Solicitud%20de%20eliminacion%20de%20cuenta%20Arya">Enviar email a {{ $supportEmail }}</a>
                </div>

                <div class="account-deletion-grid">
                    <div class="account-deletion-card">
                        <h3>Desde la app</h3>
                        <p>
                            Inicia sesion en Arya, entra a tu perfil y usa la opcion <strong>Eliminar cuenta</strong>.
                            Si tienes pedidos en curso, primero debes completarlos o cancelarlos.
                        </p>
                    </div>
                    <div class="account-deletion-card">
                        <h3>Desde la web</h3>
                        <p>
                            Completa el formulario de esta pagina o escribe a
                            <a href="mailto:{{ $supportEmail }}">{{ $supportEmail }}</a> con el email o telefono de tu cuenta.
                        </p>
                    </div>
                </div>

                <h2>Datos que se eliminan</h2>
                <p>
                    Eliminaremos o anonimizaremos los datos personales vinculados a tu cuenta, incluyendo datos de perfil,
                    datos de contacto, direcciones guardadas, tokens de acceso, favoritos y otra informacion asociada al uso
                    de Arya cuando corresponda.
                </p>

                <h2>Datos que pueden conservarse</h2>
                <p>
                    Algunos registros pueden conservarse por obligaciones legales, contables, seguridad, prevencion de fraude,
                    disputas, pagos, reembolsos, entregas o pedidos pendientes. Si esto aplica, limitaremos la conservacion a
                    lo necesario para cumplir esas finalidades.
                </p>

                <h2>Plazo de respuesta</h2>
                <p>
                    Revisaremos la solicitud y responderemos al email informado. Normalmente procesamos las solicitudes dentro
                    de 15 dias habiles, sujeto a validacion de identidad y a que no existan pedidos, pagos o saldos pendientes.
                </p>

                @if ($errors->any())
                    <div class="alert alert-danger mt-4">
                        <strong>Revisa los datos del formulario.</strong>
                    </div>
                @endif

                <form id="request-account-deletion" class="account-deletion-form" action="{{ route('account-deletion.request') }}" method="post">
                    @csrf
                    <h2>Solicitar eliminacion</h2>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="name">Nombre y apellido</label>
                            <input id="name" class="form-control" type="text" name="name" value="{{ old('name') }}" required maxlength="120">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="email">Email de la cuenta</label>
                            <input id="email" class="form-control" type="email" name="email" value="{{ old('email') }}" required maxlength="191">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="phone">Telefono</label>
                            <input id="phone" class="form-control" type="text" name="phone" value="{{ old('phone') }}" maxlength="40">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="account_type">Tipo de cuenta</label>
                            <select id="account_type" class="custom-select" name="account_type" required>
                                <option value="cliente" {{ old('account_type') === 'cliente' ? 'selected' : '' }}>Cliente</option>
                                <option value="comercio" {{ old('account_type') === 'comercio' ? 'selected' : '' }}>Comercio</option>
                                <option value="repartidor" {{ old('account_type') === 'repartidor' ? 'selected' : '' }}>Repartidor</option>
                            </select>
                        </div>
                        <div class="col-md-12 mb-3">
                            <label for="account_identifier">Usuario, ID de cuenta o dato adicional para ubicarla</label>
                            <input id="account_identifier" class="form-control" type="text" name="account_identifier" value="{{ old('account_identifier') }}" maxlength="191">
                        </div>
                        <div class="col-md-12 mb-3">
                            <label for="message">Mensaje adicional</label>
                            <textarea id="message" class="form-control" name="message" rows="4" maxlength="2000">{{ old('message') }}</textarea>
                        </div>
                    </div>
                    <button type="submit" class="cmn--btn">Enviar solicitud</button>
                </form>
            </div>
        </div>
    </section>
@endsection