@extends('layouts.header')

@section('content')
<main>
    <div class="container-fluid px-4">
        <h1 class="mt-4">Payment List</h1>
          <ol class="breadcrumb mb-4">
    <li class="breadcrumb-item"><a href="{{ route('dash') }}">Dashboard</a></li>
    <li class="breadcrumb-item active"><a href="{{ route('sponsor.list') }}">Sponsor List</a></li>
    <li class="breadcrumb-item active">Payment List</li>
</ol>
        <div class="row">
            <div class="col-xl-12">
                <div class="card mb-4">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <span><i class="fas fa-table me-1"></i>Paymentlist Details</span>
                        </div>
                    </div>
                    <div class="card-body">
                         <table id="" class="table">
                            <thead>
                                <tr>
                                    <th class="no-sort-icon"><input type="checkbox" id="selectAll"></th>
                                    <th>Payment ID</th>
                                    <th>Sponsor Name</th>
                                    <th>Student Name</th>
                                    <th>Method</th>
                                    <th>Amount</th>
                                    <th>Received Date</th>
                                    <th>invoice</th>
                                </tr>
                            </thead>
                            <tbody>
                                
                              @foreach($payments as $payment)
    <tr>
        <td><input type="checkbox" class="paymentCheckbox" value="{{ $payment->id }}"></td>
        <td>{{ $payment->id }}</td>
        <td>{{ $payment->sponsor->fullName }}</td>
        <td>
            @if($payment->students)
                @foreach($payment->students as $student)
                    {{ $student->student_name }}<br>
                @endforeach
            @endif
        </td>
        <td>{{ $payment->method }}</td>
        <td>{{ $payment->amount }}</td>
        <td>{{ $payment->created_at->format('d/m/Y') }}</td>
        <td><a href="{{ route('invoice.view',$payment->id) }}" class="btn btn-primary">View Invoice</a></td>
    </tr>
@endforeach

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        
        const selectAllCheckbox = document.getElementById('selectAll');
       
        const deleteSelectedButton = document.getElementById('deleteSelected');
        
        const paymentCheckboxes = document.querySelectorAll('.paymentCheckbox');

        
        selectAllCheckbox.addEventListener('change', function () {
            const isChecked = selectAllCheckbox.checked;
           
            paymentCheckboxes.forEach(function (checkbox) {
                checkbox.checked = isChecked;
            });
        });

       
        deleteSelectedButton.addEventListener('click', function () {
            const selectedPaymentIds = [];
           
            paymentCheckboxes.forEach(function (checkbox) {
                if (checkbox.checked) {
                    selectedPaymentIds.push(checkbox.value);
                }
            });
           
            document.getElementById('paymentIdsInput').value = selectedPaymentIds.join(',');
            document.getElementById('deleteSelectedForm').submit();
        });
    });
</script>

@endpush