@extends('admin.layout')

@section('title', 'Detail Ballroom')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0 text-gray-800">
            <i class="fas fa-building me-2"></i>Detail Ballroom
        </h1>
        <div>
            <a href="{{ route('admin.ballrooms.edit', $ballroom) }}" class="btn btn-warning me-2">
                <i class="fas fa-edit me-1"></i>Edit
            </a>
            <a href="{{ route('admin.ballrooms.index') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-1"></i>Kembali
            </a>
        </div>
    </div>

    <!-- Ballroom Details -->
    <div class="row">
        <!-- Images Carousel -->
        <div class="col-lg-6">
            <div class="card shadow mb-4">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">Gambar Ballroom</h6>
                </div>
                <div class="card-body">
                    @if($ballroom->images && count($ballroom->images) > 0)
                        <div id="ballroomImagesCarousel" class="carousel slide" data-bs-ride="carousel">
                            <div class="carousel-inner">
                                @foreach($ballroom->images as $index => $image)
                                    <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                                        <img src="{{ asset('storage/' . $image) }}" class="d-block w-100" alt="{{ $ballroom->name }}" style="height: 300px; object-fit: cover;">
                                    </div>
                                @endforeach
                            </div>
                            @if(count($ballroom->images) > 1)
                                <button class="carousel-control-prev" type="button" data-bs-target="#ballroomImagesCarousel" data-bs-slide="prev">
                                    <span class="carousel-control-prev-icon"></span>
                                </button>
                                <button class="carousel-control-next" type="button" data-bs-target="#ballroomImagesCarousel" data-bs-slide="next">
                                    <span class="carousel-control-next-icon"></span>
                                </button>
                            @endif
                        </div>
                    @else
                        <div class="text-center py-5">
                            <i class="fas fa-building fa-3x text-muted mb-3"></i>
                            <p class="text-muted">Tidak ada gambar</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Basic Information -->
        <div class="col-lg-6">
            <div class="card shadow mb-4">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">Informasi Dasar</h6>
                </div>
                <div class="card-body">
                    <table class="table table-borderless">
                        <tr>
                            <td width="30%"><strong>Nama</strong></td>
                            <td>: {{ $ballroom->name }}</td>
                        </tr>
                        <tr>
                            <td><strong>Status</strong></td>
                            <td>: 
                                @if($ballroom->is_active)
                                    <span class="badge bg-success">Aktif</span>
                                @else
                                    <span class="badge bg-danger">Tidak Aktif</span>
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Kapasitas</strong></td>
                            <td>: {{ $ballroom->capacity }} orang</td>
                        </tr>
                        <tr>
                            <td><strong>Luas</strong></td>
                            <td>: {{ $ballroom->size }} m²</td>
                        </tr>
                        <tr>
                            <td><strong>Harga per Jam</strong></td>
                            <td>: Rp {{ number_format($ballroom->price_per_hour, 0, ',', '.') }}</td>
                        </tr>
                        <tr>
                            <td><strong>Dibuat</strong></td>
                            <td>: {{ $ballroom->created_at->format('d M Y H:i') }}</td>
                        </tr>
                        <tr>
                            <td><strong>Diupdate</strong></td>
                            <td>: {{ $ballroom->updated_at->format('d M Y H:i') }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Description -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow mb-4">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">Deskripsi</h6>
                </div>
                <div class="card-body">
                    @if($ballroom->description)
                        <p class="mb-0">{{ $ballroom->description }}</p>
                    @else
                        <p class="text-muted mb-0">Tidak ada deskripsi</p>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Facilities -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow mb-4">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">Fasilitas</h6>
                </div>
                <div class="card-body">
                    @if($ballroom->facilities && count($ballroom->facilities) > 0)
                        <div class="row">
                            @foreach($ballroom->facilities as $facility)
                                <div class="col-md-3 col-sm-6 mb-2">
                                    <div class="d-flex align-items-center">
                                        <i class="fas fa-check-circle text-success me-2"></i>
                                        <span>{{ $facility }}</span>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <p class="text-muted mb-0">Tidak ada fasilitas</p>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Action Buttons -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <form action="{{ route('admin.ballrooms.destroy', $ballroom) }}" method="POST" class="d-inline">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger" onclick="return confirm('Apakah Anda yakin ingin menghapus ballroom ini?')">
                                <i class="fas fa-trash me-1"></i>Hapus Ballroom
                            </button>
                        </form>
                        <div>
                            <a href="{{ route('admin.ballrooms.edit', $ballroom) }}" class="btn btn-warning me-2">
                                <i class="fas fa-edit me-1"></i>Edit Ballroom
                            </a>
                            <a href="{{ route('admin.ballrooms.index') }}" class="btn btn-outline-secondary">
                                <i class="fas fa-arrow-left me-1"></i>Kembali ke Daftar
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection