@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('new_orders')}}">
                <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-3">
    <h6 class="mb-0">User Name : Lunaa</h6>
    <h6>User ID : ID23456</h6>
</div>

<div class="card p-4">

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

        <div class="border rounded-2 p-2 mb-3">

            <div class="d-flex flex-column flex-lg-row justify-content-between">

                <span class="text-dark">Order ID :23456</span>
                <span class="text-dark">Date : 21/03/2025</span>
            </div>

        </div>
    </div>

    <div class="row g-3">

        <div class="col-lg-4">
            <div class="card border mb-2">
                <div class="card-body p-3">
                    <h6 class="fw-semibold mb-3">Restaurant Details</h6>
                    <div class="small mb-2">
                        <div class="row">
                            <div class="col-5 text-secondary">Name</div>
                            <div class="col-7 text-dark">: Kayal</div>
                        </div>
                    </div>
                    
                    <div class="small mb-2">
                        <div class="row">
                            <div class="col-5 text-secondary">Restaurant ID</div>
                            <div class="col-7 text-dark">: ID23456</div>
                        </div>

                    </div>


                    <div class="small mb-2">
                        <div class="row">
                            <div class="col-5 text-secondary">Phone</div>
                            <div class="col-7 text-dark">: 987655438</div>
                        </div>
                    </div>


                    <div class="small">
                        <div class="row">
                            <div class="col-5 text-secondary">Address </div>

                            <div class="col-7 text-dark">: Anna Nagar Chennai, Tamil Nadu</div>

                        </div>

                    </div>

                </div>

            </div>

            <div class="card border mb-2">

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

                    <h6 class="fw-semibold mb-3">User Details</h6>


                    <div class="small mb-2">

                        <div class="row">

                            <div class="col-5 text-secondary">Name </div>

                            <div class="col-7 text-dark"> : lunaa</div>

                        </div>

                    </div>


                    <div class="small mb-2">

                        <div class="row">

                            <div class="col-5 text-secondary">Restaurant ID</div>
                            <div class="col-7 text-dark">: ID23456</div>

                        </div>

                    </div>


                    <div class="small mb-2">

                        <div class="row">

                            <div class="col-5 text-secondary"> Phone </div>

                            <div class="col-7 text-dark"> : 987655438</div>

                        </div>

                    </div>


                    <div class="small mb-2">

                        <div class="row">

                            <div class="col-5 text-secondary"> Email Address</div>

                            <div class="col-7 text-dark">  : luna@gmail.com</div>

                        </div>

                    </div>


                    <div class="small">

                        <div class="row">

                            <div class="col-5 text-secondary"> Address</div>

                            <div class="col-7 text-dark"> : Anna Nagar Chennai,Tamil Nadu </div>

                        </div>

                    </div>

                </div>

            </div>

            <div class="card border mb-3">

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

                    <h6 class="fw-semibold mb-3"> Delivery Address</h6>


                    <div class="small mb-2">

                        <div class="row">

                            <div class="col-5 text-secondary"> Name</div>

                            <div class="col-7 text-dark"> : lunaa</div>

                        </div>

                    </div>


                    <div class="small mb-2">

                        <div class="row">

                            <div class="col-5 text-secondary">Phone</div>

                            <div class="col-7 text-dark"> : 987655438</div>

                        </div>

                    </div>


                    <div class="small mb-2">

                        <div class="row">

                            <div class="col-5 text-secondary">Email Address</div>

                            <div class="col-7 text-dark">: luna@gmail.com</div>

                        </div>

                    </div>


                    <div class="small mb-2">

                        <div class="row">

                            <div class="col-5 text-secondary"> Address</div>

                            <div class="col-7 text-dark">: Anna Nagar Chennai,Tamil Nadu</div>

                        </div>

                    </div>


                    <div class="small mb-2">

                        <div class="row">
                            <div class="col-5 text-secondary">Landmark</div>
                            <div class="col-7 text-dark">: Near Bus Stand</div>

                        </div>

                    </div>


                    <div class="small">

                        <div class="row">

                            <div class="col-5 text-secondary"> Address Type</div>

                            <div class="col-7 text-dark">: Home </div>

                        </div>

                    </div>

                </div>

            </div>

            <button type="button" class="btn btn-primary w-100 py-2">Download Bill
                <i class="ti tabler-download ms-1"></i>
            </button>

        </div>

        <div class="col-lg-8">

            <div class="card border-0 shadow-sm mb-3">

                <div class="card-header bg-primary text-white py-3">

                    <h5 class="mb-0 text-white"> Product Details</h5>

                </div>


                <div class="table-responsive">

                    <table id="productDetailsTable"
                        class="table">

                        <thead class="text-nowrap">
                            <tr>
                                <th>SNO</th>
                                <th>CATEGORY</th>
                                <th>PRODUCT NAME</th>
                                <th>OFFERS</th>
                                <th>PRICE</th>
                                <th>QTY</th>
                                <th>TOTAL</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>Total</strong>
                                            <strong>₹654</strong>
                                        </div>
                                    </th>
                                </tr>
                            </tfoot>

                    </table>

                </div>

                

            </div>

            <div class="card border-0 shadow-sm mb-3">
                <div class="card-body p-0">

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

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

                            <thead>
                                <tr>
                                    <th class="text-nowrap">
                                        PAYMENT DETAILS
                                    </th>
                                </tr>
                            </thead>

                            <tbody></tbody>

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

                        </table>

                    </div>

                </div>
            </div>

        </div>

    </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() {

        const productDetails = [

            {
                sno: 1,
                category: "category",
                product_name: "Chicken Pizza",
                offers: '20%',
                price: "₹120",
                qty: "2",
                total: "₹120"
            },

            {
                sno: 1,
                category: "category",
                product_name: "Chicken Pizza",
                offers: '20%',
                price: "₹120",
                qty: "2",
                total: "₹120"
            },

            {
                sno: 1,
                category: "category",
                product_name: "Chicken Pizza",
                offers: '20%',
                price: "₹120",
                qty: "2",
                total: "₹120"
            },

        ];


        $('#productDetailsTable').DataTable({

            data: productDetails,

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

            columnDefs: [

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

            ],

            columns: [

                {
                    data: 'sno',
                },



                {
                    data: 'category'
                },
                {
                    data: 'product_name'
                },

                {
                    data: 'offers'
                },

                {
                    data: 'price'
                },

                {
                    data: 'qty'
                },

                {
                    data: 'total'
                }

            ]

        });


        $('#paymentDetailsTable').DataTable({

            data: [{
                    description: 'Subtotal',
                    amount: '₹360.00'
                },
                {
                    description: 'Discount',
                    amount: '₹100.00'
                },
                {
                    description: 'Offer',
                    amount: '30%'
                }
            ],

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

                }
            ],

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

            dom: 't'

        });

    });
</script>
@endsection