@extends('layouts.header')

@section('content')
<main>
    <div class="container-fluid px-4">
        <h1 class="mt-4">Truncate table</h1>
        {{-- <ol class="breadcrumb mb-4">
            <li class="breadcrumb-item active">Dashboard</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>Paymentlog Details</span>
                            <div>
                                <a href="{{ route('truncate.table') }}" class="btn btn-danger btn-sm">Truncate Table</a>
                                <a href="{{ route('logs.exportCsv') }}" class="btn btn-success btn-sm">Export to CSV</a>
                                {{-- <button id="deleteSelected" class="btn btn-danger btn-sm">Delete Selected</button> --}}
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <table id="paymentTable" class="table">
                            <thead>
                                <tr>
                                    {{-- <th class="no-sort-icon"><input type="checkbox" id="selectAll"></th> --}}
                                    <th>No</th>
                                    <th>Sponsor Name</th>
                                    <th>Student Name</th>
                                    <th>Method</th>
                                    <th>Amount</th>
                                    <th>Received Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $serialNumber = 1; 
                                @endphp
                                @foreach($payments as $payment)                      
                                    <tr>
                                        {{-- <td><input type="checkbox" class="paymentCheckbox" value="{{ $payment->id }}"></td> --}}
                                        <td>{{ $serialNumber }}</td>
                                        <td>{{ $payment->sponsor_name }}</td>
                                        <td>
                                            {{ $payment->student_name }}
                                            {{-- @foreach($payment->students as $student)
                                                {{ $student->student_name }}<br>
                                            @endforeach --}}
                                        </td>
                                        <td>{{ $payment->method }}</td>
                                        <td>{{ $payment->amount }}</td>
                                        <td>{{ $payment->created_at->format('d/m/Y') }}</td>
                                    </tr>
                                    @php
                                        $serialNumber++;
                                    @endphp
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection

@push('scripts')
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap5.min.js"></script> 
<script>
    $(document).ready(function() {
        const paymentTable = $('#paymentTable').DataTable({
            "paging": true,
            "searching": true, 
            "ordering": true, 
            "info": true, 
            "responsive": true, 
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]], 
            "language": {
                "lengthMenu": "Display _MENU_ entries per page",
                "zeroRecords": "No matching records found",
                "info": "Showing _START_ to _END_ of _TOTAL_ entries",
                "infoEmpty": "Showing 0 to 0 of 0 entries",
                "infoFiltered": "(filtered from _MAX_ total entries)",
                "search": "Search:",
                "paginate": {
                    "first": "First",
                    "last": "Last",
                    "next": "Next",
                    "previous": "Previous"
                }
            }
        });

       
        $('#selectAll').change(function() {
            $('.paymentCheckbox').prop('checked', $(this).prop('checked'));
        });

        
        $('#deleteSelected').click(function() {
            const selectedPaymentIds = [];
            $('.paymentCheckbox:checked').each(function() {
                selectedPaymentIds.push($(this).val());
            });
            $('#paymentIdsInput').val(selectedPaymentIds.join(','));
            $('#deleteSelectedForm').submit();
        });
    });
</script>
<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>
<style>
   
    div#paymentTable_filter,
    div#paymentTable_paginate {
        float: right;
    }

   

   
    div#paymentTable_length label {
        display: flex;
        margin-right: 5px; 
    }
    div#paymentTable_length select.form-select.form-select-sm {
    width: 73px;
}
</style>

@endpush

<form id="deleteSelectedForm" action="{{ route('logs.deleteSelected') }}" method="POST">
    @csrf
    <input type="hidden" name="payment_ids" id="paymentIdsInput">
</form>

{{-- @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 --}}