@extends('frontend.layouts.app')
@section('content')
    <!-- Breadcrumb -->
    <div class="breadcrumb-bar breadcrumb-bg text-center">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-12">
                    <h2 class="breadcrumb-title mb-2">Boats</h2>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb justify-content-center mb-0">
                            <li class="breadcrumb-item"><a href="{{ route('index') }}"><i class="isax isax-home5"></i></a></li>
                            <li class="breadcrumb-item active" aria-current="page">Boats</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <!-- /Breadcrumb -->

    <!-- Boats Section -->
    <div class="content">
        <div class="container">

            <div class="row">

                <!-- Sidebar -->
                <div class="col-xl-3 col-lg-4 element1">
                    <div class="card sticky-top filter-sidebar mb-4 mb-lg-0">
                        <div class="card-header border-0 pb-0">
                            <div class="pb-3 border-bottom">
                                <h5><i class="ti ti-category text-primary fs-16 me-2"></i>Related Category</h5>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <!-- Category Types -->
                            @php
                                $categories = App\Models\Boat::where('is_active', 1)->orderBy('priority', 'ASC')->get();
                            @endphp
                            <div class="p-3 mb-2">
                                @foreach ($categories as $category)
                                    <div class="d-flex align-items-center hotel-type-item mb-3">
                                        <a href="{{ route('boats.index', $category->slug) }}" class="avatar avatar-lg">
                                            <img src="{{ asset('backend/assets/images/boat_category/' . $category->image) }}"
                                                onerror="this.onerror=null;this.src='{{ asset('frontend/assets/img/img-not-found.png') }}';"
                                                class="rounded-circle" alt="img">
                                        </a>
                                        <div class="ms-2">
                                            <h6 class="fs-16 fw-medium"><a
                                                    href="{{ route('boats.index', $category->slug) }}">{{ $category->name }}</a>
                                            </h6>
                                            <p class="fs-14">{{ $category->boats->count() }} Boats</p>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <!-- /Category Types -->
                        </div>
                    </div>
                </div>
                <!-- /Sidebar -->

                <div class="col-xl-9 col-lg-8 element2">
                    <div class="bg-info br-10 p-3 pb-2 mb-4">
                        <div class="d-flex align-items-center justify-content-between flex-wrap">
                            <p class="fs-14 fw-medium mb-2 d-inline-flex align-items-center"><i
                                    class="isax isax-info-circle me-2"></i>{{ $boats->count() }} Boats Found on this
                                Category</p>
                        </div>
                    </div>
                    <div class="row justify-content-center">
                        @foreach ($boats as $boat)
                            <div class="col-xl-4 col-md-6 d-flex">
                                <div class="place-item mb-4 flex-fill">
                                    <a href="{{ route('boat.index', $boat->slug) }}">
                                        <img src="{{ asset('backend/assets/images/boats/' . $boat->image) }}"
                                            onerror="this.onerror=null;this.src='{{ asset('frontend/assets/img/img-not-found.png') }}';"
                                            class="img-fluid" alt="{{ $boat->name }}">
                                    </a>
                                    <div class="place-content">
                                        <h5><a href="{{ route('boat.index', $boat->slug) }}">{{ $boat->name }}</a></h5>
                                        {{-- <p class="d-flex align-items-center fs-14 mb-2"><i
                                                class="isax isax-category me-2"></i>{{ $boat->boat->name }}</p> --}}
                                        <p class="d-flex align-items-center fs-14 mb-2">{{ $boat->destination }}</p>
                                        <div class="text-center border-top pt-3">
                                            <h5 class="text-primary text-nowrap me-2"><span
                                                    class="text-default fs-15">Starts From -
                                                </span>₹{{ $boat->discount_price }} <del
                                                    class="fs-14 fw-normal text-default"> ₹{{ $boat->price }}</del></h5>
                                            <a href="{{ route('boat.index', $boat->slug) }}"
                                                class="btn btn-primary w-100 align-items-center mt-2"><i
                                                    class="isax isax-calendar-2 me-2"></i>Book Now</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>


                    <!-- Pagination -->
                    <nav class="pagination-nav">
                        <ul class="pagination justify-content-center">
                            <!-- Previous Page Link -->
                            @if ($boats->onFirstPage())
                                <li class="page-item disabled">
                                    <a class="page-link" href="javascript:void(0);" aria-label="Previous">
                                        <span aria-hidden="true"><i class="fa-solid fa-chevron-left"></i></span>
                                    </a>
                                </li>
                            @else
                                <li class="page-item">
                                    <a class="page-link" href="{{ $boats->previousPageUrl() }}" aria-label="Previous">
                                        <span aria-hidden="true"><i class="fa-solid fa-chevron-left"></i></span>
                                    </a>
                                </li>
                            @endif

                            <!-- Page Number Links -->
                            @foreach ($boats->getUrlRange(1, $boats->lastPage()) as $page => $url)
                                <li class="page-item {{ $page == $boats->currentPage() ? 'active' : '' }}">
                                    <a class="page-link" href="{{ $url }}">{{ $page }}</a>
                                </li>
                            @endforeach

                            <!-- Next Page Link -->
                            @if ($boats->hasMorePages())
                                <li class="page-item">
                                    <a class="page-link" href="{{ $boats->nextPageUrl() }}" aria-label="Next">
                                        <span aria-hidden="true"><i class="fa-solid fa-chevron-right"></i></span>
                                    </a>
                                </li>
                            @else
                                <li class="page-item disabled">
                                    <a class="page-link" href="javascript:void(0);" aria-label="Next">
                                        <span aria-hidden="true"><i class="fa-solid fa-chevron-right"></i></span>
                                    </a>
                                </li>
                            @endif
                        </ul>
                    </nav>
                    <!-- /Pagination -->

                </div>

            </div>
        </div>
    </div>
    <!-- /Boats Section -->
@endsection