@extends('layouts.public')
@section('title')
Detail Produk | {{ $product->name }}
@endsection

@section('customStyle')
<link rel="stylesheet" type="text/css" href="{{ asset('css/public_home.css') }}" />
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous"> -->
@endsection

@section('content')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<nav aria-label="breadcrumb" class="breadcrumb-nav border-0 mb-0">
    <div class="container d-flex align-items-center">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">Beranda</a></li>
            <li class="breadcrumb-item"><a href="/">Produk</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ $product->name }}</li>
        </ol>

    </div><!-- End .container -->
</nav>


<div class="page-content" style="padding-bottom:0px;">
    <div class="container">
        <div class="product-details-top">
            <div class="row">
                <div class="col-md-6">
                    <div class="product-gallery product-gallery-separated">
                        <figure class="product-separated-item">
                            <img id="gambar_utama" src="{{ asset('data_file/product/'.$product->image) }}" data-zoom-image="{{ asset('data_file/product/'.$product->image) }}" alt="{{ $product->name }}">
                            
                            <a href="{{ asset('data_file/product/'.$product->image) }}" target="_blank" id="btn-separated-gallery" class="btn-product-gallery href_gambar">
                                <i class="icon-arrows"></i>
                            </a>
                            
                        </figure>
                            <img gambar_1 class="gambar_detail" data-src="{{ asset('data_file/product/'.$product->image) }}" style="width: 100px;height:100px;display:inline" src="{{ asset('data_file/product/'.$product->image) }}"  alt="{{ $product->name }}">
                            @if ($product->image_2 != null)
                                <img gambar_2 class="gambar_detail" data-src="{{ asset('data_file/product/'.$product->image_2) }}" style="width: 100px;height:100px;display:inline" src="{{ asset('data_file/product/'.$product->image_2) }}"  alt="{{ $product->name }}">
                            @endif
                            @if($product->image_3 != null)
                                <img gambar_3 class="gambar_detail" data-src="{{ asset('data_file/product/'.$product->image_3) }}" style="width: 100px;height:100px;display:inline" src="{{ asset('data_file/product/'.$product->image_3) }}"  alt="{{ $product->name }}">
                            @endif
                            @if($product->image_4 != null)
                                <img gambar_4 class="gambar_detail" data-src="{{ asset('data_file/product/'.$product->image_4) }}" style="width: 100px;height:100px;display:inline" src="{{ asset('data_file/product/'.$product->image_4) }}"  alt="{{ $product->name }}">
                            @endif
                        
                    </div><!-- End .product-gallery -->
                </div><!-- End .col-md-6 -->
                <script>
                    $(document).ready(function() {
                        // This WILL work because we are listening on the 'document', 
                        // for a click on an element with an ID of #test-element
                        $(document).on("click",".gambar_detail",function() {
                            var data_src = $(this).data('src');
                            // alert(data_src);
                            $('#gambar_utama').attr('src',data_src);
                            $('.href_gambar').attr('href',data_src);

                        });

                    });
                </script>
                @php
                    $actual_link = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";   
                @endphp
                <div class="col-md-6">
                    <div class="product-details sticky-content">
                        <h1 class="product-title bold uppercase">{{ $product->name }}</h1><!-- End .product-title -->
                        <div class="details-filter-row details-row-size">
                            <div class="col-4 col-lg-3">
                                <label for="size">Kategori:</label>
                            </div>
                            <div class="col-8 col-lg-9">
                                <b>{{ $product->category }}</b>
                            </div>
                        </div>
                        <div class="details-filter-row details-row-size">
                            <div class="col-4 col-lg-3">
                                <label for="size">Sub Kategori:</label>
                            </div>
                            <div class="col-8 col-lg-9">
                                <b>{{ $product->sub_category }}</b>
                            </div>
                        </div>
                        <div class="details-filter-row details-row-size">
                            <div class="col-4 col-lg-3">
                                <label for="size">Dari:</label>
                            </div>
                            <div class="col-8 col-lg-9">
                                <a href="{{$dataBisnis->url_bisnis ?? ''}}">{{$dataBisnis->nama_bisnis ?? '-'}}</a>
                            </div>
                        </div>
                        <div class="details-filter-row details-row-size">
                            <div class="col-4 col-lg-3">
                                <label for="size">Lokasi:</label>
                            </div>
                            <div class="col-8 col-lg-9">
                                <b>{{ $location->place }}</b>
                            </div>
                        </div>
                        <div class="details-filter-row details-row-size">
                            <div class="col-4 col-lg-3">
                                <label for="size">Deskripsi:</label>
                            </div>
                            <div class="col-8 col-lg-9">
                                <p>{{ $product->description }}</p>
                            </div>
                        </div><!-- End .product-content -->
                        @if ($location->phone != null)
                        <div class="details-filter-row details-row-size social-icons social-icons-sm">
                            <div class="col-4 col-lg-3">
                                <label for="size" style="width:132px">Kontak Penjual:</label>
                            </div>
                            <div class="col-8 col-lg-9">
                                <a href="https://api.whatsapp.com/send?phone={{ $location->phone }}&text={{$actual_link}} Apakah barang ada ?" class="social-icon" title="Whatsapp" target="_blank"><i class="icon-whatsapp"></i></a>
                            </div>
                        </div>
                        @endif
                        <div class="social-icons social-icons-sm">
                            <div class="col-4 col-lg-3">
                                <label for="size" style="width:132px">Bagikan Produk:</label>
                            </div>
                            <div class="col-8 col-lg-9">
                                <div class="d-flex align-items-center gap-2">
                                    {{-- <a href="https://api.whatsapp.com/send?phone=62&text={{ $product->name }}" class="social-icon" title="Whatsapp" target="_blank"><i class="icon-whatsapp"></i></a> --}}
                                    <a href="whatsapp://send?text={{$actual_link}}" data-action="share/whatsapp/share" class="social-icon" title="Whatsapp"><i class="icon-whatsapp"></i></a>
                                    <a href="https://www.facebook.com/sharer/sharer.php?u={{$actual_link}}" class="social-icon" title="Facebook" target="_blank" rel="noopener"><i class="icon-facebook-f"></i></a>
                                    <a href="https://twitter.com/intent/tweet?url={{$actual_link}}" class="social-icon" title="Twitter" target="_blank"><i class="icon-twitter"></i></a>
                                    <a href="https://social-plugins.line.me/lineit/share?url={{$actual_link}}" class="social-icon" title="Line" target="_blank"><i class="icon-line"></i></a>
                                </div>
                            </div>
                            </div><br>
                            <div class="product-cat">
                                <h6 class="bold uppercase">Beli Produk Sekarang:</h6>
                            </div>
                            <div class="product-details">
                            {{-- <div class="details-filter-row details-row-size">
                                <a href="https://{{ $product->url }}" target="_blank" class="btn btn-primary btn-round" style="width: 100%">Link Produk</a>
                            </div> --}}
                            @if ($product->link_tokopedia != null)
                                <a href="{{$product->link_tokopedia}}" target="_blank" class="btn btn-primary btn-shadow btn-tokped">TOKOPEDIA</a>                            
                            @endif
                            @if ($product->link_shopee != null)
                                <a href="{{$product->link_shopee}}" target="_blank" class="btn btn-primary btn-shadow btn-shopee">shopee</a>
                            @endif
                            @if ($product->link_bukalapak != null)
                                <a href="{{$product->link_bukalapak}}" target="_blank" class="btn btn-primary btn-shadow btn-bukalapak"> bukalapak</a>
                            @endif
                            @if ($product->link_youtube != null)
                                <a href="{{$product->link_youtube}}" target="_blank" class="btn btn-primary btn-shadow btn-youtube">youtube</a>
                            @endif
                            @if ($product->link_facebook != null)
                                <a href="{{$product->link_facebook}}" target="_blank" class="btn btn-primary btn-shadow btn-facebook">facebook</a>
                            @endif
                            @if ($product->link_instagram != null)
                                <a href="{{$product->link_instagram}}" target="_blank" class="btn btn-primary btn-shadow btn-instagram">instagram</a>
                            @endif
                            @if ($product->url != null)
                                @if(str_contains($product->url, 'http'))
                                    <a href="{{$product->url}}" target="_blank" class="btn btn-primary btn-shadow btn-lain">lainnya</a>
                                @endif
                            @endif
                        </div>
                        </div><!-- End .product-details-footer -->
                    </div><!-- End .product-details -->
                </div><!-- End .col-md-6 -->
            </div><!-- End .row -->
        </div><!-- End .product-details-top -->

    </div><!-- End .container -->
</div><!-- End .page-content -->

{{--  
<div class="container card-detail rounded shadow">
    <div class="row justify-content-center">
        <div class="col-8 col-lg-9">
            <div class="col-md mb-4">
                <img src="{{ asset('data_file/product/'.$product->image) }}" class="container-img col rounded" alt="ea">
            </div>
            <div class="col-md mx-auto">
                <div class="h3 mb-4 text-dark">{{ $product->name }}</div>
                <div class="row mb-3 text-gray-800">
                    <div class="col col-md-3">Kategori</div>
                    <div class="col">{{ $product->category }}</div>
                </div>
                <div class="row mb-3 text-gray-800">
                    <div class="col col-md-3">Sub Kategori</div>
                    <div class="col">{{ $product->sub_category }}</div>
                </div>
                <div class="row mb-3 text-gray-800">
                    <div class="col col-md-3">Lokasi</div>
                    <div class="col">{{ $location->place }}</div>
                </div>
                <a href="https://{{ $product->url }}" target="_blank" class="btn btn-primary mb-4">Link Produk</a>
                <div class="h5 mb-1 text-gray-800">Deskripsi</div>
                <p class="bg-pkkp text-white px-3 rounded">{{ $product->description }}</p>
            </div>
        </div>
    </div>
</div>  --}}


<div class="container">
 <h2 class="title bold text-center letter-01rem mt-50 mb-40"> Produk Terkait<b class="color-kuning">

    </b></h2>
<div class="products-container" data-layout="fitRows">
    @foreach($product_categories as $product_c)
    <div class="product-item furniture col-6 col-md-4 col-lg-3">
        <div class="product product-4">
            <figure class="product-media">
                <a href="{{url('/detail/view_product/'. $product_c->id)}}">
                    <img src="{{ asset('data_file/product/'.$product_c->image) }}" alt="Product image" class="product-image">
                </a>

                <div class="product-action bold">
                    <a href="{{url('/detail/view_product/'. $product_c->id )}}" class="btn-product btn-quickview bold" title="Quick view"><span>Lihat Produk</span></a>
                </div><!-- End .product-action -->
            </figure><!-- End .product-media -->

            <div class="product-body">
                <h3 class="product-title font-size-16 bold uppercase text-center"><a href="{{url('/detail/view_product/'. $product_c->id )}}">{{ $product_c->name }}</a></h3>
                <div class="product-price uppercase text-center">{{ $product_c->sub_category }}</div>
            </div><!-- End .product-body -->
        </div><!-- End .product -->
    </div><!-- End .product-item -->
    @endforeach
</div>
</div>

@endsection