@extends('layouts.app')

@section('content')
<style>
    .carousel-item img {
        height: 500px;
        object-fit: cover;
    }

    .thumbnail-gallery {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 15px;
    }

    .thumbnail-gallery img {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 8px;
        cursor: pointer;
        border: 2px solid transparent;
        transition: all 0.3s;
    }

    .thumbnail-gallery img:hover,
    .thumbnail-gallery img.active {
        border-color: #667eea;
        transform: scale(1.1);
    }
</style>

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="fas fa-bed"></i> Detail Kamar</h5>
                </div>

                <div class="card-body">
                    @if($kamar->galleries->count() > 0)
                        <!-- Carousel -->
                        <div id="kamarCarousel" class="carousel slide mb-3" data-ride="carousel">
                            <div class="carousel-inner">
                                @foreach($kamar->galleries as $index => $gallery)
                                    <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                                        <img src="{{ asset('storage/' . $gallery->foto_path) }}" 
                                             class="d-block w-100" 
                                             alt="Foto {{ $index + 1 }}">
                                    </div>
                                @endforeach
                            </div>
                            <a class="carousel-control-prev" href="#kamarCarousel" role="button" data-slide="prev">
                                <span class="carousel-control-prev-icon"></span>
                            </a>
                            <a class="carousel-control-next" href="#kamarCarousel" role="button" data-slide="next">
                                <span class="carousel-control-next-icon"></span>
                            </a>
                        </div>

                        <!-- Thumbnails -->
                        <div class="thumbnail-gallery">
                            @foreach($kamar->galleries as $index => $gallery)
                                <img src="{{ asset('storage/' . $gallery->foto_path) }}" 
                                     alt="Thumbnail {{ $index + 1 }}"
                                     class="{{ $index === 0 ? 'active' : '' }}"
                                     data-target="#kamarCarousel" 
                                     data-slide-to="{{ $index }}">
                            @endforeach
                        </div>
                    @elseif($kamar->foto)
                        <div class="text-center mb-4">
                            <img src="{{ asset('storage/' . $kamar->foto) }}" 
                                 alt="{{ $kamar->tipe_kamar }}" 
                                 class="img-fluid" 
                                 style="max-height: 400px; object-fit: cover; border-radius: 15px;">
                        </div>
                    @else
                        <div class="alert alert-warning">Tidak ada foto tersedia</div>
                    @endif

                    <hr class="my-4">

                    <table class="table table-bordered">
                        <tr>
                            <th style="width: 30%;">Property</th>
                            <td>
                                <strong>{{ $kamar->property->nama_property }}</strong>
                                <span class="badge badge-{{ $kamar->property->jenis == 'villa' ? 'success' : 'info' }}">
                                    {{ ucfirst($kamar->property->jenis) }}
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <th>Tipe Kamar</th>
                            <td>{{ $kamar->tipe_kamar }}</td>
                        </tr>
                        <tr>
                            <th>Harga Per Malam</th>
                            <td><strong class="text-primary">Rp {{ number_format($kamar->harga_per_malam, 0, ',', '.') }}</strong></td>
                        </tr>
                        <tr>
                            <th>Kapasitas</th>
                            <td><i class="fas fa-users"></i> {{ $kamar->kapasitas }} orang</td>
                        </tr>
                        <tr>
    <th><i class="fas fa-door-open"></i> Jumlah Unit Kamar</th>
    <td>
        <span class="badge badge-info" style="font-size: 1.1rem; padding: 8px 15px;">
            {{ $kamar->jumlah_kamar ?? 1 }} Unit Tersedia
        </span>
    </td>
</tr>
                        <tr>
                            <th>Status</th>
                            <td>
                                <span class="badge badge-{{ $kamar->status == 'available' ? 'success' : 'secondary' }}">
                                    {{ $kamar->status == 'available' ? 'Tersedia' : 'Tidak Tersedia' }}
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <th>Jumlah Foto</th>
                            <td>{{ $kamar->galleries->count() }} foto</td>
                        </tr>
                        <tr>
                            <th>Deskripsi</th>
                            <td>{{ $kamar->deskripsi ?? '-' }}</td>
                        </tr>
                        <tr>
                            <th>Dibuat</th>
                            <td>{{ $kamar->created_at->format('d/m/Y H:i') }}</td>
                        </tr>
                        <tr>
                            <th>Terakhir Diupdate</th>
                            <td>{{ $kamar->updated_at->format('d/m/Y H:i') }}</td>
                        </tr>
                    </table>

                    <div class="mt-4">
                        <a href="{{ route('admin.kamar.edit', $kamar->kamar_id) }}" class="btn btn-warning">
                            <i class="fas fa-edit"></i> Edit
                        </a>
                        <a href="{{ route('admin.kamar.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Kembali
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Highlight active thumbnail
$('.thumbnail-gallery img').on('click', function() {
    $('.thumbnail-gallery img').removeClass('active');
    $(this).addClass('active');
});

// Sync thumbnail with carousel slide
$('#kamarCarousel').on('slide.bs.carousel', function (e) {
    const index = $(e.relatedTarget).index();
    $('.thumbnail-gallery img').removeClass('active');
    $('.thumbnail-gallery img').eq(index).addClass('active');
});
</script>
@endsection