@extends('layouts.heading-page')

@section('title')
    Products -
@endsection

@section('seo_keywords')
@endsection

@section('seo_description')
@endsection

@section('css')
    <link href="assets/css/page.css" rel="stylesheet"/>
@endsection

@section('breadcrumbs')
    <a href="/products">Products</a> {!! $currentCatalogName ? '/ <span>'.$currentCatalogName.'</span>' : '' !!}
@endsection

@section('page-main')
        <div class="content-wrap products-wrap">
            <div class="container">
                <div class="row">

                    <div class="col-bg-3 col-xl-4 navsub">
                        <div class="navsub-s1">
                            <h2>Category</h2>
                            <ul>
                                @php
                                    foreach ($dataCatalogs as $row)
                                    {
                                @endphp
                                <li><a href="/products/{{ $row->slug }}">{{ $row->name }}<span>({{ $row->qty }})</span></a></li>
                                @php
                                    }
                                @endphp
                            </ul>
                        </div>
                        <div class="navsub-s2">
                            <h2>Applications</h2>
                            <ul>
                                @php
                                    foreach ($dataApplications as $row)
                                    {
                                        $tags = [];
                                        if (in_array($row->slug, $currentApplications))
                                        {   
                                            $tags = array_diff($currentApplications, [$row->slug]);
                                        }
                                        else
                                        {
                                            $tags = $currentApplications;
                                            $tags[] = $row->slug;
                                        }
                                @endphp
                                <li><a href="?tags={{ implode(',', $tags) }}" class="{{ in_array($row->slug, $currentApplications) ? 'active' : '' }}">{{ $row->name }}</a></li>
                                @php
                                    }
                                @endphp
                            </ul>
                        </div>
                    </div>
                    <div class="navsub-select">
                        <div class="mb-5">
                            <h2>Category:</h2>
                            <select class="form-control" name="menu" onchange="MM_jumpMenu('self',this)">
                                <option value="">=== Please Choose ===</option>
                                @php
                                    foreach ($dataCatalogs as $row)
                                    {
                                @endphp
                                <option value="/products/{{ $row->slug }}">{{ $row->name }} ({{ $row->qty }})</option>
                                @php
                                    }
                                @endphp
                            </select>
                        </div>   
                        <div class="mb-5">
                        <h2>Applications:</h2>
                            <ul class="ul-checkbox">
                                @php
                                    $i = 0;
                                    foreach ($dataApplications as $row)
                                    {
                                        $i++;
                                        $tags = [];
                                        if (in_array($row->slug, $currentApplications, true))
                                        {
                                            $tags = array_diff($currentApplications, [$row->slug]);
                                        }
                                        else
                                        {
                                            $tags = $currentApplications;
                                            $tags[] = $row->slug;
                                        }
                                @endphp
                                <li class="custom-control custom-checkbox">
                                    <input class="custom-control-input" name="applications" type="checkbox" id="applications_{{ $i }}" {{ in_array($row->slug, $currentApplications, true) ? 'checked' : '' }} value="{{ implode(',', $tags) }}">
                                    <label class="custom-control-label" for="applications_{{ $i }}">{{ $row->name }}</label>
                                </li>
                                @php
                                    }
                                @endphp
                            </ul>
                        </div>

                    </div>


                    <!-- 內容資訊 s -->
                    <div class="col-bg-9 col-xl-8">
                        @if ($currentCatalogName)
                        <h3 class="h3-title mb-5"><i class="fas fa-caret-square-right"></i>{{ $currentCatalogName }}</h3>
                        @endif
                        <div class="products-inner">
                            @php
                                foreach ($dataRows as $row)
                                {
                                    $img_memo = '';
                                    $img_src = '/assets/img/products-item-a01.jpg';
                                    //$imgs = $row->photos;
                                    $imgs = array_filter($row->photos, function($v) {
                                            return $v['is_selected'] == true;
                                        });
                                    if (count($imgs) > 0) 
                                    {
                                        foreach($imgs as $img)
                                        {
                                            $img_memo = $img['comment'];
                                            $img_src = URL::asset('/storage/'.$img['file_path']);
                                            break;
                                        }
                                    }
                            @endphp
                            <div class="products-item">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="products-item-img">
                                            <a href="/products/detail/{{ $row->slug }}">
                                                <img src="{{ $img_src }}" alt="{{ $img_memo }}" width="100%" height="auto">
                                                <div class="products-item-mask"><span>Learn more</span></div>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="col-md-9">
                                        <div class="products-item-info">
                                            <h4><a href="/products/detail/{{ $row->slug }}">{{ $row->title }}<span>{{ trans('backend.product.tip_options.' . $row->tip) }}</span></a></h4>
                                            <p>{{ $row->description }}</p>
                                            <ul class="ul-applications">
                                                @php
                                                    foreach ($row->applications as $tag)
                                                    {
                                                @endphp
                                                <li><a>{{ $tag->name }}</a></li>
                                                @php
                                                    }
                                                @endphp
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @php
                                }
                            @endphp
                        </div>
                        <!-- 分頁 -->
                        @if ($dataTotalCount > 0)
                        <nav aria-label="Page navigation" class="page-ex2">
                            <ul class="pagination pagination-sm justify-content-center">
                                <li class="page-item">
                                    <a class="page-link prev" href="?p={{ ($dataCurrentPage - 1) < 1 ? 1 : ($dataCurrentPage - 1) }}{{ is_array($currentApplications) && count($currentApplications) > 0 ? '&tags=' . implode(',', $currentApplications) : '' }}" aria-label="Previous">
                                        <span aria-hidden="true">«</span>
                                    </a>
                                </li>
                                @php
                                    for ($i = 1; $i < ($dataTotalCount / $dataPerPageItems + 1); $i++)
                                    {
                                @endphp
                                <li class="page-item active"><a class="page-link" href="?p={{ $i }}{{ is_array($currentApplications) && count($currentApplications) > 0 ? '&tags=' . implode(',', $currentApplications) : '' }}">{{ $i }}</a></li>
                                @php
                                    }
                                @endphp
                                <li class="page-item">
                                    <a class="page-link next" href="?p={{ ($dataCurrentPage + 1) > floor($dataTotalCount / $dataPerPageItems + 1) ? floor($dataTotalCount / $dataPerPageItems + 1) : ($dataCurrentPage + 1) }}{{ is_array($currentApplications) && count($currentApplications) > 0 ? '&tags=' . implode(',', $currentApplications) : '' }}" aria-label="Next">
                                        <span aria-hidden="true">»</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                        @endif
                    </div>
                </div>
            </div>
        </div>
@endsection

@section('script')
    <script type="text/javascript">
		var elements = document.getElementsByClassName("column");
        var i;
        function listView() {
          for (i = 0; i < elements.length; i++) {
            elements[i].style.width = "100%";
          }
        }
        function gridView() {
          for (i = 0; i < elements.length; i++) {
            elements[i].style.width = "33%";
          }
        }
	</script>
@endsection