@extends('layouts.admin')
@section('title', 'Review Submission')
@section('content')

{{-- Back --}}
<a href="{{ route('admin.submissions.index') }}"
   class="inline-flex items-center gap-1.5 text-sm text-slate-500 hover:text-slate-700 mb-6 transition-colors">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
    </svg>
    Back to Submissions
</a>

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

    {{-- Left: details --}}
    <div class="xl:col-span-2 space-y-5">

        {{-- Title card --}}
        <div class="bg-white rounded-xl border border-slate-200 p-6">
            <div class="flex items-start justify-between gap-4 mb-4">
                <h1 class="text-xl font-bold text-slate-800">{{ $submission->title }}</h1>
                @if($submission->status === 'pending')
                    <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-semibold bg-amber-100 text-amber-700 flex-shrink-0">
                        <span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span> Pending Review
                    </span>
                @elseif($submission->status === 'verified')
                    <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-700 flex-shrink-0">
                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span> Verified
                    </span>
                @else
                    <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-700 flex-shrink-0">
                        <span class="w-1.5 h-1.5 rounded-full bg-red-500"></span> Rejected
                    </span>
                @endif
            </div>

            <dl class="grid grid-cols-2 gap-4 text-sm">
                <div>
                    <dt class="text-slate-500 font-medium mb-0.5">Division</dt>
                    <dd class="text-slate-800">{{ $submission->division->name }}</dd>
                </div>
                <div>
                    <dt class="text-slate-500 font-medium mb-0.5">Submitted By</dt>
                    <dd class="text-slate-800">{{ $submission->submitter->name }}</dd>
                </div>
                <div>
                    <dt class="text-slate-500 font-medium mb-0.5">Report Type</dt>
                    <dd class="text-slate-800">{{ $submission->type->name ?? 'General / Ad-hoc' }}</dd>
                </div>
                <div>
                    <dt class="text-slate-500 font-medium mb-0.5">Period</dt>
                    <dd class="text-slate-800">{{ $submission->period ?? '—' }}</dd>
                </div>
                <div>
                    <dt class="text-slate-500 font-medium mb-0.5">Submitted At</dt>
                    <dd class="text-slate-800">{{ $submission->submitted_at?->format('M d, Y h:i A') ?? '—' }}</dd>
                </div>
                <div>
                    <dt class="text-slate-500 font-medium mb-0.5">File Size</dt>
                    <dd class="text-slate-800">{{ $submission->file_size ? number_format($submission->file_size / 1024, 1) . ' KB' : '—' }}</dd>
                </div>
            </dl>

            {{-- School info --}}
            @if($submission->district || $submission->school_name || $submission->school_id || $submission->school_head_name)
            <div class="mt-4 pt-4 border-t border-slate-100">
                <p class="text-slate-500 font-semibold text-sm mb-3">School Information</p>
                <dl class="grid grid-cols-2 gap-3 text-sm">
                    @if($submission->district)
                    <div>
                        <dt class="text-slate-500 font-medium mb-0.5">District</dt>
                        <dd class="text-slate-800">{{ $submission->district }}</dd>
                    </div>
                    @endif
                    @if($submission->school_id)
                    <div>
                        <dt class="text-slate-500 font-medium mb-0.5">School ID</dt>
                        <dd class="text-slate-800 font-mono">{{ $submission->school_id }}</dd>
                    </div>
                    @endif
                    @if($submission->school_name)
                    <div class="col-span-2">
                        <dt class="text-slate-500 font-medium mb-0.5">Name of School</dt>
                        <dd class="text-slate-800">{{ $submission->school_name }}</dd>
                    </div>
                    @endif
                    @if($submission->school_head_name)
                    <div class="col-span-2">
                        <dt class="text-slate-500 font-medium mb-0.5">School Head / Principal</dt>
                        <dd class="text-slate-800">{{ $submission->school_head_name }}</dd>
                    </div>
                    @endif
                    @if($submission->school_head_contact)
                    <div>
                        <dt class="text-slate-500 font-medium mb-0.5">Contact Number</dt>
                        <dd class="text-slate-800">{{ $submission->school_head_contact }}</dd>
                    </div>
                    @endif
                    @if($submission->school_head_email)
                    <div>
                        <dt class="text-slate-500 font-medium mb-0.5">Email Address</dt>
                        <dd class="text-slate-800">{{ $submission->school_head_email }}</dd>
                    </div>
                    @endif
                </dl>
            </div>
            @endif

            @if($submission->description)
                <div class="mt-4 pt-4 border-t border-slate-100">
                    <p class="text-slate-500 font-medium text-sm mb-1">Description</p>
                    <p class="text-slate-700 text-sm">{{ $submission->description }}</p>
                </div>
            @endif

            {{-- File download --}}
            <div class="mt-4 pt-4 border-t border-slate-100">
                <p class="text-slate-500 font-medium text-sm mb-2">Attached File</p>
                <a href="{{ $submission->fileUrl() }}" target="_blank"
                   class="inline-flex items-center gap-2 bg-blue-50 hover:bg-blue-100 border border-blue-200 text-blue-700 text-sm font-medium px-4 py-2.5 rounded-lg transition-colors">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                    </svg>
                    {{ $submission->original_filename }}
                </a>
            </div>
        </div>

        {{-- Previous remarks --}}
        @if($submission->admin_remarks)
            <div class="bg-slate-50 rounded-xl border border-slate-200 p-5">
                <p class="text-sm font-semibold text-slate-700 mb-2">Admin Remarks</p>
                <p class="text-slate-600 text-sm">{{ $submission->admin_remarks }}</p>
                @if($submission->verified_at)
                    <p class="text-xs text-slate-400 mt-2">{{ $submission->verified_at->format('M d, Y h:i A') }}</p>
                @endif
            </div>
        @endif
    </div>

    {{-- Right: actions --}}
    @if($submission->status === 'pending')
    <div class="space-y-4">
        {{-- Verify --}}
        <div class="bg-white rounded-xl border border-slate-200 p-5">
            <h3 class="font-semibold text-slate-800 mb-1">Approve Submission</h3>
            <p class="text-sm text-slate-500 mb-4">Mark this submission as verified and notify the division.</p>
            <form method="POST" action="{{ route('admin.submissions.verify', $submission) }}">
                @csrf
                <textarea name="admin_remarks" rows="3" placeholder="Remarks (optional)…"
                          class="w-full border border-slate-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 mb-3 resize-none"></textarea>
                <button type="submit"
                        class="w-full bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-semibold py-2.5 rounded-lg transition-colors flex items-center justify-center gap-2">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                    Verify Submission
                </button>
            </form>
        </div>

        {{-- Reject --}}
        <div class="bg-white rounded-xl border border-slate-200 p-5">
            <h3 class="font-semibold text-slate-800 mb-1">Reject Submission</h3>
            <p class="text-sm text-slate-500 mb-4">Provide a reason so the division can re-submit correctly.</p>
            <form method="POST" action="{{ route('admin.submissions.reject', $submission) }}">
                @csrf
                <textarea name="admin_remarks" rows="3" required placeholder="Reason for rejection (required)…"
                          class="w-full border border-slate-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-red-400 mb-3 resize-none"></textarea>
                <button type="submit"
                        class="w-full bg-red-600 hover:bg-red-700 text-white text-sm font-semibold py-2.5 rounded-lg transition-colors flex items-center justify-center gap-2">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                    Reject Submission
                </button>
            </form>
        </div>
    </div>
    @else
    <div class="bg-white rounded-xl border border-slate-200 p-5 text-center text-slate-400 text-sm">
        This submission has already been <strong class="text-slate-600">{{ $submission->status }}</strong>.
    </div>
    @endif
</div>
@endsection