@extends('adminlte::page')

@section('title', 'Manajemen Gedung Asrama | 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 Gedung Asrama
                </h1>
                <p class="text-muted small mb-0">
                    <i class="fas fa-building mr-1"></i> Kelola fasilitas hunian santri.
                </p>
            </div>
            <div>
                <a href="{{ route('pesantren.asrama.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 Gedung
                </a>
            </div>
        </div>
    </div>
@stop

@section('content')
    <div class="container-fluid pb-5">
        
        {{-- SECTION 1: STATISTIK RINGKAS --}}
        <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-primary text-white h-100 overflow-hidden position-relative">
                    <div class="card-body p-4 d-flex align-items-center">
                        <div class="mr-3">
                            <i class="fas fa-building fa-3x opacity-50"></i>
                        </div>
                        <div>
                            <h5 class="font-weight-bold mb-0">{{ $asramas->count() }} Gedung</h5>
                            <small class="text-white-50 text-uppercase ls-1 font-weight-bold">Total Fasilitas</small>
                        </div>
                    </div>
                    <div class="position-absolute" style="right: -20px; bottom: -20px; font-size: 8rem; opacity: 0.1;">
                        <i class="fas fa-city"></i>
                    </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-info text-info rounded-circle d-flex align-items-center justify-content-center mr-3" 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">
                                {{ $asramas->sum('kamars_count') }} Kamar
                            </h5>
                            <small class="text-muted text-uppercase ls-1 font-weight-bold">Total Kapasitas Ruang</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-12 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 d-flex align-items-center justify-content-center mr-3" style="width: 50px; height: 50px;">
                            <i class="fas fa-user-tie fa-lg"></i>
                        </div>
                        <div>
                            <h5 class="font-weight-bold text-dark mb-0">
                                {{ $asramas->whereNotNull('kepala_asrama_id')->count() }} Musyrif
                            </h5>
                            <small class="text-muted text-uppercase ls-1 font-weight-bold">Kepala Asrama Aktif</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- SECTION 2: TABEL DATA MODERN --}}
        <div class="card border-0 shadow-sm rounded-lg">
            <div class="card-header bg-white py-3 border-bottom-0 d-flex justify-content-between align-items-center">
                <div class="d-flex align-items-center">
                    <i class="fas fa-list text-primary mr-2"></i>
                    <h6 class="font-weight-bold text-dark m-0">Daftar Gedung</h6>
                </div>
                {{-- Search Bar (Optional implementation via Datatables or backend) --}}
                <div class="card-tools">
                    <div class="input-group input-group-sm" style="width: 200px;">
                        <input type="text" id="tableSearch" class="form-control border-right-0 rounded-left" placeholder="Cari gedung...">
                        <div class="input-group-append">
                            <span class="input-group-text bg-white border-left-0 rounded-right"><i class="fas fa-search text-muted"></i></span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0" id="tableGedung">
                        <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">Nama Gedung</th>
                                <th class="py-3 border-0 small text-uppercase font-weight-bold text-muted text-center" width="15%">Peruntukan</th>
                                <th class="py-3 border-0 small text-uppercase font-weight-bold text-muted" width="25%">Kepala Asrama</th>
                                <th class="py-3 border-0 small text-uppercase font-weight-bold text-muted text-center" width="15%">Kapasitas</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($asramas as $asrama)
                                <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-building"></i>
                                                </div>
                                            </div>
                                            <div>
                                                <span class="text-dark font-weight-bold d-block">{{ $asrama->nama_gedung }}</span>
                                                <small class="text-muted">Kode: AS-{{ str_pad($asrama->id, 3, '0', STR_PAD_LEFT) }}</small>
                                            </div>
                                        </div>
                                    </td>

                                    <td class="align-middle text-center">
                                        @if($asrama->jenis == 'putra')
                                            <span class="badge bg-soft-primary text-primary px-3 py-2 rounded-pill font-weight-bold">
                                                <i class="fas fa-male mr-1"></i> Putra
                                            </span>
                                        @else
                                            <span class="badge bg-soft-danger text-danger px-3 py-2 rounded-pill font-weight-bold">
                                                <i class="fas fa-female mr-1"></i> Putri
                                            </span>
                                        @endif
                                    </td>

                                    <td class="align-middle">
                                        @if($asrama->kepalaAsrama)
                                            <div class="d-flex align-items-center">
                                                <div class="symbol symbol-30px mr-2">
                                                     {{-- Avatar Placeholder --}}
                                                    <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($asrama->kepalaAsrama->name, 0, 1) }}
                                                    </div>
                                                </div>
                                                <span class="text-dark font-weight-medium text-sm">{{ $asrama->kepalaAsrama->name }}</span>
                                            </div>
                                        @else
                                            <span class="text-muted text-sm font-italic">Belum ditentukan</span>
                                        @endif
                                    </td>

                                    <td class="align-middle text-center">
                                        <div class="d-flex flex-column align-items-center">
                                            <h6 class="font-weight-bold text-dark mb-0">{{ $asrama->kamars_count }}</h6>
                                            <small class="text-muted text-xs">Kamar</small>
                                        </div>
                                    </td>

                                    <td class="align-middle text-center">
                                        <div class="btn-group" role="group">
                                            <a href="{{ route('pesantren.asrama.edit', $asrama->id) }}" class="btn btn-sm btn-icon btn-light-warning text-warning rounded-circle mr-2" title="Edit Data">
                                                <i class="fas fa-pencil-alt"></i>
                                            </a>
                                            <form action="{{ route('pesantren.asrama.destroy', $asrama->id) }}" method="POST" onsubmit="return confirm('Hapus gedung {{ $asrama->nama_gedung }}? Data kamar terkait juga akan terhapus.');" style="display:inline-block;">
                                                @csrf @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-icon btn-light-danger text-danger rounded-circle" title="Hapus Gedung">
                                                    <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-building fa-3x text-muted opacity-50"></i>
                                            </div>
                                            <h6 class="font-weight-bold text-dark">Belum ada data gedung</h6>
                                            <p class="text-muted small mb-3">Mulai tambahkan gedung asrama pertama Anda.</p>
                                            <a href="{{ route('pesantren.asrama.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>
            
            {{-- Footer Pagination (jika menggunakan paginate di controller) --}}
            @if(method_exists($asramas, 'links'))
                <div class="card-footer bg-white border-top-0 d-flex justify-content-end py-3">
                    {{ $asramas->links() }}
                </div>
            @endif
        </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; }

        /* --- Badges & Backgrounds --- */
        .bg-soft-primary { background-color: rgba(0, 123, 255, 0.1) !important; color: #007bff !important; }
        .bg-soft-danger { background-color: rgba(220, 53, 69, 0.1) !important; color: #dc3545 !important; }
        .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; }
        
        /* --- Buttons --- */
        .btn-icon { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
        .btn-light-warning { background-color: #fff3cd; color: #856404; }
        .btn-light-warning:hover { background-color: #ffc107; color: #212529; }
        .btn-light-danger { background-color: #f8d7da; color: #721c24; }
        .btn-light-danger:hover { background-color: #dc3545; color: #fff; }
        
        .hover-scale { transition: transform 0.2s; }
        .hover-scale:hover { transform: scale(1.02); }

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

@section('js')
<script>
    // Search Function Sederhana
    $("#tableSearch").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#tableGedung tbody tr").filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
    });

    // Notifikasi Sukses/Gagal dengan SweetAlert2 (Opsional)
    @if(session('success'))
        Swal.fire({
            icon: 'success',
            title: 'Berhasil!',
            text: '{{ session('success') }}',
            timer: 3000,
            showConfirmButton: false
        });
    @endif
    
    @if(session('error'))
        Swal.fire({
            icon: 'error',
            title: 'Gagal!',
            text: '{{ session('error') }}',
        });
    @endif
</script>
@stop