@extends('layouts.app')

@section('content')
<style>
    .search-header-banner {
        background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
        color: white;
        padding: 50px 0 70px;
    }

    .search-header-title {
        font-family: 'Playfair Display', serif;
        font-size: 2.2rem;
        font-weight: 700;
        margin-bottom: 8px;
    }

    .search-header-sub {
        color: #94A3B8;
        font-size: 0.95rem;
    }

    .search-summary-card {
        background: #ffffff;
        padding: 24px 30px;
        border-radius: 16px;
        border: 1px solid #E2E8F0;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
        margin-top: -35px;
        margin-bottom: 40px;
    }

    .summary-label {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #64748B;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .summary-val {
        font-size: 1.05rem;
        color: #0F172A;
        font-weight: 700;
    }

    .btn-new-search {
        background: #ffffff;
        border: 1px solid #C5A059;
        color: #C5A059;
        font-weight: 600;
        padding: 10px 20px;
        border-radius: 10px;
        transition: all 0.2s ease;
        text-decoration: none;
        display: inline-block;
        width: 100%;
        text-align: center;
    }

    .btn-new-search:hover {
        background: #C5A059;
        color: #ffffff;
        text-decoration: none;
    }

    .search-room-card {
        background: #ffffff;
        border: 1px solid #E2E8F0;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .search-room-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1);
    }

    .search-room-thumb {
        position: relative;
        height: 220px;
        background: #E2E8F0;
    }

    .search-room-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .search-room-badge {
        position: absolute;
        top: 14px;
        left: 14px;
        background: rgba(15, 23, 42, 0.85);
        color: #ffffff;
        padding: 4px 12px;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 600;
        backdrop-filter: blur(4px);
    }

    .search-room-body {
        padding: 24px;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    .search-room-title {
        font-family: 'Playfair Display', serif;
        font-size: 1.3rem;
        font-weight: 700;
        color: #0F172A;
        margin-bottom: 6px;
    }

    .search-property-name {
        color: #64748B;
        font-size: 0.85rem;
        font-weight: 500;
        margin-bottom: 12px;
    }

    .price-box-pro {
        background: #F8FAFC;
        border: 1px solid #E2E8F0;
        padding: 14px;
        border-radius: 12px;
        text-align: center;
        margin-top: auto;
        margin-bottom: 18px;
    }

    .price-total-val {
        font-size: 1.35rem;
        font-weight: 700;
        color: #0F172A;
    }

    .btn-search-book {
        background: #C5A059;
        color: #ffffff;
        font-weight: 600;
        padding: 10px;
        border-radius: 8px;
        text-align: center;
        text-decoration: none;
        display: block;
        transition: background 0.2s ease;
    }

    .btn-search-book:hover {
        background: #B28E46;
        color: #ffffff;
        text-decoration: none;
    }

    .btn-search-details {
        background: #ffffff;
        border: 1px solid #E2E8F0;
        color: #0F172A;
        font-weight: 600;
        padding: 10px;
        border-radius: 8px;
        text-align: center;
        text-decoration: none;
        display: block;
        margin-bottom: 8px;
        transition: all 0.2s ease;
    }

    .btn-search-details:hover {
        background: #0F172A;
        color: #ffffff;
        border-color: #0F172A;
        text-decoration: none;
    }
</style>

<section class="search-header-banner">
    <div class="container">
        <h1 class="search-header-title">Accommodation Search Results</h1>
        <p class="search-header-sub">Found {{ $availableKamars->count() }} available room(s) for your stay dates.</p>
    </div>
</section>

<div class="container pb-5">
    <!-- Search Summary Card -->
    <div class="search-summary-card">
        <div class="row align-items-center">
            <div class="col-md-3 mb-3 mb-md-0">
                <div class="summary-label">Check-in Date</div>
                <div class="summary-val">{{ $checkIn->format('d M Y') }}</div>
            </div>
            <div class="col-md-3 mb-3 mb-md-0">
                <div class="summary-label">Check-out Date</div>
                <div class="summary-val">{{ $checkOut->format('d M Y') }}</div>
            </div>
            <div class="col-md-3 mb-3 mb-md-0">
                <div class="summary-label">Duration</div>
                <div class="summary-val">{{ $nights }} {{ $nights > 1 ? 'Nights' : 'Night' }}</div>
            </div>
            <div class="col-md-3">
                <a href="/" class="btn-new-search">
                    Modify Search
                </a>
            </div>
        </div>
    </div>

    <!-- Room Grid -->
    <div class="row">
        @forelse($availableKamars as $kamar)
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="search-room-card">
                    <div class="search-room-thumb">
                        @if($kamar->galleries && $kamar->galleries->count() > 0)
                            <img src="{{ asset('storage/' . $kamar->galleries->first()->foto_path) }}" alt="{{ $kamar->tipe_kamar }}">
                        @elseif($kamar->foto)
                            <img src="{{ asset('storage/' . $kamar->foto) }}" alt="{{ $kamar->tipe_kamar }}">
                        @else
                            <img src="https://images.unsplash.com/photo-1590490360182-c33d57733427?w=600" alt="{{ $kamar->tipe_kamar }}">
                        @endif

                        <div class="search-room-badge">
                            {{ ucfirst($kamar->property->jenis ?? 'Property') }}
                        </div>
                    </div>

                    <div class="search-room-body">
                        <h3 class="search-room-title">{{ $kamar->tipe_kamar }}</h3>
                        <div class="search-property-name">{{ $kamar->property->nama_property ?? 'Vibes Property' }}</div>

                        <p class="text-muted small mb-3">
                            Capacity: {{ $kamar->kapasitas }} Guests &bull; Total: {{ $kamar->jumlah_kamar }} Units &bull; 
                            <span class="{{ ($kamar->sisa_kamar ?? $kamar->jumlah_kamar) <= 2 ? 'text-danger font-weight-bold' : 'text-success font-weight-bold' }}">
                                Remaining: {{ $kamar->sisa_kamar ?? $kamar->jumlah_kamar }} Unit
                            </span>
                        </p>

                        <div class="price-box-pro">
                            <div class="price-total-val">
                                Rp {{ number_format($kamar->harga_per_malam * $nights, 0, ',', '.') }}
                            </div>
                            <small class="text-muted">
                                Rp {{ number_format($kamar->harga_per_malam, 0, ',', '.') }} / night × {{ $nights }} night(s)
                            </small>
                        </div>

                        <a href="{{ route('guest.kamar.show', $kamar->kamar_id) }}" class="btn-search-details">
                            View Room Details
                        </a>
                        <a href="{{ route('guest.booking.create', $kamar->kamar_id) }}?check_in={{ $checkIn->format('Y-m-d') }}&check_out={{ $checkOut->format('Y-m-d') }}" 
                           class="btn-search-book">
                            Book This Room
                        </a>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12">
                <div class="text-center p-5 bg-white rounded-lg border border-light shadow-sm">
                    <h3 class="font-weight-bold mb-2" style="font-family: 'Playfair Display', serif; color: #0F172A;">No Accommodations Found</h3>
                    <p class="text-muted mb-4">We could not find available rooms for your selected property or dates. Please try adjusting your search parameters.</p>
                    <a href="/" class="btn btn-dark px-4 py-2" style="background: #0F172A; border-radius: 8px;">
                        Try New Search
                    </a>
                </div>
            </div>
        @endforelse
    </div>
</div>
@endsection