@extends('layouts.app')

@section('title', 'Generate Letter')

@section('breadcrumbs')
<div class="breadcrumb">
    <a href="{{ route('dashboard') }}">Home</a>
    <span class="separator">/</span>
    <a href="{{ route('letters.history') }}">Letters</a>
    <span class="separator">/</span>
    <span class="current">Generate Letter</span>
</div>
@endsection

@section('content')
<div class="mb-6">
    <h1 class="font-display text-2xl font-semibold text-gray-900">Generate Letter</h1>
    <p class="text-sm text-gray-500 mt-1">Select an employee and template to generate a letter</p>
</div>

<div class="card max-w-2xl" x-data="letterSelector()">
    <div class="card-body space-y-5">
        <form action="{{ route('letters.generate.preview') }}" method="POST">
            @csrf

            {{-- Employee Selection --}}
            <div class="mb-5">
                <label class="form-label">Select Employee <span class="text-danger-500">*</span></label>
                <select name="employee_id" class="form-select" required x-model="employeeId">
                    <option value="">Choose an employee...</option>
                    @foreach($employees as $emp)
                    <option value="{{ $emp->id }}">{{ $emp->first_name }} {{ $emp->last_name }} ({{ $emp->employee_code }})</option>
                    @endforeach
                </select>
                @error('employee_id') <p class="form-error">{{ $message }}</p> @enderror
            </div>

            {{-- Template Selection --}}
            <div class="mb-5">
                <label class="form-label">Select Template <span class="text-danger-500">*</span></label>
                <select name="template_id" class="form-select" required x-model="templateId">
                    <option value="">Choose a template...</option>
                    @foreach($categories as $catKey => $catLabel)
                        @php $catTemplates = $templates->where('category', $catKey); @endphp
                        @if($catTemplates->isNotEmpty())
                        <optgroup label="{{ $catLabel }}">
                            @foreach($catTemplates as $tmpl)
                            <option value="{{ $tmpl->id }}">{{ $tmpl->name }}</option>
                            @endforeach
                        </optgroup>
                        @endif
                    @endforeach
                </select>
                @error('template_id') <p class="form-error">{{ $message }}</p> @enderror
            </div>

            {{-- Actions --}}
            <div class="flex items-center gap-3 pt-4 border-t border-gray-100">
                <button type="submit" class="btn-primary" :disabled="!employeeId || !templateId">
                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                    Preview Letter
                </button>
                <a href="{{ route('letters.history') }}" class="btn-secondary">Cancel</a>
            </div>
        </form>
    </div>
</div>

{{-- Quick Links --}}
<div class="mt-6 flex flex-wrap gap-3">
    <a href="{{ route('letters.bulk') }}" class="btn-secondary">
        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
        Bulk Generate
    </a>
    <a href="{{ route('letters.templates.index') }}" class="btn-secondary">
        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14,2 14,8 20,8"/></svg>
        Manage Templates
    </a>
</div>

<script>
function letterSelector() {
    return { employeeId: '', templateId: '' };
}
</script>
@endsection