@extends('Admin.layout')


@section('content')

    <div class="d-flex justify-content-between">
        <div>
            <h5>Receipts</h5>

        </div>
        <div>
            <a href="{{ route('add_reciept') }}"><button class="btn btn-primary">Add Receipt</button></a>
        </div>
    </div>
    <div class="card p-0 mt-3">


        <div class="row mb-3 align-items-center p-3 g-2">

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

            <div class="col-auto ms-auto d-flex gap-2 align-items-center">

                <input type="text" id="customSearch" class="form-control" placeholder="Search" style="width:200px;">

            </div>

        </div>


        <div class="table-responsive pt-0 pb-2">
            <div class="row card-header flex-column flex-md-row border-bottom mx-0 p-0">
                <div class="justify-content-between dt-layout-table">
                    <div class=" justify-content-between align-items-center dt-layout-full table-responsive">
                        <table id="dept" class="table table-bordered align-middle users-table w-100">
                            <thead>
                                <tr>
                                    <th>SNO</th>
                                    <th>Date</th>
                                    <th>Amount</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <iframe id="downloadFrame" style="display:none;"></iframe>
    <!-- jQuery (REQUIRED FIRST) -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- DataTables Core -->
    <script src="https://cdn.datatables.net/2.3.4/js/dataTables.min.js"></script>

    <!-- Bootstrap 5 Integration -->
    <script src="https://cdn.datatables.net/2.3.4/js/dataTables.bootstrap5.min.js"></script>


    <script>
        $(document).ready(function () {

            const users = [
                {
                    date: '12/01/2024',
                    month: 'January',
                    total_entries: 25,
                    amount: 50000,
                    type: 'Credit',
                    id: 1
                }
            ];

            const table = $('#dept').DataTable({
                data: users,
                processing: true,
                searching: true,
                ordering: false,
                lengthChange: false,
                pageLength: 10,

                columns: [
                    // SNO
                    {
                        data: null,
                        render: (d, t, r, m) => m.row + 1
                    },

                    { data: 'date' },
                    {
                        data: 'amount',
                        render: data => `₹${Number(data).toLocaleString()}`
                    },


                    // Action
                    {
                        data: 'id',
                        orderable: false,
                        searchable: false,
                        render: function (data) {
                            return `

        <a href="{{ route('receipt_download') }}"> <i class="ti tabler-eye text-primary fw-bold"
                                       style="cursor:pointer;font-size:18px;"
                                       ></i></a>
                                      <i class="ti tabler-download text-primary fw-bold"
       style="cursor:pointer;font-size:18px;"
       onclick="downloadReceipt()"></i>
                                `;
                        }
                    }
                ],


            });

            // Page length
            $('#pageLength').on('change', function () {
                table.page.len(parseInt($(this).val())).draw();
            });

            // Search
            $('#customSearch').on('keyup', function () {
                table.search(this.value).draw();
            });



        });
    </script>

    <script>
        function downloadReceipt() {
            let iframe = document.getElementById('downloadFrame');
            iframe.src = "{{ route('receipt_download') }}";

            iframe.onload = function () {
                setTimeout(() => {
                    iframe.contentWindow.focus();
                    iframe.contentWindow.print();
                }, 500);
            };
        }
    </script>


@endsection