@extends('layouts.vpm-dashboard', ['active' => 'mail', 'area' => 'admin'])

@section('title', 'Send Mail')
@section('content_class', 'vpm-shell__main--mail')

@section('content')
@php
    $prefillTo = old('to', $prefillTo ?? '');
    $prefillName = old('recipient_name', $prefillName ?? '');
    $selectedTemplate = old('template', 'custom');
    $custodialDefaults = $templates['custodial_fees'] ?? [];
@endphp

<div class="vpm-mail-page">
    <header class="vpm-mail-page__intro">
        <h1 class="vpm-mail-page__title">Send Mail</h1>
        <p class="vpm-mail-page__desc">Compose custom messages or send structured templates to clients.</p>
    </header>

    <div class="vpm-mail-templates" data-vpm-mail-templates>
        @foreach ($templates as $key => $template)
            <button
                type="button"
                class="vpm-mail-templates__tab{{ $selectedTemplate === $key ? ' is-active' : '' }}"
                data-vpm-mail-template-tab="{{ $key }}"
                aria-pressed="{{ $selectedTemplate === $key ? 'true' : 'false' }}"
            >
                <span class="vpm-mail-templates__tab-label">{{ $template['label'] }}</span>
                <span class="vpm-mail-templates__tab-desc">{{ $template['description'] }}</span>
            </button>
        @endforeach
    </div>

    <div class="vpm-mail-compose">
        <div class="vpm-mail-compose__toolbar">
            <div class="vpm-mail-compose__toolbar-group">
                <button type="button" class="vpm-mail-compose__icon-btn" disabled aria-label="Move to junk">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                        <rect width="20" height="5" x="2" y="3" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/><path d="m9.5 17 5-5"/><path d="m9.5 12 5 5"/>
                    </svg>
                </button>
                <button type="button" class="vpm-mail-compose__icon-btn" disabled aria-label="Move to trash">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                        <path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/>
                    </svg>
                </button>
            </div>

            <div class="vpm-mail-compose__toolbar-actions">
                <button
                    type="submit"
                    form="admin-mail-compose-form"
                    class="vpm-mail-compose__icon-btn"
                    data-vpm-mail-send
                    disabled
                    aria-label="Send"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                        <path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/>
                    </svg>
                </button>
            </div>
        </div>

        <div class="vpm-mail-compose__divider-line" role="separator"></div>

        <form
            id="admin-mail-compose-form"
            method="POST"
            action="{{ route('admin.mail.send') }}"
            class="vpm-mail-compose__form"
            data-vpm-mail-compose
            data-default-custodial-subject="{{ $custodialDefaults['default_subject'] ?? 'Custodial Fees Notice' }}"
        >
            @csrf
            <input type="hidden" name="template" value="{{ $selectedTemplate }}" data-vpm-mail-template-input>

            <div class="vpm-mail-compose__row">
                <label class="vpm-mail-compose__label" for="mail-client">Client:</label>
                <select id="mail-client" class="vpm-mail-compose__input vpm-mail-compose__select" data-vpm-mail-client>
                    <option value="">Select client (optional)</option>
                    @foreach ($clients as $client)
                        <option
                            value="{{ $client->email }}"
                            data-name="{{ $client->name }}"
                            @selected($prefillTo === $client->email)
                        >
                            {{ $client->name }} ({{ $client->email }})
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="vpm-mail-compose__row">
                <label class="vpm-mail-compose__label" for="mail-to">To:</label>
                <input
                    type="email"
                    id="mail-to"
                    name="to"
                    class="vpm-mail-compose__input"
                    value="{{ $prefillTo }}"
                    autocomplete="email"
                    maxlength="255"
                    required
                    data-vpm-mail-required
                    @error('to') aria-invalid="true" @enderror
                >
            </div>

            <div class="vpm-mail-compose__row">
                <label class="vpm-mail-compose__label" for="mail-subject">Subject:</label>
                <input
                    type="text"
                    id="mail-subject"
                    name="subject"
                    class="vpm-mail-compose__input"
                    value="{{ old('subject') }}"
                    maxlength="200"
                    required
                    data-vpm-mail-required
                    @error('subject') aria-invalid="true" @enderror
                >
            </div>

            <div class="vpm-mail-compose__panel{{ $selectedTemplate === 'custodial_fees' ? '' : ' is-hidden' }}" data-vpm-mail-panel="custodial_fees">
                <div class="vpm-mail-compose__panel-grid">
                    <label class="vpm-field">
                        <span class="vpm-field__label">Recipient name</span>
                        <input type="text" name="recipient_name" class="vpm-input" value="{{ $prefillName }}" maxlength="120" data-vpm-mail-custodial-field>
                    </label>
                    <label class="vpm-field">
                        <span class="vpm-field__label">Signatory name</span>
                        <input type="text" name="signatory_name" class="vpm-input" value="{{ old('signatory_name', 'Mark') }}" maxlength="80">
                    </label>
                    <label class="vpm-field vpm-field--full">
                        <span class="vpm-field__label">Wallet address</span>
                        <input type="text" name="wallet_address" class="vpm-input" value="{{ old('wallet_address') }}" maxlength="255" data-vpm-mail-custodial-field>
                    </label>
                    <label class="vpm-field">
                        <span class="vpm-field__label">Fee period</span>
                        <input type="text" name="fee_period" class="vpm-input" value="{{ old('fee_period', '1 Year') }}" maxlength="120" data-vpm-mail-custodial-field>
                    </label>
                    <label class="vpm-field">
                        <span class="vpm-field__label">Fee amount (USD)</span>
                        <input type="number" name="fee_amount" class="vpm-input" value="{{ old('fee_amount') }}" min="0" step="0.01" data-vpm-mail-custodial-field>
                    </label>
                </div>
                <p class="vpm-mail-compose__panel-note">Uses the formal custodial fees layout with logo, payment details, and signature block.</p>
            </div>

            <div class="vpm-mail-compose__body{{ $selectedTemplate === 'custom' ? '' : ' is-hidden' }}" data-vpm-mail-panel="custom">
                <label class="sr-only" for="mail-message">Message</label>
                <textarea
                    id="mail-message"
                    name="message"
                    class="vpm-mail-compose__textarea"
                    placeholder="Type your message here..."
                    maxlength="10000"
                    data-vpm-mail-custom-field
                    @if ($selectedTemplate === 'custom') required @endif
                    @error('message') aria-invalid="true" @enderror
                >{{ old('message') }}</textarea>
            </div>
        </form>
    </div>
</div>
@endsection