@extends('Admin.layout')

<style>

    .dt-search,

    .dt-length {

        display: none !important;

    }



    .table-responsive {

        overflow-x: auto;

        scrollbar-width: none;

        /* Firefox */

    }



    .table-responsive::-webkit-scrollbar {

        display: none;

        /* Chrome, Safari */

    }

</style>



@section('content')

    <div class="row align-items-center justify-content-between mt-3 mb-3 m-2">

        <div class="col-auto">

            <h5 class="page-title"><button type="button" class="btn btn-icon bg-white waves-effect me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">

                    <a href="{{ route('intern') }}">

                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left">

                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>

                            <path d="M15 6l-6 6l6 6"></path>

                        </svg>

                    </a>

                </button>Student Payment Report</h5>

        </div>

    </div>

  <div class="card m-2">

    <!-- FILTER -->
    <div class="filter-section p-3">
        <div class="row g-3 align-items-center justify-content-between">

            <div class="col-12 col-lg-auto">
                <select id="pageLength" class="form-select w-100">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="All">All</option>
                </select>
            </div>

            <div class="col-12 col-lg-4 ms-lg-auto">
                <div class="d-flex flex-column flex-lg-row justify-content-lg-end gap-2">

                    <input type="text" id="customSearch" class="form-control" placeholder="Search table...">

                    <button class="btn btn-label-secondary">
                        Export
                    </button>

                </div>
            </div>

        </div>
    </div>

    <!-- TABLE -->
    <div class="table-responsive">
        <table class="table" id="usersTable">
 <thead>
<tr>
    <th>#</th>
    <th>Date</th>
    <th>Amount</th>
    <th>Receipt</th>
      <th>Payment Mode</th>
    <th>Status</th>
</tr>
</thead>
            <tbody></tbody>
        </table>
    </div>
</div>
<!-- View Receipt Modal -->

<div class="modal fade" id="receiptModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">View Receipt</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body text-center">
                <img id="receiptPreview" class="img-fluid rounded" style="max-height:500px;">
            </div>

            <div class="modal-footer">
                <a href="" id="downloadReceipt" class="btn btn-primary" download>Download</a>
                <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>



    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>



<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>



<script>

$(document).ready(function () {



    let id = "{{ $id }}";

console.log("ID:", id);
let table = $('#usersTable').DataTable({
    processing: true,
    serverSide: true,
    ajax: "/admin/student_payment_history_data/" + id,

    order: [[1, 'desc']],   // 👈 IMPORTANT (NOT 0)

    columnDefs: [
        {
            targets: 0,
            orderable: false,
            searchable: false
        }
    ],

    columns: [
        { data: 'DT_RowIndex', name: 'DT_RowIndex' },
        { data: 'date' },
        { data: 'amount' },
        { data: 'receipt' },
          { data: 'payment_mode' },

        { data: 'status' }
    ]
});


    // SEARCH FIX

    $('#customSearch').on('keyup', function () {

        table.search(this.value).draw();

    });



});

</script>

<script>

$(document).on('click', '.viewReceiptBtn', function () {



    let img = $(this).data('img');



    $('#receiptPreview').attr('src', img);

    $('#downloadReceipt').attr('href', img);



    let modal = new bootstrap.Modal(document.getElementById('receiptModal'));

    modal.show();

});

</script>

@endsection