@extends('layouts.app', [
    'title' => 'Support — Rsync Studio',
    'description' => 'Contact Rsync Studio support for technical, licence, billing and privacy enquiries.'
])

@section('content')
<section class="support-hero">
    <span class="eyebrow">Support</span>
    <h1>How can we help?</h1>
    <p class="lead">Send us the details below. Your request is saved securely, assigned a reference and emailed to the support team.</p>
</section>

<div class="support-layout">
    <section class="support-form-card">
        <div class="panel-heading-simple">
            <div>
                <h2>Contact support</h2>
                <p>We will reply to the email address you provide.</p>
            </div>
            <span class="response-badge">Support ticket</span>
        </div>

        <form method="post" action="{{ route('support.store') }}" class="support-form">
            @csrf
            <div class="honeypot" aria-hidden="true">
                <label for="company_website">Company website</label>
                <input id="company_website" name="company_website" type="text" tabindex="-1" autocomplete="off">
            </div>

            <div class="form-grid two">
                <div>
                    <label for="name">Name</label>
                    <input id="name" name="name" value="{{ old('name', auth()->user()?->name) }}" autocomplete="name" required maxlength="120">
                    @error('name')<div class="field-error">{{ $message }}</div>@enderror
                </div>
                <div>
                    <label for="email">Email</label>
                    <input id="email" type="email" name="email" value="{{ old('email', auth()->user()?->email) }}" autocomplete="email" required maxlength="254">
                    @error('email')<div class="field-error">{{ $message }}</div>@enderror
                </div>
            </div>

            <div class="form-grid two">
                <div>
                    <label for="category">Category</label>
                    <select id="category" name="category" required>
                        @foreach($categories as $value => $label)
                            <option value="{{ $value }}" @selected(old('category') === $value)>{{ $label }}</option>
                        @endforeach
                    </select>
                    @error('category')<div class="field-error">{{ $message }}</div>@enderror
                </div>
                <div>
                    <label for="subject">Subject</label>
                    <input id="subject" name="subject" value="{{ old('subject') }}" required maxlength="180" placeholder="Briefly describe the issue">
                    @error('subject')<div class="field-error">{{ $message }}</div>@enderror
                </div>
            </div>

            <div>
                <label for="message">Message</label>
                <textarea id="message" name="message" rows="8" required maxlength="10000" placeholder="Tell us what happened, what you expected, your macOS version and Rsync Studio version where relevant.">{{ old('message') }}</textarea>
                <div class="form-help">Do not include passwords, private SSH keys or your full licence token.</div>
                @error('message')<div class="field-error">{{ $message }}</div>@enderror
            </div>

            <label class="consent-check">
                <input type="checkbox" name="privacy_notice" value="1" @checked(old('privacy_notice')) required>
                <span>I have read the <a href="{{ route('privacy') }}" target="_blank" rel="noopener">Privacy Policy</a> and understand that my details will be used to respond to this request.</span>
            </label>
            @error('privacy_notice')<div class="field-error">{{ $message }}</div>@enderror

            <div class="support-actions">
                <button type="submit" class="btn btn-primary">Send support request</button>
                @auth
                    @if(auth()->user()->hasVerifiedEmail())<a class="btn btn-secondary" href="{{ route('portal.index') }}">Open licence portal</a>@endif
                @endauth
            </div>
        </form>
    </section>

    <aside class="support-side">
        <article class="support-info-card blue">
            <div class="support-info-icon">◎</div>
            <h3>Licence &amp; activation</h3>
            <p>Include the last four characters of your licence key and the exact activation message.</p>
        </article>
        <article class="support-info-card green">
            <div class="support-info-icon">✓</div>
            <h3>Useful diagnostics</h3>
            <p>Include the Rsync Studio version, macOS version and the relevant History error output.</p>
        </article>
        <article class="support-info-card violet">
            <div class="support-info-icon">⌁</div>
            <h3>Privacy requests</h3>
            <p>Choose “Privacy / data request” for access, correction, deletion, restriction or objection requests.</p>
        </article>
    </aside>
</div>
@endsection