@extends('frontend::layouts.master')

@section('content')
<div class="bg-top-sub-gradient py-12 lg:pt-0 ">
    <div class="px-4">
        <div class="lg:hidden pb-8">
            <h1 class="text-center text-24 lg:text-36 font-bold text-primary leading-10">Shipping and payment</h1>
        </div>
        <div class="container">
            <div class="max-w-2xl mx-auto">
                <ul class="relative hidden lg:flex flex-row justify-center gap-x-2 py-12 ml-[15%]">
                    <li class="shrink basis-0 flex-1 group">
                        <div class="min-w-7 min-h-7 w-full inline-flex items-center align-middle">
                            <span class="w-10 h-10 lg:w-16 lg:h-16 flex justify-center items-center shrink-0 font-medium bg-secondary text-gray-800 rounded-full">
                                <svg width="45" class="w-6 h-6 lg:w-10 lg:h-10" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M35.902 9.84375H10.0034L7.79056 5.87737C7.54218 5.43216 7.0723 5.15625 6.5625 5.15625H3.75C2.97335 5.15625 2.34375 5.78585 2.34375 6.5625C2.34375 7.33915 2.97335 7.96875 3.75 7.96875H5.73675L7.92055 11.8831L12.9569 23.0266L12.9621 23.038L13.4057 24.0195L8.34912 29.4132C7.98554 29.801 7.87173 30.3607 8.05497 30.8597C8.23822 31.3588 8.6872 31.7118 9.21536 31.7722L13.8244 32.2989C19.5894 32.9578 25.4107 32.9578 31.1757 32.2989L35.7847 31.7722C36.5563 31.684 37.1104 30.987 37.0222 30.2153C36.934 29.4437 36.237 28.8897 35.4654 28.9778L30.8564 29.5046C25.3035 30.1392 19.6965 30.1392 14.1437 29.5046L12.3146 29.2956L16.0259 25.3368C16.0618 25.2985 16.0952 25.2587 16.126 25.2177L17.5375 25.4014C19.5155 25.6587 21.5149 25.7092 23.5034 25.5519C28.1411 25.1851 32.4394 22.9783 35.4403 19.4233L36.5241 18.1392C36.5605 18.0961 36.5943 18.0508 36.6253 18.0036L38.6453 14.9252C40.0772 12.7431 38.5119 9.84375 35.902 9.84375ZM16.2305 22.3951C15.9204 22.3547 15.6529 22.1577 15.5223 21.8738L15.5198 21.8683L11.3564 12.6562H35.902C36.2748 12.6562 36.4984 13.0704 36.2939 13.3822L34.3203 16.3898L33.2911 17.6091C30.7748 20.5901 27.1705 22.4406 23.2816 22.7482C21.488 22.89 19.6845 22.8445 17.9004 22.6124L16.2305 22.3951Z"
                                        fill="currentColor" />
                                    <path d="M12.1875 34.6875C10.6342 34.6875 9.375 35.9467 9.375 37.5C9.375 39.0533 10.6342 40.3125 12.1875 40.3125C13.7408 40.3125 15 39.0533 15 37.5C15 35.9467 13.7408 34.6875 12.1875 34.6875Z" fill="currentColor" />
                                    <path d="M30 37.5C30 35.9467 31.2592 34.6875 32.8125 34.6875C34.3658 34.6875 35.625 35.9467 35.625 37.5C35.625 39.0533 34.3658 40.3125 32.8125 40.3125C31.2592 40.3125 30 39.0533 30 37.5Z" fill="currentColor" />
                                </svg>
                            </span>
                            <div class="ms-2 w-full h-[2px] flex-1 bg-secondary group-last:hidden"></div>
                        </div>
                        <div class="mt-3">
                            <span class="block text-sm font-medium text-gray-800 pl-[6px] lg:pl-[16px]">
                                Cart
                            </span>
                        </div>
                    </li>
                    <li class="shrink basis-0 flex-1 group">
                        <div class="min-w-7 min-h-7 w-full inline-flex items-center align-middle">
                            <span class="w-10 h-10 lg:w-16 lg:h-16 flex justify-center items-center shrink-0 bg-secondary text-gray-800 font-medium rounded-full">
                                <svg width="45" class="w-6 h-6 lg:w-10 lg:h-10" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M31.4071 20.6259C31.4071 21.4025 30.7775 22.0322 30.0009 22.0322H15.0009C14.2242 22.0322 13.5946 21.4025 13.5946 20.6259C13.5946 19.8492 14.2242 19.2197 15.0009 19.2197H30.0009C30.7775 19.2197 31.4071 19.8492 31.4071 20.6259Z" fill="currentColor" />
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M8.22382 15.276L10.4527 9.18672C11.0144 7.65213 12.3767 6.5525 13.9953 6.32726C19.6385 5.54195 25.3633 5.54195 31.0065 6.32726C32.6251 6.5525 33.9875 7.65215 34.5492 9.18675L36.7782 15.2765C37.1951 15.9269 37.4822 16.6704 37.6027 17.472L37.7939 18.7429C38.5435 23.7278 38.4734 28.8018 37.5864 33.7641C37.1931 35.964 35.3865 37.6351 33.1626 37.8558L30.8555 38.0848C25.2993 38.6363 19.7023 38.6363 14.1462 38.0848L11.839 37.8558C9.61515 37.6351 7.80848 35.964 7.41525 33.7641C6.52824 28.8018 6.45815 23.7278 7.20777 18.7429L7.39889 17.472C7.51945 16.6702 7.80674 15.9265 8.22382 15.276ZM14.383 9.11292C19.769 8.3634 25.2329 8.3634 30.6189 9.11292C31.2079 9.19488 31.7036 9.59504 31.908 10.1535L32.8572 12.7466C32.7721 12.7342 32.6865 12.7237 32.6003 12.7151L30.7662 12.5331C25.2694 11.9875 19.7322 11.9875 14.2355 12.5331L12.4013 12.7151C12.3152 12.7237 12.2296 12.7342 12.1447 12.7465L13.0938 10.1535C13.2982 9.59504 13.794 9.19488 14.383 9.11292ZM10.6615 16.6902L10.6965 16.703L10.7399 16.5845C11.2006 15.9922 11.8927 15.5919 12.6791 15.5139L14.5132 15.3318C19.8252 14.8046 25.1764 14.8046 30.4884 15.3318L32.3225 15.5139C33.1091 15.592 33.8013 15.9924 34.2621 16.5848L34.3053 16.703L34.3402 16.6903C34.586 17.0388 34.7548 17.4467 34.8215 17.8902L35.0126 19.1611C35.7167 23.843 35.6508 28.6085 34.8178 33.2692C34.6459 34.2305 33.8565 34.9606 32.8848 35.0571L30.5777 35.2861C25.2063 35.8192 19.7953 35.8192 14.424 35.2861L12.1168 35.0571C11.1451 34.9606 10.3557 34.2305 10.1839 33.2692C9.35077 28.6085 9.28495 23.843 9.989 19.1611L10.1801 17.8902C10.2468 17.4467 10.4156 17.0388 10.6615 16.6902Z"
                                        fill="currentColor" />
                                </svg>
                            </span>
                            <div class="ms-2 w-full h-[2px] flex-1 bg-gray-200 group-last:hidden"></div>
                        </div>
                        <div class="mt-3">
                            <span class="block text-sm font-medium text-gray-800 whitespace-nowrap -ml-[34px] lg:-ml-[27px]">
                                Shipping and payment
                            </span>
                        </div>
                    </li>
                    <li class="shrink basis-0 flex-1 group">
                        <div class="min-w-7 min-h-7 w-full inline-flex items-center align-middle">
                            <span class="w-10 h-10 lg:w-16 lg:h-16 flex justify-center items-center shrink-0 bg-[#F5F5F5] text-[#ACACAC] font-medium rounded-full">
                                <svg width="46" class="w-6 h-6 lg:w-10 lg:h-10" height="45" viewBox="0 0 46 45" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M14.2642 9.8624C12.1184 10.1022 10.4008 11.7958 10.1525 13.9185C9.48561 19.6207 9.48561 25.3811 10.1525 31.0833C10.4008 33.206 12.1184 34.8996 14.2642 35.1394C19.8458 35.7632 25.6201 35.7632 31.2016 35.1394C33.3474 34.8996 35.065 33.206 35.3133 31.0833C35.7925 26.9861 35.9274 22.8589 35.7179 18.7448C35.7125 18.6385 35.7522 18.5349 35.8274 18.4597L37.7751 16.512C38.0006 16.2865 38.3858 16.4275 38.4097 16.7454C38.7773 21.6296 38.6763 26.5403 38.1067 31.41C37.7039 34.8543 34.9385 37.5517 31.514 37.9345C25.7248 38.5815 19.741 38.5815 13.9518 37.9345C10.5273 37.5517 7.76192 34.8543 7.35907 31.41C6.66677 25.4908 6.66677 19.511 7.35907 13.5918C7.76192 10.1475 10.5274 7.45003 13.9518 7.0673C19.741 6.42028 25.7248 6.42028 31.514 7.0673C32.7201 7.2021 33.8445 7.62403 34.8126 8.26459C35.0031 8.39064 35.022 8.65846 34.8605 8.81999L33.3551 10.3254C33.232 10.4485 33.041 10.4692 32.8875 10.387C32.3748 10.1123 31.8052 9.92985 31.2016 9.8624C25.6201 9.23858 19.8458 9.23858 14.2642 9.8624Z"
                                        fill="currentColor" />
                                    <path d="M39.6648 11.3078C40.2139 10.7586 40.2139 9.8682 39.6648 9.31902C39.1156 8.76985 38.2252 8.76985 37.676 9.31902L21.7954 25.1997L17.1648 20.569C16.6156 20.0198 15.7252 20.0198 15.176 20.569C14.6268 21.1182 14.6268 22.0086 15.176 22.5578L20.801 28.1828C21.3502 28.7319 22.2406 28.7319 22.7898 28.1828L39.6648 11.3078Z" fill="currentColor" />
                                </svg>
                            </span>
                            <div class="ms-2 w-full h-[2px] flex-1 bg-gray-200 group-last:hidden"></div>
                        </div>
                        <div class="mt-3">
                            <span class="block text-sm font-medium text-gray-800 lg:pl-[7px]">
                                Confirm
                            </span>
                        </div>
                    </li>
                    <!-- End Item -->
                </ul>
            </div>
        </div>
    </div>

    <div class="container lg:pt-4 px-4 lg:px-0 ">
        <form class="flex flex-col md:flex-row gap-4 md:gap-8" action="{{ url('complete') }}">
            <div class="cart-table">
                <div class="cart-row border-none">
                    <div class="relative w-full">
                        <div class="mb-4 flex justify-between">
                            <p class="font-semibold text-18 whitespace-nowrap">
                                Delivery Address
                            </p>
                            <button type="button" class="button-address-add leading-4 text-14 lg:text-16 flex gap-x-2 items-center font-semibold">
                                <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M10.1857 0.457031C4.64447 0.457031 0.152344 4.94916 0.152344 10.4904C0.152344 16.032 4.64447 20.5238 10.1857 20.5238C15.7273 20.5238 20.2191 16.032 20.2191 10.4904C20.2191 4.94916 15.7273 0.457031 10.1857 0.457031ZM10.1857 19.2894C5.34493 19.2894 1.40651 15.3312 1.40651 10.4904C1.40651 5.64957 5.34493 1.71116 10.1857 1.71116C15.0265 1.71116 18.9649 5.64959 18.9649 10.4904C18.9649 15.3311 15.0265 19.2894 10.1857 19.2894ZM14.5753 9.86331H10.8128V6.1008C10.8128 5.75465 10.5319 5.47372 10.1857 5.47372C9.83956 5.47372 9.55863 5.75465 9.55863 6.1008V9.86331H5.79611C5.44996 9.86331 5.16903 10.1442 5.16903 10.4904C5.16903 10.8366 5.44996 11.1175 5.79611 11.1175H9.55863V14.88C9.55863 15.2262 9.83956 15.5071 10.1857 15.5071C10.5319 15.5071 10.8128 15.2262 10.8128 14.88V11.1175H14.5753C14.9215 11.1175 15.2024 10.8366 15.2024 10.4904C15.2024 10.1442 14.9215 9.86331 14.5753 9.86331Z"
                                        fill="black" />
                                </svg>
                                เพิ่มที่อยู่ใหม่
                            </button>
                        </div>

                        <div class="address-selector flex flex-col gap-y-5">
                            @for ($i = 0; $i < 3; $i++)
                                <label for="delivery-radio-{{ $i }}" class="address-radio-label">
                                    <input type="radio" name="delivery-radio" class="address-radio-input" id="delivery-radio-{{ $i }}" {{ $i == 0 ? 'checked' : '' }}>
                                    <div class="flex flex-col">
                                        <div class="flex items-start">
                                            <p class="mr-4 font-bold tracking-wide">Saijai Kohmahasanook</p>
                                        </div>
                                        <div class="flex flex-wrap items-baseline gap-x-2">
                                            <p>1 Fortune Town 22nd Floor, Room 3P80-81, Ratchadapisek Road</p>
                                            <p>Dindang</p>
                                            <p>Bangkok</p>
                                            <p>10400</p>
                                        </div>
                                        <div class="flex items-start">
                                            <p>084 448 8842</p>
                                        </div>
                                        <div class="flex items-start">
                                            <p>buyer@gmail.com</p>
                                        </div>
                                        @if ($i == 0)
                                            <div class="flex items-start mt-2">
                                                <div>
                                                    <div class="px-2 pb-1 pt-1.5 rounded-md leading-[1.1] text-12 bg-secondary bg-opacity-40">Deault address</div>
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                    <button type="button" class="button-address-edit">
                                        แก้ไข
                                    </button>
                                </label>
                            @endfor
                            <x-frontend::overlays.modal.modal-button name="more-address" class="!inline-flex ml-auto button-primary">
                                <x-slot:button>
                                    <div class="text-14  dark:text-white font-bold">ที่อยู่เพิ่มเติม</div>
                                    <svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M0.666667 7.33268L4 3.99935L0.666667 0.666015" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </x-slot>
                                </x-frontend>

                        </div>
                        <div class="address-edit-form bg-gray-50 p-4 rounded-xl hidden">
                            <div class="flex flex-wrap -mx-2 transparent-label">
                                <div class="w-full px-4 pb-3">
                                    <p class="font-bold text-18 address-form-header">Edit address</p>
                                </div>
                                <div class="w-full sm:w-1/2 px-2">
                                    <div class="com-form-basic float form-style line-style">
                                        <input id="dlfname" type="text" placeholder="Name">
                                        <label for="dlfname">
                                            First Name
                                        </label>
                                    </div>
                                </div>
                                <div class="w-full sm:w-1/2 px-2">
                                    <div class="com-form-basic float form-style line-style">
                                        <input id="dllname" type="text" placeholder="Name">
                                        <label for="dllname">
                                            Last Name
                                        </label>
                                    </div>
                                </div>
                                <div class="w-full px-2">
                                    <div class="com-form-basic float form-style line-style">
                                        <input id="dlemail" type="email" placeholder="email">
                                        <label for="dlemail">
                                            Email
                                        </label>
                                    </div>
                                </div>
                                <div class="w-full px-2">
                                    <div class="com-form-basic float form-style line-style">
                                        <input id="dlphone" type="text" placeholder="phone">
                                        <label for="dlphone">
                                            Phone No.
                                        </label>
                                    </div>
                                </div>
                                <div class="w-full px-2">
                                    <div class="com-form-basic float form-style line-style">
                                        <input id="dladdress" type="text" placeholder="address">
                                        <label for="dladdress">
                                            Address
                                        </label>
                                    </div>
                                </div>
                                <div class="w-full sm:w-1/2 px-2">
                                    <div class="com-form-basic float form-style line-style">
                                        <select name="dlprovince" id="province">
                                            <option value="0">Province 1</option>
                                            <option value="1">Province 2</option>
                                            <option value="2">Province 3</option>
                                        </select>
                                        <label for="dlprovince">
                                            Province
                                        </label>
                                    </div>
                                </div>
                                <div class="w-full sm:w-1/2 px-2">
                                    <div class="com-form-basic float form-style line-style">
                                        <select name="dldistrict" id="district">
                                            <option value="0">District 1</option>
                                            <option value="1">District 2</option>
                                            <option value="2">District 3</option>
                                        </select>
                                        <label for="dldistrict">
                                            District
                                        </label>
                                    </div>
                                </div>
                                <div class="w-full sm:w-1/2 px-2">
                                    <div class="com-form-basic float form-style line-style">
                                        <select name="dlsub-district" id="sub-district">
                                            <option value="0">Sub-District 1</option>
                                            <option value="1">Sub-District 2</option>
                                            <option value="2">Sub-District 3</option>
                                        </select>
                                        <label for="dlsub-district">
                                            Sub-District
                                        </label>
                                    </div>
                                </div>

                                <div class="w-full sm:w-1/2 px-2">
                                    <div class="com-form-basic float form-style line-style">
                                        <input id="dlpost" type="text" placeholder="post">
                                        <label for="dlpost">
                                            Postal Code
                                        </label>
                                    </div>
                                </div>
                                <div class="w-full p-2">
                                    <div class="flex items-start px-4 gap-x-3">
                                        <input id="addressAddDefaultStat" type="checkbox" name="policy" class="checkbox-default !mt-[1px]" id="policy-checkbox">
                                        <label for="addressAddDefaultStat" class="text-14">
                                            Default address
                                        </label>
                                    </div>
                                </div>
                                <div class="w-full px-2 pt-4 flex gap-x-4">
                                    <button type="reset" class="button-secondary-bordered button-address-reset">
                                        ยกเลิก
                                    </button>
                                    <button type="submit" class="button-secondary">
                                        ยืนยัน
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cart-row border-none">
                    <div class="relative w-full">
                        <div class="com-tax-request">
                            <div class="flex items-center">
                                <input type="checkbox" id="request-tax" class="switch-checkbox">
                                <label for="request-tax" class="text-gray-500 ms-3 dark:text-neutral-400">Request Tax Invoice</label>
                            </div>
                        </div>
                        <div class="com-tax-request-detail hidden mt-6">
                            <div class="taxaddress-edit-form bg-gray-50 p-4 rounded-xl ">
                                <div class="flex flex-wrap -mx-2 transparent-label">
                                    <div class="w-full px-4 pb-3">
                                        <p class="font-bold text-18 address-form-header">Edit tax address</p>
                                    </div>
                                    <div class="w-full sm:w-1/2 px-2">
                                        <div class="com-form-basic float form-style line-style">
                                            <input id="dlfname" type="text" placeholder="Name">
                                            <label for="dlfname">
                                                First Name
                                            </label>
                                        </div>
                                    </div>
                                    <div class="w-full sm:w-1/2 px-2">
                                        <div class="com-form-basic float form-style line-style">
                                            <input id="dllname" type="text" placeholder="Name">
                                            <label for="dllname">
                                                Last Name
                                            </label>
                                        </div>
                                    </div>
                                    <div class="w-full sm:w-1/2 px-2">
                                        <div class="com-form-basic float form-style line-style">
                                            <input id="taxno" type="text" placeholder="email">
                                            <label for="taxno">
                                                Tax ID
                                            </label>
                                        </div>
                                    </div>
                                    <div class="w-full sm:w-1/2 px-2">
                                        <div class="com-form-basic float form-style line-style">
                                            <input id="dlemail" type="email" placeholder="email">
                                            <label for="dlemail">
                                                Email
                                            </label>
                                        </div>
                                    </div>
                                    <div class="w-full sm:w-1/2 px-2">
                                        <div class="com-form-basic float form-style line-style">
                                            <input id="dlphone" type="text" placeholder="phone">
                                            <label for="dlphone">
                                                Phone No.
                                            </label>
                                        </div>
                                    </div>
                                    <div class="w-full px-2 py-6">
                                        <div class="flex flex-wrap gap-6 pl-4">
                                            {{-- กรณีเป็น Guest หรือเป็นสมาชิกที่ไม่เคยมี Tax address มาก่อน ไม่ต้องแสดงตัวเลือก Default address --}}
                                            <div class="flex">
                                                <input type="radio" name="address-choice" checked class="address-choice-style" id="address-choice-1" checked="">
                                                <label for="address-choice-1" class=" text-gray-500 ms-2 dark:text-neutral-400">Default address</label>
                                            </div>

                                            <div class="flex">
                                                <input type="radio" name="address-choice" class="address-choice-style" id="address-choice-2">
                                                <label for="address-choice-2" class=" text-gray-500 ms-2 dark:text-neutral-400">Same with shipping address</label>
                                            </div>

                                            <div class="flex">
                                                <input type="radio" name="address-choice" class="address-choice-style" id="address-choice-3">
                                                <label for="address-choice-3" class=" text-gray-500 ms-2 dark:text-neutral-400">New address</label>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="w-full px-2">
                                        <div class="com-form-basic float form-style line-style">
                                            <input id="dladdress" type="text" placeholder="address">
                                            <label for="dladdress">
                                                Address
                                            </label>
                                        </div>
                                    </div>
                                    <div class="w-full sm:w-1/2 px-2">
                                        <div class="com-form-basic float form-style line-style">
                                            <select name="dlprovince" id="province">
                                                <option value="0">Province 1</option>
                                                <option value="1">Province 2</option>
                                                <option value="2">Province 3</option>
                                            </select>
                                            <label for="dlprovince">
                                                Province
                                            </label>
                                        </div>
                                    </div>
                                    <div class="w-full sm:w-1/2 px-2">
                                        <div class="com-form-basic float form-style line-style">
                                            <select name="dldistrict" id="district">
                                                <option value="0">District 1</option>
                                                <option value="1">District 2</option>
                                                <option value="2">District 3</option>
                                            </select>
                                            <label for="dldistrict">
                                                District
                                            </label>
                                        </div>
                                    </div>
                                    <div class="w-full sm:w-1/2 px-2">
                                        <div class="com-form-basic float form-style line-style">
                                            <select name="dlsub-district" id="sub-district">
                                                <option value="0">Sub-District 1</option>
                                                <option value="1">Sub-District 2</option>
                                                <option value="2">Sub-District 3</option>
                                            </select>
                                            <label for="dlsub-district">
                                                Sub-District
                                            </label>
                                        </div>
                                    </div>

                                    <div class="w-full sm:w-1/2 px-2">
                                        <div class="com-form-basic float form-style line-style">
                                            <input id="dlpost" type="text" placeholder="post">
                                            <label for="dlpost">
                                                Postal Code
                                            </label>
                                        </div>
                                    </div>
                                    <div class="w-full p-2">
                                        <div class="flex items-start px-4 gap-x-3">
                                            <input id="defaultTax" type="checkbox" name="policy" class="checkbox-default !mt-[1px]" id="policy-checkbox">
                                            <label for="defaultTax" class="text-14">
                                                Default tax address
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <p class="font-semibold text-18 whitespace-nowrap mt-6 mb-2">
                    Payment method
                </p>
                <div class="cart-row border-none w-full">
                    <div class="address-selector flex flex-col gap-y-5 w-full">
                        <label for="payment-1" class="address-radio-label">
                            <input type="radio" name="payment-radio" class="address-radio-input" id="payment-1" {{ $i == 0 ? 'checked' : '' }}>
                            <div class="flex flex-col">
                                <div class="flex items-start">
                                    <p class="mr-4 font-bold tracking-wide">QR Code</p>
                                </div>
                            </div>
                        </label>
                        <label for="payment-2" class="address-radio-label">
                            <input type="radio" name="payment-radio" class="address-radio-input" id="payment-2" {{ $i == 0 ? 'checked' : '' }}>
                            <div class="flex flex-col">
                                <div class="flex items-start">
                                    <p class="mr-4 font-bold tracking-wide">Credit card (Full payment)</p>
                                </div>
                            </div>
                        </label>
                    </div>
                </div>
            </div>
            <div class="cart-summary mx-auto rounded-none sticky top-2">
                <div class="px-1">
                    <div class="smry-space -mx-4">
                        <div class="smry-wrapper">
                            <div class="smry-sm">
                                <h4 class="font-semibold">Summary</h4>
                            </div>
                        </div>
                        <div class="smry-wrapper">
                            <div class="smry-sm w-full">
                                <p>3 items in cart</p>
                                <hr class="mb-3 mt-1">
                            </div>
                        </div>
                        <div class="smry-wrapper flex-col">
                            @for ($i = 1; $i < 4; $i++)
                                <div class="smry-sm flex items-start gap-x-4 my-2">
                                    <div class="summary-item-img">
                                        <img src="{{ Module::asset('frontend:img/product' . $i . '.jpg') }}">
                                    </div>
                                    <div class="summary-item-detail">
                                        <p class="text-12 opacity-60">Category name 1</p>
                                        <p class="text-14 line-clamp-1">EZVIZ CCTV รุ่น H1C 1080P Full HD EZVIZ CCTV รุ่น H1C 1080P Full HD</p>
                                        <div class="flex gap-2 items-baseline">
                                            <p class="text-14 font-light">Qty : 1</p>
                                            <p class="text-14 font-bold">2,500 THB</p>
                                        </div>
                                    </div>
                                </div>
                            @endfor
                            <hr class="w-full my-3">
                        </div>
                        <div class="smry-wrapper">
                            <div class="smry-sm">Subtotal</div>
                            <div class="smry-sm">8,064 THB</div>
                        </div>
                        <div class="smry-wrapper opacity-60">
                            <div class="smry-sm text-12">Discount</div>
                            <div class="smry-sm text-12">90 THB</div>
                        </div>
                        <div class="smry-wrapper opacity-60">
                            <div class="smry-sm text-12">Shipping fee</div>
                            <div class="smry-sm text-12">90 THB</div>
                        </div>
                        <div class="smry-wrapper opacity-60">
                            <div class="smry-sm text-12">Vat 7%</div>
                            <div class="smry-sm text-12">90 THB</div>
                        </div>
                    </div>
                </div>

                <div class="smry-space -mt-4">
                    <div class="flex mt-2 flex-col justify-between items-center">
                        <div class="smry-wrapper w-full">
                            <div class="smry-xl font-bold text-20">Order total :</div>
                            <div class="smry-xl ">
                                <span class="font-bold text-20">18,000 </span> <span class="font-bold">THB</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="px-3 pb-6">
                    <button type="submit" class="button-secondary justify-center w-full -mt-1">สั่งซื้อ</button>
                </div>
            </div>
        </form>
    </div>
</div>
    <x-frontend::overlays.modal.template name="more-address" title="More address">
        <x-slot:content>
            <div class="address-selector flex flex-col gap-y-5">
                @for ($i = 3; $i < 6; $i++)
                    <label for="delivery-radio-{{ $i }}" class="address-radio-label">
                    <input type="radio" name="delivery-radio" class="address-radio-input" id="delivery-radio-{{ $i }}" {{ $i == 0 ? 'checked' : '' }}>
                    <div class="flex flex-col">
                        <div class="flex items-start">
                            <p class="mr-4 font-bold tracking-wide">Saijai Kohmahasanook</p>
                        </div>
                        <div class="flex flex-wrap items-baseline gap-x-2">
                            <p>1 Fortune Town 22nd Floor, Room 3P80-81, Ratchadapisek Road</p>
                            <p>Dindang</p>
                            <p>Bangkok</p>
                            <p>10400</p>
                        </div>
                        <div class="flex items-start">
                            <p>084 448 8842</p>
                        </div>
                        <div class="flex items-start">
                            <p>buyer@gmail.com</p>
                        </div>
                    </div>
                </label>
            @endfor
            </div>
            <button type="submit" class="button-secondary justify-center w-full mt-3" aria-label="Close" data-hs-overlay="#more-address">ยืนยัน</button>
        </x-slot>
        </x-frontend>
    @endsection