@extends('Admin.layout')

<style>
    .dt-search {
        display: none !important;
    }
</style>

@section('content')

<div>
    <h3>Payment Management</h3>
</div>

<div class="row g-3 mb-5">

    <div class="col-12 col-sm-6 col-xl-3">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body py-2 px-3">

                <div class="d-flex align-items-center justify-content-between">

                    <div class="d-flex align-items-center p-5">

                        <span class="bg-info-subtle text-info rounded-2 p-2 me-3">
                            <i class="ti tabler-coin fs-5"></i>
                        </span>

                        <div>
                            <div class="fw-semibold small text-dark">
                                Total Payment
                            </div>

                            <div class="small text-secondary">
                                ₹25,000
                            </div>
                        </div>

                    </div>

                    <i class="ti tabler-chart-line text-primary fs-3"></i>

                </div>

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

    <div class="col-12 col-sm-6 col-xl-3">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body py-2 px-3">

                <div class="d-flex align-items-center justify-content-between">

                    <!-- Left Content -->
                    <div class="d-flex align-items-center  p-5">

                        <span class="bg-success-subtle text-success rounded-2 p-2 me-3">
                            <i class="ti tabler-circle-check fs-5"></i>
                        </span>

                        <div>
                            <div class="fw-semibold small text-dark">
                                Payment Successful
                            </div>

                            <div class="small text-secondary">
                                ₹21,500
                            </div>
                        </div>

                    </div>

                    <!-- Chart Icon -->
                    <i class="ti tabler-chart-line text-success fs-3"></i>

                </div>

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


    <!-- Pending Payment -->
    <div class="col-12 col-sm-6 col-xl-3">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body py-2 px-3">

                <div class="d-flex align-items-center justify-content-between">

                    <!-- Left Content -->
                    <div class="d-flex align-items-center  p-5">

                        <span class="bg-warning-subtle text-warning rounded-2 p-2 me-3">
                            <i class="ti tabler-clock fs-5"></i>
                        </span>

                        <div>
                            <div class="fw-semibold small text-dark">
                                Pending payment
                            </div>

                            <div class="small text-secondary">
                                ₹2,000
                            </div>
                        </div>

                    </div>

                    <!-- Chart Icon -->
                    <i class="ti tabler-chart-line text-warning fs-3"></i>

                </div>

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


    <!-- Refunded Amount -->
    <div class="col-12 col-sm-6 col-xl-3">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body py-2 px-3">

                <div class="d-flex align-items-center justify-content-between">

                    <!-- Left Content -->
                    <div class="d-flex align-items-center  p-5">

                        <span class="bg-danger-subtle text-danger rounded-2 p-2 me-3">
                            <i class="ti tabler-circle-x fs-5"></i>
                        </span>

                        <div>
                            <div class="fw-semibold small text-dark">
                                Refunded Amount
                            </div>

                            <div class="small text-secondary">
                                ₹1,500
                            </div>
                        </div>

                    </div>

                    <!-- Chart Icon -->
                    <i class="ti tabler-chart-line text-danger fs-3"></i>

                </div>

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

</div>

<div class="card p-5">

    <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>
                <option value="all">All</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 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="table" class="table">

                        <thead>

                            <tr>

                                <th>SNO</th>
                                <th>DATE</th>
                                <th>ORDER ID</th>
                                <th>TRANSACTION ID</th>
                                <th>CUSTOMER NAME</th>
                                <th>RESTAURANT NAME</th>
                                <th>TOTAL AMOUNT</th>
                                <th>PAYMENT METHOD</th>
                                <th>STATUS</th>
                                <th>ACTION</th>

                            </tr>

                        </thead>

                        <tbody>
                        </tbody>

                    </table>

                </div>

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

        const paymentData = [

            {
                sno: 1,
                date: '12/01/2026',
                order_id: 'ORD1001',
                transaction_id:'ID11243',
                customer_name: 'Luna',
                restaurant_name: 'Kayal',
                total_amount: '₹300',
                payment_method: 'Gpay',  
                status: 'Completed',
                
            },

            {
                sno: 1,
                date: '12/01/2026',
                order_id: 'ORD1001',
                transaction_id:'ID11243',
                customer_name: 'Luna',
                restaurant_name: 'Kayal',
                total_amount: '₹300',
                payment_method: 'Gpay',  
                status: 'Cancelled',
            },

            {
                sno: 1,
                date: '12/01/2026',
                order_id: 'ORD1001',
                transaction_id:'ID11243',
                customer_name: 'Luna',
                restaurant_name: 'Kayal',
                total_amount: '₹300',
                payment_method: 'Gpay',  
                status: 'Completed',
            }

        ];


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

            data: paymentData,

            pageLength: 10,

            searching: true,

            lengthChange: false,

            ordering: true,

            columnDefs: [

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

            ],

            buttons: [

                {

                    extend: 'pdfHtml5',

                    title: 'Payment_Report',

                    filename: 'Payment_Report',

                    exportOptions: {



                        columns: [

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

                        ]

                    }

                }

            ],

            columns: [

                {
                    data: 'sno'
                },
                {
                    data: 'date'
                },
                {
                    data: 'order_id'
                },
                {
                    data: 'transaction_id'
                },
                
                {
                    data: 'customer_name'
                },
                {
                    data: 'restaurant_name'
                },
                {
                    data: 'total_amount'
                },
                {
                    data: 'payment_method'
                },
                
                {

                    data: 'status',

                    render: function(data) {

                        if (data === 'Completed') {

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

                        }

                        if (data === 'Cancelled') {

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

                        }

                        

                        return data;

                    }

                },
                

                {

                    data: null,
                    orderable: false,
                    searchable: false,
                    render: function() {

                        return `
                        <a href="{{route('view_payment')}}"
                                class="btn btn-danger btn-sm">
                            <i class="ti tabler-eye"></i>
                        </a>

                    `;

                    }

                }


            ]

        });


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

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

        });

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

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

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

        });


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

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

        });


    });
</script>

@endsection