@extends('layouts.branch')

@section('title', 'Collect Payment')
@section('header', 'Payment Collection')

@section('content')
<div class="max-w-4xl mx-auto space-y-6" x-data="paymentCollector({ 
    initialRegistration: @json($registration),
    initialType: '{{ $registrationType }}'
})">
    @include('partials.branch._breadcrumbs', [
        'breadcrumbs' => [
            ['name' => 'Payment Center', 'url' => route('branch.payments.index')],
            ['name' => 'Collect Payment', 'url' => '#']
        ]
    ])

    <form action="{{ route('branch.payments.store') }}" method="POST" class="space-y-8 italic">
        @csrf
        
        <!-- Registration Selection -->
        <div class="bg-white rounded-[45px] shadow-sm border border-slate-100 p-10 relative group">
            <div class="flex items-center gap-6 mb-10 relative z-10">
                <div class="h-12 w-12 bg-indigo-600 text-white rounded-2xl flex items-center justify-center shadow-xl shadow-indigo-100">
                    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                </div>
                <div>
                    <h3 class="text-xl font-black text-slate-800 uppercase tracking-tighter italic leading-none">Find Registration</h3>
                    <p class="text-[10px] text-slate-400 font-bold tracking-widest uppercase mt-2 italic">Search for active OPD or IPD records</p>
                </div>
            </div>

            <div class="space-y-6 relative z-10">
                <div class="relative group">
                    <input type="text" x-model="search" @input.debounce.300ms="searchRegistrations()" 
                           placeholder="Type IPD No, OPD No, Name or UHID..."
                           class="w-full pl-14 pr-8 py-5 bg-slate-50 border-none rounded-[2rem] text-xs font-black text-slate-700 placeholder:text-slate-400 focus:ring-4 focus:ring-indigo-50 transition-all italic tracking-tighter">
                    <div class="absolute left-6 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-indigo-500 transition-colors">
                        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                    </div>

                    <!-- Search Results -->
                    <div x-show="results.length > 0" class="absolute left-0 right-0 mt-4 bg-white border border-slate-100 rounded-[2.5rem] shadow-2xl z-50 overflow-hidden divide-y divide-slate-50">
                        <template x-for="res in results" :key="res.id + res.type">
                            <button type="button" @click="selectRegistration(res)" class="w-full px-8 py-4 text-left hover:bg-slate-50 transition-all flex items-center justify-between group">
                                <div class="flex items-center gap-4">
                                    <div :class="res.type === 'ipd' ? 'bg-rose-50 text-rose-600' : 'bg-emerald-50 text-emerald-600'" class="h-8 w-8 rounded-xl flex items-center justify-center font-black text-[9px] uppercase tracking-tighter">
                                        <span x-text="res.type"></span>
                                    </div>
                                    <div>
                                        <p class="text-[11px] font-black text-slate-800 uppercase tracking-tighter" x-text="res.label"></p>
                                        <p class="text-[9px] font-bold text-slate-400 uppercase mt-1 tracking-widest" x-text="'UHID: ' + res.uhid"></p>
                                    </div>
                                </div>
                                <svg class="h-4 w-4 text-slate-200 group-hover:text-indigo-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 5l7 7-7 7"/></svg>
                            </button>
                        </template>
                    </div>
                </div>

                <!-- Selected Registration Card -->
                <div x-show="selected" x-transition class="mt-8 p-8 bg-indigo-50/50 rounded-[2.5rem] border border-indigo-100 flex flex-col md:flex-row md:items-center justify-between gap-6">
                    <div class="flex items-center gap-6">
                        <div class="h-16 w-16 bg-white rounded-3xl flex items-center justify-center text-indigo-600 shadow-sm border border-indigo-100 font-black text-xl">
                            <span x-text="selected.patient_name ? selected.patient_name.charAt(0) : '?'"></span>
                        </div>
                        <div>
                            <h4 class="text-xl font-black text-slate-800 uppercase tracking-tighter italic leading-none" x-text="selected.patient_name"></h4>
                            <div class="flex items-center gap-4 mt-2">
                                <span class="text-[9px] font-black text-indigo-400 uppercase tracking-[0.2em]" x-text="selected.type.toUpperCase() + ' ADMISSION'"></span>
                                <span class="h-3 w-px bg-indigo-200"></span>
                                <span class="text-[10px] font-black text-slate-500 tabular-nums tracking-tighter" x-text="selected.uhid"></span>
                            </div>
                        </div>
                    </div>
                    <button type="button" @click="selected = null; search = ''" class="text-[9px] font-black text-slate-400 uppercase tracking-widest hover:text-rose-500 transition-colors bg-white px-5 py-3 rounded-xl border border-indigo-100">
                        Change Patient
                    </button>
                </div>

                <input type="hidden" name="patient_id" :value="selected ? selected.patient_id : ''">
                <input type="hidden" name="payable_id" :value="selected ? selected.id : ''">
                <input type="hidden" name="payable_type" :value="selected ? selected.type : ''">
            </div>
        </div>

        <!-- Payment Details -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div class="bg-white rounded-[45px] shadow-sm border border-slate-100 p-10 space-y-8">
                <div class="flex items-center gap-4 mb-2">
                    <div class="h-10 w-10 bg-slate-900 text-white rounded-2xl flex items-center justify-center">
                        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    </div>
                    <h3 class="text-base font-black text-slate-800 uppercase tracking-tighter italic leading-none">Transaction Info</h3>
                </div>

                <div class="space-y-6">
                    <div class="space-y-2">
                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest px-2 italic">Amount to Collect (₹)</label>
                        <input type="number" name="amount" required step="0.01" min="0.01"
                               class="w-full px-8 py-5 bg-slate-50 border-none rounded-[2rem] text-xl font-black text-slate-800 outline-none focus:ring-4 focus:ring-indigo-50 transition-all italic tabular-nums tracking-tighter">
                    </div>

                    <div class="grid grid-cols-2 gap-6">
                        <div class="space-y-2">
                            <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest px-2 italic">Payment Date</label>
                            <input type="date" name="payment_date" value="{{ date('Y-m-d') }}" required
                                   class="w-full px-6 py-4 bg-slate-50 border-none rounded-2xl text-[11px] font-black text-slate-700 outline-none focus:ring-4 focus:ring-indigo-50 transition-all italic">
                        </div>
                        <div class="space-y-2">
                            <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest px-2 italic">Payment Method</label>
                            <div class="relative">
                                <select name="payment_method" required class="w-full px-6 py-4 bg-slate-50 border-none rounded-2xl text-[11px] font-black text-slate-700 outline-none appearance-none focus:ring-4 focus:ring-indigo-50 transition-all italic">
                                    <option value="Cash">Cash</option>
                                    <option value="Online (UPI/Card)">Online (UPI/Card)</option>
                                    <option value="Bank Transfer">Bank Transfer</option>
                                    <option value="Insurance Claim">Insurance Claim</option>
                                </select>
                                <div class="absolute right-5 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">
                                    <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M19 9l-7 7-7-7"/></svg>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-[45px] shadow-sm border border-slate-100 p-10 space-y-8">
                <div class="flex items-center gap-4 mb-2">
                    <div class="h-10 w-10 bg-indigo-50 text-indigo-600 rounded-2xl flex items-center justify-center">
                        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/></svg>
                    </div>
                    <h3 class="text-base font-black text-slate-800 uppercase tracking-tighter italic leading-none">Type & Remarks</h3>
                </div>

                <div class="space-y-6">
                    <div class="space-y-2">
                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest px-2 italic">Payment Category</label>
                        <div class="relative">
                            <select name="payment_type" required class="w-full px-6 py-5 bg-slate-50 border-none rounded-2xl text-[11px] font-black text-slate-700 outline-none appearance-none focus:ring-4 focus:ring-indigo-50 transition-all italic">
                                @foreach($paymentTypes as $key => $label)
                                    <option value="{{ $key }}" {{ $registrationType == str_replace('_advance', '', $key) ? 'selected' : '' }}>{{ $label }}</option>
                                @endforeach
                            </select>
                            <div class="absolute right-5 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">
                                <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M19 9l-7 7-7-7"/></svg>
                            </div>
                        </div>
                    </div>

                    <div class="space-y-2">
                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest px-2 italic">Remarks / Reference No.</label>
                        <textarea name="remarks" rows="1" 
                                  class="w-full px-6 py-4 bg-slate-50 border-none rounded-2xl text-[11px] font-black text-slate-700 outline-none focus:ring-4 focus:ring-indigo-50 transition-all italic"
                                  placeholder="Transaction reference or notes..."></textarea>
                    </div>
                </div>
            </div>
        </div>

        <div class="flex items-center justify-between p-10 bg-slate-900 rounded-[3rem] shadow-2xl">
            <div>
                <p class="text-[9px] font-black text-indigo-400 uppercase tracking-widest mb-1 italic">Receipt Preview</p>
                <p class="text-xl font-black text-white tabular-nums italic">{{ $receiptPreview }}</p>
            </div>
            <button type="submit" :disabled="!selected"
                    class="px-12 py-5 bg-indigo-600 hover:bg-white hover:text-indigo-600 text-white disabled:opacity-30 disabled:cursor-not-allowed rounded-[2rem] text-[11px] font-black uppercase tracking-[0.3em] transition-all duration-500 shadow-2xl shadow-indigo-600/20 flex items-center gap-4 italic group">
                Save & Generate Receipt
                <svg class="h-4 w-4 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M14 5l7 7-7 7M3 12h18"/></svg>
            </button>
        </div>
    </form>
</div>

@push('scripts')
<script>
function paymentCollector(init) {
    return {
        search: '',
        results: [],
        selected: init.initialRegistration ? {
            id: init.initialRegistration.id,
            type: init.initialType,
            patient_id: init.initialRegistration.patient_id,
            patient_name: init.initialRegistration.patient.name,
            uhid: init.initialRegistration.uhid,
            label: (init.initialType.toUpperCase()) + ': ' + (init.initialType === 'ipd' ? init.initialRegistration.ipd_number : init.initialRegistration.opd_number) + ' - ' + init.initialRegistration.patient.name
        } : null,

        async searchRegistrations() {
            if (this.search.length < 3) {
                this.results = [];
                return;
            }
            
            try {
                const response = await fetch(`{{ route('branch.payments.search-registration') }}?q=${this.search}`);
                this.results = await response.json();
            } catch (error) {
                console.error('Search failed:', error);
            }
        },

        selectRegistration(res) {
            this.selected = res;
            this.results = [];
            this.search = '';
        }
    }
}
</script>
@endpush
@endsection