@extends('frontend.layouts.main')
@section('title', $seo['title'] ?? '')
@section('keywords', $seo['keywords'] ?? '')
@section('description', $seo['description'] ?? '')
@section('abstract', $seo['abstract'] ?? '')
@section('image', asset($seo['image'] ?? ''))
@section('css')
<style>
    .ticket-price-wrap {
        padding: 20px 0;
    }

    .ticket-price-wrap .item-ticket {
        color: #1c5694;
        font-weight: 600;
    }

    .ticket-price-wrap .table th,
    .table td {
        vertical-align: middle;
        text-align: center;
    }

    .ticket-price-wrap .title {
        text-align: center;
        font-weight: bold;
        font-size: 24px;
        color: #c00;
        text-transform: uppercase;
    }

    .ticket-price-wrap .subtitle {
        text-align: center;
        font-style: italic;
        color: #1c5694;
        margin-bottom: 20px;
        font-weight: 600;
    }

    .ticket-price-wrap .sub-header {
        font-weight: bold;
        color: #800000;
    }

    .ticket-price-wrap table {
        width: 100%;
        border-collapse: collapse;
        text-align: center;
    }

    .ticket-price-wrap table,
    th,
    td {
        border: 1px solid #333;
    }

    .ticket-price-wrap th,
    td {
        padding: 10px;
        vertical-align: middle;
    }

    .ticket-price-wrap thead tr:first-child {
        background-color: #f2f2f2;
    }

    .ticket-price-wrap .sub-header {
        font-weight: bold;
        color: #800000;
    }

    .ticket-price-wrap td small {
        font-size: 12px;
        color: #555;
    }
</style>
@endsection
@php
$nextPageUrl = $data->nextPageUrl();
$previousPageUrl = $data->previousPageUrl();
$page = request()->input('page');
@endphp

@section('canonical')
<link rel="canonical" href="{{ $category->slug_full }}" />
@endsection

@if (request()->has('page') && ($page == 1 || $page == 2))
@section('prevPage')
<link rel="prev" href="{{ $category->slug_full }}" />
@endsection
@else
@if ($previousPageUrl)
@section('prevPage')
<link rel="prev" href="{{ $previousPageUrl }}" />
@endsection
@endif
@endif

@if ($nextPageUrl)
@section('nextPage')
<link rel="next" href="{{ $nextPageUrl }}" />
@endsection
@endif


@section('content')
<style>
    section.room.bg--section-color {
        padding-block-start: 20px;
    }

    .pagination>li>a,
    .pagination>li>span {
        float: unset;
    }

    ul.pagination {
        display: flex;
        justify-content: center;
    }

    .pagination>.active>a,
    .pagination>.active>a:focus,
    .pagination>.active>a:hover,
    .pagination>.active>span,
    .pagination>.active>span:focus,
    .pagination>.active>span:hover,
    .page-link:hover {
        background-color: #1aace3;
        border-color: #1aace3;
        color: white;
    }
</style>
<div class="list-product-by-category">
    <div class="brackham-commont">
        <div class="ctnr">
            @isset($breadcrumbs,$typeBreadcrumb)
            @include('frontend.components.breadcrumbs',[
            'breadcrumbs'=>$breadcrumbs,
            'type'=>$typeBreadcrumb,
            ])
            @endisset
        </div>
    </div>
    <div class="banner-pages">
        <div class="box-filter-slibar">
            <div class="ctnr">
                <div class="box-all-categpry">
                    <div class="box-main-product-bycategory">
                        <div class="heading-title">
                            <div class="flex">
                                <h1 class="category-title">{{ $category->name }}</h1>
                                {{-- <span class="count">(
                                    <span class="total">{{$countData}}</span> {{ __('common.sản phẩm') }})
                                </span> --}}
                            </div>
                            <div class="tools">
                                <div class="filter_sort">
                                    <span class="small-title">{{ __('common.Sắp xếp theo') }}</span>
                                    <div class="attribute-block">
                                        <div class="att-scroll">
                                            <label class="sort-option active" data-sort="hot">{{ __('common.Nổi bật')
                                                }}</label>
                                            <label class="sort-option" data-sort="dateDESC">{{ __('common.Mới nhất')
                                                }}</label>
                                            <label class="sort-option" data-sort="viewDESC">{{ __('common.Xem nhiều')
                                                }}</label>
                                            <label class="sort-option" data-sort="priceASC">{{ __('common.Giá tăng')
                                                }}</label>
                                            <label class="sort-option" data-sort="priceDESC">{{ __('common.Giá giảm')
                                                }}</label>
                                        </div>
                                    </div>

                                    <div class="icon-filter-mobile">
                                        <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                            <g id="SVGRepo_tracerCarrier" stroke-linecap="round"
                                                stroke-linejoin="round"></g>
                                            <g id="SVGRepo_iconCarrier">
                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                    d="M4.2673 6.24223C2.20553 4.40955 3.50184 1 6.26039 1H17.7396C20.4981 1 21.7945 4.40955 19.7327 6.24223L15.3356 10.1507C15.1221 10.3405 15 10.6125 15 10.8981V21.0858C15 22.8676 12.8457 23.7599 11.5858 22.5L9.58578 20.5C9.21071 20.1249 8.99999 19.6162 8.99999 19.0858V10.8981C8.99999 10.6125 8.87785 10.3405 8.66436 10.1507L4.2673 6.24223ZM6.26039 3C5.34088 3 4.90877 4.13652 5.59603 4.74741L9.99309 8.6559C10.6336 9.22521 11 10.0412 11 10.8981V19.0858L13 21.0858V10.8981C13 10.0412 13.3664 9.22521 14.0069 8.6559L18.404 4.74741C19.0912 4.13652 18.6591 3 17.7396 3H6.26039Z"
                                                    fill="#0F0F0F"></path>
                                            </g>
                                        </svg>
                                        Bộ lọc
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{--<section class="room ticket-price-wrap">
        <div class="ctnr">

            <div class="title">{{ __('common.Giờ tàu') }} & {{ __('common.Giá vé') }}</div>
            <div class="subtitle">({{ __('common.ticket_price_apply') }} {{ date('d/m/Y') }})</div>

            <table class="table table-bordered">
                <thead class="table-light">
                    <tr>
                        <th rowspan="2">ST</th>
                        <th rowspan="2">{{ __('common.itinerary') }}</th>
                        <th colspan="2">{{ __('common.publish_fare') }} / {{ __('common.bed')}} / {{ __('common.pax') }}
                        </th>
                    </tr>
                    <tr>
                        <th class="sub-header">VIP<br>(Cabin 2 {{ __('common.bed')}})</th>
                        <th class="sub-header">Deluxe<br>(Cabin 4 {{ __('common.bed')}})</th>
                    </tr>
                </thead>

                <tbody>
                    @foreach ($data as $item)
                    <tr class="item-ticket">
                        <td>{{ $loop->index + 1 }}</td>
                        <td>{{ $item->name }}
                            <br>
                            @if ($item->trainRoutes->isNotEmpty())
                            <small>({{ __('common.train') }} {{ $item->trainRoutes->pluck('train_code')->implode('/')
                                }})</small>
                            @endif
                        </td>
                        <td>
                            @if ($item->vip_price > 0)
                            {{ number_format($item->vip_price) }} {{ $unit }}
                            @else
                            {{ __('common.contact') }}
                            @endif
                        </td>

                        <td>
                            @if ($item->deluxe_price > 0)
                            {{ number_format($item->deluxe_price) }} {{ $unit }}
                            @else
                            {{ __('common.contact') }}
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </section>--}}

    <section class="room bg--section-color giavetau">
        <div class="ctnr">
            <div class="room__wrapper">
                <div class="slick-room row">
                    @foreach($data as $ticketPrice)
                    <div class="clm" style="--w-lg: 4; --w-md: 6; --w-sm: 6; --w-xs: 12;">
                        <div class="products-card">
                            <span href="#" class="products-card__img d-block hover-effect_1">
                                <img src="{{ asset($ticketPrice->avatar_path) }}" alt="{{ $ticketPrice->name }}"
                                    title="{{ $ticketPrice->name }}" loading="lazy">
                            </span>
                            <div class="products-card-content">
                                @if ($ticketPrice->trainRoutes->isNotEmpty())
                                <ul class="d-flex">
                                    @foreach ($ticketPrice->trainRoutes as $trainRoute)
                                    <li>
                                        <svg class="badge-icon" width="12" height="12" viewBox="0 0 12 12" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M5.99994 6.71503C6.86151 6.71503 7.55994 6.0166 7.55994 5.15503C7.55994 4.29347 6.86151 3.59503 5.99994 3.59503C5.13838 3.59503 4.43994 4.29347 4.43994 5.15503C4.43994 6.0166 5.13838 6.71503 5.99994 6.71503Z"
                                                stroke="currentColor" stroke-opacity="0.99"></path>
                                            <path
                                                d="M1.8101 4.24506C2.7951 -0.0849378 9.2101 -0.0799377 10.1901 4.25006C10.7651 6.79006 9.1851 8.94006 7.8001 10.2701C6.7951 11.2401 5.2051 11.2401 4.1951 10.2701C2.8151 8.94006 1.2351 6.78506 1.8101 4.24506Z"
                                                stroke="currentColor" stroke-opacity="0.99"></path>
                                        </svg>
                                        {{ \Carbon\Carbon::parse($trainRoute->departure_time)->format('H:i') }}
                                    </li>
                                    @endforeach

                                </ul>
                                @endif
                                <a href="javascript:void(0)">
                                    <h3>{{ $ticketPrice->name }}</h3>
                                </a>
                                <div class="desc">
                                    {!! $ticketPrice->description !!}
                                </div>

                                <div class="list-hourt-tour">
                                    @if ($ticketPrice->vip_price > 0)
                                    <div class="item-hour-tour">
                                        <p>{{ __('common.Vé tàu Vip') }}</p>
                                        <span>{{ number_format($ticketPrice->vip_price) }} {{ $unit }}</span>
                                    </div>
                                    @endif

                                    @if ($ticketPrice->deluxe_price > 0)
                                    <div class="item-hour-tour">
                                        <p>{{ __('common.Vé tàu Deluxe') }}</p>
                                        <span>{{ number_format($ticketPrice->deluxe_price) }} {{ $unit }}</span>
                                    </div>
                                    @endif
                                </div>
                                <div class="btn-submit-giave" data-id="{{ $ticketPrice->id }}"><a href="{{$ticketPrice->slug}}">Xem thêm</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach

                </div>
            </div>
            @if ($data->lastPage() > 1)
            <div class="pagination">
                {{ $data->links('pagination::bootstrap-4') }}
            </div>
            @endif
        </div>


    </section>
</div>
@endsection
@section('js')
<script>
    function expand() {
        $('.category-description').addClass('dtshow');
        $('.dtcvmodetail').css("display", "none");
        $('.dtchide').css("display", "block");
    }

    function collapse() {
        $('.category-description').removeClass('dtshow');
        $('.dtcvmodetail').css("display", "block");
        $('.dtchide').css("display", "none");
        $(window).scrollTop($('.category-description').offset().top);
    }
</script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const filterIcon = document.querySelector(".icon-filter-mobile");
        const filterProducts = document.querySelector(".filter-products");
        const closeFilter = document.querySelector(".close_filter_products");

        if (filterIcon && filterProducts && closeFilter) {
            filterIcon.addEventListener("click", function() {
                filterProducts.classList.add("active");
            });

            closeFilter.addEventListener("click", function() {
                filterProducts.classList.remove("active");
            });
        }
    });
</script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const firstFilterIcons = document.querySelectorAll(".icon-firt-filter");
        const showFilters = document.querySelectorAll(".show-filter");

        if (firstFilterIcons.length > 0 && showFilters.length > 0) {
            firstFilterIcons.forEach((icon, index) => {
                icon.addEventListener("click", function() {
                    if (showFilters[index]) {
                        showFilters[index].classList.toggle("active");
                    }
                });
            });
        }
    });
</script>
<script>
    $(document).ready(function() {
        function filterProducts() {
            let selectedAttributes = $(".filter-checkbox:checked").map(function() {
                return $(this).val();
            }).get();
            let selectedPrices = $(".att-scroll input[type='checkbox']:checked").map(function() {
                let label = $(this).siblings("label").text().trim();
                if (label.includes("< 1 triệu")) return {
                    min: 0,
                    max: 1000000
                };
                if (label.includes("Từ 1 - 2 triệu")) return {
                    min: 1000000,
                    max: 2000000
                };
                if (label.includes("Từ 2 - 5 triệu")) return {
                    min: 2000000,
                    max: 5000000
                };
                if (label.includes("Từ 5 - 10 triệu")) return {
                    min: 5000000,
                    max: 10000000
                };
                if (label.includes("> 10 triệu")) return {
                    min: 10000000,
                    max: Infinity
                };
            }).get();

            let selectedSuppliers = $(".supplier-checkbox:checked").map(function() {
                return $(this).val();
            }).get();

            let hasFilter = selectedAttributes.length > 0 || selectedPrices.length > 0 || selectedSuppliers.length > 0;

            $(".item-products-hexs").each(function() {
                let productPrice = parseFloat($(this).find(".box-products-all").data("price"));
                let productAttributes = $(this).find(".box-products-all").data("attributes") ? $(this).find(".box-products-all").data("attributes").toString().split(",") : [];
                let productSupplier = $(this).find(".box-products-all").data("supplier");

                let matchPrice = selectedPrices.length === 0 || selectedPrices.some(range => productPrice >= range.min && productPrice <= range.max);
                let matchAttributes = selectedAttributes.length === 0 || selectedAttributes.some(attr => productAttributes.includes(attr));
                let matchSupplier = selectedSuppliers.length === 0 || selectedSuppliers.includes(productSupplier);

                let isVisible = matchPrice && matchAttributes && matchSupplier;

                $(this).toggle(isVisible);
            });

            if (!hasFilter) {
                $(".item-products-hexs").show();
            }
        }
        $(".filter-checkbox, .supplier-checkbox, .att-scroll input[type='checkbox']").on("change", filterProducts);
        $(".item-products-hexs").show();
    });
</script>
<script>
    $(document).ready(function() {
        let currentUrl = new URL(window.location.href);
        let order_with = currentUrl.searchParams.get("order_with");

        if (order_with) {
            $(".sort-option").removeClass("active");
            $(".sort-option[data-sort='" + order_with + "']").addClass("active");
        }

        $(".sort-option").click(function() {
            let order_with = $(this).data("sort"); // Lấy giá trị sắp xếp mới
            currentUrl.searchParams.set("order_with", order_with); // Cập nhật tham số vào URL

            window.location.href = currentUrl.toString(); // Load lại trang với URL mới
        });
    });
</script>



@endsection