@extends('layouts.mobile_master')

@section('content')
    <!-- Header -->
    <div class="header">
        <div class="d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Patient Statements</h5>
            <span class="appointment-count">{{ count($patients) }} Patients</span>
      
        </div>
    </div>
    
    <!-- Content -->
    <div class="content-container">
        <!-- Patient Selector -->
        <div class="patient-selector">
            <label for="statementPatientSelect" class="form-label">Select Patient</label>
            <select class="form-select domselect2 shadow-sm" id="statementPatientSelect">
                <option selected disabled>Choose a patient</option>
                @foreach($patients as $patient)
                    <option value="{{ $patient->id }}">{{ $patient->name }} - {{ $patient->phone }}</option>
                @endforeach
            </select>
        </div>

        <div id="statementDetails">
            <!-- Patient Info -->
            <div id="patientInfoCard" class="patient-info-card" style="display: none;">
                <h5 class="mb-3 text-white"><i class="fas fa-user-circle me-2"></i>Patient Information</h5>
                <div class="info-row">
                    <div class="info-label text-white">Name:</div>
                    <div class="info-value text-white" id="patientName"></div>
                </div>
                <div class="info-row">
                    <div class="info-label text-white">Phone:</div>
                    <div class="info-value text-white" id="patientPhone"></div>
                </div>
                <div class="info-row">
                    <div class="info-label text-white">Address:</div>
                    <div class="info-value text-white" id="patientAddress"></div>
                </div>
            </div>

            <!-- Treatment History -->
            <div class="statement-card">
                <h5 class="section-title"><i class="fas fa-stethoscope"></i>Treatment History</h5>
                <div id="treatmentHistory">
                    <div class="empty-state">
                        <div class="empty-icon"><i class="fas fa-clipboard-list"></i></div>
                        <div class="empty-text">Select a patient to view treatment history</div>
                    </div>
                </div>
            </div>

            <!-- Payment History -->
            <div class="statement-card payment-history" style="display: none;" id="paymentHistoryCard">
                <h5 class="section-title"><i class="fas fa-credit-card"></i>Payment History</h5>
                <div id="paymentHistory"></div>
            </div>

            <!-- Total Section -->
            <div class="total-section" style="display: none;" id="totalSection">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <span class="fw-semibold">Total Treatment Cost:</span>
                    <span class="amount" id="totalCost">$0.00</span>
                </div>
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <span class="fw-semibold">Total Paid:</span>
                    <span class="amount amount-positive" id="totalPaid">$0.00</span>
                </div>
                <div class="d-flex justify-content-between align-items-center">
                    <span class="fw-semibold">Outstanding Balance:</span>
                    <span class="amount amount-negative" id="outstandingBalance">$0.00</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Bottom Tab Bar -->
@endsection

 @section('page_js')
 <!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

<script>
    const patients = @json($patients);

    $(document).ready(function () {
        // Initialize Select2
   

        // Handle patient selection change
        $('#statementPatientSelect').on('change', function () {
            console.log('waka');
            const selectedId = parseInt($(this).val());
            const patient = patients.find(p => p.id === selectedId);
            
            if (!patient) {
                $('#patientInfoCard').hide();
                $('#paymentHistoryCard').hide();
                $('#totalSection').hide();
                $('#treatmentHistory').html(`
                    <div class="empty-state">
                        <div class="empty-icon"><i class="fas fa-clipboard-list"></i></div>
                        <div class="empty-text">Select a patient to view treatment history</div>
                    </div>
                `);
                return;
            }

            // Update patient info
            $('#patientName').text(patient.name);
            $('#patientPhone').text(patient.phone);
            $('#patientAddress').text(patient.add?.name ?? 'Not specified');
            $('#patientInfoCard').show();

            let totalTreatmentCost = 0;
            let totalPayments = 0;
            let treatmentHtml = '';

            // Process treatments
            if (patient.treatments && patient.treatments.length > 0) {
                patient.treatments.forEach(t => {
                    const rate = parseFloat(t.rate) || 0;
                    totalTreatmentCost += rate;

                    let repeaterHtml = '';
                    if (t.repeater && t.repeater.length > 0) {
                        repeaterHtml = '<ul class="mt-1 ps-3 text-muted" style="font-size: 14px;">';
                        t.repeater.forEach(r => {
                            repeaterHtml += `<li>${r.srv_type?.name ?? r.service_id ?? 'Service detail'}</li>`;
                        });
                        repeaterHtml += '</ul>';
                    }

                    treatmentHtml += `
                        <div class="statement-item">
                            <div class="d-flex justify-content-between align-items-start w-100">
                                <div>
                                    <p class="mb-0 fw-bold">${t.service_name ?? t.srv?.name ?? 'Treatment'}</p>
                                    <small class="text-muted">${new Date(t.date).toLocaleDateString()}</small>
                                    ${repeaterHtml}
                                </div>
                                <div class="text-end">
                                    <p class="mb-0 amount">$${rate.toFixed(2)}</p>
                                    <span class="${t.payment_status === 'Paid' ? 'badge-paid' : 'badge-pending'}">${t.payment_status}</span>
                                </div>
                            </div>
                        </div>`;
                });
            } else {
                treatmentHtml = `
                    <div class="empty-state">
                        <div class="empty-icon"><i class="fas fa-stethoscope"></i></div>
                        <div class="empty-text">No treatments found</div>
                    </div>`;
            }

            // Process payments
            if (patient.pymnt && patient.pymnt.length > 0) {
                let paymentHtml = '';
                patient.pymnt.forEach(p => {
                    const paymentAmount = parseFloat(p.payment) || 0;
                    totalPayments += paymentAmount;
                    
                    paymentHtml += `
                        <div class="statement-item">
                            <div class="d-flex justify-content-between align-items-center w-100">
                                <div>
                                    <p class="mb-0 fw-bold">${p.method?.name ?? 'Cash'}</p>
                                    <small class="text-muted">${new Date(p.date).toLocaleDateString()}</small>
                                </div>
                                <div><p class="mb-0 amount amount-positive">$${paymentAmount.toFixed(2)}</p></div>
                            </div>
                        </div>`;
                });
                $('#paymentHistory').html(paymentHtml);
                $('#paymentHistoryCard').show();
            } else {
                $('#paymentHistory').html(`
                    <div class="empty-state">
                        <div class="empty-icon"><i class="fas fa-receipt"></i></div>
                        <div class="empty-text">No payment history found</div>
                    </div>
                `);
                $('#paymentHistoryCard').show();
            }

            // Update totals
            const outstanding = totalTreatmentCost - totalPayments;
            $('#treatmentHistory').html(treatmentHtml);
            $('#totalCost').text('$' + totalTreatmentCost.toFixed(2));
            $('#totalPaid').text('$' + totalPayments.toFixed(2));
            $('#outstandingBalance').text('$' + outstanding.toFixed(2));
            $('#totalSection').show();

            // Add subtle animation to cards
            $('.statement-card').css({
                'opacity': '0',
                'transform': 'translateY(20px)'
            }).each(function(index) {
                $(this).delay(100 * index).animate({
                    opacity: 1,
                    transform: 'translateY(0)'
                }, 300);
            });
        });

        // Add interaction to FAB button
   
    });
</script>

@endsection