@extends('layouts.main')

@section('title', 'Daftar Fasilitas')

@section('content')
<div class="container-fluid">
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm mb-4" role="alert">
            <i class="bi bi-check-circle-fill me-2"></i> {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="card shadow-sm border-0">
        <div class="card-header bg-white py-3 d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3">
            <h5 class="mb-0 fw-bold text-dark">
                <i class="bi bi-tools me-2 text-primary"></i>Daftar Fasilitas Per Kamar
            </h5>
            <button class="btn btn-primary btn-sm shadow-sm" data-bs-toggle="modal" data-bs-target="#addFacility">
                <i class="bi bi-plus-circle me-1"></i> Tambah Fasilitas
            </button>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0 text-center">
                    <thead class="table-light text-nowrap">
                        <tr>
                            <th class="px-4" style="width: 200px;">Nomor Kamar</th>
                            <th class="text-start">Inventaris Fasilitas</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($rooms as $room)
                        <tr>
                            <td class="px-4">
                                <span class="badge bg-dark px-3 py-2">Kamar {{ $room->nomor_kamar }}</span>
                            </td>
                            <td class="text-start">
                                <div class="d-flex flex-wrap gap-2 py-2">
                                @if($room->facilities->count() > 0)
                                    @foreach($room->facilities as $f)
                                        <div class="btn-group" role="group">
                                            <span class="btn btn-sm btn-light border text-dark disabled" style="opacity: 1;">
                                                {{ $f->nama_fasilitas }}
                                            </span>
                                            <form action="{{ route('fasilitas.destroy', $f->id) }}" method="POST" class="d-inline">
                                                @csrf @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Hapus {{ $f->nama_fasilitas }}?')">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    @endforeach
                                @else
                                    <span class="text-muted small fst-italic">Belum ada fasilitas.</span>
                                @endif
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- MODAL TAMBAH --}}
<div class="modal fade" id="addFacility" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        {{-- Mengganti latar belakang modal menjadi gelap --}}
        <div class="modal-content border-secondary border-opacity-25 shadow-lg" style="background: #1a222b; color: white;">
            <div class="modal-header border-secondary border-opacity-25" style="background: #112931;">
                <h5 class="modal-title fw-bold text-info">Tambah Inventaris</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('fasilitas.store') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-bold text-info small">Pilih Nomor Kamar</label>
                        {{-- Mengatur select agar tetap terlihat jelas di tema gelap --}}
                        <select name="kamar_id" class="form-select bg-dark text-white border-secondary border-opacity-50 shadow-none" required>
                            <option value="" selected disabled>-- Pilih Kamar --</option>
                            @foreach($rooms as $room)
                                <option value="{{ $room->nomor_kamar }}">Kamar {{ $room->nomor_kamar }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-2">
                        <label class="form-label fw-bold text-info small">Pilih Fasilitas</label>
                        {{-- Mengubah bg-light menjadi bg-dark --}}
                        <div class="bg-dark rounded p-3 border border-secondary border-opacity-25 shadow-sm" style="max-height: 250px; overflow-y: auto;">
                            <div class="mb-2">
                                <h6 class="small fw-bold text-primary text-uppercase mb-2" style="font-size: 0.7rem;">Dapur</h6>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="nama_fasilitas[]" value="Dapur Pribadi (Luar)" id="d1">
                                    <label class="form-check-label text-light small" for="d1">Dapur Pribadi (Luar)</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="nama_fasilitas[]" value="Dapur Pribadi (Dalam)" id="d2">
                                    <label class="form-check-label text-light small" for="d2">Dapur Pribadi (Dalam)</label>
                                </div>
                            </div>
                            <hr class="border-secondary opacity-25">
                            <div class="mb-2">
                                <h6 class="small fw-bold text-primary text-uppercase mb-2" style="font-size: 0.7rem;">Kamar Mandi & Garasi</h6>
                                <div class="form-check text-light">
                                    <input class="form-check-input" type="checkbox" name="nama_fasilitas[]" value="Kamar Mandi (Luar)" id="k1">
                                    <label class="form-check-label small" for="k1">Kamar Mandi (Luar)</label>
                                </div>
                                <div class="form-check text-light">
                                    <input class="form-check-input" type="checkbox" name="nama_fasilitas[]" value="Kamar Mandi (Dalam)" id="k2">
                                    <label class="form-check-label small" for="k2">Kamar Mandi (Dalam)</label>
                                </div>
                                <div class="form-check text-light">
                                    <input class="form-check-input" type="checkbox" name="nama_fasilitas[]" value="Garasi Bersama" id="g1">
                                    <label class="form-check-label small" for="g1">Garasi Bersama</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-secondary border-opacity-25" style="background: #1a222b;">
                    <button type="button" class="btn btn-outline-secondary btn-sm px-3" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary btn-sm px-4 shadow-sm">Simpan Data</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection