@section('seo')
    @include('layouts._front_includes._seo', ['seo' => $page->seo])
@endsection

@extends('layouts.frontend_master')

@section('content')
    {{-- <div class="activities-detail-template">

    <!-- Hero Banner Section -->
    <div class="destination-detail-banner" style="
        background-image: url('{{$page->cover_image->getPath()}}');
      ">
        <h1>Our Activities</h1>
    </div>
    <section class="about-section" style="padding:0;margin-bottom: 0;">
        <div class="section-heading" style="padding:0;">
            <span class="section-title">Our Activities</span>
            <h2 class="section-main-heading">{{$page->title}}</h2>
            <p class="section-description">
                {!!$page->short_description!!}
                {!!$page->description!!}
            </p>
        </div>
    </section>

    @if ($page->packages->count() > 0)
    <section class="search-result-section" style="padding-top:0;margin:0;">
        <div class="search-header">
            <h2 class="search-result-heading">{{ucwords($page->title) }} Packages</h2>
        </div>

        <div class="search-cards-container">
            @foreach ($page->packages as $package)
            <a class="search-template-card" href="{{ route('package-detail', $package->slug) }}">
                <div class="search-image-container">
                    <img src="{{ $package->feature_image->getPath() }}" alt="{{ $package->title }}"
                        class="search-image" />
                    <span class="search-template-duration">{{ $package->days ?? 'N/A' }} Days</span>
                </div>

                <div class="search-template-info">
                    <p class="search-template-category">{!! $package->category !!}</p>
                    <h3 class="search-template-title">{{ $package->title }}</h3>

                    <div class="search-template-meta">
                        <span class="search-template-location">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor">
                                <path
                                    d="M12 20.9L16.95 15.95C19.68 13.22 19.68 8.78 16.95 6.05C14.22 3.32 9.78 3.32 7.05 6.05C4.32 8.78 4.32 13.22 7.05 15.95L12 20.9ZM12 23.73L5.64 17.36C2.12 13.85 2.12 8.15 5.64 4.64C9.15 1.12 14.85 1.12 18.36 4.64C21.88 8.15 21.88 13.85 18.36 17.36L12 23.73ZM12 13C13.1 13 14 12.1 14 11C14 9.9 13.1 9 12 9C10.9 9 10 9.9 10 11C10 12.1 10.9 13 12 13Z" />
                            </svg>
                            {{ $package->country ?? 'Nepal' }}
                        </span>

                        <span class="search-template-challenge">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor">
                                <path
                                    d="M20 13C20 15.21 19.1 17.21 17.66 18.66L19.07 20.07C20.88 18.26 22 15.76 22 13C22 7.48 17.52 3 12 3C6.48 3 2 7.48 2 13C2 15.76 3.12 18.26 4.93 20.07L6.34 18.66C4.9 17.21 4 15.21 4 13C4 8.58 7.58 5 12 5C16.42 5 20 8.58 20 13ZM15.29 8.29L10.79 12.79L12.21 14.21L16.71 9.71L15.29 8.29Z" />
                            </svg>
                            {{ $package->grade ?? 'Challenging' }}
                        </span>
                    </div>

                    <div class="search-template-bottom">
                        <div class="search-template-price">
                            <span class="search-template-currency">USD</span>
                            <span class="search-template-amount">${{ number_format($package->price ?? 0, 2) }}</span>
                        </div>
                        <button class="book-now-button">Book Now</button>
                    </div>
<style>
    .book-now-button:hover {
    background-color: #10418C !important; /* dark blue on hover */
    color: white !important;
}
</style>
                    <div class="search-template-rating">
                        {!! $package->average_rating_stars !!}

                    </div>
                </div>
            </a>
            @endforeach
        </div>
    </section>

    @endif

</div> --}}
    @include('web._partials.page-banner')

    <!-- Holiday Packages Cards Panel -->
    <section class="container py-3 py-lg-5">
        <div class="container">
            <!-- Heading -->
            <div class="row mb-3 mb-lg-4">
                <div class="col-12">
                    <h2 class="text-center m-0 px-3 text-dark fs-1 fw-medium font-family-Onest">
                        Available Packages for {{ $page->title }}
                    </h2>
                </div>
            </div>



            <!-- Cards -->
            <div class="row g-4 my-3">
                <!-- Card 1 -->
                @foreach ($page->packages as $package)
                    <div class="col-12 col-md-6 col-xl-4">
                        <a href="/package-detail.html" class="text-decoration-none">
                            <div class="card border-0 h-100 shadow-sm">
                                <!-- Image with Featured Tag -->
                                <div class="position-relative">
                                    <img src="{{$package->feature_image->getPath()}}"
                                        class="card-img-top rounded-top w-100" style="height: 200px; object-fit: cover;" />
                                </div>

                                <!-- Card Body -->
                                <div class="card-body">
                                    <h6 class="fw-bold mb-2">{{ $package->title }}</h6>
                                    <div id="pkg-desc"
                                        class="desc clamp-lines text-secondary fs-6 fw-normal font-family-Onest  m-0 py-2"
                                        data-lines="4">
                                        {!! $package->description !!}
                                    </div>
                                </div>

                                <!-- Card Footer -->
                                <div
                                    class="card-footer bg-white border-0 d-flex justify-content-between align-items-center px-3 py-2">
                                    <span class="text-warning fw-semibold">${{ $package->price }}</span>
                                    <button class="btn btn-outline-secondary btn-sm rounded-3">
                                        Book Now >
                                    </button>
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endsection
@push('frontend_js')
    <script>
        document.querySelectorAll('.clamp-lines').forEach(el => {
            const lines = parseInt(el.dataset.lines || '4', 10);
            const cs = getComputedStyle(el);
            let lh = parseFloat(cs.lineHeight);

            // If line-height is "normal", approximate from font-size
            if (isNaN(lh)) lh = parseFloat(cs.fontSize) * 1.2;

            el.style.maxHeight = (lh * lines) + 'px';
        });
    </script>
@endpush