@extends('layout.base')
@section('page-title', 'guideline ')
@section('container')
    {{-- Typography --}}
    <div>
        <div class="mt-24">
            <h4 class="mt-24">--Heading</h4>
            <hr>
            <h1 class="h1">Heading1 40px</h1>
            <h2 class="h2">Heading2 38px</h2>
            <h3 class="h3">Heading3 32px</h3>
            <h4 class="h4">Heading4 24px</h4>
            <h5 class="h5">Heading5 20px</h5>
            <h6 class="h6">Heading6 18px</h6>
        </div>
        <div class="mt-24">
            <h4>--Text</h4>
            <hr>
            <h6 class="text-bi">--Base 16px lineheigh:150%</h6>
            <div class="row row-cols-md-2 d-flex mb-5">
                <p class="text-base-r">
                    <span class="btn btn-sm tag-info">text-base-r</span>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, quo doloribus fugit facilis aliquam recusandae.Consequatur perferendis nemo laboriosam placeat iusto ipsum minus repudiandae deserunt
                    fugiat molestiae,earumconsectetur iure!
                </p>
                <p class="text-base-m">
                    <span class="btn btn-sm tag-info">text-base-m</span>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, quo doloribus fugit facilis aliquam recusandae.Consequatur perferendis nemo laboriosam placeat iusto ipsum minus repudiandae deserunt
                    fugiat molestiae,earumconsectetur iure!
                </p>
            </div>
            <hr>
            <h6 class="text-bi">--Small 14px lineheigh:150%</h6>
            <div class="row row-cols-md-2 d-flex mb-5">
                <p class="text-sm-r">
                    <span class="btn btn-sm tag-info">text-sm-r</span>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, quo doloribus fugit facilis aliquam recusandae.Consequatur perferendis nemo laboriosam placeat iusto ipsum minus repudiandae deserunt
                    fugiat molestiae,earumconsectetur iure!
                </p>
                <p class="text-sm-m">
                    <span class="btn btn-sm tag-info">text-sm-m</span>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, quo doloribus fugit facilis aliquam recusandae.Consequatur perferendis nemo laboriosam placeat iusto ipsum minus repudiandae deserunt
                    fugiat molestiae,earumconsectetur iure!
                </p>
            </div>
            <hr>
            <h6>--Tiny 12px lineheigh:100%</h6>
            <div class="row row-cols-md-2 d-flex mb-5">
                <p class="text-xs-r">
                    <span class="btn btn-sm tag-info">text-xs-r 12px</span>
                    Lorem ipsum dolor sit amet.
                </p>
                <p class="text-xs-m">
                    <span class="btn btn-sm tag-info">text-xs-b 12px</span>
                    Lorem ipsum dolor sit amet.
                </p>
            </div>
        </div>
    </div>
    {{-- Tag & Button --}}
    <div>
        <div class="mt-24">
            <h4>--Buttons</h4>
            <hr>
            <h6>Size</h6>
            <div class="d-flex align-items-start mb-12 flex-row gap-3">
                <button class="btn btn-primary btn-sm">Button-sm</button>
                <button class="btn btn-primary">Button</button>
                <button class="btn btn-primary w-25">Button</button>
            </div>
            <h6>Content</h6>
            <div class="d-flex align-items-start mb-12 flex-row gap-3">
                <button class="btn btn-primary icon-arrow2-right"></button>
                <button class="btn btn-primary">Text</button>
                <button class="btn btn-primary icon d-flex align-items-center">
                    <span class="text-base-b text-center">With Icon</span>
                    <i class="icon-arrow-right"></i>
                </button>
            </div>
            <h6>Color</h6>
            <div class="d-flex align-items-start mb-12 gap-3">
                <div class="d-flex flex-column gap-2">
                    <button class="btn btn-primary">primary</button>
                    <span class="btn tag-primary">tag-primary</span>
                    <button class="btn btn-outline-primary">outline-primary</button>
                    <button class="btn btn-link">Link</button>
                </div>
                <div class="d-flex flex-column gap-2">
                    <button class="btn btn-secondary">secondary</button>
                    <span class="btn tag-secondary">tag-secondary</span>
                    <button class="btn btn-outline-secondary">outline-secondary</button>
                </div>
                <div class="d-flex flex-column gap-2">
                    <button class="btn btn-dark">Dark</button>
                    <span class="btn tag-dark">tag-Dark</span>
                    <button class="btn btn-outline-dark">outline-Dark</button>
                </div>
                <div class="d-flex flex-column gap-2">
                    <button class="btn btn-gray">gray</button>
                    <span class="btn tag-gray">Tag-gray</span>
                    <button class="btn btn-outline-gray">outline-gray</button>
                </div>
                <div class="d-flex flex-column gap-2">
                    <button class="btn btn-light">light</button>
                    <span class="btn tag-light">Tag-light</span>
                    <button class="btn btn-outline-light">outline-light</button>
                </div>
            </div>
            <div class="d-flex flex-cloumn align-items-start mb-12 gap-3">
                <div class="d-flex flex-column gap-2">
                    <button class="btn btn-success">success</button>
                    <span class="btn tag-success">Tag-success</span>
                    <button class="btn btn-outline-success">outline-success</button>
                </div>
                <div class="d-flex flex-column gap-2">
                    <button class="btn btn-warning">warning</button>
                    <span class="btn tag-warning">Tag-warning</span>
                    <button class="btn btn-outline-warning">outline-warning</button>
                </div>
                <div class="d-flex flex-column gap-2">
                    <button class="btn btn-danger">danger</button>
                    <span class="btn tag-danger">Tag-danger</span>
                    <button class="btn btn-outline-danger">outline-danger</button>
                </div>
                <div class="d-flex flex-column gap-2">
                    <button class="btn btn-info">info</button>
                    <span class="btn tag-info">Tag-info</span>
                    <button class="btn btn-outline-info">outline-info</button>
                </div>
            </div>
        </div>
    </div>
    {{-- Form & Input --}}
    <div class="my-24">
        <h4>--Form & Input</h4>
        <hr>
        <h6>Size</h6>
        <div class="d-flex align-items-start gap-6">
            <input class="form-control form-control-sm mb-3" id="" type="name" placeholder="姓名">
            <input class="form-control mb-3" id="" type="name" placeholder="姓名">
            <input class="form-control form-control-lg mb-3" id="" type="name" placeholder="姓名">
        </div>
        <h6>Content</h6>
        <div class="row row-cols-3">
            <div class="col">
                <input class="form-control form-control-lg mb-3" id="" type="name" placeholder="姓名">
            </div>
            <div class="col">
                <input class="form-control form-control-lg mb-6" id="dateInput" type="date">
            </div>
            <div class="col">
                <select class="form-select form-select-lg mb-6" aria-label=".form-select-lg">
                    <option selected>select</option>
                </select>
            </div>
            <div class="col">
                <input class="form-control" id="inputEmail" type="email" aria-describedby="emailHelp">
                <a class="text-primary" href="">Verify</a>
            </div>
            <div class="col">
                <input class="form-control" id="inputPassword5" type="password" aria-describedby="passwordHelpBlock">
                <div class="form-text" id="passwordHelpBlock">
                    Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special
                    characters, or emoji.
                </div>
            </div>
        </div>
    </div>
    {{-- Card --}}
    <div>
        <h4>--Cards</h4>
        <hr>
        <h6>Content</h6>
        {{-- Mobile2欄 / Pad3欄 / Latop4欄 --}}
        <div class="row row-cols-2 row-cols-md-6 gy-8">
            <x-product-default name="玩西着字林公怪吧木定冰間這日" tag="" tagText="" img="{{ asset('image/product_07.png') }}" price="1,2300" discount="-50%" oPriceShow="block" oPrice="1,2400">
            </x-product-default>
            <x-product-default name="玩西着字林公怪吧木定冰間這日" tag="card-tag-popular text-center" tagText="1" img="{{ asset('image/product_07.png') }}" price="1,2300" discount="-50%" oPriceShow="block" oPrice="1,2400">
            </x-product-default>
            <x-product-default name="玩西着字林公怪吧木定冰間這日" tag="card-tag-promo" tagText="promo -100%" img="{{ asset('image/product_07.png') }}" price="1,2300" discount="-50%" oPriceShow="block" oPrice="1,2400">
            </x-product-default>
            <x-product-sale name="玩西着字林公怪吧木定冰間這日" tag="" tagText="" img="{{ asset('image/product_07.png') }}" price="1,2300" discount="-50%" oPriceShow="block" oPrice="1,2400">
            </x-product-sale>
            <x-product-sale name="玩西着字林公怪吧木定冰間這日" tag="card-tag-popular text-center" tagText="1" img="{{ asset('image/product_07.png') }}" price="1,2300" discount="-50%" oPriceShow="block" oPrice="1,2400">
            </x-product-sale>
            <x-product-sale name="玩西着字林公怪吧木定冰間這日" tag="card-tag-promo" tagText="promo -100%" img="{{ asset('image/product_07.png') }}" price="1,2300" discount="-50%" oPriceShow="block" oPrice="1,2400">
            </x-product-sale>
        </div>
        <div class="row row-cols-2 row-cols-md-4 gy-8 mt-6">
            <div class="col">
                <x-product-sale name="玩西着字林公怪吧木定冰間這日" tag="card-tag-promo" tagText="promo -100%" img="{{ asset('image/product_07.png') }}" price="1,2300" discount="-50%" oPriceShow="block" oPrice="1,2400">
                </x-product-sale>
                <div class="d-flex gap-2 bg-white px-3 pb-3">
                    <button class="btn btn-primary w-100 d-flex justify-content-center align-items-center gap-2 px-3">
                        {{ __('robot.AddToCart') }}<i class="text-base-b icon-arrow-right"></i>
                    </button>
                    <button class="btn btn-outline-primary fs-4 icon-heart-active py-1 px-3"></button>
                </div>
            </div>
        </div>
    </div>
    </div>
    {{-- List --}}
    <div>
        <h4 class="text-bi">List Cards</h4>
        <hr>
        <div class="row d-flex flex-column">
            <div class="col">
                {{-- Notice Card --}}
                <div class="d-flex align-items-start flex-row gap-3 py-4 px-6">
                    <img class="col-4 col-md-1" src="{{ asset('image/product_01.jpg') }}" alt="">
                    <div class="flex-grow-1">
                        <p class="text-base-m">官方直營5月主打優惠$99起🔥雙效增量組合低至59折💚</p>
                        <p class="text-sm-r text-secondary">
                            官方直營5月主打優惠$99起🔥雙效增量組合低至59折💚折扣券瘋撒🧧關注領券折$60／滿$690折$120／滿$1,290折$220／滿$1,990享蝦幣20%回饋！
                        </p>
                        <p class="text-xs-r">2022/07/08</p>
                    </div>
                    <div class="tag tag-outline d-md-none d-xs-block">{{__('robot.More')}}</div>
                </div>
                <div class="d-flex align-items-start active-bg flex-row gap-3 py-4 px-6">
                    <img class="col-4 col-md-1" src="{{ asset('image/product_01.jpg') }}" alt="">
                    <div class="flex-grow-1">
                        <p class="text-base-m">官方直營5月主打優惠$99起🔥雙效增量組合低至59折💚</p>
                        <p class="text-sm-r text-secondary">
                            官方直營5月主打優惠$99起🔥雙效增量組合低至59折💚折扣券瘋撒🧧關注領券折$60／滿$690折$120／滿$1,290折$220／滿$1,990享蝦幣20%回饋！
                        </p>
                        <p class="text-xs-r">2022/07/08</p>
                    </div>
                    <a class="tag tag-outline d-md-none d-xs-block" href="">{{__('robot.More')}}</a>
                </div>
                {{-- Coin History Card --}}
                <div class="d-flex align-items-start border-bottom flex-row py-4 px-6">
                    <div class="flex-grow-1">
                        <p class="text-base-m">官方直營5月主打優惠$99起🔥雙效增量組合低至59折💚</p>
                        <p class="text-base-r">完成購買</p>
                        <p class="text-base-r text-secondary">2022/07/08</p>
                    </div>
                    <p class="text-warning">+300</p>
                </div>
                {{-- Order History Card --}}
                <div class="card">
                    {{-- Order History Card Title --}}
                    <div class="d-flex justify-content-between py-2">
                        <div class="text-base-b">
                            <span>Order Number: </span>
                            <span>02205197832014</span>
                        </div>
                        <div>
                            <span class="text-primary me-2 d-md-none d-xs-block">您的包裹已安排出貨</span>
                            <span class="tag tag-outline">Done</span>
                        </div>
                    </div>
                    {{-- Order History Card --}}
                    <div class="d-flex align-items-start border-bottom flex-row gap-3 py-4">
                        <img class="col-4 col-md-1" src="{{ asset('image/product_01.jpg') }}" alt="">
                        <div class="flex-grow-1">
                            <p class="text-base-m">Gel Dưỡng Ẩm Sáng Da Từ Hoa Anh Đào Đảo JejuGel...</p>
                            <div class="text-sm-r text-secondary">
                                <span>規格：</span><span>藍色</span>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="text-sm-r">
                                    <span>x</span>
                                    <span>2</span>
                                </div>
                                <div class="text-sm-r">
                                    <span>$</span>
                                    <span>82</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex align-items-start border-bottom flex-row gap-3 py-4">
                        <img class="col-4 col-md-1" src="{{ asset('image/product_01.jpg') }}" alt="">
                        <div class="flex-grow-1">
                            <p class="text-base-m">Gel Dưỡng Ẩm Sáng Da Từ Hoa Anh Đào Đảo JejuGel...</p>
                            <div class="text-sm-r text-secondary">
                                <span>規格：</span><span>藍色</span>
                            </div>
                            <div class="d-flex justify-content-between text-sm-r">
                                <div>
                                    <span>x</span>
                                    <span>2</span>
                                </div>
                                <div>
                                    <span>$</span>
                                    <span>82</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- Order History Card End --}}
                    <div class="d-flex justify-content-end py-2">
                        <span class="text-base-r">Total: </span><span class="text-danger h6">$820</span>
                    </div>
                </div>
                {{-- Profile Card --}}
                <div class="card">
                    {{-- Profile Title --}}
                    <div class="d-flex justify-content-between border-bottom">
                        <h4>Address</h4>
                        <div class="d-flex align-items-start gap-3">
                            <button class="btn btn-sm btn-primary">Add New</button>
                            <button class="btn btn-sm btn-primary">Add New Address</button>
                        </div>
                    </div>
                    {{-- Payment --}}
                    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center py-3">
                        <div class="col-12 col-md-2">
                            <span>玉山銀行</span>
                            <span class="tag tag-outline">Default</span>
                        </div>
                        <span>5512 34** **** 1234</span>
                        <div class="col-12 col-md-3 d-flex justify-content-md-end align-items-center">
                            <button class="btn btn-link">Delete</button>
                        </div>
                    </div>
                    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center py-3">
                        <div class="col-12 col-md-2">
                            <span>玉山銀行</span>
                        </div>
                        <span>5512 34** **** 1234</span>
                        <div class="col-12 col-md-3 d-flex justify-content-md-end align-items-center">
                            <button class="btn btn-sm tag-primary">設為預設</button>
                            <button class="btn btn-link">Delete</button>
                        </div>
                    </div>
                    {{-- Address Item --}}
                    <div class="d-flex justify-content-between align-items-start border-bottom py-4">
                        <div class="d-flex flex-column gap-3">
                            <div>
                                <span class="text-secondary">Name</span>
                                <span>User Name</span>
                            </div>
                            <div>
                                <span class="text-secondary">Mobile</span>
                                <span>0912345678</span>
                            </div>
                            <div>
                                <span class="text-secondary">Store</span>
                                <span class="tag tag-outline">7-11</span>
                                <span class="text-primary">中山吉林店</span>
                            </div>
                            <div>
                                <span class="text-secondary">Address</span>
                                <span>臺北市中山區台北市中山區吉林路390號</span>
                            </div>
                        </div>
                        <button class="btn btn-link">Delete</button>
                    </div>
                    <div class="d-flex justify-content-between align-items-start border-bottom py-4">
                        <div class="d-flex flex-column gap-3">
                            <div>
                                <span class="text-secondary">Name</span>
                                <span>User Name</span>
                            </div>
                            <div>
                                <span class="text-secondary">Mobile</span>
                                <span>0912345678</span>
                            </div>
                            <div>
                                <span class="text-secondary">Store</span>
                                <span class="tag tag-outline">7-11</span>
                                <span class="text-primary">中山吉林店</span>
                            </div>
                            <div>
                                <span class="text-secondary">Address</span>
                                <span>臺北市中山區台北市中山區吉林路390號</span>
                            </div>
                        </div>
                        <button class="btn btn-link">Delete</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- 暫時用不到 --}}
    {{-- 原先的Flash Card --}}
    <div class="card p-lg-8 mt-10 p-0">
        <!-- Flash Title -->
        <div class="d-flex align-items-center p-lg-0 mb-4 flex-row px-6 py-3">
            <h4 class="fs-lg-4 fs-5 text-bi m-0">FLASH SLAE</h4>
            <div class="d-flex align-items-center ms-4 gap-lg-2 flex-row gap-1">
                <h6 class="l-index__time-counter">00</h6>
                <span>:</span>
                <h6 class="l-index__time-counter">00</h6>
                <span>:</span>
                <h6 class="l-index__time-counter">00</h6>
            </div>
            <a class="ms-auto btn btn-link p-0" href="">{{__('robot.More')}}</a>
        </div>
        <!-- Flash Content -->
        <div class="d-flex flex-column flex-lg-row justify-content-between gap-lg-8 flex-wrap gap-4">
            @foreach ($flashlist as $fl)
                <x-flash-card :name="$fl['name']" :store="$fl['store']" :price="$fl['price']" :process="$fl['process']" :processText="$fl['processText']" :img="$fl['img']"></x-flash-card>
            @endforeach
        </div>
    </div>
    {{-- category B 暫時用不到 --}}
    @foreach ($eventlist as $el)
        <x-title href="{{ route('event', ['event_name' => $el['name']]) }}" text="{{ $el['name'] }}"></x-title>
        <div class="l-index__sort d-flex flex-column flex-xl-row align-items-center shadow-sm">
            <a class="w-100 w-xl-50" href="{{ route('event', ['event_name' => $el['name']]) }}">
                <img class="img" src="{{ asset('image/category-banner.jpg') }}" alt="">
            </a>
            <div class="w-100 w-xl-50 row row-cols-3">
                <div class="swiper index__sort slideSort">
                    <div class="swiper-wrapper">
                        @foreach ($el['stock'] as $st)
                            @if (!empty($st['preferential_price']))
                                <x-product-sale id="{{ $st['id'] }}" name="{{ $st['name'] }}" tag="card-tag-promo" tagText="promo -100%" img="{{ $st['thumbnail'] ?? asset('image/product_07.png') }}"
                                    price="{{ number_format($st['preferential_price']) }}" discount="-25%" oPriceShow="" oPrice="{{ number_format($st['retail_price']) }}">
                                </x-product-sale>
                            @else
                                <x-product-default id="{{ $st['id'] }}" name="{{ $st['name'] }}" tag="card-tag-promo" tagText="promo -100%" img="{{ $st['thumbnail'] ?? asset('image/product_02.jpg') }}"
                                    price="{{ number_format($st['retail_price']) }}" discount="-25%" oPriceShow="" oPrice="{{ number_format($st['retail_price']) }}">
                                </x-product-default>
                            @endif
                        @endforeach
                    </div>
                    <div class="swiper-button-next circle"></div>
                    <div class="swiper-button-prev circle"></div>
                </div>
            </div>
        </div>
    @endforeach
@endsection