@extends('userend/layouts.main')

@section('main-section')

<!-- Start Greeting -->
<section class="greeting">
    <div class="message">
        <h1><span>Order</span> History </h1>
        <p>Explore your Order History and see your Previous Ordered Product.</p>
    </div>
    <div class="quicklinks">
        <ul>
            <li>
                <div class="profile">
                    <div class="images">
                        <img src="assets/images/user.svg" alt="dummy-user.svg" />
                        <div class="edit">
                            <img src="assets/images/edit-icon.svg" alt="">
                        </div>
                    </div>
                    <div class="text">
                        <p>Sonali Jain Shukla</p>
                        <a href="javascript:void(0)">Edit Profile</a>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</section>
<!-- End Greeting -->

<section class="search">
    <form action="" method="post">
        <div class="form-group">
            <div class="icon">
                <img src="assets/images/search-icon.svg" alt="">
            </div>
            <input type="text" class="form-control" placeholder="Search by Order ID or Customer...">
        </div>
        <div class="form-group">
            <select name="" id="" class="form-control">
                <option value="">Newest First</option>
                <option value="">Oldest First</option>
            </select>
        </div>
        <div class="form-group">
            <p> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M5.33325 1.3335V4.00016" stroke="#0A0A0A" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M10.6667 1.3335V4.00016" stroke="#0A0A0A" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M12.6667 2.6665H3.33333C2.59695 2.6665 2 3.26346 2 3.99984V13.3332C2 14.0696 2.59695 14.6665 3.33333 14.6665H12.6667C13.403 14.6665 14 14.0696 14 13.3332V3.99984C14 3.26346 13.403 2.6665 12.6667 2.6665Z" stroke="#0A0A0A" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M2 6.6665H14" stroke="#0A0A0A" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                </svg>Date Range</p>
            <input type="text" name="dates" class="form-control" readonly>
        </div>
    </form>
</section>

<section class="order_history">
    <div class="customtable">
        <div class="title">
            <h5>Order History</h5>
            <p>View and manage all customer orders</p>
        </div>
        <div class="customthead">
            <div class="customtr">

                <div class="customth">
                    <p>Order ID</p>
                </div>
                <div class="customth">
                    <p>Date</p>
                </div>
                <div class="customth">
                    <p>Product Type</p>
                </div>
                <div class="customth">
                    <p>Items</p>
                </div>
                <div class="customth">
                    <p>Amount</p>
                </div>
                <div class="customth">
                    <p>Action</p>
                </div>
                <div class="customth">
                    <p>Invoices</p>
                </div>

            </div>

        </div>

        <div class="customtbody">
            <div class="order_detail">
                <div class="customtr">
                    <div class="customtd">
                        <p>ORD-2024-1234</p>
                    </div>
                    <div class="customtd">
                        <p>Nov 20, 2024</p>
                    </div>
                    <div class="customtd">
                        <p>Add on product</p>
                    </div>
                    <div class="customtd">
                        <div class="image">
                            <img src="assets/images/order_1.jpg" alt="">
                            <img src="assets/images/order_2.jpg" alt="">
                            <img src="assets/images/product-image.jpg" alt="">

                        </div>
                    </div>
                    <div class="customtd">
                        <p>$299.99</p>
                    </div>
                    <div class="customtd">
                        <p class="action_detail"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                <path d="M4 6L8 10L12 6" stroke="#009689" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>View Details</p>
                    </div>
                    <div class="customtd">
                        <a href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                <path d="M11.0599 6H9.99992V2.66667C9.99992 2.3 9.69992 2 9.33325 2H6.66658C6.29992 2 5.99992 2.3 5.99992 2.66667V6H4.93992C4.34659 6 4.04659 6.72 4.46659 7.14L7.52659 10.2C7.78658 10.46 8.20658 10.46 8.46658 10.2L11.5266 7.14C11.9466 6.72 11.6533 6 11.0599 6ZM3.33325 12.6667C3.33325 13.0333 3.63325 13.3333 3.99992 13.3333H11.9999C12.3666 13.3333 12.6666 13.0333 12.6666 12.6667C12.6666 12.3 12.3666 12 11.9999 12H3.99992C3.63325 12 3.33325 12.3 3.33325 12.6667Z" fill="white" />
                            </svg>Download Invoice</a>
                    </div>
                </div>
                <div class="order_item">
                    <div class="item_title">
                        <h5><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M12.8085 16.5031L11.49 13.4056L9.98471 16.9704L4.34471 14.5029L4.47596 17.4324L11.5537 20.7129L19.7362 16.6891L19.6237 12.9466L12.8085 16.5031ZM22.0905 4.96512L13.89 2.53662L11.6362 4.53912L9.31871 2.77062L1.15796 6.15012L4.00496 8.43537L1.43246 12.4126L9.59246 15.9796L11.49 11.4811L13.182 15.4621L21.7267 11.0056L19.398 7.47312L22.092 4.96437L22.0905 4.96512ZM11.4577 10.9351L4.66271 8.06262L11.6197 4.98612L18.825 7.42737L11.4577 10.9351Z" fill="#226E65" />
                            </svg>Order Items</h5>
                    </div>
                    <div class="kit">
                        <div class="image">
                            <img src="assets/images/kit.jpg" alt="">
                        </div>
                        <div class="text">
                            <div class="content">
                                <h5>Grooming kit</h5>
                                <p>Our grooming kit includes daily essentials like trimmer, face wash, beard oil, body wash, and styling tools to keep you looking clean, fresh, and perfectly groomed every day.</p>
                                <span>QTY : 1</span>
                            </div>
                            <div class="price">
                                <p>₹ 1,00,000</p>
                            </div>
                        </div>
                    </div>
                    <div class="kit">
                        <div class="image">
                            <img src="assets/images/kit.jpg" alt="">
                        </div>
                        <div class="text">
                            <div class="content">
                                <h5>Grooming kit</h5>
                                <p>Our grooming kit includes daily essentials like trimmer, face wash, beard oil, body wash, and styling tools to keep you looking clean, fresh, and perfectly groomed every day.</p>
                                <span>QTY : 1</span>
                            </div>
                            <div class="price">
                                <p>₹ 1,00,000</p>
                            </div>
                        </div>
                    </div>
                    <div class="delivery_detail">
                        <div class="item_title">
                            <h5><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path d="M12.8085 16.5031L11.49 13.4056L9.98471 16.9704L4.34471 14.5029L4.47596 17.4324L11.5537 20.7129L19.7362 16.6891L19.6237 12.9466L12.8085 16.5031ZM22.0905 4.96512L13.89 2.53662L11.6362 4.53912L9.31871 2.77062L1.15796 6.15012L4.00496 8.43537L1.43246 12.4126L9.59246 15.9796L11.49 11.4811L13.182 15.4621L21.7267 11.0056L19.398 7.47312L22.092 4.96437L22.0905 4.96512ZM11.4577 10.9351L4.66271 8.06262L11.6197 4.98612L18.825 7.42737L11.4577 10.9351Z" fill="#226E65" />
                                </svg>Delivery Details</h5>
                        </div>
                        <form action="" method="post">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="4521 Greenview Lane, Sector 12, Westwood Park, New Delhi – 110078, India" readonly>
                            </div>
                            <div class="totle_amount">
                                <div class="item_title">
                                    <h5><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                            <path d="M12.8085 16.5031L11.49 13.4056L9.98471 16.9704L4.34471 14.5029L4.47596 17.4324L11.5537 20.7129L19.7362 16.6891L19.6237 12.9466L12.8085 16.5031ZM22.0905 4.96512L13.89 2.53662L11.6362 4.53912L9.31871 2.77062L1.15796 6.15012L4.00496 8.43537L1.43246 12.4126L9.59246 15.9796L11.49 11.4811L13.182 15.4621L21.7267 11.0056L19.398 7.47312L22.092 4.96437L22.0905 4.96512ZM11.4577 10.9351L4.66271 8.06262L11.6197 4.98612L18.825 7.42737L11.4577 10.9351Z" fill="#226E65" />
                                        </svg>Total Amount</h5>
                                </div>
                                <div class="total_price">
                                    <p>₹ 3,50,000</p>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
            <div class="order_detail">
                <div class="customtr">
                    <div class="customtd">
                        <p>ORD-2024-1234</p>
                    </div>
                    <div class="customtd">
                        <p>Nov 20, 2024</p>
                    </div>
                    <div class="customtd">
                        <p>Add on product</p>
                    </div>
                    <div class="customtd">
                        <div class="image">
                            <img src="assets/images/order_1.jpg" alt="">
                            <img src="assets/images/order_2.jpg" alt="">
                        </div>
                    </div>
                    <div class="customtd">
                        <p>$299.99</p>
                    </div>
                    <div class="customtd">
                        <p class="action_detail"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                <path d="M4 6L8 10L12 6" stroke="#009689" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>View Details</p>
                    </div>
                    <div class="customtd">
                        <a href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                <path d="M11.0599 6H9.99992V2.66667C9.99992 2.3 9.69992 2 9.33325 2H6.66658C6.29992 2 5.99992 2.3 5.99992 2.66667V6H4.93992C4.34659 6 4.04659 6.72 4.46659 7.14L7.52659 10.2C7.78658 10.46 8.20658 10.46 8.46658 10.2L11.5266 7.14C11.9466 6.72 11.6533 6 11.0599 6ZM3.33325 12.6667C3.33325 13.0333 3.63325 13.3333 3.99992 13.3333H11.9999C12.3666 13.3333 12.6666 13.0333 12.6666 12.6667C12.6666 12.3 12.3666 12 11.9999 12H3.99992C3.63325 12 3.33325 12.3 3.33325 12.6667Z" fill="white" />
                            </svg>Download Invoice</a>
                    </div>
                </div>
            </div>
            <div class="order_detail">
                <div class="customtr">
                    <div class="customtd">
                        <p>ORD-2024-1234</p>
                    </div>
                    <div class="customtd">
                        <p>Nov 20, 2024</p>
                    </div>
                    <div class="customtd">
                        <p>Add on product</p>
                    </div>
                    <div class="customtd">
                        <div class="image">
                            <img src="assets/images/product-image.jpg" alt="">
                            <img src="assets/images/product-image.jpg" alt="">
                        </div>
                    </div>
                    <div class="customtd">
                        <p>$299.99</p>
                    </div>
                    <div class="customtd">
                        <p class="action_detail"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                <path d="M4 6L8 10L12 6" stroke="#009689" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>View Details</p>
                    </div>
                    <div class="customtd">
                        <a href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                <path d="M11.0599 6H9.99992V2.66667C9.99992 2.3 9.69992 2 9.33325 2H6.66658C6.29992 2 5.99992 2.3 5.99992 2.66667V6H4.93992C4.34659 6 4.04659 6.72 4.46659 7.14L7.52659 10.2C7.78658 10.46 8.20658 10.46 8.46658 10.2L11.5266 7.14C11.9466 6.72 11.6533 6 11.0599 6ZM3.33325 12.6667C3.33325 13.0333 3.63325 13.3333 3.99992 13.3333H11.9999C12.3666 13.3333 12.6666 13.0333 12.6666 12.6667C12.6666 12.3 12.3666 12 11.9999 12H3.99992C3.63325 12 3.33325 12.3 3.33325 12.6667Z" fill="white" />
                            </svg>Download Invoice</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>



<script>
    let action_detail = document.querySelectorAll('.action_detail');
    let order_item = document.querySelectorAll('.order_item');

    action_detail.forEach((btn) => {
        btn.addEventListener('click', () => {

            order_item.forEach(item => {
                if (item.style.display === "block") {
                    item.style.display = "none";
                } else {
                    item.style.display = "block"; 
                }
            });

        });
    });
</script>


<script>
    $('input[name="dates"]').daterangepicker();
</script>

@endsection