@extends('web.layouts.template')

@section('content')
    <main class="main single-product">
        <div class="page-content">

            <input type="hidden" name="product-id" id="product_id" value="{{ $id }}">
            <div class="product product-single mb-4 container">
                <div class="product-gallery product-extended mb-6">
                    <div class="product-gallery-carousel owl-carousel owl-nav-full owl-theme row cols-1 cols-md-2 cols-lg-3"
                        data-owl-options="
            {
                'dots': true,
                'lazyload': true,
                'responsive': {
                    '0': {
                        'items': 1,
                        'nav': false

                    },
                    '768': {
                        'items': 2
                    }
                }
            }">

                        @foreach ($data['product_images'] as $img)
                            <figure class="product-image mb-5">
                                <img src="{{ $img['filename_url'] }}" alt="{{ $img['filename_url'] }}"
                                    data-zoom-image="{{ $img['filename_url'] }}" width="800" height="900">
                                <a href="#" class="product-image-full">
                                    <i class="fa fa-search-plus"></i></a>
                            </figure>
                        @endforeach

                    </div>
                </div>


                <div class="product-details row">
                    <div class="col-12 mt-3" id="name" style="display: flex; align-items:center">
                        @if ($data['is_waranty_plus'] == 1)
                            <div id="w-plus-label" class="product-label badge mr-3 text-dark">
                                <i><img src="{{ asset('assetsV2/images/logo_wplus_500x500.png') }}"
                                        style="max-width: unset;width: 30px; height:30px"> </i>
                            </div>
                        @endif
                        <div>
                            <h1 class="product-name custom" id="meta-name">{{ $data['name'] }}</h1>
                        </div>
                    </div>
                    <div class="col-md-8" id="info">
                        <div class="ratings-container d-none">
                            <div class="ratings-full">
                                <span class="ratings" style="width:60%"></span>
                                <span class="tooltiptext tooltip-top"></span>
                            </div>
                            <a href="product.html#product-tab-reviews" class="link-to-tab rating-reviews">( 7
                                reviews
                                )</a>
                        </div>
                        <div class="tab tab-vertical tab-simple">
                            <ul class="nav nav-tabs" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" href="#tab8-1">Deskripsi</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#tab8-2">Spesifikasi</a>
                                </li>
                                <li class="nav-item">
                        <a class="nav-link" href="#tab8-3">Kalkulator</a>
                    </li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane active" id="tab8-1">
                                    <p class="mb-0">
                                    <p class="product-short-desc" id="description">
                                        {!! isContainHTML($data['description']) ? $data['description'] : nl2br($data['description']) !!}
                                    </p>
                                    </p>
                                </div>
                                <div class="tab-pane" id="tab8-2">
                                    <p class="mb-0">
                                    <table class="size-table text-left">
                                        <tr>
                                            <th>Merek</th>
                                            <td>: </td>
                                            <td id="merek">{{ $data['brand'] }}</td>
                                        </tr>
                                        <tr>
                                            <th>Tipe</th>
                                            <td>: </td>
                                            <td id="tipe">{{ $data['car_type'] }}</td>
                                        </tr>
                                        <tr>
                                            <th>Tahun Pembuatan</th>
                                            <td>: </td>
                                            <td id="tahun_pembuatan">{{ $data['tahun_pembuatan'] }}</td>
                                        </tr>
                                        <tr>
                                            <th>Varian</th>
                                            <td>: </td>
                                            <td id="varian">{{ $data['varian'] }}</td>
                                        </tr>
                                        <tr>
                                            <th>Kapasitas Mesin</th>
                                            <td>: </td>
                                            <td id="kapasitas_mesin">{{ $data['kapasitas_mesin'] }}</td>
                                        </tr>
                                        <tr>
                                            <th>Transmisi</th>
                                            <td>: </td>
                                            <td id="transmisi">{{ $data['transmisi'] }}</td>
                                        </tr>
                                        @if ($data['condition'] == 'bekas')
                                            <tr class="field-bekas">
                                                <th>Warna</th>
                                                <td>: </td>
                                                <td id="warna">{{ $data['warna'] }}</td>
                                            </tr>
                                            <tr class="field-bekas">
                                                <th>Jarak Tempuh</th>
                                                <td>: </td>
                                                <td id="jarak_tempuh_saat_ini">{{ $data['jarak_tempuh_saat_ini'] }}</td>
                                            </tr>
                                            <tr class="field-bekas">
                                                <th>Pemilik</th>
                                                <td>: </td>
                                                <td id="jumlah_pemilik">{{ $data['jumlah_pemilik'] }}</td>
                                            </tr>
                                            <tr class="field-bekas">
                                                <th>Jenis Registrasi</th>
                                                <td>: </td>
                                                <td id="jenis_registrasi">{{ $data['jenis_registrasi'] }}</td>
                                            </tr>
                                            <tr class="field-bekas">
                                                <th>Jenis STNK</th>
                                                <td>: </td>
                                                <td id="jenis_stnk">{{ $data['jenis_stnk'] }}</td>
                                            </tr>
                                            <tr class="field-bekas">
                                                <th>Masa Berlaku STNK</th>
                                                <td>: </td>
                                                <td id="masa_berlaku_stnk">{{ $data['masa_berlaku_stnk'] }}</td>
                                            </tr>
                                            {{-- @if ($data['masih_kredit'])
                                                <tr class="field-bekas">
                                                    <th>Status Kredit</th>
                                                    <td>: </td>
                                                    <td id="kredit">Masih Kredit</td>
                                                </tr>
                                            @endif --}}
                                        @endif

                                    </table>
                                    </p>
                                </div>

                                <div class="tab-pane" id="tab8-3">
                                    @include('web.pages.calculatorForm')
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="col-md-4 pl-2" id="price">
                        <div id="product-label">
                            {!! $data['discount'] > 0 ? "<span class='product-label mr-1 diskon'>" . $data['discount'] . '% OFF</span>' : '' !!}
                            {!! productLabel($data['label']) !!}
                            {!! productLabel($data['condition']) !!}
                        </div>
                        <div class="product-price">
                            <span class="price"
                                id="price_after_discount">Rp.{{ number_format($data['price_after_discount']) }}</span>
                        </div>
                        <div class="product-description">
                            <span style="text-decoration: line-through" id="text-price">
                                {{ $data['discount'] > 0 ? 'Rp. ' . number_format($data['price']) : '' }}
                            </span>
                        </div>
                        <div class="product-vendor">
                            Dijual oleh <a style="text-decoration: underline"
                                href="{{ route('web.showroom', $data['showroom'] ? $data['showroom']['slug'] : '') }}">{{ $data['showroom'] ? $data['showroom']['name'] : '-' }}</a>
                            <input type="hidden" id="showroom-contact"
                                value="{{ $data['showroom'] ? $data['showroom']['owner_phone'] : '' }}">
                        </div>

                        <hr class="product-divider">

                        <div class="row">
                            <div class="col-6">
                                <a target="_blank" id="action-chat" class="btn btn-rounded btn-secondary btn-block"><i
                                        class="d-icon-shoppingbag"></i>
                                    Chat</a>
                            </div>
                            <div class="col-6">
                                <a target="_blank" id="action-call" class="btn btn-rounded btn-primary btn-block"><i
                                        class="d-icon-service"></i>
                                    Call</a>
                            </div>
                        </div>

                        <hr class="product-divider mb-3">

                        <div class="product-footer">
                            <span class="mr-2">
                                Bagikan:
                            </span>
                            <div class="social-links mr-4">
                                @php
                                    $share = $data['share'];
                                @endphp
                                <a href="https://api.whatsapp.com/send?lang=id&text={{ $share['message'] }}"
                                    data-action="share/whatsapp/share" target="_blank"
                                    class="social-link social-whatsapp fab fa-whatsapp" title="Bagikan di Whatsapp"></a>
                                <a href="https://www.facebook.com/sharer/sharer.php?u={{ $share['link_web'] }}"
                                    target="_blank" class="social-link social-facebook fab fa-facebook-f"
                                    title="Bagikan di Facebook"></a>
                                <a href="https://twitter.com/intent/tweet?text={{ $share['message'] }}" target="_blank"
                                    class="social-link social-twitter fab fa-twitter" title="Bagikan di Twitter"></a>
                                {{-- <a href="#" class="social-link social-pinterest fab fa-pinterest-p"></a> --}}
                                {{-- </div>
                <div class="product-action">
                    <a href="#" class="btn-product btn-wishlist mr-6"><i class="d-icon-heart"></i>Tambahkan ke Wishlist</a>

                    <a href="#" class="btn-product btn-compare d-none"><i class="d-icon-compare"></i>Bandingkan</a> --}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            {{-- @include('web.widgets.productSlider', [
                'title' => 'Mobil Serupa',
                'id' => 'produkserupa',
                'query' => 'label=' . $data['label'],
            ]) --}}
            @include('web.widgets.productSlider', [
                'query' => 'label=' . $data['label'],
                'title' => 'Produk Serupa',
                'id' => 'produkserupa',
            ])
        </div>
    </main>
@endsection

@section('photo-swipe')
    @include('web.components.photo-swipe')
@endsection



@section('script-before-main')
    <script src="{{ asset('assetsV2/js/productLabel.js') }}"></script>
    <script src="{{ asset('js/Ukyo.js') }}"></script>
    <script src="{{ asset('js/CarshowFrontend.js') }}?v=1.0.220920"></script>
    {{-- <script src="{{ asset('assetsV2/js/productSlider.js') }}"></script> --}}
    {{-- <script src="{{ asset('assetsV2/js/productDeta il.js') }}"></script> --}}
    <script>
        $(document).ready(function() {

            let pageUrl = window.location.href;
            let phone = $('#showroom-contact').val();
            phone = phone.replace(/^0+/, '62');
            let showroom = "{{ $data['showroom'] ? $data['showroom']['name'] : '-' }}";
            let name = $('#meta-name').html();
            let price = $('#price_after_discount').text();
            let message = `Halo ${showroom}! Saya tertarik dengan produk: *${name}* ${price} [ ${pageUrl} ]`;
            message = encodeURI(message);
            if ($('#action-chat').length) {
                $('#action-chat').attr({
                    "href": "https://api.whatsapp.com/send?lang=id&phone=" + phone + "&text=" + message
                })
                $('#action-call').attr({
                    "href": "tel:" + phone
                })
            }
            Riode.slider('.owl-carousel')

            let url = window.location.origin + "/detail/";

            CF.ProductSliders($('.owl-carousel.showcase'))
        })
    </script>
@endsection