@extends('layouts.app') 
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Fee Details'])

    <div class="row mt-4 mx-4">
        <div class="card shadow-sm mb-4">
            <div class="card-header text-white d-flex align-items-center">
                <h4 class="mb-0">Fee Details</h4>
            </div>
            <div class="card-body px-4 pt-3 pb-3">
                <!-- Personal Information Section -->
                <h5 class="mb-3">Personal Information</h5>
                <div class="row mb-4">
                    <div class="col-md-6">
                        <p><strong>Full Name:</strong> <span>{{ $student->firstname }} {{ $student->lastname }}</span></p>
                        <p><strong>Date of Birth:</strong> <span>{{ \Carbon\Carbon::parse($student->dob)->format('d-m-Y') ?? 'NA' }}</span></p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>Phone:</strong> <span>{{ $student->mobileno ?? 'NA' }}</span></p>
                        <p><strong>Email:</strong> <span>{{ $student->email ?? 'NA' }}</span></p>
                    </div>
                </div>

                <!-- Tabs for Pending and Paid Fee Details -->
                <ul class="nav nav-pills" id="feeTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a class="nav-link active" id="pending-fees-tab" data-bs-toggle="pill" href="#pending-fees" role="tab" aria-controls="pending-fees" aria-selected="true">Pending Fees</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" id="previous-transactions-tab" data-bs-toggle="pill" href="#previous-transactions" role="tab" aria-controls="previous-transactions" aria-selected="false">Paid Fees</a>
                    </li>
                </ul>
                <div class="tab-content mt-3" id="feeTabsContent">
                    <!-- Pending Fee Details Tab -->
                    <div class="tab-pane fade show active" id="pending-fees" role="tabpanel" aria-labelledby="pending-fees-tab">
                        <h5 class="mb-3">Pending Fee Details</h5>
                        <div class="table-responsive">
                            <table id="myTable1" class="table table-hover table-bordered text-sm">
                                <thead class="table-dark">
                                    <tr>
                                        <th>Fee Name</th>
                                        <th>Academic Year</th>
                                        <th>Year</th>
                                        <th>Semester</th>
                                        <th>Department</th>
                                        <th>Course</th>
                                        <th>Fee Amount</th>
                                        <th>Paid Amount</th>
                                        <th>Discount</th>
                                        <th>Balance</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($applicableFeeStructures as $fee)
                                        <tr>
                                            <td>{{ $fee->fee_name }}</td>
                                            <td>{{ $fee->academicYear->academicdetail ?? 'NA' }}</td>
                                            <td>{{ $fee->year->year ?? 'NA' }}</td>
                                            <td>{{ $fee->semester->semester_name ?? 'NA' }}</td>
                                            <td>{{ $fee->department->department_name ?? 'NA' }}</td>
                                            <td>{{ $fee->course->course_name ?? 'NA' }}</td>
                                            <td>{{ $fee->fee_amount }}</td>
                                            <td>{{ floatval($fee->feePayments->first()?->paid_amount ?? 0) }}</td>
                                            <td>{{ floatval($fee->feePayments->first()?->feePaymentDtl->sum('discount_amt') ?? 0) }}</td>
                                            <td>
                                                {{
                                                    $balance = floatval($fee->fee_amount) - (
                                                        floatval($fee->feePayments->first()?->paid_amount ?? 0) + 
                                                        floatval(optional($fee->feePayments->first()?->feePaymentDtl)->sum('discount_amt') ?? 0)
                                                    )
                                                }}
                                            </td>
                                            <td>
                                                @if(!$balance <= 0)
                                                <a href="{{ route('pay-now', 
                                                    ['student_id' => $student->cms_student_sid, 
                                                    'fee_structure_id' => $fee->cms_fee_structure_sid, 
                                                    'amount' => $balance, 
                                                    'fee_amount' => $fee->fee_amount]) }}" 
                                                   class="btn btn-success btn-sm" 
                                                   title="Pay Now">
                                                    <i class="fa fa-credit-card"></i> Pay Now
                                                </a>
                                                @endif
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="9" class="text-center text-danger">No pending fee details found.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Paid Fee Details Tab -->
                    <div class="tab-pane fade" id="previous-transactions" role="tabpanel" aria-labelledby="previous-transactions-tab">
                        <h5 class="mb-3">Paid Fee Details</h5>
                        <div class="table-responsive">
                            <table class="table table-hover" id="myTable3">
                                <thead class="table-dark">
                                    <tr>
                                        <th class='text-xs p-1'>Fee Name</th>
                                        <th class='text-xs p-1'>Academic Year</th>
                                        <th class='text-xs p-1'>Year</th>
                                        <th class='text-xs p-1'>Semester</th>
                                        <th class='text-xs p-1'>Department</th>
                                        <th class='text-xs p-1'>Status</th>
                                        <th class='text-xs p-1'>Fee Amount</th>
                                        <th class='text-xs p-1'>Paid Amount</th>
                                        <th class='text-xs p-1'>Discount</th>
                                        <th class='text-xs p-1'>Penalty</th>
                                    </tr>
                                </thead>
                                <tbody id="transaction-history">
                                    <tr>
                                        <td colspan="11" class="text-danger">No Data.</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<script>
    function callTransactions() {
        const registerNumber = @json(Auth::user()->username); 

        if (registerNumber) {
            $.ajax({
                url: '{{ route('get-transaction') }}',
                method: 'GET',
                data: {
                    register_number: registerNumber
                },
                success: function (response) {
                    console.log(response);
                    if (Array.isArray(response.payment_history) && response.payment_history.length > 0) {
                        var transactionsHtml = '';
                        response.payment_history.forEach(function (transaction) {
                            let penaltySum = 0;
                            let discountSum = 0;
                            transaction.fee_payment_dtl.forEach(e => {
                                penaltySum += e.penalty_amt || 0;
                                discountSum += e.discount_amt || 0;
                            });
                            transactionsHtml += `<tr>
                                <td class='text-sm'>${transaction.fee_structure.fee_name || 'NA'}</td>
                                <td class='text-sm'>${transaction.fee_structure.academic_year?.academicdetail || 'NA'}</td>
                                <td class='text-sm'>${transaction.fee_structure.year?.year || 'NA'}</td>
                                <td class='text-sm'>${transaction.fee_structure.semester?.semester_name || 'NA'}</td>
                                <td class='text-sm'>${transaction.fee_structure.department?.department_name || 'NA'}</td>
                                <td class='text-sm text-wrap'>
                                    <span class="bg-${getPaymentStatusClass(transaction.payment_status)} badge badge-pill text-wrap">
                                        ${transaction.payment_status || 'Unpaid'}
                                    </span>
                                </td>
                                <td class='text-sm'>${transaction.fee_structure.fee_amount || 'NA'}</td>
                                <td class='text-sm'>${transaction.paid_amount || 'NA'}</td>
                                <td class='text-sm'>${discountSum || 'NA'}</td>
                                <td class='text-sm'>${penaltySum || 'NA'}</td>
                            </tr>`;
                        });
                        $('#transaction-history').html(transactionsHtml);
                    } else {
                        $('#transaction-history').html('<tr><td class="text-danger">No Transactions Yet.</td></tr>');
                    }
                },
                error: function () {
                    $('#transaction-history').html('<tr><td class="text-danger">Error loading transaction history.</td></tr>');
                }
            });
        } else {
            $('#transaction-history').html('<tr><td class="text-danger">Please enter a Register Number.</td></tr>');
        }
    }

    function getPaymentStatusClass(status) {
    switch (status) {
        case 'Paid':
            return 'success';  
        case 'Unpaid':
            return 'danger';   
        case 'Partially Paid':
            return 'warning';  
        case 'Sem Paid':
            return 'secondary'; 
        default:
            return 'primary'; 
    }
}
    $(document).ready(function() {
        callTransactions(); // Call the function on page load to load paid transactions
    });
</script>
@endpush