@extends('layout.main')

@section('content')

<div class="max-w-6xl mt-14 mx-auto px-4 py-6">
    <!-- Galeri Foto -->
    <div
        class="rounded-2xl overflow-hidden mb-4 bg-white shadow-sm border border-gray-100"
    >
        <div class="relative w-full h-52 sm:h-72 md:h-96 lg:h-[550px]">
            @php
                $images = explode(',', $package->images);
            @endphp
            <img
                id="mainImg"
                src="{{ asset('uploads/packages/'. $images[0]) }}"
                class="w-full h-full object-cover"
                alt="Pura Ulun Danu Bratan Bali"
            />
        </div>
        <div class="flex gap-2 p-3">
            {{-- ini dari perulangan gambar yg dipisah dengan koma di database nya --}}
            @foreach ($images as $index => $image)
                <img
                    src="{{ asset('uploads/packages/'. $image) }}"
                    onclick="setMain(this)"
                    class="w-28 h-20 object-cover rounded-lg cursor-pointer border-2 {{ $index === 0 ? 'border-blue-500' : 'border-transparent' }} hover:opacity-80 transition-opacity"
                    alt="thumb{{ $index + 1 }}"
                />
            @endforeach
        </div>
    </div>

    <!-- Judul & Info -->
    <div class="mb-1">
        <h1 class="text-xl font-semibold mb-1 text-gray-800">
            {{ $package->title }}
        </h1>
        <div class="flex items-center gap-1 text-sm mb-3 text-gray-500">
            <span>Category</span>
            <a href="#" class="text-blue-500 hover:underline font-medium">{{ $package->category_name }}</a>
        </div>
        <div class="flex items-center gap-4 text-sm text-gray-500">
            <span class="flex items-center gap-1">
                <i class="ti ti-clock text-base"></i> 
                @if ($package->duration_day > 1)
                    {{ $package->duration_day }} Days
                @else
                    {{ $package->duration_day }} Day
                @endif
                @if ($package->duration_night > 1)
                    {{ $package->duration_night }} Nights
                @else
                    {{ $package->duration_night }} Night
                @endif
            </span>
            <span class="flex items-center gap-1">
                <i class="ti ti-users text-base"></i> Min. {{ $package->min_pax }} Pax
            </span>
            <span class="flex items-center gap-1">
                <i class="ti ti-map-pin text-base"></i> {{ $package->location }}
            </span>
        </div>
    </div>

    <!-- Tab Navigation -->
    <div class="flex gap-0 border-b border-gray-200 mt-5">
        <button
            onclick="switchTab(this, 'deskripsi')"
            class="tab-btn px-5 py-3 text-sm font-medium border-b-2 border-blue-500 text-blue-500 bg-transparent"
        >
            Deskripsi
        </button>
        <button
            onclick="switchTab(this, 'include')"
            class="tab-btn px-5 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 bg-transparent"
        >
            Include
        </button>
        <button
            onclick="switchTab(this, 'exclude')"
            class="tab-btn px-5 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 bg-transparent"
        >
            Exclude
        </button>
        <button
            onclick="switchTab(this, 'itinerary')"
            class="tab-btn px-5 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 bg-transparent"
        >
            Itinerary
        </button>
        <button
            onclick="switchTab(this, 'notes')"
            class="tab-btn px-5 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 bg-transparent"
        >
            Notes
        </button>
    </div>

    <!-- Tab Content -->
    <div class="py-5">
        <!-- Deskripsi -->
        <div id="tab-deskripsi" class="tab-content">
            <p class="text-sm leading-relaxed mt-3 text-gray-500">
                {{ $package->description }}
            </p>
        </div>

        <!-- Include -->
        <div id="tab-include" class="tab-content hidden">
            <ul class="space-y-2 text-sm text-gray-500">
                {{-- ini list nya perulangan dari field include menggunakan separator --}}
                @foreach(explode('//', $package->include) as $item)
                    <li class="flex items-start gap-2">
                        <i class="ti ti-circle-check text-green-500 mt-[-2px] text-base"></i>
                        {{ $item }}
                    </li>
                @endforeach
            </ul>
        </div>

        <!-- Exclude -->
        <div id="tab-exclude" class="tab-content hidden">
            <ul class="space-y-2 text-sm text-gray-500">
                {{-- ini list nya perulangan dari field exclude menggunakan separator --}}
                @foreach(explode('//', $package->exclude) as $item)
                    <li class="flex items-start gap-2">
                        <i class="ti ti-circle-x text-red-400 mt-[-2px] text-base"></i>
                        {{ $item }}
                    </li>
                @endforeach
            </ul>
        </div>

        <!-- Itinerary -->
        <div id="tab-itinerary" class="tab-content hidden space-y-4">
            {{-- ini list nya perulangan dari field itinerary menggunakan separator --}}
            @foreach(explode('//', $package->itinerary) as $item)
                <div class="border border-gray-200 rounded-xl p-4 text-sm">
                    <p class="text-gray-500">
                        {{ $item }}
                    </p>
                </div>
            @endforeach
            
        </div>

        <!-- Notes -->
        <div id="tab-notes" class="tab-content hidden">
            <ul class="space-y-2 text-sm text-gray-500">
                {{-- ini list nya perulangan dari field notes menggunakan separator --}}
                @foreach(explode('//', $package->notes) as $item)
                    <li class="flex items-start gap-2">
                        <i
                            class="ti ti-info-circle text-blue-400 mt-[-2px] text-base"
                        ></i>
                        {{ $item }}
                    </li>
                @endforeach
            </ul>
        </div>
    </div>

    <!-- Pricing Card -->
    <div class="border border-gray-200 rounded-2xl p-5 mt-2 bg-gray-50">
        <div class="flex items-center justify-between flex-wrap gap-3">
            <div>
                <p class="text-xs text-gray-400 mb-1">Mulai dari</p>
                <p class="text-2xl font-semibold text-blue-600">Rp {{ number_format($package->price_starting_from, 0, ',', '.') }}</p>
                <p class="text-xs text-gray-400 mt-0.5">/ pax (min. {{ $package->min_pax }} pax)</p>
            </div>
            <div class="flex gap-2">
                <button
                    class="flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 transition-colors"
                >
                    <i class="ti ti-phone"></i> Hubungi Kami
                </button>
                <button
                    class="flex items-center gap-2 px-5 py-2.5 rounded-xl text-sm font-medium text-white bg-navy hover:bg-blue-900 transition-colors"
                >
                    <i class="ti ti-shopping-cart"></i> Pesan Sekarang
                </button>
            </div>
        </div>
    </div>
</div>

@endsection