@extends('adminlte::page')

@section('title', 'Manajemen Kamar | Smart Pesantren')

@section('content_header')
    <div class="container-fluid pt-3">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h1 class="text-dark font-weight-bold" style="font-family: 'Poppins', sans-serif;">
                    Data Kamar Asrama
                </h1>
                <p class="text-muted small mb-0">
                    <i class="fas fa-bed mr-1"></i> Kelola unit kamar dan monitor kapasitas hunian.
                </p>
            </div>
            <div>
                <a href="{{ route('pesantren.kamar.create') }}" class="btn btn-primary btn-lg shadow-sm rounded-pill px-4 font-weight-bold hover-scale">
                    <i class="fas fa-plus mr-2"></i> Tambah Kamar
                </a>
            </div>
        </div>
    </div>
@stop

@section('content')
    <div class="container-fluid pb-5">
        
        {{-- Alert Notifikasi --}}
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm rounded-lg mb-4" role="alert">
                <div class="d-flex align-items-center">
                    <i class="fas fa-check-circle fa-lg mr-3"></i>
                    <div>
                        <strong>Berhasil!</strong> {{ session('success') }}
                    </div>
                </div>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif

        {{-- Statistik Ringkas (Opsional) --}}
        <div class="row mb-4">
            <div class="col-md-4 col-sm-6 mb-3">
                <div class="card border-0 shadow-sm rounded-lg bg-white h-100">
                    <div class="card-body p-4 d-flex align-items-center">
                        <div class="icon-box bg-soft-info text-info rounded-circle mr-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                            <i class="fas fa-door-open fa-lg"></i>
                        </div>
                        <div>
                            <h5 class="font-weight-bold text-dark mb-0">{{ $kamars->total() ?? $kamars->count() }}</h5>
                            <small class="text-muted text-uppercase font-weight-bold text-xs ls-1">Total Unit Kamar</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 mb-3">
                 <div class="card border-0 shadow-sm rounded-lg bg-white h-100">
                    <div class="card-body p-4 d-flex align-items-center">
                        <div class="icon-box bg-soft-success text-success rounded-circle mr-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                            <i class="fas fa-bed fa-lg"></i>
                        </div>
                        <div>
                            {{-- Perlu dihitung di controller idealnya, ini contoh saja --}}
                            <h5 class="font-weight-bold text-dark mb-0">{{ $kamars->sum('kapasitas') }}</h5>
                            <small class="text-muted text-uppercase font-weight-bold text-xs ls-1">Total Kapasitas Ranjang</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Filter & Search Panel --}}
        <div class="card border-0 shadow-sm rounded-lg mb-4">
            <div class="card-body p-4">
                <form method="GET" action="{{ route('pesantren.kamar.index') }}">
                    <div class="row align-items-end">
                        <div class="col-md-4 mb-3 mb-md-0">
                            <label class="small text-muted font-weight-bold text-uppercase ls-1">Filter Gedung</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text bg-light border-0"><i class="fas fa-building text-muted"></i></span>
                                </div>
                                <select name="asrama_id" class="form-control border-0 bg-light shadow-none" onchange="this.form.submit()">
                                    <option value="">-- Tampilkan Semua --</option>
                                    @foreach($asramas as $asrama)
                                        <option value="{{ $asrama->id }}" {{ request('asrama_id') == $asrama->id ? 'selected' : '' }}>
                                            {{ $asrama->nama_gedung }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-8 text-md-right">
                             {{-- Tempat tombol export atau search tambahan --}}
                        </div>
                    </div>
                </form>
            </div>
        </div>

        {{-- Tabel Data Modern --}}
        <div class="card border-0 shadow-sm rounded-lg">
            <div class="card-header bg-white py-3 border-bottom-0">
                <h6 class="font-weight-bold text-dark m-0">
                    <i class="fas fa-list text-primary mr-2"></i> Daftar Kamar
                </h6>
            </div>
            
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0 w-100" id="tableKamar">
                        <thead class="bg-light">
                            <tr>
                                <th class="pl-4 py-3 border-0 small text-uppercase font-weight-bold text-muted" width="5%">No</th>
                                <th class="py-3 border-0 small text-uppercase font-weight-bold text-muted" width="25%">Nama Kamar & Gedung</th>
                                <th class="py-3 border-0 small text-uppercase font-weight-bold text-muted" width="20%">Wali Kamar</th>
                                <th class="py-3 border-0 small text-uppercase font-weight-bold text-muted text-center" width="25%">Okupansi</th>
                                <th class="py-3 border-0 small text-uppercase font-weight-bold text-muted text-center" width="10%">Status</th>
                                <th class="py-3 border-0 small text-uppercase font-weight-bold text-muted text-center" width="15%">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($kamars as $kamar)
                                <tr>
                                    <td class="pl-4 align-middle font-weight-bold text-muted">{{ $loop->iteration }}</td>
                                    
                                    <td class="align-middle">
                                        <div class="d-flex align-items-center">
                                            <div class="symbol symbol-40px mr-3">
                                                <div class="symbol-label bg-light-primary text-primary font-weight-bold rounded-lg d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                                    <i class="fas fa-door-closed"></i>
                                                </div>
                                            </div>
                                            <div>
                                                <span class="text-dark font-weight-bold d-block">{{ $kamar->nama_kamar }}</span>
                                                <small class="text-muted">
                                                    <i class="fas fa-building text-xs mr-1"></i> {{ $kamar->asrama->nama_gedung ?? '-' }}
                                                </small>
                                            </div>
                                        </div>
                                    </td>

                                    <td class="align-middle">
                                        @if($kamar->waliKamar)
                                            <div class="d-flex align-items-center">
                                                <div class="symbol symbol-30px mr-2">
                                                    <div class="symbol-label bg-light-secondary text-dark font-weight-bold rounded-circle d-flex align-items-center justify-content-center" style="width: 30px; height: 30px; font-size: 0.8rem;">
                                                        {{ substr($kamar->waliKamar->name, 0, 1) }}
                                                    </div>
                                                </div>
                                                <span class="text-dark text-sm">{{ $kamar->waliKamar->name }}</span>
                                            </div>
                                        @else
                                            <span class="text-muted font-italic text-sm">Belum ditentukan</span>
                                        @endif
                                    </td>

                                    <td class="align-middle">
                                        <div class="d-flex align-items-center justify-content-between mb-1">
                                            <span class="text-dark font-weight-bold small">{{ $kamar->santris_count }} / {{ $kamar->kapasitas }}</span>
                                            <span class="text-muted text-xs">Terisi</span>
                                        </div>
                                        @php 
                                            $persen = $kamar->kapasitas > 0 ? ($kamar->santris_count / $kamar->kapasitas) * 100 : 0;
                                            $color = 'bg-success';
                                            if($persen >= 80) $color = 'bg-warning';
                                            if($persen >= 100) $color = 'bg-danger';
                                        @endphp
                                        <div class="progress" style="height: 6px; border-radius: 4px;">
                                            <div class="progress-bar {{ $color }}" role="progressbar" style="width: {{ $persen }}%" aria-valuenow="{{ $persen }}" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </td>

                                    <td class="align-middle text-center">
                                        {{-- Gunakan helper atau logic view sederhana untuk badge --}}
                                        @if($kamar->status == 'aktif')
                                            <span class="badge bg-soft-success text-success px-2 py-1 rounded-pill">Aktif</span>
                                        @elseif($kamar->status == 'perbaikan')
                                            <span class="badge bg-soft-warning text-warning px-2 py-1 rounded-pill">Perbaikan</span>
                                        @else
                                            <span class="badge bg-soft-danger text-danger px-2 py-1 rounded-pill">Penuh/Tutup</span>
                                        @endif
                                    </td>

                                    <td class="align-middle text-center">
                                        <div class="btn-group">
                                            <a href="{{ route('pesantren.kamar.edit', $kamar->id) }}" class="btn btn-sm btn-icon btn-light-warning text-warning rounded-circle mr-2 hover-scale" title="Edit">
                                                <i class="fas fa-pencil-alt"></i>
                                            </a>
                                            <form action="{{ route('pesantren.kamar.destroy', $kamar->id) }}" method="POST" onsubmit="return confirm('Hapus kamar ini? Data santri di dalamnya perlu dipindahkan terlebih dahulu.');" style="display:inline-block;">
                                                @csrf @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-icon btn-light-danger text-danger rounded-circle hover-scale" title="Hapus">
                                                    <i class="fas fa-trash-alt"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center py-5">
                                        <div class="d-flex flex-column align-items-center justify-content-center">
                                            <div class="bg-light rounded-circle p-4 mb-3">
                                                <i class="fas fa-bed fa-3x text-muted opacity-50"></i>
                                            </div>
                                            <h6 class="font-weight-bold text-dark">Belum ada data kamar</h6>
                                            <p class="text-muted small mb-3">Silakan tambahkan unit kamar baru.</p>
                                            <a href="{{ route('pesantren.kamar.create') }}" class="btn btn-primary btn-sm rounded-pill px-4 font-weight-bold">
                                                <i class="fas fa-plus mr-1"></i> Tambah Sekarang
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
             {{-- Pagination --}}
             <div class="card-footer bg-white border-top-0 d-flex justify-content-end py-3">
                @if(method_exists($kamars, 'links'))
                    {{ $kamars->appends(request()->query())->links() }}
                @endif
            </div>
        </div>
    </div>
@stop

@section('plugins.Sweetalert2', true)

@section('css')
    <style>
        /* --- Modern Variables --- */
        :root {
            --primary: #007bff;
            --border-radius: 0.75rem;
        }

        body { font-family: 'Poppins', sans-serif; background-color: #f4f6f9; }
        .ls-1 { letter-spacing: 0.5px; }
        .rounded-lg { border-radius: var(--border-radius) !important; }

        /* Soft Backgrounds */
        .bg-soft-info { background-color: rgba(23, 162, 184, 0.1) !important; color: #17a2b8 !important; }
        .bg-soft-success { background-color: rgba(40, 167, 69, 0.1) !important; color: #28a745 !important; }
        .bg-soft-warning { background-color: rgba(255, 193, 7, 0.15) !important; color: #856404 !important; }
        .bg-soft-danger { background-color: rgba(220, 53, 69, 0.1) !important; color: #dc3545 !important; }
        .bg-soft-primary { background-color: rgba(0, 123, 255, 0.1) !important; color: #007bff !important; }

        /* Button Utilities */
        .btn-icon { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
        .hover-scale { transition: transform 0.2s; }
        .hover-scale:hover { transform: scale(1.1); }
        .btn-light-warning { background-color: #fff3cd; color: #856404; }
        .btn-light-danger { background-color: #f8d7da; color: #721c24; }

        /* Table Styling */
        .table td { vertical-align: middle; border-top: 1px solid #f8f9fa; padding: 1rem 0.75rem; }
        .table thead th { border-bottom: none; background-color: #f8f9fa; }
    </style>
@stop

@section('js')
    {{-- Jika ingin filter otomatis submit saat select berubah, logic sudah ada di onchange="this.form.submit()" pada HTML --}}
@stop