@extends('layouts.self-paced-dashboard')

@section('title', 'Review Payment Proof')
@section('page-title', 'Review Payment Proof')
@section('page-subtitle', 'Verify and approve cash payment receipt')

@section('hero-actions')
    <a href="{{ route('self-paced.dashboard.payment-proofs.index') }}"
       class="inline-flex items-center gap-2 px-4 py-2 bg-white/10 hover:bg-white/20 text-white text-sm font-medium rounded-lg transition border border-white/30">
        <i class="fas fa-arrow-left"></i> Back
    </a>
@endsection

@section('content')
<div class="max-w-5xl mx-auto">

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

        {{-- Main Content --}}
        <div class="lg:col-span-2 space-y-6">

            {{-- Learner & Course Info --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                <h2 class="text-base font-semibold text-gray-800 mb-5 flex items-center gap-2">
                    <i class="fas fa-user text-indigo-600"></i> Learner & Course Information
                </h2>

                <div class="grid grid-cols-2 gap-5">
                    <div>
                        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Learner Name</p>
                        <p class="text-sm font-medium text-gray-800">{{ $proof->enrollment->user->name ?? '—' }}</p>
                    </div>
                    <div>
                        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Email</p>
                        <p class="text-sm font-medium text-gray-800">{{ $proof->enrollment->user->email ?? '—' }}</p>
                    </div>
                    <div class="col-span-2">
                        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Course</p>
                        <p class="text-sm font-medium text-gray-800">{{ $proof->enrollment->course->title ?? '—' }}</p>
                    </div>
                </div>
            </div>

            {{-- Payment Details --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                <h2 class="text-base font-semibold text-gray-800 mb-5 flex items-center gap-2">
                    <i class="fas fa-money-bill text-green-600"></i> Payment Details
                </h2>

                <div class="grid grid-cols-2 gap-5">

                    @php
                        $feeTypeLabels = [
                            'enrollment' => 'Enrollment Fee',
                            'certificate' => 'Certificate Fee',
                            'book' => 'Course Book Fee',
                            'resit' => 'Exam Re-sit Fee',
                        ];
                    @endphp

                    <div>
                        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Fee Type</p>
                        <p class="text-sm font-medium text-gray-800">{{ $feeTypeLabels[$proof->fee_type] ?? ucfirst(str_replace('_', ' ', $proof->fee_type)) }}</p>
                    </div>

                    <div>
                        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Amount</p>
                        <p class="text-sm font-bold text-gray-800">KES {{ number_format($proof->amount, 2) }}</p>
                    </div>

                    @php
                        $proofTypeLabels = [
                            'm_pesa' => 'M-Pesa Transfer',
                            'bank' => 'Bank Transfer',
                            'receipt' => 'Physical Receipt',
                        ];
                    @endphp

                    <div>
                        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Proof Type</p>
                        <p class="text-sm font-medium text-gray-800">{{ $proofTypeLabels[$proof->proof_type] ?? ucfirst(str_replace('_', ' ', $proof->proof_type)) }}</p>
                    </div>

                    <div>
                        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Submitted</p>
                        <p class="text-sm font-medium text-gray-800">{{ $proof->created_at?->format('M d, Y H:i') ?? '—' }}</p>
                    </div>

                </div>
            </div>

            {{-- Proof File Preview --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                <h2 class="text-base font-semibold text-gray-800 mb-5 flex items-center gap-2">
                    <i class="fas fa-file text-purple-600"></i> Proof Document
                </h2>

                <div class="bg-gray-50 rounded-lg border border-gray-200 p-4 mb-4 overflow-hidden">
                    @if(in_array($proof->file_mime, ['image/jpeg', 'image/png', 'image/gif', 'image/webp']))
                        <img src="{{ Storage::url($proof->file_path) }}"
                             alt="Payment proof"
                             class="w-full rounded-lg max-h-96 object-contain">
                    @elseif($proof->file_mime === 'application/pdf')
                        <div class="flex flex-col items-center justify-center gap-3 p-12">
                            <i class="fas fa-file-pdf text-red-500 text-5xl"></i>
                            <div class="text-center">
                                <p class="font-semibold text-gray-700 text-sm">{{ $proof->file_name }}</p>
                                <p class="text-xs text-gray-500">{{ $proof->getFileSizeFormatted() ?? '—' }}</p>
                            </div>
                        </div>
                    @else
                        <div class="text-center py-8">
                            <i class="fas fa-file text-gray-400 text-4xl mb-3"></i>
                            <p class="text-gray-600 text-sm font-medium">{{ $proof->file_name }}</p>
                        </div>
                    @endif
                </div>

                <a href="{{ route('self-paced.dashboard.payment-proofs.file', $proof) }}"
                   download="{{ $proof->file_name }}"
                   class="inline-flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-lg transition">
                    <i class="fas fa-download text-xs"></i> Download File
                </a>
            </div>

        </div>

        {{-- Sidebar: Status & Actions --}}
        <div class="lg:col-span-1">

            {{-- Status Card --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 sticky top-6">
                <h2 class="text-base font-semibold text-gray-800 mb-4 flex items-center gap-2">
                    <i class="fas fa-flag text-indigo-600"></i> Status
                </h2>

                @if($proof->status === 'pending')
                <div class="flex items-center gap-3 p-4 bg-amber-50 border border-amber-200 rounded-lg mb-4">
                    <i class="fas fa-hourglass-half text-amber-500 text-lg flex-shrink-0"></i>
                    <div>
                        <p class="text-sm font-bold text-amber-900">Awaiting Review</p>
                        <p class="text-xs text-amber-700 mt-0.5">Make a decision below</p>
                    </div>
                </div>
                @elseif($proof->status === 'approved')
                <div class="flex items-center gap-3 p-4 bg-green-50 border border-green-200 rounded-lg mb-4">
                    <i class="fas fa-check-circle text-green-500 text-lg flex-shrink-0"></i>
                    <div>
                        <p class="text-sm font-bold text-green-900">Approved</p>
                        <p class="text-xs text-green-700 mt-0.5">{{ $proof->reviewed_at?->format('M d, Y H:i') ?? '—' }}</p>
                    </div>
                </div>
                @else
                <div class="flex items-center gap-3 p-4 bg-red-50 border border-red-200 rounded-lg mb-4">
                    <i class="fas fa-times-circle text-red-500 text-lg flex-shrink-0"></i>
                    <div>
                        <p class="text-sm font-bold text-red-900">Rejected</p>
                        <p class="text-xs text-red-700 mt-0.5">{{ $proof->reviewed_at?->format('M d, Y H:i') ?? '—' }}</p>
                    </div>
                </div>
                @if($proof->rejection_reason)
                <div class="bg-red-50 border border-red-200 p-3 rounded-lg">
                    <p class="text-xs font-semibold text-red-800 mb-1">Rejection Reason:</p>
                    <p class="text-xs text-red-700">{{ $proof->rejection_reason }}</p>
                </div>
                @endif
                @endif

                {{-- Action Buttons --}}
                @if($proof->status === 'pending')
                <div class="space-y-2 mt-5 border-t border-gray-100 pt-5">
                    <form method="POST" action="{{ route('self-paced.dashboard.payment-proofs.approve', $proof) }}">
                        @csrf
                        <button type="submit"
                                onclick="if(!confirm('Approve this payment proof? The learner\\'s account will be credited immediately.')) return false;"
                                class="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-green-600 hover:bg-green-700 text-white font-semibold text-sm rounded-lg transition">
                            <i class="fas fa-check text-xs"></i> Approve Payment
                        </button>
                    </form>

                    <button type="button"
                            @click="rejectModal = true"
                            class="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-red-600 hover:bg-red-700 text-white font-semibold text-sm rounded-lg transition">
                        <i class="fas fa-times text-xs"></i> Reject Payment
                    </button>
                </div>
                @endif

            </div>

        </div>

    </div>

    {{-- Reject Modal --}}
    <div x-data="{ rejectModal: false }"
         @click.away="rejectModal = false"
         class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4"
         :class="!rejectModal && 'hidden'">
        <div class="bg-white rounded-xl shadow-xl max-w-md w-full p-6" @click.stop>
            <h3 class="text-base font-semibold text-gray-800 mb-4 flex items-center gap-2">
                <i class="fas fa-exclamation-circle text-red-500"></i> Reject Payment Proof
            </h3>

            <form method="POST"
                  action="{{ route('self-paced.dashboard.payment-proofs.reject', $proof) }}">
                @csrf

                <div class="mb-4">
                    <label class="block text-xs font-semibold text-gray-600 mb-2">
                        Rejection Reason <span class="text-red-500">*</span>
                    </label>
                    <textarea name="rejection_reason"
                              placeholder="Explain why you're rejecting this proof..."
                              required
                              rows="4"
                              class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-red-300 focus:border-red-400 transition resize-none"></textarea>
                    <p class="text-gray-400 text-xs mt-1">The learner will see this message.</p>
                </div>

                <div class="flex gap-3">
                    <button type="button"
                            @click="rejectModal = false"
                            class="flex-1 px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold text-sm rounded-lg transition">
                        Cancel
                    </button>
                    <button type="submit"
                            class="flex-1 px-4 py-2.5 bg-red-600 hover:bg-red-700 text-white font-semibold text-sm rounded-lg transition flex items-center justify-center gap-2">
                        <i class="fas fa-times text-xs"></i> Reject
                    </button>
                </div>
            </form>
        </div>
    </div>

</div>
@endsection
