@extends('layouts.app')
@section('css')
    <style>

        #kt_content .week-button.btn.btn-outline-primary {
            background: rgba(255, 255, 255, 0.8);
            box-shadow: 0px 6px 18px rgba(78, 122, 87, 0.08) !important;
            backdrop-filter: blur(18px);
            color: #7A7A7A;
            font-size: 12px;
            border: 2px solid #21A33C !important;
            border-radius: 6px;
        }
        #kt_content .week-button.btn.btn-outline-primary.active {
            background: #21A33C !important;
            box-shadow: 0px 6px 18px rgba(78, 122, 87, 0.3) !important;
            color: #fff;
        }

        /* Account */
        .nav-tabs .nav-link.active {
            background-color: transparent;
            color: #21A33C !important;
            border: none;

        }
        .nav-tabs .nav-link {
            color: #3B3B3B;
            font-weight: 500;
        }
        .nav-tabs .nav-link.active:after {
            content: "";
            border-bottom: 3px solid #21A33C;
            width: 100%;
            display: inline-block;
            border-radius: 5px;
        }


        .text-green {
            color: #2d9c55;
            font-weight: 500;
            text-decoration: none;
        }
        #kt_content .main-container .checkmark {
            color: #2d9c55;
            font-size: 1.2rem;
        }
        .table tr:last-child, .table th:last-child, .table td:last-child
        {
            padding-right: 0.75rem;
        }
        .search-field input {
            width: 250px;
            text-indent: 25px;
        }
        .search-field i {
            color: rgba(60, 60, 67, 0.6)

        }
        .table-transparent {
            --bs-table-bg: transparent !important;
            border-spacing: 0;
            border-collapse: separate;
            padding: 10px;
        }
        .row-group {
            background-color: #EDF7EF;
            transition: all .3s ease;
            border-radius: 10px
        }
        .table tr.spacetr {
            height: 10px;
            box-shadow: none;
        }
        .details-control {
            cursor: pointer;
        }
        .details-control i {
            font-size: 1.2rem;
        }
        .child-row-details {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin: 10px 0;
        }

        /* DataTable styling */
        .dataTables_wrapper .dataTables_filter {
            display: none;
        }

        .dataTables_wrapper .dataTables_length {
            display: none;
        }

        .dataTables_wrapper .dataTables_info {
            display: none;
        }

        .dataTables_wrapper .dataTables_paginate {
            margin-top: 15px;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
            border-radius: 6px;
            border: 1px solid #21A33C;
            color: #21A33C !important;
            background: transparent;
            margin: 0 2px;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background: #21A33C !important;
            color: white !important;
            border-color: #21A33C;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background: #21A33C !important;
            color: white !important;
            border-color: #21A33C;
        }

        /* Table header styling */
        .table thead th {
            background-color: #f8f9fa;
            border-bottom: 2px solid #21A33C;
            color: #3B3B3B;
            font-weight: 600;
            font-size: 0.875rem;
        }

        /* Row hover effect */
        .table tbody tr:hover {
            background-color: #f0f8f0 !important;
        }
    </style>
@endsection

@section('content')

    @include('layouts.toolbar')

    <div id="kt_content_container" class="container-fluid">
        <div class="content" id="kt_content">
            <div class="card card-style">
                <div class="card-body">
                    <div class="main-container">
                        <div class="tabs-search d-flex justify-content-between align-items-center mb-3">
                            <ul class="nav nav-tabs border-0" id="myTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link position-relative border-0 active" id="duplicate-entries" data-bs-toggle="tab" data-bs-target="#duplicate-entries-pane" type="button" role="tab" aria-controls="duplicate-entries-pane" aria-selected="true">Duplicate Entries</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link position-relative border-0" id="payments-lead" data-bs-toggle="tab" data-bs-target="#payments-lead-pane" type="button" role="tab" aria-controls="payments-lead-pane" aria-selected="false">Payments Lead to Negative Balance</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link position-relative border-0" id="multiple-payment" data-bs-toggle="tab" data-bs-target="#multiple-payment-pane" type="button" role="tab" aria-controls="multiple-payment-pane" aria-selected="false">Multiple Payment Of $50 in Same Cycle</button>
                                </li>
                            </ul>
                            <div class="searchbox">
                                <div class="search-field position-relative">
                                    <input type="text" class="form-control search-box" placeholder="Search">
                                    <i class="fa-solid fa-magnifying-glass position-absolute top-50 translate-middle-y bg-white p-2 ms-1"></i>
                                </div>
                            </div>
                        </div>
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="duplicate-entries-pane" role="tabpanel" aria-labelledby="duplicate-entries" tabindex="0">
                                <div class="table-responsive">
                                    <table class="table align-middle table-transparent table-borderless" id="kt_table_duplicate">
                                        <thead>
                                        <tr>
                                            <th></th>
                                            <th>Ref/cheque</th>
                                            <th>Student ID</th>
                                            <th>Student name</th>
                                            <th>Amount</th>
                                            <th>Payment method</th>
                                            <th>Deposit date</th>
                                            <th>Cycle</th>
                                            <th>Record Type</th>
                                            <th>Program/year</th>
                                            <th>Notes</th>
                                            <th>Link</th>
                                            <th class="text-end">Action</th>
                                        </tr>
                                        </thead>
                                        <tbody class="fw-semibold text-gray-600"></tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="payments-lead-pane" role="tabpanel" aria-labelledby="payments-lead" tabindex="0">
                                <div class="table-responsive">
                                    <table class="table align-middle table-transparent table-borderless" id="kt_table_negative">
                                        <thead>
                                        <tr>
                                            <th>Amount</th>
                                            <th>Student ID</th>
                                            <th>Student name</th>
                                            <th>Ref/cheque</th>
                                            <th>Payment method</th>
                                            <th>Deposit date</th>
                                            <th>Cycle</th>
                                            <th>Record Type</th>
                                            <th>Program/year</th>
                                            <th>Notes</th>
                                            <th>Link</th>
                                            <th class="text-end">Action</th>
                                        </tr>
                                        </thead>
                                        <tbody class="fw-semibold text-gray-600"></tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="multiple-payment-pane" role="tabpanel" aria-labelledby="multiple-payment" tabindex="0">
                                <div class="table-responsive">
                                    <table class="table align-middle table-transparent table-borderless" id="kt_table_multiple">
                                        <thead>
                                        <tr>
                                            <th>Student ID</th>
                                            <th>Student name</th>
                                            <th>Amount</th>
                                            <th>Ref/cheque</th>
                                            <th>Payment method</th>
                                            <th>Deposit date</th>
                                            <th>Cycle</th>
                                            <th>Record Type</th>
                                            <th>Program/year</th>
                                            <th>Notes</th>
                                            <th>Link</th>
                                            <th class="text-end">Action</th>
                                        </tr>
                                        </thead>
                                        <tbody class="fw-semibold text-gray-600"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection
@section('js')
    <script type="text/javascript">
        var studentsText = '{{$allStudents}}';
        var decodedText = studentsText.replace(/&quot;/g, '"');
        var validString = decodedText.replace(/[\u0000-\u0019]+/g, '');
        var arrayOfStudents = JSON.parse(validString);

        // Initialize DataTables for each tab
        initializeDataTable('DUPLICATE', '#kt_table_duplicate', true);
        initializeDataTable('GRAND_TOTAL_NEGATIVE', '#kt_table_negative', false);
        initializeDataTable('TWICE_PAYMENT', '#kt_table_multiple', false);

        // Handle approve button clicks
        $(document).on('click', '.approve', function (e) {
            e.preventDefault();
            var paymentId = $(this).attr('data-id');
            if (paymentId) {
                approveConfirmation(paymentId);
            }
        });

        // Handle search functionality with debouncing
        var searchTimeout;
        $('.search-box').on('keyup', function() {
            var searchTerm = $(this).val();
            var activeTab = $('.nav-link.active').attr('data-bs-target');
            var tableId = '';

            if (activeTab === '#duplicate-entries-pane') {
                tableId = '#kt_table_duplicate';
            } else if (activeTab === '#payments-lead-pane') {
                tableId = '#kt_table_negative';
            } else if (activeTab === '#multiple-payment-pane') {
                tableId = '#kt_table_multiple';
            }

            if (tableId) {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(function() {
                    var table = $(tableId).DataTable();
                    table.search(searchTerm).draw();
                }, 300); // 300ms delay to avoid too many requests
            }
        });

        // Handle tab changes to refresh DataTables
        $('button[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
            var target = $(e.target).attr('data-bs-target');
            var tableId = '';

            if (target === '#duplicate-entries-pane') {
                tableId = '#kt_table_duplicate';
            } else if (target === '#payments-lead-pane') {
                tableId = '#kt_table_negative';
            } else if (target === '#multiple-payment-pane') {
                tableId = '#kt_table_multiple';
            }

            if (tableId) {
                $(tableId).DataTable().columns.adjust();
            }
        });

        function initializeDataTable(type, tableId, hasDetails) {
            var table = $(tableId).DataTable({
                processing: true,
                serverSide: false,
                pageLength: 10,
                ajax: {
                    type: 'GET',
                    url: '{{ url('after-school/reports/payments') }}',
                    data: { type: type },
                    beforeSend: function() {
                        $(tableId + '_wrapper .dataTables_processing').show();
                    },
                    complete: function() {
                        $(tableId + '_wrapper .dataTables_processing').hide();
                    }
                },
                columns: getColumnsForType(type, hasDetails),
                drawCallback: function(settings) {
                    // Add row grouping styling
                    $(tableId + ' tbody tr').addClass('row-group');
                },
                language: {
                    processing: '<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>',
                    emptyTable: "No data available",
                    zeroRecords: "No matching records found"
                }
            });

            // Add expandable rows for duplicate entries
            if (hasDetails) {
                $(tableId + ' tbody').on('click', 'td.details-control', function () {
                    var tr = $(this).closest('tr');
                    var row = table.row(tr);

                    if (row.child.isShown()) {
                        row.child.hide();
                        tr.removeClass('shown');
                        $(this).html('<i class="fas fa-plus-circle text-primary"></i>');
                    } else {
                        row.child(formatChildRow(row.data())).show();
                        tr.addClass('shown');
                        $(this).html('<i class="fas fa-minus-circle text-danger"></i>');
                    }
                });
            }

            return table;
        }

        function getColumnsForType(type, hasDetails) {
            var baseColumns = [];

            if (hasDetails) {
                baseColumns.push({
                    className: 'details-control',
                    orderable: false,
                    searchable: false,
                    data: null,
                    defaultContent: '<i class="fas fa-plus-circle text-primary"></i>'
                });
            }

            if (type === 'GRAND_TOTAL_NEGATIVE') {
                baseColumns = baseColumns.concat([
                    { data: 'amount', name: 'amount' },
                    { data: 'student_id', name: 'student_id' },
                    { data: 'student_name', name: 'student_name' },
                    { data: 'ref_cheque', name: 'ref_cheque', orderable: false },
                    { data: 'payment_method', name: 'payment_method', orderable: false },
                    { data: 'deposit_date', name: 'deposit_date' },
                    { data: 'billing_cycle', name: 'billing_cycle' },
                    { data: 'invoice', name: 'invoice', orderable: false },
                    { data: 'program_year', name: 'program_year', orderable: false },
                    { data: 'notes', name: 'notes', orderable: false },
                    { data: 'link', name: 'link', orderable: false },
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ]);
            } else if (type === 'TWICE_PAYMENT') {
                baseColumns = baseColumns.concat([
                    { data: 'student_id', name: 'student_id' },
                    { data: 'student_name', name: 'student_name' },
                    { data: 'amount', name: 'amount' },
                    { data: 'ref_cheque', name: 'ref_cheque', orderable: false },
                    { data: 'payment_method', name: 'payment_method' , orderable: false},
                    { data: 'deposit_date', name: 'deposit_date' },
                    { data: 'billing_cycle', name: 'billing_cycle' },
                    { data: 'invoice', name: 'invoice', orderable: false },
                    { data: 'program_year', name: 'program_year', orderable: false },
                    { data: 'notes', name: 'notes', orderable: false },
                    { data: 'link', name: 'link', orderable: false },
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ]);
            } else {
                // DUPLICATE type
                baseColumns = baseColumns.concat([
                    { data: 'ref_cheque', name: 'ref_cheque' },
                    { data: 'student_id', name: 'student_id' },
                    { data: 'student_name', name: 'student_name' },
                    { data: 'amount', name: 'amount' },
                    { data: 'payment_method', name: 'payment_method', orderable: false },
                    { data: 'deposit_date', name: 'deposit_date' },
                    { data: 'billing_cycle', name: 'billing_cycle' },
                    { data: 'invoice', name: 'invoice', orderable: false },
                    { data: 'program_year', name: 'program_year', orderable: false },
                    { data: 'notes', name: 'notes' , orderable: false},
                    { data: 'link', name: 'link', orderable: false },
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ]);
            }

            return baseColumns;
        }

        function formatChildRow(data) {
            return `
                <div class="child-row-details">
                    <h6 class="mb-3">Suspicious Transactions</h6>
                    ${data.transactions || 'No similar transactions found'}
                </div>
            `;
        }

        function approveConfirmation(id) {
            var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
            
            // Show confirmation dialog
            Swal.fire({
                title: "Are you sure?",
                text: "Do you want to approve this payment?",
                icon: "warning",
                buttons: true,
                dangerMode: false,
            }).then(function(result) {
                if (result.isConfirmed) {
                    $.ajax({
                        type: 'POST',
                        url: "{{ url('after-school/reports/payments/approve') }}",
                        data: {
                            _token: CSRF_TOKEN,
                            paymentId: id
                        },
                        success: function (results) {
                            if (results.success) {
                                swal("Success!", results.success, "success");
                                // Refresh the duplicate table
                                $('#kt_table_duplicate').DataTable().ajax.reload();
                            } else {
                                swal("Error!", results.failure || "An error occurred", "error");
                            }
                        },
                        error: function(xhr) {
                            var errorMessage = "An error occurred while processing the request";
                            if (xhr.responseJSON && xhr.responseJSON.message) {
                                errorMessage = xhr.responseJSON.message;
                            }
                            swal("Error!", errorMessage, "error");
                        }
                    });
                }
            });
        }
    </script>
@endsection