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

<div class="mb-5">
    <h5>
        <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
            <a href="{{route('payment_management')}}">
                <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">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path d="M15 6l-6 6l6 6" />
                </svg>
            </a>
        </button>
        View
    </h5>
</div>



<div class="mb-2">
    <h6 class="mb-0">User Name : Lunaa</h6>
    <h6>User ID : ID23456</h6>
</div>

<div class="card mb-4">

    <div class="card-body p-0">

        <div class="table-responsive mb-0">

            <table id="paymentDetailsTable"
                class="table mb-0">

                <thead class="bg-primary-subtle">
                    <tr>
                        <th>PAYMENT DETAILS</th>
                    </tr>
                </thead>

                <tbody></tbody>

            </table>

        </div>

    </div>


</div>

<div class="card mb-4">

    <div class="card-body p-0">

        <div class="table-responsive mb-0">

            <table id="orderDetailsTable"
                class="table mb-0 ">

                <thead class="bg-primary-subtle">
                    <tr>
                        <th>ORDER INFORMATION</th>
                    </tr>
                </thead>

                <tbody></tbody>

                <tfoot>
                    <tr class="border-top bg-primary-subtle">
                        <th class="py-5" colspan="7">
                            <div class="d-flex justify-content-between">
                                <strong>Grand Total</strong>
                                <strong>₹270</strong>
                            </div>
                        </th>
                    </tr>
                </tfoot>

            </table>

        </div>

    </div>


</div>

<div class="card mb-4">
    <div class="card-body p-0">

        <div class="table-responsive mb-0">

            <table id="settlementTable" class="table mb-0">

                <thead class="bg-primary-subtle">
                    <tr>
                        <th>SETTLEMENT INFORMATION</th>
                    </tr>
                </thead>

                <tbody></tbody>

            </table>

        </div>

    </div>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/2.3.2/js/dataTables.min.js"></script>

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



        $('#paymentDetailsTable').DataTable({

            data: [{
                    description: 'Transaction ID',
                    value: 'TXN123'
                },
                {
                    description: 'Payment Status',
                    value: 'Success'
                },
                {
                    description: 'Payment Method',
                    value: 'Gpay'
                },
                {
                    description: 'Payment Date & Time',
                    value: '12/07/2026, 02:30 pm'
                },

            ],

            columns: [{
                    data: 'description'
                },
                {
                    data: 'value',
                    className: "text-end",
                    render: function(data, type, row) {

                        if (data === 'Completed') {
                            return `<span class="badge bg-success-subtle text-success">${data}</span>`;
                        }

                        if (data === 'Failed') {
                            return `<span class="badge bg-danger-subtle text-danger">${data}</span>`;
                        }

                        if (data === 'Pending') {
                            return `<span class="badge bg-warning-subtle text-warning">${data}</span>`;
                        }

                        return data;
                    }


                }
            ],

            paging: false,
            searching: false,
            ordering: false,
            info: false,

            dom: 't'

        });

        $('#orderDetailsTable').DataTable({

            data: [{
                    description: 'Order ID',
                    value: 'ORD0123'
                },
                {
                    description: 'Order Amount',
                    value: '₹220'
                },
                {
                    description: 'Platform Fee',
                    value: '₹30'
                },
                {
                    description: 'Delivery Fee',
                    value: '₹20'
                },
                {
                    description: 'Total',
                    value: '789'
                }
            ],

            columns: [{
                    data: 'description'
                },
                {
                    data: 'value',
                    className: "text-end",

                }
            ],

            paging: false,
            searching: false,
            ordering: false,
            info: false,

            dom: 't'

        });

        $('#settlementTable').DataTable({

            data: [{
                    description: 'Restaurant Settlement',
                    amount: '₹220.00',
                    date: 'Settled on 12-07-2026 · 11:00 PM'
                },
                {
                    description: 'Delivery Partner Earnings',
                    amount: '₹10.00',
                    date: 'Settled on 12-07-2026 · 11:00 PM'
                }
            ],

            columns: [{
                data: null,
                render: function(data, type, row) {

                    return `
                    <div class="d-flex justify-content-between">

                        <div>
                            ${row.description}
                        </div>

                        <div class="text-end">

                            <div class="fw-semibold text-success">
                                ${row.amount}
                            </div>

                            <div class="mt-2 small">
                                ${row.date}
                            </div>

                        </div>

                    </div>
                `;
                }
            }],

            paging: false,
            searching: false,
            ordering: false,
            info: false,

            dom: 't'
        });

    });
</script>


@endsection