@extends('layouts.legal')

@section('meta-title', 'Data Deletion — ' . config('legal.app_name'))
@section('meta-description', 'Request deletion, correction, or access to your data held by ' . config('legal.app_name') . '.')
@section('page-title', 'Data Deletion')

@section('toc')
    <li><a href="#who">Who can request</a></li>
    <li><a href="#what">What you can request</a></li>
    <li><a href="#process">How it works</a></li>
    <li><a href="#form">Submit a request</a></li>
@endsection

@section('styles')
<style>
    .dd-field { margin-bottom: 16px; }
    .dd-field label { display: block; font-size: 13px; font-weight: 700; color: var(--legal-heading); margin-bottom: 6px; }
    .dd-field .dd-optional { font-weight: 500; color: var(--legal-muted); text-transform: none; letter-spacing: 0; }
    .dd-field input[type="text"], .dd-field input[type="email"], .dd-field input[type="tel"], .dd-field select, .dd-field textarea {
        width: 100%; min-height: 46px; padding: 11px 13px; border-radius: 10px;
        border: 1.5px solid var(--legal-border); font: inherit; font-size: 15px; color: var(--legal-heading);
        background: #fff; transition: border-color .15s, box-shadow .15s;
    }
    .dd-field input:focus, .dd-field select:focus, .dd-field textarea:focus {
        border-color: var(--legal-accent); box-shadow: 0 0 0 3px rgba(249,115,22,.12); outline: none;
    }
    .dd-field textarea { min-height: 110px; resize: vertical; }
    .dd-row { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
    @media (min-width: 560px) { .dd-row { grid-template-columns: 1fr 1fr; } }
    .dd-radio-group { display: flex; flex-wrap: wrap; gap: 8px; }
    .dd-radio-group label {
        display: flex; align-items: center; gap: 7px; min-height: 44px;
        padding: 0 14px; border: 1.5px solid var(--legal-border); border-radius: 10px;
        font-size: 13.5px; font-weight: 600; color: var(--legal-text); cursor: pointer;
    }
    .dd-radio-group input { accent-color: var(--legal-accent); width: 17px; height: 17px; }
    .dd-radio-group input:checked + span { color: var(--legal-accent-dark); font-weight: 700; }
    .dd-checkbox-row { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0; }
    .dd-checkbox-row input { width: 19px; height: 19px; margin-top: 2px; accent-color: var(--legal-accent); flex-shrink: 0; }
    .dd-checkbox-row label { font-size: 13.5px; font-weight: 600; color: var(--legal-text); }
    .dd-error { font-size: 12.5px; color: #DC2626; font-weight: 600; margin-top: 5px; }
    .dd-submit {
        min-height: 48px; padding: 0 26px; border-radius: 12px; border: none;
        background: var(--legal-accent); color: #fff; font-size: 14.5px; font-weight: 800;
        cursor: pointer; transition: filter .15s;
    }
    .dd-submit:hover { filter: brightness(1.06); }
    .dd-success {
        background: #ECFDF5; border: 1px solid #A7F3D0; color: #047857;
        border-radius: 12px; padding: 14px 16px; font-weight: 700; font-size: 14px; margin-bottom: 20px;
    }
    /* Honeypot — off-screen but still focusable/fillable by simple bots that
       auto-populate every field, unlike display:none which many bots skip. */
    .dd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
</style>
@endsection

@section('content')

<h2 id="who">Who can request this</h2>
<p>Anyone with data held by {{ config('legal.app_name') }} can use this page: a restaurant owner, a staff member, or a customer who has placed an order, made a booking, or left a review through a restaurant's {{ config('legal.app_name') }} QR menu.</p>

<h2 id="what">What you can request</h2>
<ul>
    <li>Deletion of your owner/staff account</li>
    <li>Deletion of your personal data (as a customer, e.g. order or booking details)</li>
    <li>Correction of inaccurate information</li>
    <li>Access to a copy of the data we hold about you</li>
    <li>Deletion of an entire restaurant's data (owner-initiated only)</li>
    <li>Removal of specific uploaded content</li>
</ul>

<h2 id="process">How it works</h2>
<ol>
    <li><strong>Verify</strong> — we confirm you're who you say you are, using the details you provide below. We will never ask for your password, an OTP, or any card/UPI PIN as part of this process — if anyone claiming to be {{ config('legal.app_name') }} asks you for one, do not provide it.</li>
    <li><strong>Locate</strong> — we find the relevant account or records.</li>
    <li><strong>Act</strong> — we delete, anonymise, or correct the data as requested, except where a record must be retained for a legal or regulatory reason.</li>
    <li><strong>Confirm</strong> — we let you know once your request has been actioned.</li>
</ol>
<p>We handle requests within a reasonable period, and within any legally required timeframe that applies.</p>

<h2 id="form">Submit a request</h2>

@if(session('success'))
<p class="dd-success">{{ session('success') }}</p>
@endif

<form method="POST" action="{{ route('legal.data-deletion.submit') }}" novalidate>
    @csrf

    <div class="dd-hp" aria-hidden="true">
        <label for="website">Leave this field blank</label>
        <input type="text" id="website" name="website" tabindex="-1" autocomplete="off">
    </div>

    <div class="dd-field">
        <label>I am a <span class="dd-optional">(required)</span></label>
        <div class="dd-radio-group">
            @foreach(['owner' => 'Restaurant owner', 'staff' => 'Staff member', 'customer' => 'Customer', 'other' => 'Other'] as $val => $label)
            <label>
                <input type="radio" name="requester_type" value="{{ $val }}" {{ old('requester_type') === $val ? 'checked' : '' }} required>
                <span>{{ $label }}</span>
            </label>
            @endforeach
        </div>
        @error('requester_type')<div class="dd-error">{{ $message }}</div>@enderror
    </div>

    <div class="dd-row">
        <div class="dd-field">
            <label for="full_name">Full name</label>
            <input type="text" id="full_name" name="full_name" value="{{ old('full_name') }}" required>
            @error('full_name')<div class="dd-error">{{ $message }}</div>@enderror
        </div>
        <div class="dd-field">
            <label for="request_type">Request type</label>
            <select id="request_type" name="request_type" required>
                <option value="">Select…</option>
                <option value="delete_account" {{ old('request_type') === 'delete_account' ? 'selected' : '' }}>Delete my account</option>
                <option value="delete_personal_data" {{ old('request_type') === 'delete_personal_data' ? 'selected' : '' }}>Delete my personal data</option>
                <option value="correct_info" {{ old('request_type') === 'correct_info' ? 'selected' : '' }}>Correct my information</option>
                <option value="access_info" {{ old('request_type') === 'access_info' ? 'selected' : '' }}>Access my information</option>
                <option value="delete_restaurant_data" {{ old('request_type') === 'delete_restaurant_data' ? 'selected' : '' }}>Delete restaurant data (owners only)</option>
                <option value="remove_content" {{ old('request_type') === 'remove_content' ? 'selected' : '' }}>Remove specific content</option>
                <option value="other" {{ old('request_type') === 'other' ? 'selected' : '' }}>Other</option>
            </select>
            @error('request_type')<div class="dd-error">{{ $message }}</div>@enderror
        </div>
    </div>

    <div class="dd-row">
        <div class="dd-field">
            <label for="email">Email <span class="dd-optional">(you or phone below)</span></label>
            <input type="email" id="email" name="email" value="{{ old('email') }}">
        </div>
        <div class="dd-field">
            <label for="phone">Phone <span class="dd-optional">(you or email above)</span></label>
            <input type="tel" id="phone" name="phone" value="{{ old('phone') }}">
        </div>
    </div>
    @error('email')<div class="dd-error" style="margin-top:-10px;">{{ $message }}</div>@enderror

    <div class="dd-row">
        <div class="dd-field">
            <label for="restaurant_name">Restaurant name <span class="dd-optional">(if applicable)</span></label>
            <input type="text" id="restaurant_name" name="restaurant_name" value="{{ old('restaurant_name') }}">
        </div>
        <div class="dd-field">
            <label for="username">Username <span class="dd-optional">(owner/staff accounts)</span></label>
            <input type="text" id="username" name="username" value="{{ old('username') }}">
        </div>
    </div>

    <div class="dd-field">
        <label for="order_or_booking_reference">Order or booking reference <span class="dd-optional">(if applicable)</span></label>
        <input type="text" id="order_or_booking_reference" name="order_or_booking_reference" value="{{ old('order_or_booking_reference') }}">
    </div>

    <div class="dd-field">
        <label for="description">Tell us more about your request</label>
        <textarea id="description" name="description" required>{{ old('description') }}</textarea>
        @error('description')<div class="dd-error">{{ $message }}</div>@enderror
    </div>

    <div class="dd-checkbox-row">
        <input type="checkbox" id="verification_confirmation" name="verification_confirmation" value="1" required>
        <label for="verification_confirmation">I confirm the information above is accurate and that I am authorised to make this request.</label>
    </div>
    @error('verification_confirmation')<div class="dd-error" style="margin-top:-12px;margin-bottom:16px;">{{ $message }}</div>@enderror

    <button type="submit" class="dd-submit">Submit request</button>
</form>

@endsection