@extends('frontend.layout.master')
@section('style')
    <style>
        .directorder-form .input{
            height: 2.4rem;
        }
        .cart-product-info  tbody tr td {
            border-right: 1px solid #bbbbbb;
        }
        .cart-product-info  thead th {
            border-right: 1px solid #bbbbbb;
        }
    </style>
@endsection
@section('content')
    <!-- Breadcrumb -->
    <div class="breadcrumb bg-bgPrimary py-4">
        <nav class="container text-xs flex justify-between items-center">
            <ol class="flex items-center">
                <li class="px-1 md:px-2"><a href="https://riversony.com/" class="">Home</a></li>

                <li>
                    <i class="bi bi-chevron-right"></i>
                </li>
                <li class="px-1 md:px-2">

                    Order From

                </li>

            </ol>
            <ol class="flex items-center">
                <li>
                    <i class="bi bi-chevron-left"></i>
                </li>
                <li class="px-1 md:px-2"><a href="https://riversony.com/" class="">Back to Home</a></li>
            </ol>
        </nav>
    </div>
    <!-- // Breadcrumb -->

    <div class="container">
        <div class="">
            <div class="border-b">
                <ul class="flex justify-between items-center w-full md:max-w-2xl mx-auto tracking-wide pt-1">
                    <li><span class="py-2 md:py-5 flex"><span class="md:block hidden"></span></span></li>
                    <li><span class="block text-black font-bold border-b-4 border-black py-2 md:py-5">Billing Information</span></li>
                    <li><span class="block py-2 md:py-5 flex"><span class="md:block hidden"></span></span></li>
                </ul>
            </div>
        </div>

        <section class="pt-5 pb-20">

            <!-- product info -->
            <div class="cart-product-info">
                <div class="bg-gray-300 overflow-x-auto w-full lg:w-8/12 lg:mx-auto">
                    <table class="table w-full bg-gray-200">
                        <thead>
                        <tr>
                            <th class="!bg-gray-600 text-white !relative">Product</th>
                            <th class="!bg-gray-600 text-white">Price</th>
                            <th class="!bg-gray-600 text-white">Color</th>
                            <th class="!bg-gray-600 text-white">Size</th>
                            <th class="!bg-gray-600 text-white">Quantity</th>
                            <th class="!bg-gray-600 text-white">Total</th>
                        </tr>
                        </thead>
                        <tbody class="bg-gray-200">
                        <tr>
                            <td class="bg-gray-200" style="max-width: 200px;
              white-space: normal;">
                                <div class="mask mask-squircle w-12">
                                    <img src="checkout_files/Popular-10_01-(1).webp" alt="Popular – 10 piece Attar Box">
                                </div>
                                <div class="md:block hidden">
                                    Popular – 10 piece Attar Box
                                </div>
                            </td>
                            <td class="bg-gray-200">
                                Tk 790
                            </td>
                            <td class="bg-gray-200">
                                <select name="color" id="color">
                                    <option value="Red">red</option>
                                    <option value="Green">Green</option>
                                    <option value="Orange">Orange</option>
                                </select>

                            </td>
                            <td class="bg-gray-200">
                                <select name="Size" id="color">
                                    <option value="Medium">Medium</option>
                                    <option value="Small">Small</option>
                                    <option value="Large">Large</option>
                                </select>

                            </td>
                            <td class="bg-gray-200">
                                <input type="number" maxlength="5" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" name="username" id="username" class="w-full input input-bordered focus:outline-red-400" value="1" placeholder="" required="">
                            </td>
                            <td class="bg-gray-200">

                                Subtotal: <strong id="subtotal-price">790</strong><br>
                                Delivery: <strong id="delivery-charge"></strong><br>

                                <!-- siteSettings -->

                                Total: <strong>Tk  <span id="total-price"></span></strong>
                            </td>
                        </tr>
                        </tbody>

                    </table>

                    <div class="md:hidden">

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


            <!-- order form -->
            <form method="POST" action="/cart/directorder" enctype="multipart/form-data" class="directorder-form lg:w-8/12 lg:mx-auto md:py-5 md:px-10 p-3 border bg-gray-100">
                <div class="mb-3">
                    <div class="md:flex items-center">
                        <label class="md:mb-0 mb-1 block flex-[250px] mr-3 font-semibold" for="name">Full Name <span class="text-red-600">*</span></label>
                        <input type="text" name="name" class="w-full input input-bordered focus:outline-red-400" id="name" placeholder="সম্পূর্ণ নামটি লিখুন" value="habib" required="">
                    </div>
                </div>
                <div class="mb-3">
                    <div class="md:flex items-center">
                        <label class="md:mb-0 mb-1 block flex-[250px] mr-3 font-semibold" for="username">Mobile Number <span class="text-red-600">*</span></label>
                        <input type="number" maxlength="11" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" name="username" id="username" class="w-full input input-bordered focus:outline-red-400" value="01936717236" placeholder="১১ ডিজিটের মোবাইল নাম্বারটি লিখুন।" required="">
                    </div>
                </div>
                <div class="mb-3">
                    <div class="md:flex items-center">
                        <label class="md:mb-0 mb-1 block flex-[250px] mr-3 font-semibold" for="name">Password<span class="text-red-600">*</span></label>
                        <input type="password" name="password" class="w-full input input-bordered focus:outline-red-400" id="password" placeholder="*****" required="">
                    </div>
                </div>


                <div class="mb-3">
                    <div class="md:flex items-center">
                        <label class="md:mb-0 mb-1 block flex-[250px] mr-3 font-semibold" for="address">Address <span class="text-red-600">*</span></label>
                        <input type="text" name="address" class="w-full input input-bordered focus:outline-red-400" placeholder="সম্পূর্ণ ঠিকানা লিখুন" value="ghkjghkghk" id="address" required="">
                    </div>
                </div>
                <!-- Choose Delivery Area -->
                <div class="mb-3">
                    <div class="md:flex items-center">
                        <label class="md:mb-0 mb-1 block flex-[250px] mr-3 font-semibold">Delivery Area <span class="text-red-600">*</span></label>
                        <select name="deliveryarea" id="deliveryarea" class="select select-bordered w-full focus:outline-red-400 max-w-[580px]" required="">
                            <option value="" disabled="disabled" hidden="">Select</option>
                            <option value="insidedhaka" selected="selected">ঢাকা সিটির ভিতরে হোম ডেলিভারি (0Tk )</option>
                            <option value="outsidedhakaHomeService">ঢাকা  সিটির বাহিরে হোম ডেলিভারি (0Tk )</option>

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

                <!-- Choose Payment Method -->
                <div class="mb-3">
                    <div class="md:flex items-right">
                        <label class="md:mb-0 mb-1 block flex-[200px] mr-3 font-semibold" for="name">Payment<span class="text-red-600">*</span></label>

                        <input type="radio" id="bkash" name="fav_language" value="bkash">
                          <img src="images/bkash.png" alt="bkash" width="200" height="333"><br>
                          <input type="radio" id="cod" name="fav_language" value="cod">
                          <img src="images/cod.png" alt="cod" width="200" height="333"><br>

                    </div>
                </div>



                <button type="submit" onclick="msgSend()" class="w-full uppercase btn btn-success text-lg md:p-3 p-5 md:mt-2 mt-3 !h-auto">Submit Your Order</button>
            </form>
        </section>
        <!-- #End Main Body  -->
    </div>

@endsection