@extends('layouts.app')

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

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

@section('content')
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
    <div>
        <h1 class="font-display text-2xl font-semibold text-gray-900">Generated Letters</h1>
        <p class="text-sm text-gray-500 mt-1">All letters generated for your company</p>
    </div>
    <div class="flex gap-2">
        <a href="{{ route('letters.generate.select') }}" class="btn-primary">
            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            Generate Letter
        </a>
        <a href="{{ route('letters.templates.index') }}" class="btn-secondary">Templates</a>
    </div>
</div>

{{-- Filters --}}
<div class="card mb-5">
    <div class="card-body">
        <form action="{{ route('letters.history') }}" method="GET" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            <div>
                <label class="form-label">Employee</label>
                <select name="employee_id" class="form-select text-sm">
                    <option value="">All Employees</option>
                    @foreach($employees as $emp)
                    <option value="{{ $emp->id }}" {{ request('employee_id') == $emp->id ? 'selected' : '' }}>
                        {{ $emp->first_name }} {{ $emp->last_name }}
                    </option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="form-label">Category</label>
                <select name="category" class="form-select text-sm">
                    <option value="">All Categories</option>
                    @foreach($categories as $key => $label)
                    <option value="{{ $key }}" {{ request('category') === $key ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="form-label">From Date</label>
                <input type="date" name="date_from" class="form-input text-sm" value="{{ request('date_from') }}">
            </div>
            <div class="flex items-end gap-2">
                <div class="flex-1">
                    <label class="form-label">To Date</label>
                    <input type="date" name="date_to" class="form-input text-sm" value="{{ request('date_to') }}">
                </div>
                <button type="submit" class="btn-primary py-2.5">Filter</button>
            </div>
        </form>
    </div>
</div>

{{-- Letters Table --}}
@if($letters->isEmpty())
<div class="empty-state">
    <div class="empty-state-icon">
        <svg class="w-16 h-16 mx-auto" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><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>
    </div>
    <p class="empty-state-title">No letters generated yet</p>
    <p class="empty-state-text">Start by generating your first letter.</p>
    <a href="{{ route('letters.generate.select') }}" class="btn-primary">Generate Letter</a>
</div>
@else
<div class="card">
    <div class="overflow-x-auto">
        <table class="data-table">
            <thead>
                <tr>
                    <th>Employee</th>
                    <th>Template</th>
                    <th>Category</th>
                    <th>Generated By</th>
                    <th>Date</th>
                    <th class="text-right">Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach($letters as $letter)
                <tr>
                    <td>
                        <div class="flex items-center gap-2.5">
                            <div class="avatar avatar-sm bg-gradient-to-br from-primary-600 to-accent-500">
                                {{ strtoupper(substr($letter->employee?->first_name ?? '?', 0, 1)) }}
                            </div>
                            <div>
                                <p class="text-sm font-medium text-gray-800">{{ $letter->employee?->first_name }} {{ $letter->employee?->last_name }}</p>
                                <p class="text-xxs text-gray-400">{{ $letter->employee?->employee_code }}</p>
                            </div>
                        </div>
                    </td>
                    <td class="text-sm text-gray-700">{{ $letter->template?->name ?? 'Deleted Template' }}</td>
                    <td><span class="badge badge-info">{{ $letter->category_label }}</span></td>
                    <td class="text-sm text-gray-500">{{ $letter->generator?->name }}</td>
                    <td class="text-sm text-gray-500">{{ $letter->created_at->format('d M Y, H:i') }}</td>
                    <td class="text-right">
                        <a href="{{ route('letters.download', $letter->id) }}" class="btn-ghost">
                            <svg class="w-4 h-4 inline" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7,10 12,15 17,10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                            Download
                        </a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<div class="mt-6">
    {{ $letters->withQueryString()->links() }}
</div>
@endif
@endsection