<x-layouts::app :title="__('Edit Payment')">
    <div class="max-w-4xl mx-auto">
        <div class="mb-4">
            <a href="{{ route('home') }}" onclick="event.preventDefault(); history.back();" class="inline-flex items-center rounded-xl border border-slate-200 bg-slate-100 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-200">
                <i class="fas fa-arrow-left mr-2"></i> {{ __('Back') }}
            </a>
        </div>

        <flux:card>
            <flux:heading size="lg">{{ __('Edit Payment') }}</flux:heading>
            <form enctype="multipart/form-data" action="{{ route('uploads.update', $uploads->id) }}" method="POST" class="mt-6 space-y-6">
                @csrf
                @method('PUT')

                <div class="grid gap-6 lg:grid-cols-2">
                    <div class="space-y-2">
                        <label for="paydate" class="block text-sm font-semibold text-slate-700">{{ __('Payment Date') }}</label>
                        <input value="{{ $uploads->paydate }}" type="date" id="paydate" name="paydate" required class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 focus:border-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-100" />
                    </div>

                    @if(Qs::userIsNotStudent())
                        <div class="space-y-2">
                            <label for="regnum" class="block text-sm font-semibold text-slate-700">{{ __('Registration No.') }}</label>
                            <input value="{{ $uploads->regnum }}" id="regnum" name="regnum" type="text" required class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 focus:border-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-100" />
                        </div>
                    @endif
                </div>

                <div class="grid gap-6 lg:grid-cols-2">
                    <div class="space-y-2">
                        <label for="bankfrom" class="block text-sm font-semibold text-slate-700">{{ __('Bank From') }}</label>
                        <select id="bankfrom" name="bankfrom" required class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 focus:border-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-100">
                            <option value="">{{ __('Select a bank...') }}</option>
                            @if($banks)
                                @foreach($banks as $b)
                                    <option value="{{ $b->id }}" {{ ($b->id == $uploads->bankfrom) ? 'selected' : '' }}>{{ $b->bank }}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>

                    <div class="space-y-2">
                        <label for="bankto" class="block text-sm font-semibold text-slate-700">{{ __('MSU Bank Account Transferred to') }}</label>
                        <select id="bankto" name="bankto" required class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 focus:border-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-100">
                            <option value="">{{ __('Select bank account') }}</option>
                            @if($ourbanks)
                                @foreach($ourbanks as $ob)
                                    <option value="{{ $ob->id }}" {{ ($ob->id == $uploads->bankto) ? 'selected' : '' }}>{{ $ob->bank }} - {{ $ob->account }}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                </div>

                <div class="grid gap-6 lg:grid-cols-2">
                    <div class="space-y-2">
                        <label for="reference" class="block text-sm font-semibold text-slate-700">{{ __('Reference') }}</label>
                        <input value="{{ $uploads->reference }}" id="reference" name="reference" required type="text" class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 focus:border-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-100" />
                    </div>
                    <div class="space-y-2">
                        <label for="amount" class="block text-sm font-semibold text-slate-700">{{ __('Amount Paid') }}</label>
                        <input value="{{ $uploads->amount }}" id="amount" name="amount" required type="text" class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 focus:border-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-100" />
                    </div>
                </div>

                <div class="grid gap-6 lg:grid-cols-2">
                    <div class="space-y-2">
                        <label for="proof" class="block text-sm font-semibold text-slate-700">{{ __('Proof of Payment') }}</label>
                        <input id="proof" name="proof" type="file" required class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 focus:border-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-100" />
                    </div>
                    <div class="space-y-2">
                        <label for="status" class="block text-sm font-semibold text-slate-700">{{ __('Status') }}</label>
                        <select id="status" name="status" required class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 focus:border-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-100">
                            <option value="">{{ __('Select status') }}</option>
                            <option value="Pending" {{ ('Pending' == $uploads->status) ? 'selected' : '' }}>{{ __('Pending') }}</option>
                            <option value="Processed" {{ ('Processed' == $uploads->status) ? 'selected' : '' }}>{{ __('Processed') }}</option>
                            <option value="Rejected" {{ ('Rejected' == $uploads->status) ? 'selected' : '' }}>{{ __('Rejected') }}</option>
                        </select>
                        <input id="comment" name="comment" type="text" class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 focus:border-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-100" placeholder="{{ __('Reason/Comment..') }}" {{ ('Rejected' == $uploads->status) ? 'style="display: block;"' : 'style="display: none;"' }} />
                    </div>
                </div>

                <div class="flex justify-center">
                    <button type="submit" class="inline-flex items-center justify-center rounded-xl bg-emerald-600 px-6 py-3 text-sm font-semibold text-white hover:bg-emerald-700">{{ __('Save Changes') }}</button>
                </div>
            </form>
        </flux:card>
    </div>

    <x-slot name="scripts">
        <script>
            function showComment() {
                var status = document.getElementById('status');
                if (status.value == 'Rejected') {
                    document.getElementById('comment').style.display = 'block';
                } else {
                    document.getElementById('comment').style.display = 'none';
                }
            }
        </script>
    </x-slot>
</x-layouts::app>
