@extends('admin.admin_dashboard')

@section('customcss')

    <style>
        .card {
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
            margin-bottom: 10px;
        }

        .filter-form .form-control {
            height: 38px;
        }

        .card-header {
            font-weight: 600;
            font-size: 14px;
            background: #F1F3F5 !important;
            color: #fff;
            padding: 6px 10px;
            border-radius: 8px 8px 0 0;
        }

        .table thead th {
            background: #f1f3f5;
            font-weight: 500;
            text-align: center;
            font-size: 10px;
            white-space: normal !important;
            /* wrap header text */
        }

        .table tbody td {
            text-align: center;
            vertical-align: middle;
            padding: 3px 3px;
            font-size: 12px;
            white-space: normal;
            /* wrap cell text */
        }

        .btn-sm {
            padding: 2px 8px;
            font-size: 11px;
            margin: 1px 0;
        }

        .table-responsive {
            overflow-x: auto;
            /* allow horizontal scroll if really needed */
        }

        table.display {
            table-layout: auto;
            /* auto width for wrap */
            width: 100%;
        }
    </style>
    <link href="{{ asset('../asset/vendor/sweetalert2/sweetalert2.min.css')}}" rel="stylesheet">
    <link href="{{ asset('../asset/vendor/bootstrap-select/css/bootstrap-select.min.css')}}" rel="stylesheet">


@endsection

@section('admin')
    <div class="content-body">
        <div class="container-fluid">
            <div class="row page-titles mb-2">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">Payments</a></li>
                    <li class="breadcrumb-item active"><a href="javascript:void(0)">Payment History</a></li>
                </ol>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header" style="background: #f7f7f7 !important;">
                            <h4 class="card-title text-dark">Filter History</h4>
                        </div>
                        <div class="card-body">
                            <form id="filter-form" class="filter-form">
                                <div class="row">
                                    <div class="col-md-3 mb-2">
                                        <label for="payment_date" class="form-label">Date</label>
                                        <input type="date" class="form-control" id="payment_date" name="payment_date"
                                            value="{{ \Carbon\Carbon::today(+6)->format('Y-m-d') }}">
                                    </div>
                                    <div class="col-md-3 mb-2">
                                        <label for="invoice_no" class="form-label">Invoice No</label>
                                        <input type="text" class="form-control" id="invoice_no" name="invoice_no"
                                            placeholder="Enter invoice number">
                                    </div>
                                    <div class="col-md-3 mb-2">
                                        <label for="admission_roll" class="form-label">Student ID</label>
                                        <input type="text" class="form-control" id="admission_roll" name="admission_roll"
                                            placeholder="Enter student id">
                                    </div>
                                    <div class="col-md-3 mb-2">
                                        <label for="user_id" class="form-label">Received By</label>
                                        <select class="form-control selectpicker" data-live-search="true" id="user_id"
                                            name="user_id">
                                            <option value="">All</option>
                                            @foreach($users as $user)
                                                <option value="{{ $user->id }}" @if(request('user_id') == $user->id) selected
                                                @endif>{{ $user->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>


                                    <div class="col-md-3 d-flex align-items-end mb-2">
                                        <button type="button" id="reset-filter-btn"
                                            class="btn btn-dark w-100">Reset</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>


            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">💳 Payment History</h4>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive ">

                                <div id="payment-history-table">

                                    @include('admin.payments.partials.history_table', ['payments' => $payments])
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div> @endsection

@section('customjs')
    <script src="{{ asset('../asset/vendor/sweetalert2/sweetalert2.min.js') }}"></script>
    <script src="{{ asset('../asset/js/plugins-init/sweetalert.init.js') }}"></script>
    <script src="{{ asset('../asset/vendor/bootstrap-select/js/bootstrap-select.min.js') }}"></script>




    <script>
        $(document).ready(function () {
            // Function to fetch and update the table
            function fetchPaymentHistory() {
                let formData = $('#filter-form').serialize();

                $.ajax({
                    url: "{{ route('admin.payment.history') }}",
                    type: 'GET',
                    data: formData,
                    beforeSend: function () {
                        // Optional: show a loader
                        $('#payment-history-table').html('<p class="text-center">Loading...</p>');
                    },
                    success: function (response) {
                        $('#payment-history-table').html(response);
                    },
                    error: function (xhr) {
                        console.error('An error occurred:', xhr.responseText);
                        $('#payment-history-table').html('<p class="text-center text-danger">Failed to load data.</p>');
                    }
                });
            }

            // Use debounce to prevent API calls on every keystroke
            function debounce(func, delay) {
                let timeout;
                return function (...args) {
                    clearTimeout(timeout);
                    timeout = setTimeout(() => func.apply(this, args), delay);
                };
            }

            // Trigger filter on input change with a delay
            $('#filter-form input, #filter-form select').on('keyup change', debounce(function () {
    fetchPaymentHistory();
}, 500)); // 500ms delay

            // Reset button functionality
            $('#reset-filter-btn').on('click', function () {
    $('#filter-form')[0].reset();
    $('#payment_date').val('{{ \Carbon\Carbon::today(+6)->format('Y-m-d') }}'); 
    $('#user_id').selectpicker('refresh'); // dropdown UI refresh
    fetchPaymentHistory();
});





        });
    </script>

    <script>
        $(document).on('click', '.deletePaymentBtn', function () {
            let paymentId = $(this).data('payment-id');
            let studentName = $(this).data('student-name');
            let roll = $(this).data('roll');
            let invoice = $(this).data('invoice');

            Swal.fire({
                title: 'Are you sure?',
                html: `You are about to delete payment for <strong>${studentName}</strong> (Roll: ${roll}, Invoice: ${invoice})`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'Cancel'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '/admin/payments/' + paymentId + '/delete',
                        type: 'DELETE',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function (res) {
                            if (res.success) {
                                Swal.fire('Deleted!', res.message, 'success');
                                // Optional: remove row from table
                                location.reload();
                            } else {
                                Swal.fire('Error!', res.message, 'error');
                            }
                        },
                        error: function (err) {
                            Swal.fire('Error!', 'Something went wrong.', 'error');
                        }
                    });
                }
            });
        });
    </script>
@endsection