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

@section('content')
<div class="bg-top-sub-gradient">
        @php
            $breadcrumbData =[
                [
                    'name' => 'home',
                    'title' => '',
                    'url' => '/',
                ],
                [
                    'name' => 'products',
                    'title' => 'Product',
                    'url' => 'product',
                ],
                [
                    'name' => 'product',
                    'title' => 'กล้องวงจรปิด',
                    'url' => 'product',
                ],
                [
                    'name' => 'product-detail',
                    'title' => 'EZVIZ CCTV รุ่น H1C 1080P Full HD Smart Home',
                    'url' => '#',
                ],
                ];
        @endphp 
        <div class="container p-4">
            <x-frontend::navigation.breadcrumbs.template :breadcrumbDatas=$breadcrumbData></x-frontend>
        </div>

    <div class="container px-4 -mt-4">
        <div class="flex flex-wrap -mx-4 lg:-mx-6 relative">
            <div class="w-full lg:w-5/12 p-4 lg:p-6">

                @php
                    $slideDatas = [
                            [
                                'type' => 'image',
                                'src' => 'https://somconnect.dev-new.nd.co.th//modules/frontend/img/product-detail1.jpg',
                                'alt' => 'thumbnail Slide',
                                'url' => '#',
                            ],
                            [
                                'type' => 'image',
                                'src' => 'https://somconnect.dev-new.nd.co.th//modules/frontend/img/product-detail2.jpg',
                                'alt' => 'thumbnail Slide',
                                'url' => '#',
                            ],
                            [
                                'type' => 'image',
                                'src' => 'https://somconnect.dev-new.nd.co.th//modules/frontend/img/product-detail3.jpg',
                                'alt' => 'thumbnail Slide',
                                'url' => '#',
                            ],
                            [
                                'type' => 'image',
                                'src' => 'https://somconnect.dev-new.nd.co.th//modules/frontend/img/product-detail4.jpg',
                                'alt' => 'thumbnail Slide',
                                'url' => '#',
                            ],
                            [
                                'type' => 'image',
                                'src' => 'https://somconnect.dev-new.nd.co.th//modules/frontend/img/product-detail5.jpg',
                                'alt' => 'thumbnail Slide',
                                'url' => '#',
                            ],
                            [
                                'type' => 'image',
                                'src' => 'https://somconnect.dev-new.nd.co.th//modules/frontend/img/product-detail6.jpg',
                                'alt' => 'thumbnail Slide',
                                'url' => '#',
                            ],
                            [
                                'type' => 'image',
                                'src' => 'https://somconnect.dev-new.nd.co.th//modules/frontend/img/product-detail3.jpg',
                                'alt' => 'thumbnail Slide',
                                'url' => '#',
                            ],
                            [
                                'type' => 'image',
                                'src' => 'https://somconnect.dev-new.nd.co.th//modules/frontend/img/product-detail1.jpg',
                                'alt' => 'thumbnail Slide',
                                'url' => '#',
                            ],
                            [
                                'type' => 'image',
                                'src' => 'https://somconnect.dev-new.nd.co.th//modules/frontend/img/product-detail2.jpg',
                                'alt' => 'thumbnail Slide',
                                'url' => '#',
                            ],
                    ];   
                @endphp

                <div class="com-carousel-thumbnail pb-6 sticky top-5">
                    <section id="main-carousel" class="splide no-drag relative">
                        <div class="splide__track">
                            <ul class="splide__list">
                                {{-- First Slide --}}
                                <li class="splide__slide">
                                    <div class="slide-item rounded-2xl overflow-hidden shadow-md relative">
                                        <div class="zoomify">
                                            <img class="starting-image" class="rounded-2xl" src="https://somconnect.dev-new.nd.co.th//modules/frontend/img/product-detail1.jpg" alt="Alternate Text">
                                        </div>
                                        <div class="main-carousel-360">
                                            <svg width="46" height="43" viewBox="0 0 46 43" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <rect x="0.199219" y="0.460938" width="45.3578" height="42.118" rx="4.85976" fill="#DEB841"/>
                                                <path d="M26.118 13.4207C26.118 12.9911 25.9473 12.579 25.6435 12.2752C25.3397 11.9715 24.9277 11.8008 24.498 11.8008H21.2582C20.8286 11.8008 20.4165 11.9715 20.1127 12.2752C19.8089 12.579 19.6383 12.9911 19.6383 13.4207V23.1402C19.6383 23.5699 19.8089 23.9819 20.1127 24.2857C20.4165 24.5895 20.8286 24.7601 21.2582 24.7601H24.498C24.9277 24.7601 25.3397 24.5895 25.6435 24.2857C25.9473 23.9819 26.118 23.5699 26.118 23.1402V19.9004C26.118 19.4708 25.9473 19.0587 25.6435 18.7549C25.3397 18.4511 24.9277 18.2805 24.498 18.2805H19.6383M8.29883 11.8008H12.3486C12.9931 11.8008 13.6111 12.0568 14.0668 12.5125C14.5225 12.9682 14.7785 13.5862 14.7785 14.2307V15.8506C14.7785 16.495 14.5225 17.1131 14.0668 17.5688C13.6111 18.0245 12.9931 18.2805 12.3486 18.2805M12.3486 18.2805H9.91875M12.3486 18.2805C12.9931 18.2805 13.6111 18.5365 14.0668 18.9922C14.5225 19.4479 14.7785 20.0659 14.7785 20.7103V22.3303C14.7785 22.9747 14.5225 23.5928 14.0668 24.0485C13.6111 24.5041 12.9931 24.7601 12.3486 24.7601H8.29883M8.29883 29.6199C8.29883 32.3041 14.8271 34.4797 22.8781 34.4797C30.9291 34.4797 37.4574 32.3041 37.4574 29.6199M30.9777 15.0406V21.5203C30.9777 22.3796 31.3191 23.2036 31.9267 23.8112C32.5342 24.4188 33.3583 24.7601 34.2176 24.7601C35.0768 24.7601 35.9009 24.4188 36.5085 23.8112C37.1161 23.2036 37.4574 22.3796 37.4574 21.5203V15.0406C37.4574 14.1814 37.1161 13.3573 36.5085 12.7497C35.9009 12.1421 35.0768 11.8008 34.2176 11.8008C33.3583 11.8008 32.5342 12.1421 31.9267 12.7497C31.3191 13.3573 30.9777 14.1814 30.9777 15.0406Z" stroke="black" stroke-width="1.61992" stroke-linecap="round" stroke-linejoin="round"/>
                                            </svg>
                                        </div>
                                    </div>
                                </li>
                                @foreach ($slideDatas as $item)
                                    <li class="splide__slide">
                                        <div class="slide-item rounded-2xl overflow-hidden shadow-md">
                                            <div class="zoomify">
                                                <img class="starting-image" class="rounded-2xl" src="{{ $item['src'] }}" alt="{{ $item['alt'] }}">
                                            </div>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                            <ul class="splide__pagination --prevent-on-load-init" role="tablist"></ul>
                            
                        </div>
                        <div class="main-carousel-brand">
                            <img src="{{ Module::asset('frontend:img/brand1.png') }}">
                        </div>
                        
                    </section>
                    <section id="thumbnail-carousel" class="splide mt-6">
                        <div class="splide__track">
                            <ul class="splide__list">
                                {{-- First Slide --}}
                                <li class="splide__slide rounded-2xl overflow-hidden flex items-center ">
                                    <div class="slide-item">
                                        <img class="rounded-2xl" src="https://somconnect.dev-new.nd.co.th//modules/frontend/img/product-detail1.jpg" alt="Alternate Text">
                                    </div>
                                </li>
                                @foreach ($slideDatas as $item)
                                    <li class="splide__slide rounded-2xl overflow-hidden flex items-center ">
                                        <div class="slide-item">
                                            <img class="rounded-2xl" src="{{ $item['src'] }}" alt="{{ $item['alt'] }}">
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                        <ul class="splide__pagination --prevent-on-load-init" role="tablist"></ul>
                    </section>
                </div>
            </div>
            <div class="w-full lg:w-7/12 p-4 lg:p-6">
                <h1 class="text-24 lg:text-36 font-bold leading-6 lg:leading-10">EZVIZ CCTV รุ่น H1C 1080P Full HD Smart Home</h1>
                <p class="text-14 lg:text-16 2xl:text-18 mt-2">รุ่นใหม่ล่าสุด ความคมชัด 1080 Full HDกล้องวงจรปิด Wi-Fi ภายในอาคาร Wi-Fi PT Camera H.265 2MP 2.8 mm มาพร้อม</p>
                <div class="product-card-extra">
                    <img class="flex-[0_0_20px] lg:flex-[0_0_26px]" src="{{ Module::asset('frontend:img/warranty.svg') }}" alt="2 years waranty">
                    <p>2 years waranty</p>
                </div>
                <div class="product-detail-badge">
                    <div class="product-card-badge-item badge-new">New</div>
                    <div class="product-card-badge-item badge-best">best price</div>
                    <div class="product-card-badge-item badge-flash">flash sale</div>
                    <x-frontend::overlays.modal.modal-button name="special" class="!py-2 !px-4 product-card-tag !static">
                        <x-slot:button>
                            <div>Free special gift</div>
                        </x-slot>
                    </x-frontend>
                </div>
                <div class="py-4 flex items-baseline gap-x-3">
                    <h2 class="price-text has-discount">2,500 THB</h2>
                    <h3 class="text-gray-400 line-through font-light"> 2,690 THB</h3>
                </div>
                <div class="lg:py-4">
                    <div class="number-wrapper" data-hs-input-number="">
                        <div class="flex items-center gap-x-1.5">
                          <button type="button" class="number-button" tabindex="-1" aria-label="Decrease" data-hs-input-number-decrement="">
                            <svg class="shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                              <path d="M5 12h14"></path>
                            </svg>
                          </button>
                          <input class="number-input" style="-moz-appearance: textfield;" type="number" aria-roledescription="Number field" value="0" data-hs-input-number-input="">
                          <button type="button" class="number-button" tabindex="-1" aria-label="Increase" data-hs-input-number-increment="">
                            <svg class="shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                              <path d="M5 12h14"></path>
                              <path d="M12 5v14"></path>
                            </svg>
                          </button>
                        </div>
                    </div>
                </div>
                <div class="pt-6 pb-2 lg:py-6 flex items-center gap-x-4">
                    <a href="#" class="button-secondary justify-center py-4 w-1/2 !bg-opacity-50 text-18 font-normal">
                        <span>ใส่รถเข็น</span>
                    </a>
                    <x-frontend::overlays.modal.modal-button name="buy-and-login" class="button-secondary justify-center py-4 w-1/2 text-18 font-normal">
                        <x-slot:button>
                        <span>ซื้อเลย</span>
                    </x-slot>
                    </x-frontend>
                    
                </div>
                <div class="py-4 flex items-center gap-x-6">
                    <button type="button" class="flex items-center gap-x-2">
                        <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M6.5 2L10 4L13 2H16L18 3L19 5L18.5 8L16 12L9.5 17.5L4.5 12.5L1.5 7L2.5 2.5L6.5 2Z" fill="white"/>
                            <path d="M10 18.9984L8.55 17.6984C6.86667 16.1818 5.475 14.8734 4.375 13.7734C3.275 12.6734 2.4 11.6858 1.75 10.8104C1.1 9.9351 0.646 9.1311 0.388 8.39844C0.13 7.66577 0.000666667 6.91577 0 6.14844C0 4.58177 0.525 3.27344 1.575 2.22344C2.625 1.17344 3.93333 0.648437 5.5 0.648438C6.36667 0.648438 7.19167 0.831771 7.975 1.19844C8.75833 1.5651 9.43333 2.08177 10 2.74844C10.5667 2.08177 11.2417 1.5651 12.025 1.19844C12.8083 0.831771 13.6333 0.648438 14.5 0.648438C16.0667 0.648438 17.375 1.17344 18.425 2.22344C19.475 3.27344 20 4.58177 20 6.14844C20 6.9151 19.871 7.6651 19.613 8.39844C19.355 9.13177 18.9007 9.93577 18.25 10.8104C17.5993 11.6851 16.7243 12.6728 15.625 13.7734C14.5257 14.8741 13.134 16.1824 11.45 17.6984L10 18.9984ZM10 16.2984C11.6 14.8651 12.9167 13.6361 13.95 12.6114C14.9833 11.5868 15.8 10.6951 16.4 9.93644C17 9.17777 17.4167 8.50244 17.65 7.91044C17.8833 7.31844 18 6.7311 18 6.14844C18 5.14844 17.6667 4.3151 17 3.64844C16.3333 2.98177 15.5 2.64844 14.5 2.64844C13.7167 2.64844 12.9917 2.8691 12.325 3.31044C11.6583 3.75177 11.2 4.31444 10.95 4.99844H9.05C8.8 4.3151 8.34167 3.75277 7.675 3.31144C7.00833 2.8701 6.28333 2.6491 5.5 2.64844C4.5 2.64844 3.66667 2.98177 3 3.64844C2.33333 4.3151 2 5.14844 2 6.14844C2 6.73177 2.11667 7.31944 2.35 7.91144C2.58333 8.50344 3 9.17844 3.6 9.93644C4.2 10.6944 5.01667 11.5861 6.05 12.6114C7.08333 13.6368 8.4 14.8658 10 16.2984Z" fill="currentColor"/>
                        </svg>
                        <p>My Favorite</p>
                    </button>
                    <div class="flex items-center gap-x-2">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M21.544 11.045C21.848 11.471 22 11.685 22 12C22 12.316 21.848 12.529 21.544 12.955C20.178 14.871 16.689 19 12 19C7.31 19 3.822 14.87 2.456 12.955C2.152 12.529 2 12.315 2 12C2 11.684 2.152 11.471 2.456 11.045C3.822 9.129 7.311 5 12 5C16.69 5 20.178 9.13 21.544 11.045Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M15 12C15 11.2044 14.6839 10.4413 14.1213 9.87868C13.5587 9.31607 12.7956 9 12 9C11.2044 9 10.4413 9.31607 9.87868 9.87868C9.31607 10.4413 9 11.2044 9 12C9 12.7956 9.31607 13.5587 9.87868 14.1213C10.4413 14.6839 11.2044 15 12 15C12.7956 15 13.5587 14.6839 14.1213 14.1213C14.6839 13.5587 15 12.7956 15 12Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        <p>110 View</p>
                    </div>
                </div>
                <div class="my-4 px-4 pt-4 pb-12 border border-secondary rounded-2xl">
                    <h4 class="mb-4">Must have product</h4>
                    <hr>
                    <div class="com-carousel-multi splide splide-related-product pt-6">
                        <div class="splide__track carousel-multi-wrapper">
                            <div class="splide__list carousel-multi-list"
                                data-cover-image="{{ Module::asset('frontend:img/category-example.jpg') }}"
                                data-cover-url="#">
                                @for ($i = 1; $i < 5; $i++)
                                    <div class="splide__slide carousel-multi-slide">
                                        <div class="carousel-multi-item">
                                            <x-frontend::card.product-card.template link="product-detail"
                                                productImage="{{ Module::asset('frontend:img/product' . $i . '.jpg') }}"
                                                productName="IMOU Smart IP Camera 3.6mm (REX 2D) GK2DP-3C0W ประกัน 2 ปี"
                                                productSubtitle="Lens : 3.6mm / IR Distance : 10m Audio Communication : Two-Way"
                                                brandImage="{{ Module::asset('frontend:img/brand.png') }}"
                                                brandName="EZVIZ" :badges="[
                                                    [
                                                        'name' => 'new',
                                                        'title' => 'New',
                                                    ],
                                                    [
                                                        'name' => 'Best price',
                                                        'title' => 'New',
                                                    ],
                                                    [
                                                        'name' => 'flash',
                                                        'title' => 'Flash sale',
                                                    ],
                                                ]" tag="Free special gift"
                                                price="2,500" discountPrice="" :flashSale=false progressPercentage="25"
                                                progressText="1 sold" warranty="2 years warranty" addToCartLink="#">
                                                </x-frontend>
                                        </div>
                                    </div>
                                @endfor
                            </div>
                        </div>
                        <ul class="splide__pagination --prevent-on-load-init" role="tablist">
                        </ul>
                    </div>
                </div>
            </div>


        </div>
       
        <div class="py-4">
            <div class="border-b border-gray-200 dark:border-neutral-700">
                <nav class="flex gap-x-1" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
                  <button type="button" class="hs-tab-active:border-secondary hs-tab-active:text-dark detailed-tab-style active" id="product-detail-item-1" aria-selected="true" data-hs-tab="#product-detail-1" aria-controls="product-detail-1" role="tab">
                    รายละเอียด
                  </button>
                  <button type="button" class="hs-tab-active:border-secondary hs-tab-active:text-dark detailed-tab-style" id="product-detail-item-2" aria-selected="false" data-hs-tab="#product-detail-2" aria-controls="product-detail-2" role="tab">
                    คุณสมบัติ
                  </button>
                </nav>
              </div>
              
              <div class="mt-3">
                <div id="product-detail-1" class="py-4" role="tabpanel" aria-labelledby="product-detail-item-1">
                  <div class="text-editor">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
                    <br>
                    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <br>
                    <h3 class="font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
                    <br>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
                    <br>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
                  </div>
                </div>
                <div id="product-detail-2" class="hidden" role="tabpanel" aria-labelledby="product-detail-item-2">
                    <div class="specification-table">
                        <div class="specification-row">
                            <div class="specification-title">Category</div>
                            <div class="specification-detail">Security Camera</div>
                        </div>
                        <div class="specification-row">
                            <div class="specification-title">Stock</div>
                            <div class="specification-detail">5</div>
                        </div>
                        <div class="specification-row">
                            <div class="specification-title">Brand</div>
                            <div class="specification-detail">Ezviz(อีซี่วิซ)</div>
                        </div>
                        <div class="specification-row">
                            <div class="specification-title">Model</div>
                            <div class="specification-detail">C1C</div>
                        </div>
                        <div class="specification-row">
                            <div class="specification-title">BUS</div>
                            <div class="specification-detail">3200MHz</div>
                        </div>
                        <div class="specification-row">
                            <div class="specification-title">Memory Type</div>
                            <div class="specification-detail">DDR4</div>
                        </div>
                        <div class="specification-row">
                            <div class="specification-title">Warranty Duration</div>
                            <div class="specification-detail">2 Years</div>
                        </div>
                        <div class="specification-row">
                            <div class="specification-title">Warranty Type</div>
                            <div class="specification-detail">Supplier Warranty</div>
                        </div>
                        <div class="specification-row">
                            <div class="specification-title">Dimension (L x W x H)</div>
                            <div class="specification-detail">0.60 x 13.70 x 4.40 cm</div>
                        </div>
                        <div class="specification-row">
                            <div class="specification-title">Ships From</div>
                            <div class="specification-detail">Bangkok, Thailand</div>
                        </div>
                    </div>
                    
                </div>
              </div>
        </div>
    </div>
    <x-frontend::overlays.modal.template name="buy-and-login" title="Login">
        <x-slot:content>
            <div class="mx-auto max-w-xl px-4 xl:px-8">
                <div class="flex items-center justify-center py-4">
                    <div class="px-4 pt-4 text-center text-14">
                        <a class="social-login-button facebook-bg">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-6" fill="currentColor" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64h98.2V334.2H109.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H255V480H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"/></svg>
                        </a>
                    </div>
                    <div class="px-4 pt-4 text-center text-14">
                        <a class="social-login-button google-bg">
                            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="w-6" viewBox="0 0 48 48" class="LgbsSe-Bz112c"><g><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path><path fill="none" d="M0 0h48v48H0z"></path></g></svg>
                        </a>
                    </div>
                </div>
                <p class="text-center text-13">Login instantly by connecting to your social media account.</p>
                <div class="separator-x">or</div>
                <p class="text-center font-bold">Login with email</p>
                <form action="member-profile" class="flex flex-wrap -mx-2 transparent-label form-style">
                    <div class="w-full px-2">
                        <x-frontend::form.input type='email' id='email' title='Email' class="line-style"></x-frontend>
                    </div>
                    <div class="w-full px-2">
                        <x-frontend::form.input type='password' id='password' title='Password' class="line-style"></x-frontend>
                    </div>
                </form>
                <form class="w-full px-2 pb-6 text-right">
                    <x-frontend::overlays.modal.modal-button name="forgot" class="ml-auto inline-block">
                        <x-slot:button>
                            <div class="mt-2 text-14 text-right dark:text-white font-bold">Forgot Password ?</div>
                        </x-slot>
                    </x-frontend>
                    
                </form>
                <div class="flex flex-wrap -mx-2">
                    <div class="w-full px-2 flex flex-col gap-y-3">
                        <a href="product-detail">
                            <button class="button-secondary w-full justify-center" type="submit">
                                เข้าสู่ระบบ
                            </button>
                        </a>
                        <a href="cart">
                            <button class="button-secondary !bg-opacity-50 w-full justify-center" type="submit">
                                ชำระเงิน (ผู้ใช้ทั่วไป)
                            </button>
                        </a>
                    </div>
                    <div class="w-full px-2 pt-4 text-center text-14">
                        <p>Don’t have an account ?
                            <a href="register" class="font-bold ml-1">Register</a>
                        </p>
                    </div>
                </div>
            </div>
        </x-slot>
    </x-frontend>
    <x-frontend::overlays.modal.template name="forgot" title="Reset password">
        <x-slot:content>
                <form action="forget-verify" class="mx-auto max-w-xl">
                    <div class="flex flex-wrap -mx-2 profile-edit-modal">
                        <div class="w-full px-2">
                            <x-frontend::form.input type='email' id='forgot-email' title='Email' class="line-style"></x-frontend>
                        </div>
                        <div class="w-full px-2 pt-4 text-right">
                            <a href="forget-verify">
                                <button type="button" class="button-secondary w-full justify-center">
                                    ยืนยัน
                                </button>
                            </a>
                        </div>
                    </div>
                </form>
        </x-slot>
    </x-frontend>
    <x-frontend::overlays.modal.template name="special" title="">
        <x-slot:content>
            <div class=" px-4">
                <div class="flex items-center gap-x-4 -mt-4">
                    <h2 class="text-primary font-bold">
                        Free! special gifts
                    </h2>
                    <svg width="32" height="31" viewBox="0 0 32 31" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M29.25 8.53338H23.9058C23.9652 8.4831 24.0261 8.43435 24.084 8.38103C24.5467 7.96997 24.9196 7.46787 25.1794 6.90612C25.4391 6.34437 25.5802 5.73506 25.5938 5.11631C25.6138 4.4394 25.4952 3.76555 25.2454 3.13612C24.9955 2.50669 24.6197 1.93497 24.1409 1.45604C23.6621 0.97712 23.0905 0.601106 22.4612 0.351086C21.8318 0.101066 21.158 -0.0176834 20.4811 0.00212693C19.8621 0.0154598 19.2525 0.156428 18.6905 0.416208C18.1284 0.675987 17.6261 1.04899 17.2148 1.51185C16.6459 2.17143 16.1833 2.91568 15.8438 3.71779C15.5042 2.91568 15.0416 2.17143 14.4727 1.51185C14.0614 1.04899 13.5591 0.675987 12.997 0.416208C12.435 0.156428 11.8254 0.0154598 11.2064 0.00212693C10.5295 -0.0176834 9.85568 0.101066 9.22633 0.351086C8.59697 0.601106 8.02536 0.97712 7.54658 1.45604C7.06779 1.93497 6.69195 2.50669 6.44212 3.13612C6.19229 3.76555 6.07374 4.4394 6.09375 5.11631C6.10729 5.73506 6.24836 6.34437 6.50813 6.90612C6.7679 7.46787 7.14079 7.96997 7.60348 8.38103C7.66137 8.43131 7.7223 8.48006 7.78172 8.53338H2.4375C1.79103 8.53338 1.17105 8.79018 0.713927 9.2473C0.256807 9.70442 0 10.3244 0 10.9709V15.8459C0 16.4923 0.256807 17.1123 0.713927 17.5694C1.17105 18.0266 1.79103 18.2834 2.4375 18.2834V28.0334C2.4375 28.6798 2.69431 29.2998 3.15143 29.7569C3.60855 30.2141 4.22853 30.4709 4.875 30.4709H26.8125C27.459 30.4709 28.079 30.2141 28.5361 29.7569C28.9932 29.2998 29.25 28.6798 29.25 28.0334V18.2834C29.8965 18.2834 30.5165 18.0266 30.9736 17.5694C31.4307 17.1123 31.6875 16.4923 31.6875 15.8459V10.9709C31.6875 10.3244 31.4307 9.70442 30.9736 9.2473C30.5165 8.79018 29.8965 8.53338 29.25 8.53338ZM19.043 3.1267C19.236 2.91367 19.471 2.74282 19.7331 2.62485C19.9953 2.50688 20.279 2.44434 20.5664 2.44115H20.6411C20.978 2.44326 21.3111 2.51259 21.6209 2.64509C21.9307 2.7776 22.2109 2.9706 22.4452 3.21279C22.6794 3.45499 22.863 3.7415 22.9851 4.05554C23.1072 4.36959 23.1654 4.70484 23.1562 5.04166C23.1531 5.32911 23.0905 5.61281 22.9725 5.87496C22.8546 6.13711 22.6837 6.37207 22.4707 6.5651C21.025 7.84478 18.6255 8.29572 17.1387 8.45416C17.3215 6.84084 17.8242 4.49627 19.043 3.1267ZM9.27926 3.18154C9.75144 2.70941 10.3909 2.44278 11.0586 2.43963H11.1333C11.4207 2.44282 11.7044 2.50536 11.9666 2.62333C12.2287 2.7413 12.4637 2.91215 12.6567 3.12517C13.9349 4.56939 14.3858 6.96424 14.5443 8.44502C13.0635 8.29267 10.6686 7.83564 9.22441 6.55748C9.01139 6.36445 8.84054 6.12949 8.72257 5.86734C8.6046 5.60519 8.54206 5.3215 8.53887 5.03404C8.52942 4.69162 8.58963 4.35086 8.71586 4.03242C8.84208 3.71397 9.03169 3.42449 9.27316 3.18154H9.27926ZM2.4375 10.9709H14.625V15.8459H2.4375V10.9709ZM4.875 18.2834H14.625V28.0334H4.875V18.2834ZM26.8125 28.0334H17.0625V18.2834H26.8125V28.0334ZM29.25 15.8459H17.0625V10.9709H29.25V15.8459Z" fill="#225EC4"/>
                    </svg>
                </div>
                <div class="text-editor">
                    <p>Lorem ipsum dolor sit amet consectetur. Eget feugiat congue at arcu hac imperdiet. Adipiscing massa cras lobortis scelerisque magna nunc pellentesque.</p>
                    <p class="font-semibold underline">Lorem ipsum dolor sit amet consectetur</p>
                    <ul>
                        <li>Aenean vel nisi in leo blandit eleifend non a velit.</li>
                        <li>Etiam facilisis justo a luctus sagittis.</li>
                        <li>Maecenas a tortor efficitur, finibus mauris vel, molestie tortor.</li>
                        <li>Fusce efficitur turpis feugiat, aliquam ligula quis, feugiat urna.</li>
                        <li>Suspendisse et lacus at arcu tincidunt venenatis quis sit amet ipsum.</li>
                    </ul>
                    <div class="space-y-4 mt-8">
                        <img src="{{ Module::asset('frontend:img/gift1.jpg') }}" >
                        <img src="{{ Module::asset('frontend:img/gift2.jpg') }}" >
                    </div>
                </div>
            </div>
        </x-slot>
    </x-frontend>
</div>
@endsection