@extends('layout.base')
@section('page-title', $data['name'] . ' ')
@section('page-js-script')
    <script>
        const il = {{ Js::from($data['il']) }};
        const pl = {{ Js::from($data['pl']) }};
        let has_inv = {{ $data['has_inv'] ? 1 : 0 }};
        let min_buy_num = {{ $data['min_buy_num'] }};

        var item = {
            "stock_id": "{{ $data['id'] }}",
            "stock_unit_price": "{{ $data['retail'] }}",
            "stock_price": "{{ $data['price'] }}"
        };

        $(function() {
            if (!has_inv) {
                $('#addCart').attr('disabled', true);
                $('#buyNum').attr('disabled', true);
            }
            calculate();
            $('#btn_show_spec').click(function(e) {
                $('#productSpec').toggleClass('is-show');
                $(this).find('i').toggleClass('icon-arrow-up icon-arrow-down');

            });
            ///////////////////// 商品 /////////////////////
            /* 數量增加 */
            $('#add').click(function() {
                if (!has_inv) {
                    return;
                }
                var orig = parseInt($('#buyNum').val()); // 原數量
                var num = orig + 1;
                $('#buyNum').val(num);
                calculate();
            })
            /* 數量減少 */
            $('#min').click(function() {
                if (!has_inv) {
                    return;
                }
                var orig = parseInt($('#buyNum').val()); // 原數量
                if (orig <= 1 || orig <= min_buy_num) return;
                var num = orig - 1;
                $('#buyNum').val(num);
                calculate();
            })
            /* 數量輸入框 */
            $('#buyNum').change(function() {
                if (empty(this.value)) this.value = 1;

                var num = parseInt(this.value); // 數量
                if (num <= 0) {
                    this.value = 1;
                };
                if (num < min_buy_num) {
                    this.value = min_buy_num;
                };

                calculate();
            });
            /* 加入追蹤清單 */
            $('#addTrack').click(function() {
                @if (empty(session()->get('user_id')))
                    window.location.href = "{{ route('login') }}";
                    return;
                @endif
                /*
                $.ajax({
                    url: '{{ url('ajax/add_track') }}',
                    data: {
                        stock_id: item.id
                    },
                    success: function(resp, textStatus, jqXHR) {
                        // console.log(resp);
                        if (resp.status == "success") {
                            alert("{{ __('basic.ProductAddedtoTracking') }}");
                        } else {
                            alert(resp.message);
                        }
                    }
                });
                */
                alert("{{ __('basic.ProductAddedtoTracking') }}");
            });
            /* 加入購物車 */
            $('#addCart').click(function() {
                @if (empty(session()->get('user_id')))
                    window.location.href = "{{ route('login') }}";
                    return;
                @endif

                let qty = $('#buyNum').val();

                let spec = "";
                let check_spec = true;
                $('#span_error_spec').text('');
                $('#span_error_num').text('');

                if ($('.spec').length > 0) {
                    let com = "";
                    $('.spec').each(function(i, o) {
                        if ($(o).find('input[type=radio]:checked').length == 0) {
                            check_spec = false;
                            return false;
                        }
                        spec += com + $(o).find('input[type=radio]:checked').val();
                        com = "_";
                    })
                }

                if (!check_spec) {
                    $('#span_error_spec').text('{{ __('basic.PleaseChooseProductSpec') }}');
                    $('#productSpec').addClass('is-show');

                    return;
                }

                if (qty <= 0) {
                    $('#span_error_num').text('{{ __('basic.PleaseChooseProductNum') }}');
                    $('#productSpec').addClass('is-show');
                    return;
                }

                item.stock_spec_id = spec;
                item.stock_qty = qty

                $.ajax({
                    url: '{{ url('ajax/add_cart') }}',
                    data: item,
                    success: function(resp, textStatus, jqXHR) {
                        // console.log(resp);
                        if (resp.status) {
                            $('.cart_num').text(resp.data.total);
                            Swal.fire({
                                title: (resp.msg != '') ? resp.msg : '{{ __('basic.ProductAddedtoCart') }}',
                                // text: ,
                                icon: 'success',
                                confirmButtonText: '{{ __('basic.OK') }}',
                            })
                        } else {
                            Swal.fire({
                                title: '{{ __('basic.Error') }}!',
                                // text: resp.msg,
                                html: resp.msg.replaceAll("\r\n", "<BR>"),
                                icon: 'error',
                                confirmButtonText: '{{ __('basic.OK') }}',
                            })

                        }
                    }
                });
            });

            $('.spec_detail').click(function() {
                $('#div_qty').removeClass('d-none');
                $('#span_qty').text($(this).data('qty'));
                specCtrl();
            })
        });

        function calculate() {
            let price = parseInt(item.stock_price);
            let qty = parseInt($('#buyNum').val());

            let total = price * qty;

            $('#buyTotal').text(appendFormat(total));
        }

        function specCtrl() {
            let spec = com = "";
            $('.spec').each(function(i, o) {
                spec += com + $(o).find('input[type=radio]:checked').val();
                com = "_";
            });
            console.log(pl);
            if (pl[spec]['preferential'] > 0) {
                item.stock_price = pl[spec]['preferential'];
            } else {
                item.stock_price = pl[spec]['retail'];

            }
            $('#buyPrice').text(appendFormat(item.stock_price));
            $('#retailPrice').text('$' + pl[spec]['retail']);
            $('#textBonus').text(pl[spec]['bonus']);
            $('#textCoin').text(pl[spec]['coin']);

            calculate();
        }
    </script>
@endsection
@section('container')
    <style>
        /*修正內容若包含youtube等影片時寬度*/
        iframe.fr-draggable {
            width: 100% !important;
        }
    </style>
    <div class="row align-items-start mx-md-auto mx-0 pb-40">
        <x-breadcrumb :breadcrumb="$breadcrumb"></x-breadcrumb>
        <div class="col-12 col-md-8 col-lg-9">
            <div class="d-flex flex-column flex-lg-row mb-10 flex-wrap">
                {{-- Image --}}
                <div class="w-100 w-lg-45">
                    <div class="swiper slideProduct mb-3">
                        <div class="swiper-wrapper">
                            @if (count($data['image']) > 0)
                                @foreach ($data['image'] as $v)
                                    <div class="swiper-slide">
                                        <img class='img-1x1 object-fit-contain' src="{{ $v }}" />
                                        {{-- <img class='stock-frame'/> --}}
                                    </div>
                                @endforeach
                            @else
                                <div class="swiper-slide">
                                    <img class='img-1x1 object-fit-contain' src="{{ asset('image/product_07.png') }}" />
                                    {{-- <img class='stock-frame'/> --}}
                                </div>
                            @endif
                        </div>
                        <div class="swiper-button-next circle"></div>
                        <div class="swiper-button-prev circle"></div>
                        <div class="position-relative">
                            @if (!$data['has_inv'])
                                <div class="position-absolute w-100 bg-dark text-light bottom-0 py-1 text-center" style="opacity: 0.8;z-index:99;">
                                    {{ __('robot.SoldOut') }}
                                </div>
                            @endif
                        </div>
                    </div>
                    <div class="swiper slideProductSm" thumbsSlider="">
                        <div class="swiper-wrapper">
                            @if (count($data['image']) > 0)
                                @foreach ($data['image'] as $v)
                                    <div class="swiper-slide">
                                        <img class='img-1x1 object-fit-contain' src="{{ $v }}" />
                                    </div>
                                @endforeach
                            @else
                                <div class="swiper-slide">
                                    <img class='img-1x1 object-fit-contain' src="{{ asset('image/product_07.png') }}" />
                                </div>
                            @endif
                            {{-- <div class="swiper-slide">
                                <img src="{{ asset('image/product_01.jpg') }}" />
                            </div>
                            <div class="swiper-slide">
                                <img src="{{ asset('image/product_02.jpg') }}" />
                            </div>
                            <div class="swiper-slide">
                                <img src="{{ asset('image/product_03.jpg') }}" />
                            </div>
                            <div class="swiper-slide">
                                <img src="{{ asset('image/product_07.png') }}" />
                            </div> --}}
                        </div>
                    </div>
                </div>
                {{-- Detail --}}
                <div class="w-100 w-lg-55 mt-lg-0 px-lg-4 mt-6">
                    <div class="card m-0">
                        <h5 class="m-0">{{ $data['name'] }}</h5>
                        {{-- <small class="fs-8 text-gray">{{ $data['description'] ?? '--' }}</small> --}}
                        <div class="d-flex align-items-center flex-row">
                            <span class="h4 text-danger me-2">$
                                <span id="buyPrice">{{ $data['price'] }}</span>
                            </span>
                            @if ($data['discount'])
                                <span class="text-gray text-sm-bs" id="retailPrice">${{ $data['retail'] }}</span>
                            @endif
                            {{-- <button class="ms-auto btn btn-heart p-1" id="addTrack"><i class="icon-heart"></i></button> --}}
                            <div class="d-flex align-items-center ms-auto">
                                <img class="img-1x1" src="{{ asset('image/ccoin.png') }}" alt="" style="max-width: 16px">
                                <div class="text-warning ms-1" id="textCoin">{{ $data['coin'] }}</div>
                            </div>
                        </div>
                        <div class="d-flex align-items-center flex-row">
                            <div class="icon-star-fill fs-8 checked"></div>
                            <span class="fs-8 me-auto" style="padding: 1px 0px 0px 1px">{{ $data['rating'] }}</span>

                            @if (session('user_id'))
                                <div class="d-flex align-items-center rounded p-1">
                                    <img class="img-1x1 me-2" src="{{ asset('image/icon/bonus.png') }}" alt="" style="max-width: 1.5rem">
                                    {{-- {{ $data['bonus'] }} --}}
                                    <span class="fs-6 text-center" id="textBonus" style="line-height:1rem">{{ $data['bonus'] ?? 0 }}</span>

                                </div>
                            @else
                                <div class="d-flex bg-warning align-items-center rounded p-1">
                                    <img class="img-1x1 me-2" src="{{ asset('image/icon/bonus.png') }}" alt="" style="max-width: 1.5rem">
                                    <a class="fs-8 text-center text-white" href="{{ route('login') }}" style="line-height:1rem">登入再享<br>回饋金</a>
                                </div>
                            @endif
                        </div>

                        {{-- <x-star-rating :rating="$data['rating']" :sold="$data['sold']"></x-star-rating> --}}
                        <ul class="nav nav-tabs mt-4" id="productTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="detail-tab" data-bs-toggle="tab" data-bs-target="#detail-pane" type="button" role="tab" aria-controls="home-tab-pane"
                                    aria-selected="true">{{ __('basic.Specification') }}</button>
                            </li>
                            {{-- <li class="nav-item" role="presentation">
                                <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
                            </li> --}}
                        </ul>
                        <div class="tab-content" id="productTabContent">
                            <div class="tab-pane fade show active" id="detail-pane" role="tabpanel" aria-labelledby="detail-tab" tabindex="0">
                                {!! $data['specification'] ?? '--' !!}
                            </div>
                            {{-- <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">--
                            </div> --}}
                        </div>
                    </div>
                    {{-- 活動 --}}
                    {{-- <div class="card mt-2">
                        <div class="fs-8 my-2">
                            <span class="btn btn-outline-danger btn-sm pe-none">活動</span>
                            <a href=""> <u>滿$699送無糖燕麥（贈完為止不累贈）</u></a>
                        </div>
                    </div> --}}
                </div>
            </div>
            {{-- Product Content --}}
            {{-- <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="pills-description-tab" data-bs-toggle="pill" data-bs-target="#pills-description" type="button" role="tab" aria-controls="pills-description" aria-selected="true">
                        <h4 class="mb-0">{{ __('robot.Content') }}</h4>
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pills-feature-tab" data-bs-toggle="pill" data-bs-target="#pills-feature" type="button" role="tab" aria-controls="pills-feature" aria-selected="false">
                        <h4 class="mb-0">{{ __('robot.Feature') }}</h4>
                    </button>
                </li>
            </ul>
            <div class="card p-6">
                <div class="tab-content" id="">
                    <div class="tab-pane fade show active" id="pills-description" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">
                        {!! nl2br($data['description']) ?? '--' !!}
                    </div>
                    <div class="tab-pane fade" id="pills-feature" role="tabpanel" aria-labelledby="pills-feature-tab" tabindex="0">
                        {!! nl2br($data['feature']) ?? '--' !!}
                    </div>
                </div>
            </div> --}}
            <div class="card p-6">
                <h3>{{ __('robot.Product') . __('robot.Content') }}</h3>
                {!! nl2br($data['description']) ?? '--' !!}

                <h3 class="mt-20">{{ __('robot.Product') . __('robot.Feature') }}</h3>
                {!! nl2br($data['feature']) ?? '--' !!}

            </div>

            {{-- Commet --}}

            {{-- Recommend --}}
            <h3 class="mt-12">{{ __('robot.Recommend') }}</h3>
            <div class="row row-cols-2 row-cols-lg-4 g-2 g-lg-4">
                @foreach ($recommendList as $k => $v)
                    @if (!empty($v['preferential_price']))
                        <x-product-sale id="{{ $v['id'] }}" name="{{ $v['name'] }}" img="{{ $v['thumbnail'] ?? asset('image/product_07.png') }}" price="{{ $v['preferential_price'] }}" discount="{{ $v['discount'] }}"
                            oPrice="{{ $v['retail_price'] }}" coin="90" frame="1" :rating="$v['rating']" :sold="$v['sold']" :hasInv="$v['has_inv']">
                        </x-product-sale>
                    @else
                        <x-product-default id="{{ $v['id'] }}" name="{{ $v['name'] }}" img="{{ $v['thumbnail'] ?? asset('image/product_07.png') }}" price="{{ $v['retail_price'] }}" coin="90" frame="1" :rating="$v['rating']"
                            :sold="$v['sold']" :hasInv="$v['has_inv']">
                        </x-product-default>
                    @endif
                @endforeach

            </div>
        </div>
        <div class="col-12 col-md-4 col-lg-3 card l-product__control">
            <div class="l-product__spec" id="productSpec">
                @foreach ($data['spec'] as $k1 => $v1)
                    {{-- <h6>規格</h6> --}}
                    {{-- <h6>{{ $v1['name'] }}</h6> --}}
                    <h6>{{ __('basic.Variation') }}</h6>
                    <div class="d-flex spec mb-5 flex-row flex-wrap gap-3">

                        @foreach ($v1['detail'] as $k2 => $v2)
                            @php
                                $qty = $data['inv'][$v2['name']] ?? 0;
                                $inv = empty($data['inv'][$v2['name']]) || $qty < $data['min_buy_num'] ? true : false;
                                
                            @endphp
                            {{-- <button class="btn btn-sm btn-outline-gray">{{ $v2['name'] }}</button> --}}
                            <input class="spec_detail" id="{{ $v2['id'] }}" name="{{ $v1['id'] }}" data-qty="{{ $qty }}" type="radio" value="{{ $v2['name'] }}" @if ($inv) disabled @endif>
                            <label class="btn btn-sm @if ($inv) btn-outline-light cursor-not-allowed
                                @else
                                btn-outline-gray @endif"
                                for="{{ $v2['id'] }}">
                                <p>{{ $v2['name'] }}</p>
                            </label>
                        @endforeach
                        {{-- <button class="btn btn-sm btn-outline-gray">10入</button>
                        <button class="btn btn-sm btn-outline-gray">6入</button>
                        <button class="btn btn-sm btn-outline-gray">3入</button> --}}
                    </div>
                @endforeach
                <span class="text-danger" id="span_error_spec"></span>
                @if (count($data['spec']) == 0)
                    <div class="text-danger" id="">
                        {{ __('robot.InventoryQuantity') }} :
                        <span class="" id="">{{ array_values($data['il'])[0] }}</span>
                    </div>
                @endif
                <div class="d-none text-danger" id="div_qty">
                    {{ __('robot.InventoryQuantity') }} :
                    <span class="" id="span_qty"></span>
                </div>
                <h6>{{ __('robot.QuantityAndTotalPrice') }}</h6>
                <div class="l-product__spec-amount">
                    <i class="icon-minus" id="min"></i>
                    <input id="buyNum" type="text" value="{{ $data['min_buy_num'] == 0 ? 1 : $data['min_buy_num'] }}">
                    <i class="icon-plus" id="add"></i>
                </div>
                <span class="text-danger" id="span_error_num"></span>
                @if ($data['min_buy_num'] > 0)
                    <div class="" id="" style="font-size: 0.75rem">
                        {{ __('robot.MinimumPurchaseQuantity') }} :
                        <span class="" id="">{{ $data['min_buy_num'] }}</span>
                    </div>
                @endif
                {{-- <p class="mt-4">{{ __('robot.ShippingIsCalculatedAtCheckout') }}</p> --}}
                <div class="d-flex justify-content-between flex-row">
                    <p>{{ __('basic.Total') }}</p>
                    <p class="h4" id="buyTotal">{{ $data['price'] }}</p>
                </div>
            </div>
            <div class="d-flex">
                <button class="btn btn-primary me-2 d-md-none p-1" id="btn_show_spec"><i class="icon-arrow-up" id="icon"></i></button>
                <button class="btn btn-primary w-100" id="addCart">{{ __('robot.AddToCart') }}</button>
            </div>
        </div>
    </div>

    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper(".slideProductSm", {
            spaceBetween: 4,
            slidesPerView: 8,
            watchSlidesProgress: true,
        });
        var swiper2 = new Swiper(".slideProduct", {
            spaceBetween: 10,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            thumbs: {
                swiper: swiper,
            },
        });
    </script>
@endsection