@extends('layouts.branch')

@section('title', "Modify Charge Entry")
@section('header', "Patient Billing Service")

@section('content')
<div class="space-y-6" x-data="editChargeForm({ 
    rate: {{ $ipdPatientCharge->rate }}, 
    qty: {{ $ipdPatientCharge->qty }} 
})">
    
    <!-- Breadcrumbs -->
    <div class="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-slate-400 italic">
        <a href="{{ route('branch.dashboard') }}" class="hover:text-indigo-600 transition-colors">Dashboard</a>
        <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        <a href="{{ route('branch.ipd-patient-charges.index') }}" class="hover:text-indigo-600 transition-colors">Billing Directory</a>
        <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        <span class="text-indigo-600">Modify Record</span>
    </div>

    <!-- Patient Header Card -->
    <div class="bg-white p-6 rounded-[35px] shadow-sm border border-slate-100 italic relative overflow-hidden flex flex-col md:flex-row md:items-center justify-between gap-6 group">
        <div class="flex items-center gap-6">
            <div class="h-20 w-20 rounded-2xl bg-slate-900 flex items-center justify-center text-white font-black text-2xl uppercase">
                {{ substr($ipdPatientCharge->patient->name, 0, 1) }}
            </div>
            <div>
                <h2 class="text-2xl font-black text-slate-800 tracking-tighter uppercase leading-none">{{ $ipdPatientCharge->patient->name }}</h2>
                <div class="flex items-center gap-3 mt-2">
                    <span class="text-[10px] font-black text-indigo-600 uppercase tracking-widest py-1 px-3 bg-indigo-50 rounded-lg">IPD: {{ $ipdPatientCharge->ipdRegistration->ipd_number }}</span>
                    <span class="text-[10px] font-black text-emerald-600 uppercase tracking-widest py-1 px-3 bg-emerald-50 rounded-lg">UHID: {{ $ipdPatientCharge->ipdRegistration->uhid }}</span>
                </div>
            </div>
        </div>
        <div class="text-right">
            <p class="text-[9px] font-black text-slate-400 uppercase tracking-[0.2em] mb-1">Charge ID</p>
            <p class="text-xs font-black text-slate-800 uppercase tabular-nums">REC-{{ str_pad($ipdPatientCharge->id, 6, '0', STR_PAD_LEFT) }}</p>
        </div>
    </div>

    <!-- Edit Form -->
    <div class="w-full pb-20">
        <form action="{{ route('branch.ipd-patient-charges.update', $ipdPatientCharge) }}" method="POST">
            @csrf
            @method('PUT')
            
            <!-- Persist Search State -->
            <input type="hidden" name="q" value="{{ request('q') }}">
            <input type="hidden" name="date_filter" value="{{ request('date') }}">

            <div class="bg-white rounded-[40px] shadow-sm border border-slate-100 italic overflow-hidden">
                <div class="p-8 border-b border-slate-50 bg-slate-50/50 flex items-center gap-4">
                    <div class="h-10 w-10 bg-indigo-600 text-white rounded-xl flex items-center justify-center shadow-lg">
                        <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                    </div>
                    <div>
                        <h3 class="text-base font-black text-slate-800 uppercase tracking-tighter leading-none">Modify Service Line</h3>
                        <p class="text-[9px] text-slate-400 font-bold uppercase tracking-widest mt-1 uppercase">Adjust billing rates or quantities for this entry</p>
                    </div>
                </div>

                <div class="overflow-x-auto">
                    <table class="w-full text-left border-collapse">
                        <thead>
                            <tr class="text-[10px] font-black uppercase tracking-widest text-slate-500 border-b border-slate-100 bg-slate-50/50">
                                <th class="px-6 py-5 w-44">Service Date</th>
                                <th class="px-6 py-5 min-w-[200px]">Charge Category</th>
                                <th class="px-6 py-5 w-32 text-right">Unit Rate (₹)</th>
                                <th class="px-6 py-5 w-24 text-center">Qty</th>
                                <th class="px-6 py-5 w-32 text-right">Row Total</th>
                                <th class="px-6 py-5 min-w-[200px]">Remarks / Particulars</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="hover:bg-slate-50/50 transition-colors">
                                <td class="px-6 py-8">
                                    <input type="date" name="date" value="{{ $ipdPatientCharge->date->format('Y-m-d') }}" required
                                           class="w-full px-4 py-3 bg-white border border-slate-200 rounded-xl text-[11px] font-bold text-slate-700 hover:border-slate-300 focus:ring-4 focus:ring-indigo-100 focus:border-indigo-500 transition-all outline-none shadow-sm">
                                </td>
                                <td class="px-6 py-8">
                                    <div class="relative">
                                        <select name="charge_type_id" required
                                                class="w-full px-4 py-3 bg-white border border-slate-200 rounded-xl text-[11px] font-bold text-slate-700 hover:border-slate-300 focus:ring-4 focus:ring-indigo-100 focus:border-indigo-500 transition-all outline-none appearance-none shadow-sm">
                                            <option value="">Choose Service...</option>
                                            @foreach($chargeTypes as $type)
                                                <option value="{{ $type->id }}" {{ $ipdPatientCharge->charge_type_id == $type->id ? 'selected' : '' }}>
                                                    {{ $type->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <div class="absolute inset-y-0 right-4 flex items-center pointer-events-none text-slate-400">
                                            <svg class="h-3 w-3" 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>
                                </td>
                                <td class="px-6 py-8">
                                    <input type="number" step="0.01" name="rate" x-model.number="rate" required
                                           class="w-full px-4 py-3 bg-white border border-slate-200 rounded-xl text-[11px] font-bold text-slate-700 text-right hover:border-slate-300 focus:ring-4 focus:ring-indigo-100 focus:border-indigo-500 transition-all outline-none shadow-sm">
                                </td>
                                <td class="px-6 py-8">
                                    <input type="number" name="qty" x-model.number="qty" required
                                           class="w-full px-3 py-3 bg-white border border-slate-200 rounded-xl text-[11px] font-bold text-slate-700 text-right hover:border-slate-300 focus:ring-4 focus:ring-indigo-100 focus:border-indigo-500 transition-all outline-none shadow-sm">
                                </td>
                                <td class="px-6 py-8 text-right">
                                    <div class="px-4 py-3 bg-indigo-50/50 text-indigo-600 rounded-xl text-[11px] font-black border border-indigo-100/50 tabular-nums" 
                                         x-text="'₹' + (rate * qty).toFixed(2)"></div>
                                </td>
                                <td class="px-6 py-8">
                                    <input type="text" name="remarks" value="{{ $ipdPatientCharge->remarks }}"
                                           class="w-full px-4 py-3 bg-white border border-slate-200 rounded-xl text-[11px] font-bold text-slate-700 hover:border-slate-300 focus:ring-4 focus:ring-indigo-100 focus:border-indigo-500 transition-all outline-none shadow-sm"
                                           placeholder="Optional remarks...">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- Footer: Review & Submit -->
                <div class="p-10 bg-slate-900 flex flex-col md:flex-row items-center justify-between gap-8">
                    <div class="flex items-center gap-4 text-white">
                        <div class="h-10 w-10 bg-emerald-500/20 text-emerald-500 rounded-xl 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        </div>
                        <div>
                            <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest leading-none mb-1">Update Preview</p>
                            <p class="text-xs font-black text-white uppercase tracking-tight">The new total will be ₹<span x-text="(rate * qty).toFixed(2)"></span></p>
                        </div>
                    </div>
                    <div class="flex items-center gap-4">
                        <a href="{{ route('branch.ipd-patient-charges.index', ['q' => request('q'), 'date' => request('date')]) }}" 
                           class="px-10 py-5 bg-slate-800 text-slate-400 rounded-2xl text-[10px] font-black uppercase tracking-widest hover:bg-slate-700 transition-all">Discard</a>
                        <button type="submit" class="px-10 py-5 bg-indigo-600 text-white rounded-2xl text-[10px] font-black uppercase tracking-widest hover:bg-white hover:text-indigo-600 transition-all shadow-2xl shadow-indigo-100 flex items-center gap-3 group">
                            Apply Changes
                            <svg class="h-3 w-3 group-hover:translate-x-1 transition-transform" 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>
                </div>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
function editChargeForm(init) {
    return {
        rate: init.rate || 0,
        qty: init.qty || 1
    }
}
</script>
@endpush
@endsection