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

@section('title', 'Submit Payment Proof')

@section('content')
<div class="max-w-2xl mx-auto" x-data="paymentProofForm()">

    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-900 flex items-center gap-2">
            <i class="fas fa-receipt text-indigo-600"></i> Submit Payment Proof
        </h1>
        <p class="text-gray-600 mt-1">Upload proof of your cash payment to complete enrollment or payment</p>
    </div>

    {{-- Validation Errors --}}
    @if($errors->any())
    <div class="bg-red-50 border border-red-200 rounded-xl p-4 mb-5">
        <div class="flex items-start gap-3">
            <i class="fas fa-exclamation-circle text-red-500 mt-0.5"></i>
            <div>
                <p class="text-sm font-semibold text-red-700 mb-1">Please fix the following errors:</p>
                <ul class="text-sm text-red-600 space-y-0.5 list-disc list-inside">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
    @endif

    {{-- Payment Details Card --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-5">
        <h2 class="text-base font-semibold text-gray-800 mb-4 flex items-center gap-2">
            <i class="fas fa-info-circle text-blue-500"></i> Payment Details
        </h2>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
            <div class="p-4 bg-indigo-50 border border-indigo-200 rounded-lg">
                <p class="text-xs font-semibold text-indigo-600 uppercase tracking-wide mb-1">Course</p>
                <p class="text-sm font-medium text-indigo-900">{{ $course->title }}</p>
            </div>

            <div class="p-4 bg-green-50 border border-green-200 rounded-lg">
                <p class="text-xs font-semibold text-green-600 uppercase tracking-wide mb-1">Amount Due</p>
                <p class="text-xl font-bold text-green-900">KES {{ number_format($amount, 2) }}</p>
            </div>

            <div class="p-4 bg-amber-50 border border-amber-200 rounded-lg">
                <p class="text-xs font-semibold text-amber-600 uppercase tracking-wide mb-1">Fee Type</p>
                <p class="text-sm font-medium text-amber-900">
                    @php
                        $feeTypeLabels = [
                            'enrollment' => 'Enrollment Fee',
                            'certificate' => 'Certificate Fee',
                            'book' => 'Course Book Fee',
                            'resit' => 'Exam Re-sit Fee',
                        ];
                    @endphp
                    {{ $feeTypeLabels[$feeType] ?? ucfirst(str_replace('_', ' ', $feeType)) }}
                </p>
            </div>
        </div>
    </div>

    {{-- Upload Form --}}
    <form action="{{ route('self-paced.learn.payment-proof.store', $course) }}"
          method="POST"
          enctype="multipart/form-data"
          class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        @csrf

        {{-- Hidden Fields --}}
        <input type="hidden" name="fee_type" value="{{ $feeType }}">
        <input type="hidden" name="amount" value="{{ $amount }}">

        <h2 class="text-base font-semibold text-gray-800 mb-5 flex items-center gap-2">
            <i class="fas fa-upload text-purple-600"></i> Upload Your Proof
        </h2>

        <div class="space-y-5">

            {{-- Proof Type Selector --}}
            <div>
                <label class="block text-xs font-semibold text-gray-600 mb-3">
                    <i class="fas fa-list text-gray-400 mr-1"></i> Payment Method <span class="text-red-500">*</span>
                </label>

                <div class="space-y-2">
                    @php
                        $proofTypes = [
                            'm_pesa' => ['M-Pesa Transfer', 'fa-mobile', 'Complete your M-Pesa payment and upload the confirmation message.'],
                            'bank' => ['Bank Transfer', 'fa-university', 'Provide your bank statement or transfer receipt showing the payment.'],
                            'receipt' => ['Physical Receipt', 'fa-receipt', 'Upload a photo of your receipt from the payment provider.'],
                        ];
                    @endphp

                    @foreach($proofTypes as $key => $info)
                    <label class="flex items-start gap-3 p-4 border-2 rounded-lg cursor-pointer transition"
                           :class="proofType === '{{ $key }}' ? 'border-indigo-500 bg-indigo-50' : 'border-gray-200 hover:bg-gray-50'">
                        <input type="radio"
                               name="proof_type"
                               value="{{ $key }}"
                               {{ old('proof_type') === $key ? 'checked' : '' }}
                               x-model="proofType"
                               class="w-4 h-4 accent-indigo-600 mt-1 flex-shrink-0">
                        <div class="flex-1">
                            <div class="flex items-center gap-2 mb-1">
                                <i class="fas {{ $info[1] }} text-indigo-600"></i>
                                <p class="text-sm font-semibold text-gray-700">{{ $info[0] }}</p>
                            </div>
                            <p class="text-xs text-gray-500">{{ $info[2] }}</p>
                        </div>
                    </label>
                    @endforeach
                </div>

                @error('proof_type')
                    <p class="text-red-500 text-xs mt-2">{{ $message }}</p>
                @enderror
            </div>

            {{-- File Upload --}}
            <div>
                <label class="block text-xs font-semibold text-gray-600 mb-2">
                    <i class="fas fa-file-image text-gray-400 mr-1"></i> Upload File <span class="text-red-500">*</span>
                </label>

                <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-indigo-400 hover:bg-indigo-50 transition cursor-pointer"
                     @dragover.prevent="isDragging = true"
                     @dragleave="isDragging = false"
                     @drop.prevent="
                        isDragging = false;
                        if($event.dataTransfer.files.length) {
                            $refs.fileInput.files = $event.dataTransfer.files;
                            updateFileName();
                        }
                     "
                     :class="isDragging && 'border-indigo-400 bg-indigo-50'"
                     onclick="$refs.fileInput.click()">

                    <input type="file"
                           name="proof_file"
                           accept="image/*,.pdf"
                           x-ref="fileInput"
                           @change="updateFileName()"
                           class="hidden"
                           required>

                    <div class="flex flex-col items-center gap-2">
                        <i class="fas fa-cloud-upload-alt text-4xl text-gray-300"></i>
                        <div>
                            <p class="text-sm font-semibold text-gray-700">Drag and drop your file here</p>
                            <p class="text-xs text-gray-500 mt-1">or click to select a file</p>
                        </div>
                    </div>

                    <p class="text-xs text-gray-400 mt-3">Supported formats: JPG, PNG, PDF (max 5 MB)</p>

                    <div x-show="fileName" class="mt-3 p-2 bg-green-50 border border-green-200 rounded text-sm text-green-800">
                        <i class="fas fa-check-circle mr-1"></i> <span x-text="fileName"></span>
                    </div>
                </div>

                @error('proof_file')
                    <p class="text-red-500 text-xs mt-2">{{ $message }}</p>
                @enderror
            </div>

        </div>

        {{-- Help Text --}}
        <div class="mt-6 p-4 bg-blue-50 border border-blue-100 rounded-lg flex items-start gap-3">
            <i class="fas fa-lightbulb text-blue-500 mt-0.5 flex-shrink-0"></i>
            <div class="text-xs text-blue-700">
                <p class="font-semibold mb-1">Tips for a successful submission:</p>
                <ul class="space-y-1 list-disc list-inside">
                    <li>Make sure your file is clear and readable</li>
                    <li>Include all relevant transaction details</li>
                    <li>Use JPG, PNG, or PDF format</li>
                    <li>Your submission will be reviewed within 24 hours</li>
                </ul>
            </div>
        </div>

        {{-- Action Buttons --}}
        <div class="flex gap-3 mt-6 pt-6 border-t border-gray-100">
            <a href="{{ route('self-paced.learn.overview', $course) }}"
               class="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-semibold rounded-lg transition">
                <i class="fas fa-times"></i> Cancel
            </a>
            <button type="submit"
                    class="inline-flex items-center gap-2 px-6 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-lg transition shadow flex-1">
                <i class="fas fa-upload text-xs"></i> Submit Payment Proof
            </button>
        </div>
    </form>

</div>

<script>
function paymentProofForm() {
    return {
        proofType: '{{ old('proof_type', 'm_pesa') }}',
        fileName: '{{ old('proof_file', '') ? 'File selected' : '' }}',
        isDragging: false,
        updateFileName() {
            const fileInput = this.$refs.fileInput;
            if (fileInput.files.length) {
                this.fileName = fileInput.files[0].name;
            } else {
                this.fileName = '';
            }
        }
    };
}
</script>
@endsection
