@extends('layouts.branch')

@section('title', 'Cash & Credit Ledger')
@section('header', 'Cash & Credit Ledger')

@section('content')
<div class="space-y-6" x-data="ledgerManager()">
    @include('partials.branch._breadcrumbs', [
        'breadcrumbs' => [
            ['name' => 'Cash & Credit Ledger', 'url' => '#']
        ]
    ])

    <!-- Page Header -->
    <div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
        <div>
            <h2 class="text-3xl font-black text-slate-800 tracking-tight uppercase italic">Patient Ledger</h2>
            <p class="text-xs font-bold text-slate-400 uppercase tracking-widest mt-1">Manage all OPD charges, payments, and balances.</p>
        </div>
        <div class="flex items-center gap-3">
            <button @click="exportExcel()" class="inline-flex items-center gap-2 px-6 py-3 bg-emerald-600 text-white rounded-xl font-black text-[10px] uppercase tracking-widest hover:bg-emerald-700 transition-all shadow-lg shadow-emerald-200">
                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                Export Excel
            </button>
            <button @click="exportPdf()" class="inline-flex items-center gap-2 px-6 py-3 bg-slate-800 text-white rounded-xl font-black text-[10px] uppercase tracking-widest hover:bg-slate-900 transition-all shadow-lg shadow-slate-200">
                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                Export PDF
            </button>
            <a href="{{ route('branch.patient-ledgers.create') }}" class="inline-flex items-center gap-2 px-6 py-3 bg-indigo-600 text-white rounded-xl font-black text-[10px] uppercase tracking-widest hover:bg-indigo-700 transition-all shadow-lg shadow-indigo-200">
                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                New Entry
            </a>
        </div>
    </div>

    <!-- Filters & Search -->
    <div class="bg-white p-6 rounded-[30px] shadow-sm border border-slate-100 space-y-6">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
            <!-- From Date -->
            <div>
                <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 block ml-1">From Date</label>
                <input type="date" x-model="filters.from_date" @change="fetchLedgers()" class="w-full px-5 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-xs font-bold text-slate-700 outline-none focus:border-indigo-500 focus:bg-white transition-all shadow-sm">
            </div>

            <!-- To Date -->
            <div>
                <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 block ml-1">To Date</label>
                <input type="date" x-model="filters.to_date" @change="fetchLedgers()" class="w-full px-5 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-xs font-bold text-slate-700 outline-none focus:border-indigo-500 focus:bg-white transition-all shadow-sm">
            </div>

            <!-- Series Filter -->
            <div>
                <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 block ml-1">Series Type</label>
                <select x-model="filters.series_id" @change="fetchLedgers()" class="w-full px-5 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-xs font-bold text-slate-700 outline-none focus:border-indigo-500 focus:bg-white transition-all shadow-sm">
                    <option value="">All Series Masters</option>
                    @foreach($series as $s)
                        <option value="{{ $s->id }}">{{ $s->name }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Patient Search -->
            <div>
                <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 block ml-1">Patient Search (Name/UHID)</label>
                <div class="relative">
                    <input type="text" x-model="filters.uhid" @input.debounce.500ms="fetchLedgers()" placeholder="Name or UHID..." 
                        class="w-full pl-11 pr-5 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-xs font-bold text-slate-700 outline-none focus:border-indigo-500 focus:bg-white transition-all shadow-sm">
                    <svg class="absolute left-4 top-3.5 h-4 w-4 text-slate-400" 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>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-6 border-t border-slate-50">
            <!-- Patient Filter -->
            <div>
                <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 block ml-1">Filter by Patient Name</label>
                <select x-model="filters.patient_id" @change="fetchLedgers()" class="w-full px-5 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-xs font-bold text-slate-700 outline-none focus:border-indigo-500 focus:bg-white transition-all shadow-sm">
                    <option value="">All Patients</option>
                    @foreach($patients as $patient)
                        <option value="{{ $patient->id }}">{{ $patient->name }} ({{ $patient->uhid }})</option>
                    @endforeach
                </select>
            </div>

            <!-- Global Search -->
            <div class="relative">
                <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 block ml-1">Global Search</label>
                <div class="relative">
                    <input type="text" x-model="searchQuery" @input.debounce.500ms="fetchLedgers()" placeholder="Search by name, UHID, description..." 
                        class="w-full pl-11 pr-5 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-xs font-bold text-slate-700 outline-none focus:border-indigo-500 focus:bg-white transition-all shadow-sm">
                    <svg class="absolute left-4 top-3.5 h-4 w-4 text-slate-400" 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>
        </div>
    </div>

    <!-- Table Container -->
    <div id="table-container" class="relative min-h-[400px]">
        <div x-show="loading" class="absolute inset-0 bg-white/50 backdrop-blur-sm z-10 flex items-center justify-center rounded-xl">
            <div class="h-10 w-10 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin"></div>
        </div>
        
        <div x-html="tableContent">
            @include('branch.patient_ledgers._table', ['ledgers' => $ledgers])
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('ledgerManager', () => ({
            searchQuery: '{{ request("search") }}',
            loading: false,
            tableContent: '',
            filters: {
                patient_id: '{{ request("patient_id") }}',
                from_date: '{{ $fromDate }}',
                to_date: '{{ $toDate }}',
                series_id: '{{ request("series_id") }}',
                uhid: '{{ request("uhid") }}'
            },
            
            init() {
                this.tableContent = document.querySelector('#table-container > div:last-child').innerHTML;
                
                document.addEventListener('click', (e) => {
                    const link = e.target.closest('.ajax-pagination a');
                    if (link) {
                        e.preventDefault();
                        this.fetchLedgers(link.href);
                    }
                });
            },

            async fetchLedgers(url = null) {
                this.loading = true;
                try {
                    let fetchUrl = url || '{{ route("branch.patient-ledgers.index") }}';
                    const params = new URLSearchParams();
                    
                    if (!url) {
                        if (this.searchQuery) params.append('search', this.searchQuery);
                        if (this.filters.patient_id) params.append('patient_id', this.filters.patient_id);
                        if (this.filters.from_date) params.append('from_date', this.filters.from_date);
                        if (this.filters.to_date) params.append('to_date', this.filters.to_date);
                        if (this.filters.series_id) params.append('series_id', this.filters.series_id);
                        if (this.filters.uhid) params.append('uhid', this.filters.uhid);
                        
                        const queryString = params.toString();
                        if (queryString) fetchUrl += (fetchUrl.includes('?') ? '&' : '?') + queryString;
                    }

                    const response = await fetch(fetchUrl, {
                        headers: { 'X-Requested-With': 'XMLHttpRequest' }
                    });
                    
                    if (response.ok) {
                        this.tableContent = await response.text();
                        window.history.pushState({}, '', fetchUrl);
                    }
                } catch (error) {
                    console.error('Error fetching ledgers:', error);
                } finally {
                    this.loading = false;
                }
            },

            exportPdf() {
                const params = new URLSearchParams();
                if (this.searchQuery) params.append('search', this.searchQuery);
                if (this.filters.patient_id) params.append('patient_id', this.filters.patient_id);
                if (this.filters.from_date) params.append('from_date', this.filters.from_date);
                if (this.filters.to_date) params.append('to_date', this.filters.to_date);
                if (this.filters.series_id) params.append('series_id', this.filters.series_id);
                if (this.filters.uhid) params.append('uhid', this.filters.uhid);
                
                window.location.href = '{{ route("branch.patient-ledgers.export-pdf") }}?' + params.toString();
            },

            exportExcel() {
                const params = new URLSearchParams();
                if (this.searchQuery) params.append('search', this.searchQuery);
                if (this.filters.patient_id) params.append('patient_id', this.filters.patient_id);
                if (this.filters.from_date) params.append('from_date', this.filters.from_date);
                if (this.filters.to_date) params.append('to_date', this.filters.to_date);
                if (this.filters.series_id) params.append('series_id', this.filters.series_id);
                if (this.filters.uhid) params.append('uhid', this.filters.uhid);
                
                window.location.href = '{{ route("branch.patient-ledgers.export-excel") }}?' + params.toString();
            }
        }));
    });
</script>
@endpush
@endsection