@extends('layouts.school')

@section('title', 'Result Signatures')
@section('header', 'Result Signatures')

@section('content')
    <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6 mb-6">
        <div class="flex flex-wrap items-center justify-between gap-3 mb-4">
            <div>
                <h3 class="font-display font-semibold text-gray-900">Add Official Signature</h3>
                <p class="text-sm text-gray-500">Signatures appear on report cards when enabled in Result Settings.</p>
            </div>
            <a href="{{ route('school.results.settings', request()->route('schoolId')) }}" class="text-sm font-medium text-primary-600 hover:text-primary-700">&larr; Display Settings</a>
        </div>
        <form method="POST" action="{{ route('school.results.signatures.store', request()->route('schoolId')) }}" enctype="multipart/form-data" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-5 sm:items-end">
            @csrf
            <div>
                <label class="block text-sm font-medium text-gray-700">Title / Position *</label>
                <input type="text" name="title" required placeholder="e.g. Principal, Headmaster, Proprietor"
                       class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Official Name</label>
                <input type="text" name="name" placeholder="e.g. Dr. A. K. Okon"
                       class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Signature Image</label>
                <input type="file" name="signature" accept=".png,.jpg,.jpeg,.webp"
                       class="mt-1 block w-full text-sm text-gray-500 file:mr-3 file:rounded-lg file:border-0 file:bg-primary-50 file:px-3 file:py-2 file:text-sm file:font-medium file:text-primary-700 hover:file:bg-primary-100">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Sort Order</label>
                <input type="number" name="sort_order" value="0" min="0" max="999"
                       class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
            </div>
            <div class="flex items-center gap-4">
                <label class="flex items-center gap-2 text-sm text-gray-700">
                    <input type="checkbox" name="show_on_report" value="1" checked class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                    Show
                </label>
                <button type="submit" class="rounded-lg bg-primary-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">Add</button>
            </div>
        </form>
    </div>

    <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 overflow-hidden">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Signature</th>
                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Title</th>
                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Name</th>
                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Order</th>
                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Status</th>
                    <th class="px-6 py-3"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @forelse($signatures as $signature)
                    <tr class="hover:bg-gray-50 align-middle">
                        <td class="px-6 py-4">
                            @if($signature->signature)
                                <img src="{{ asset('storage/' . $signature->signature) }}" alt="Signature" class="h-12 object-contain">
                            @else
                                <span class="text-xs italic text-gray-400 italic">No image — name only</span>
                            @endif
                        </td>
                        <td colspan="4" class="px-0 py-0">
                            <form method="POST" action="{{ route('school.results.signatures.update', [request()->route('schoolId'), $signature->id]) }}" enctype="multipart/form-data"
                                  class="grid gap-3 px-6 py-4 sm:grid-cols-5 sm:items-center">
                                @csrf
                                @method('PATCH')
                                <input type="text" name="title" value="{{ $signature->title }}" required class="block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                                <input type="text" name="name" value="{{ $signature->name }}" placeholder="Official name" class="block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                                <input type="file" name="signature" accept=".png,.jpg,.jpeg,.webp" class="block w-full text-xs text-gray-500 file:mr-2 file:rounded-lg file:border-0 file:bg-gray-100 file:px-2 file:py-1.5 file:text-xs file:font-medium hover:file:bg-gray-200">
                                <input type="number" name="sort_order" value="{{ $signature->sort_order }}" min="0" max="999" class="block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                                <div class="flex items-center gap-3">
                                    <label class="flex items-center gap-1.5 text-xs text-gray-600 whitespace-nowrap">
                                        <input type="checkbox" name="show_on_report" value="1" {{ $signature->show_on_report ? 'checked' : '' }} class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                                        Show
                                    </label>
                                    <button type="submit" class="rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-50">Save</button>
                                </div>
                            </form>
                        </td>
                        <td class="px-6 py-4 text-right whitespace-nowrap">
                            <span class="mr-3 inline-block rounded-full px-2 py-0.5 text-xs font-medium {{ $signature->show_on_report ? 'bg-green-50 text-green-700' : 'bg-gray-100 text-gray-500' }}">
                                {{ $signature->show_on_report ? 'Visible' : 'Hidden' }}
                            </span>
                            <form method="POST" action="{{ route('school.results.signatures.toggle', [request()->route('schoolId'), $signature->id]) }}" class="inline mr-1">
                                @csrf
                                @method('PATCH')
                                <button type="submit" class="text-xs font-medium text-yellow-600 hover:text-yellow-700">{{ $signature->show_on_report ? 'Hide' : 'Show' }}</button>
                            </form>
                            <form method="POST" action="{{ route('school.results.signatures.destroy', [request()->route('schoolId'), $signature->id]) }}" class="inline" onsubmit="return confirm('Delete this signature?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="text-xs font-medium text-red-600 hover:text-red-700">Delete</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="px-6 py-12 text-center text-sm text-gray-500">No signatures yet. Add one above (e.g. Principal).</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
@endsection