@extends('layouts.admin', [
    'title' => 'Email',
    'header' => 'Email'
])

@section('admin_content')
<div class="container-fluid">
    <div class="card email-test-shell border-0 shadow-sm">
        <div class="card-header bg-white border-0 email-test-shell__header">
            <div>
                <span class="email-test-shell__eyebrow">Utilitas Sistem</span>
                <h3 class="mb-1">Email</h3>
                <p class="text-muted mb-0">Kirim email langsung dari panel admin memakai konfigurasi SMTP yang sedang aktif.</p>
            </div>
        </div>

        <div class="card-body email-test-shell__body">
            <div class="row">
                <div class="col-lg-4 mb-4 mb-lg-0">
                    <div class="email-test-config">
                        <div class="email-test-config__card">
                            <span class="email-test-config__label">Mailer</span>
                            <strong>{{ $mailSummary['mailer'] ?: '-' }}</strong>
                        </div>
                        <div class="email-test-config__card">
                            <span class="email-test-config__label">Host SMTP</span>
                            <strong>{{ $mailSummary['host'] ?: '-' }}</strong>
                        </div>
                        <div class="email-test-config__card">
                            <span class="email-test-config__label">Port</span>
                            <strong>{{ $mailSummary['port'] ?: '-' }}</strong>
                        </div>
                        <div class="email-test-config__card">
                            <span class="email-test-config__label">Skema</span>
                            <strong>{{ $mailSummary['scheme'] ?: '-' }}</strong>
                        </div>
                        <div class="email-test-config__card">
                            <span class="email-test-config__label">Alamat Pengirim</span>
                            <strong>{{ $mailSummary['from'] ?: '-' }}</strong>
                        </div>
                    </div>

                    <div class="email-test-note">
                        <div class="email-test-note__icon">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                        <div>
                            <strong>Pengiriman SILONTAR</strong>
                            <p class="mb-0">Form ini akan mengirim email memakai setting mail yang aktif di SILONTAR.</p>
                        </div>
                    </div>
                </div>

                <div class="col-lg-8">
                    <form action="{{ route('admin.email-test.send') }}" method="POST" class="email-test-form">
                        @csrf

                        <div class="form-group">
                            <label for="recipient">Email Tujuan</label>
                            <input
                                type="email"
                                id="recipient"
                                name="recipient"
                                class="form-control @error('recipient') is-invalid @enderror"
                                value="{{ $defaultRecipient }}"
                                placeholder="contoh@domain.com"
                                required
                            >
                            @error('recipient')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="subject">Subjek</label>
                            <input
                                type="text"
                                id="subject"
                                name="subject"
                                class="form-control @error('subject') is-invalid @enderror"
                                value="{{ $defaultSubject }}"
                                maxlength="150"
                                required
                            >
                            @error('subject')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group mb-4">
                            <label for="message">Isi Pesan</label>
                            <textarea
                                id="message"
                                name="message"
                                class="form-control @error('message') is-invalid @enderror"
                                rows="9"
                                maxlength="5000"
                                required
                            >{{ $defaultMessage }}</textarea>
                            @error('message')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="email-test-form__actions">
                            <button type="submit" class="btn btn-primary rounded-pill px-4">
                                <i class="fas fa-paper-plane mr-2"></i>Kirim Email
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .email-test-shell {
        border-radius: 24px;
        overflow: hidden;
    }
    .email-test-shell__header {
        padding: 2rem;
        background: radial-gradient(circle at top right, rgba(17, 138, 178, 0.12), transparent 32%), linear-gradient(180deg, #fbfcfe 0%, #f4f8fc 100%);
    }
    .email-test-shell__eyebrow {
        display: inline-block;
        margin-bottom: .55rem;
        font-size: .74rem;
        letter-spacing: .14em;
        text-transform: uppercase;
        font-weight: 700;
        color: #118ab2;
    }
    .email-test-shell__body {
        padding: 1.85rem 2rem 2rem;
        background: #f7f9fc;
    }
    .email-test-config {
        display: grid;
        gap: .9rem;
    }
    .email-test-config__card {
        padding: 1rem 1.1rem;
        border-radius: 18px;
        background: linear-gradient(180deg, #f8fbff 0%, #f2f8fc 100%);
        border: 1px solid #dbe7f1;
    }
    .email-test-config__label {
        display: block;
        margin-bottom: .35rem;
        color: #6c7a89;
        font-size: .8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
    }
    .email-test-config__card strong {
        display: block;
        color: #1f2d3d;
        font-size: 1rem;
        word-break: break-word;
    }
    .email-test-note {
        display: flex;
        gap: .85rem;
        align-items: flex-start;
        margin-top: 1rem;
        padding: 1rem 1.1rem;
        border-radius: 18px;
        background: rgba(15, 159, 122, 0.08);
        border: 1px solid rgba(15, 159, 122, 0.16);
    }
    .email-test-note__icon {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(15, 159, 122, 0.12);
        color: #0f9f7a;
        flex-shrink: 0;
    }
    .email-test-form {
        padding: 1.3rem;
        border-radius: 20px;
        background: #fff;
        border: 1px solid #e2edf4;
    }
    .email-test-form label {
        font-weight: 700;
        color: #243444;
    }
    .email-test-form__actions {
        display: flex;
        justify-content: flex-end;
    }
    @media (max-width: 767.98px) {
        .email-test-shell__body {
            padding: 1.2rem;
        }
        .email-test-form {
            padding: 1rem;
        }
        .email-test-form__actions {
            justify-content: stretch;
        }
        .email-test-form__actions .btn {
            width: 100%;
        }
    }
</style>
@endsection