@extends('Admin.layout')
<style>
    .dt-search{
        display: none !important;
    }
</style>

@section('content')


<div class="mb-3">
    <h4>Payment Management</h4>
</div>



{{-- PAYMENT TABLE --}}
<div class="card shadow-sm border-0 p-4">

    <div class="d-flex flex-column flex-lg-row justify-content-between align-items-start align-items-lg-center mb-4">

        <!-- Page Length -->
        <div class="mb-3 mb-lg-0">

            <select id="pageLength" class="form-select w-auto">

                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>

            </select>

        </div>


        <!-- Search + Export -->
        <div class="col-lg-6 col-12 mb-3">

            <div class="d-flex flex-column flex-lg-row gap-3">

                <!-- Search -->
                <div class="search-box flex-grow-1">

                    <input type="search"
                        id="searchBox"
                        class="form-control"
                        placeholder="Search">

                </div>


                <!-- Export -->
                <button type="button"
                    class="btn btn-primary border flex-shrink-0"
                    id="exportBtn">

                    <i class="ti tabler-download me-2"></i>

                    Export

                </button>

            </div>

        </div>

    </div>


    <div class="table-responsive">

        <table id="table"
            class="table align-middle mb-0">

            <thead class="bg-primary-subtle">

                <tr>

                    <th>S.NO</th>
                    <th>DATE</th>
                    <th>ORDER ID</th>
                    <th>CUSTOMER NAME</th>
                    <th>PAYMENT METHOD</th>
                    <th>TRANSACTION ID</th>
                    <th>AMOUNT</th>
                    <th>PAYMENT STATUS</th>
                    <th>ACTION</th>

                </tr>

            </thead>

            <tbody>
            </tbody>

        </table>

    </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>
    $(document).ready(function() {


        const paymentData = [

            {
                sno: 1,
                date: '17/08/2026',
                order_id: 'ORD1001',
                customer_name: 'Lunaa',
                payment_method: 'GPay',
                transaction_id: 'TRN7956G7F',
                amount: '₹35,048',
                payment_status: 'Success'
            },

            {
                sno: 2,
                date: '17/08/2026',
                order_id: 'ORD1002',
                customer_name: 'Anitha',
                payment_method: 'Card',
                transaction_id: 'TRN8654K9P',
                amount: '₹18,500',
                payment_status: 'Success'
            },

            {
                sno: 3,
                date: '16/08/2026',
                order_id: 'ORD1003',
                customer_name: 'Priya',
                payment_method: 'UPI',
                transaction_id: 'TRN4532M8Q',
                amount: '₹22,000',
                payment_status: 'Pending'
            },

            {
                sno: 4,
                date: '16/08/2026',
                order_id: 'ORD1004',
                customer_name: 'Kavya',
                payment_method: 'Phone Pe',
                transaction_id: 'TRN9876P2L',
                amount: '₹12,500',
                payment_status: 'Failed'
            },

            {
                sno: 5,
                date: '15/08/2026',
                order_id: 'ORD1005',
                customer_name: 'Meena',
                payment_method: 'Card',
                transaction_id: 'TRN6547T3X',
                amount: '₹28,999',
                payment_status: 'Refunded'
            }

        ];


        const table = $('#table').DataTable({

            data: paymentData,

            pageLength: 10,

            searching: true,

            lengthChange: false,

            ordering: true,


            columnDefs: [

                {
                    targets: '_all',
                    className: 'text-nowrap text-center'
                }

            ],


            createdRow: function(row, data, dataIndex) {

                if (dataIndex % 2 != 0) {

                    $(row).addClass('bg-primary-subtle');

                }

            },


            buttons: [

                {

                    extend: 'pdfHtml5',

                    title: 'Payment_Report',

                    filename: 'Payment_Report',

                    exportOptions: {

                        columns: [

                            0,
                            1,
                            2,
                            3,
                            4,
                            5,
                            6,
                            7

                        ]

                    }

                }

            ],


            columns: [

                {
                    data: 'sno'
                },

                {
                    data: 'date'
                },

                {
                    data: 'order_id'
                },

                {
                    data: 'customer_name'
                },

                {
                    data: 'payment_method'
                },

                {
                    data: 'transaction_id'
                },

                {
                    data: 'amount'
                },


                {

                    data: 'payment_status',

                    render: function(data) {

                        if (data === 'Success') {

                            return `
                            <span class="badge bg-success">
                                Success
                            </span>
                        `;

                        }

                        if (data === 'Pending') {

                            return `
                            <span class="badge bg-warning text-dark">
                                Pending
                            </span>
                        `;

                        }

                        if (data === 'Failed') {

                            return `
                            <span class="badge bg-danger">
                                Failed
                            </span>
                        `;

                        }

                        if (data === 'Refunded') {

                            return `
                            <span class="badge bg-info text-dark">
                                Refunded
                            </span>
                        `;

                        }

                    }

                },

                {

                    data: null,

                    orderable: false,

                    searchable: false,

                    render: function() {

                        return `

                        <a href="{{ route('admin.view_payment') }}"
                           class="btn btn-primary btn-sm">

                            <i class="ti tabler-eye"></i>

                        </a>

                    `;

                    }

                }

            ]

        });


        // SEARCH

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

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

        });


        // PAGE LENGTH

        $('#pageLength').on('change', function() {

            const length = $(this).val();

            table.page.len(length).draw();

        });


        // EXPORT

        $('#exportBtn').on('click', function() {

            table.button('.buttons-pdf').trigger();

        });


    });
</script>

@endsection