@extends('layouts.admin')
@section('title', 'Report Types')
@section('content')

<div class="mb-6">
    <h1 class="text-2xl font-bold text-slate-800">Report Types</h1>
    <p class="text-slate-500 text-sm mt-1">Define submission categories and their schedules</p>
</div>

<div class="grid grid-cols-1 xl:grid-cols-3 gap-6">

    {{-- Add type form --}}
    <div class="bg-white rounded-xl border border-slate-200 p-6">
        <h2 class="font-semibold text-slate-800 mb-4 pb-2 border-b border-slate-100">Add New Type</h2>
        <form method="POST" action="{{ route('admin.submission-types.store') }}" class="space-y-4">
            @csrf
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Name <span class="text-red-500">*</span></label>
                <input type="text" name="name" required
                       class="w-full border border-slate-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Frequency</label>
                <select name="frequency" class="w-full border border-slate-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="once">One-time / Ad-hoc</option>
                    <option value="monthly">Monthly</option>
                    <option value="quarterly">Quarterly</option>
                    <option value="annual">Annual</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Description</label>
                <textarea name="description" rows="3"
                          class="w-full border border-slate-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"></textarea>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Deadline Day <span class="text-xs text-slate-400">(day of month/period)</span></label>
                <input type="number" name="deadline_day" min="1" max="31"
                       class="w-full border border-slate-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <label class="flex items-center gap-2 cursor-pointer">
                <input type="checkbox" name="is_recurring" value="1"
                       class="rounded border-slate-300 text-blue-600 focus:ring-blue-500">
                <span class="text-sm text-slate-700">Recurring submission</span>
            </label>
            <button type="submit"
                    class="w-full bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold py-2.5 rounded-lg transition-colors">
                Add Type
            </button>
        </form>
    </div>

    {{-- Types table --}}
    <div class="xl:col-span-2 bg-white rounded-xl border border-slate-200 overflow-hidden">
        <div class="px-6 py-4 border-b border-slate-100">
            <h2 class="font-semibold text-slate-800">Existing Types</h2>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="bg-slate-50 text-slate-500 text-xs uppercase tracking-wide">
                        <th class="px-6 py-3 text-left font-semibold">Name</th>
                        <th class="px-6 py-3 text-left font-semibold">Frequency</th>
                        <th class="px-6 py-3 text-left font-semibold">Deadline</th>
                        <th class="px-6 py-3 text-left font-semibold">Status</th>
                        <th class="px-6 py-3 text-left font-semibold"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                @forelse($types as $t)
                    <tr class="hover:bg-slate-50 transition-colors">
                        <td class="px-6 py-4">
                            <p class="font-medium text-slate-800">{{ $t->name }}</p>
                            @if($t->description)
                                <p class="text-xs text-slate-400 mt-0.5 truncate max-w-xs">{{ $t->description }}</p>
                            @endif
                        </td>
                        <td class="px-6 py-4 text-slate-600">{{ ucfirst($t->frequency) }}</td>
                        <td class="px-6 py-4 text-slate-500">{{ $t->deadline_day ? 'Day '.$t->deadline_day : '—' }}</td>
                        <td class="px-6 py-4">
                            @if($t->is_active)
                                <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-700">
                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span> Active
                                </span>
                            @else
                                <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold bg-slate-100 text-slate-500">
                                    <span class="w-1.5 h-1.5 rounded-full bg-slate-400"></span> Disabled
                                </span>
                            @endif
                        </td>
                        <td class="px-6 py-4">
                            <form method="POST" action="{{ route('admin.submission-types.toggle', $t) }}">
                                @csrf
                                <button type="submit"
                                        class="text-xs font-medium {{ $t->is_active ? 'text-red-600 hover:text-red-700' : 'text-emerald-600 hover:text-emerald-700' }} transition-colors">
                                    {{ $t->is_active ? 'Disable' : 'Enable' }}
                                </button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="px-6 py-12 text-center text-slate-400">No report types yet.</td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection