@extends('layouts.app')

@section('title', 'Bulk Generate Letters')

@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">Bulk Generate</span>
</div>
@endsection

@section('content')
<div class="mb-6">
    <h1 class="font-display text-2xl font-semibold text-gray-900">Bulk Generate Letters</h1>
    <p class="text-sm text-gray-500 mt-1">Generate the same letter template for multiple employees at once</p>
</div>

<form action="{{ route('letters.bulk.process') }}" method="POST" x-data="bulkGenerator()">
    @csrf

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {{-- Left: Employee Selection --}}
        <div class="lg:col-span-2">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-header-title">Select Employees</h3>
                    <div class="flex items-center gap-3">
                        <span class="text-xs text-gray-500" x-text="selectedCount + ' selected'"></span>
                        <button type="button" @click="toggleAll()" class="btn-ghost text-xs">
                            <span x-text="allSelected ? 'Deselect All' : 'Select All'"></span>
                        </button>
                    </div>
                </div>
                <div class="card-body p-0">
                    {{-- Search --}}
                    <div class="px-4 py-3 border-b border-gray-100">
                        <input type="text" x-model="search" placeholder="Search employees..."
                               class="form-input text-sm py-2">
                    </div>

                    {{-- Employee List --}}
                    <div class="max-h-[500px] overflow-y-auto">
                        @foreach($employees as $emp)
                        <label class="flex items-center gap-3 px-4 py-3 hover:bg-gray-50 cursor-pointer border-b border-gray-50"
                               x-show="'{{ strtolower($emp->first_name . ' ' . $emp->last_name . ' ' . $emp->employee_code) }}'.includes(search.toLowerCase())">
                            <input type="checkbox" name="employee_ids[]" value="{{ $emp->id }}"
                                   x-model="selected"
                                   class="w-4 h-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600">
                            <div class="flex-1 min-w-0">
                                <p class="text-sm font-medium text-gray-800">{{ $emp->first_name }} {{ $emp->last_name }}</p>
                                <p class="text-xs text-gray-500">{{ $emp->employee_code }} · {{ $emp->department?->name ?? 'No Dept' }} · {{ $emp->designation?->name ?? '' }}</p>
                            </div>
                        </label>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        {{-- Right: Template Selection + Submit --}}
        <div>
            <div class="card sticky top-5">
                <div class="card-header">
                    <h3 class="card-header-title">Template</h3>
                </div>
                <div class="card-body space-y-4">
                    <div>
                        <label class="form-label">Select Template <span class="text-danger-500">*</span></label>
                        <select name="template_id" class="form-select" required>
                            <option value="">Choose 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>

                    <div class="bg-primary-50 rounded-lg p-4">
                        <p class="text-sm font-medium text-primary-700" x-text="selectedCount + ' employee(s) selected'"></p>
                        <p class="text-xs text-primary-600 mt-1">Letters will be generated individually for each employee with their own data.</p>
                    </div>

                    <div class="bg-warning-50 rounded-lg p-3">
                        <p class="text-xs text-warning-700">
                            <strong>Note:</strong> Custom variables in the template will be left blank during bulk generation. Use individual generation for templates with custom fields.
                        </p>
                    </div>

                    <button type="submit" class="btn-primary w-full" :disabled="selectedCount === 0"
                            onclick="return confirm('Generate letters for all selected employees?')">
                        <svg class="w-4 h-4" 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>
                        Generate All
                    </button>
                </div>
            </div>
        </div>
    </div>
</form>

<script>
function bulkGenerator() {
    const allIds = @json($employees->pluck('id')->map(fn($id) => (string)$id));
    return {
        search: '',
        selected: [],
        get selectedCount() { return this.selected.length; },
        get allSelected() { return this.selected.length === allIds.length; },
        toggleAll() {
            this.selected = this.allSelected ? [] : [...allIds];
        }
    };
}
</script>
@endsection