@extends('layouts.app')

@section('title', 'Profil Sekolah')

@section('content')
<div class="container-fluid">
    <!-- Page Header with School Badge -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm" style="background: linear-gradient(135deg, #28a745 0%, #20c997 100%);">
                <div class="card-body p-4">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <div class="d-flex align-items-center text-white" style="text-shadow: 0 2px 4px rgba(0,0,0,0.3);">
                                <div class="flex-shrink-0">
                                    <div class="rounded-circle bg-white p-3 shadow">
                                        <i class="bi bi-building-fill fs-1 text-success"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1 ms-4">
                                    <h2 class="mb-1 fw-bold text-white" style="text-shadow: 0 2px 4px rgba(0,0,0,0.3);">{{ $school->name }}</h2>
                                    <p class="mb-1 text-white" style="text-shadow: 0 1px 3px rgba(0,0,0,0.3);">
                                        <i class="bi bi-geo-alt-fill me-1"></i>
                                        {{ $school->kabKota->name ?? 'Lokasi tidak tersedia' }}
                                    </p>
                                    <div class="d-flex gap-3 mt-2">
                                        <span class="badge bg-white text-success fw-bold">
                                            <i class="bi bi-mortarboard-fill me-1"></i>
                                            {{ strtoupper($school->level) }}
                                        </span>
                                        <span class="badge bg-white text-success fw-bold">
                                            <i class="bi bi-patch-check-fill me-1"></i>
                                            {{ $school->status }}
                                        </span>
                                        @if($school->accreditation)
                                        <span class="badge bg-warning text-dark fw-bold">
                                            <i class="bi bi-award-fill me-1"></i>
                                            Akreditasi {{ $school->accreditation }}
                                        </span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 text-md-end mt-3 mt-md-0">
                            <div class="text-white" style="text-shadow: 0 2px 4px rgba(0,0,0,0.3);">
                                <div class="mb-2">
                                    <small class="text-white">NPSN</small>
                                    <h4 class="mb-0 fw-bold text-white">{{ $school->npsn }}</h4>
                                </div>
                                <div>
                                    <span class="badge {{ $school->is_active ? 'bg-white text-success' : 'bg-secondary' }} px-3 py-2 fw-bold">
                                        <i class="bi {{ $school->is_active ? 'bi-check-circle-fill' : 'bi-x-circle-fill' }} me-1"></i>
                                        {{ $school->is_active ? 'Aktif' : 'Nonaktif' }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <i class="bi bi-check-circle me-2"></i>{{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    @if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="bi bi-exclamation-circle me-2"></i>{{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    @if($school->profile_locked)
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
        <div class="d-flex align-items-center">
            <i class="bi bi-lock-fill fs-4 me-3"></i>
            <div>
                <strong>Profil Terkunci</strong>
                <p class="mb-0">Data profil sekolah sudah terkunci sejak {{ $school->profile_updated_at ? $school->profile_updated_at->format('d M Y H:i') : '-' }}. Untuk melakukan perubahan data, silakan hubungi Admin Dinas untuk membuka kunci.</p>
            </div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    <!-- Quick Stats -->
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="rounded-circle bg-primary bg-opacity-10 p-3">
                                <i class="bi bi-person-video3 fs-3 text-primary"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="text-muted mb-1">Total Guru</h6>
                            <h2 class="mb-0 fw-bold">{{ $totalGuru }}</h2>
                            <small class="text-success">
                                <i class="bi bi-arrow-up"></i> Aktif
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="rounded-circle bg-info bg-opacity-10 p-3">
                                <i class="bi bi-person-workspace fs-3 text-info"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="text-muted mb-1">Tenaga Kependidikan</h6>
                            <h2 class="mb-0 fw-bold">{{ $totalTendik }}</h2>
                            <small class="text-success">
                                <i class="bi bi-arrow-up"></i> Aktif
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="rounded-circle bg-success bg-opacity-10 p-3">
                                <i class="bi bi-people-fill fs-3 text-success"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="text-muted mb-1">Total GTK</h6>
                            <h2 class="mb-0 fw-bold">{{ $totalGuru + $totalTendik }}</h2>
                            <small class="text-muted">
                                Guru & Tendik
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- School Information Card -->
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-primary text-white py-3">
                    <h5 class="mb-0">
                        <i class="bi bi-info-circle me-2"></i>
                        Informasi Sekolah
                    </h5>
                </div>
                <div class="card-body p-4">
                    <form action="{{ route('admin-sekolah.profil.update') }}" method="POST" id="profilForm">
                        @csrf
                        @method('PUT')
                        
                        <h6 class="text-primary mb-3 pb-2 border-bottom">
                            <i class="bi bi-card-text me-2"></i>Data Identitas
                        </h6>
                        
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label class="form-label fw-bold">
                                    <i class="bi bi-hash text-muted me-1"></i>NPSN
                                </label>
                                <input type="text" class="form-control bg-light" value="{{ $school->npsn }}" readonly>
                                <small class="text-muted">Nomor Pokok Sekolah Nasional</small>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">
                                    <i class="bi bi-building text-muted me-1"></i>Nama Sekolah
                                </label>
                                <input type="text" class="form-control bg-light" value="{{ $school->name }}" readonly>
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label class="form-label fw-bold">
                                    <i class="bi bi-mortarboard text-muted me-1"></i>Jenjang
                                </label>
                                <input type="text" class="form-control bg-light" value="{{ strtoupper($school->level) }}" readonly>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">
                                    <i class="bi bi-patch-check text-muted me-1"></i>Status
                                </label>
                                <input type="text" class="form-control bg-light" value="{{ $school->status }}" readonly>
                            </div>
                        </div>

                        <h6 class="text-primary mb-3 pb-2 border-bottom mt-4">
                            <i class="bi bi-geo-alt me-2"></i>Lokasi & Wilayah
                        </h6>

                        <div class="mb-4">
                            <label class="form-label fw-bold">
                                <i class="bi bi-map text-muted me-1"></i>Alamat Lengkap <span class="text-danger">*</span>
                            </label>
                            <textarea name="address" class="form-control @error('address') is-invalid @enderror" rows="3" placeholder="Masukkan alamat lengkap sekolah" {{ $school->profile_locked ? 'disabled' : '' }}>{{ old('address', $school->address) }}</textarea>
                            @error('address')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label class="form-label fw-bold">
                                    <i class="bi bi-pin-map text-muted me-1"></i>Kabupaten/Kota
                                </label>
                                <input type="text" class="form-control bg-light" value="{{ $school->kabKota->name ?? '-' }}" readonly>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">
                                    <i class="bi bi-diagram-3 text-muted me-1"></i>KCD
                                </label>
                                <input type="text" class="form-control bg-light" value="{{ $school->kcd->name ?? ($school->kabKota->kcd->name ?? '-') }}" readonly>
                            </div>
                        </div>

                        <h6 class="text-primary mb-3 pb-2 border-bottom mt-4">
                            <i class="bi bi-telephone me-2"></i>Kontak & Informasi
                        </h6>

                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label class="form-label fw-bold">
                                    <i class="bi bi-telephone-fill text-muted me-1"></i>Nomor Telepon
                                </label>
                                <input type="text" name="phone" class="form-control @error('phone') is-invalid @enderror" value="{{ old('phone', $school->phone) }}" placeholder="Contoh: 0274-1234567" {{ $school->profile_locked ? 'disabled' : '' }}>
                                @error('phone')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">
                                    <i class="bi bi-envelope-fill text-muted me-1"></i>Email
                                </label>
                                <input type="email" name="email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email', $school->email) }}" placeholder="email@sekolah.sch.id" {{ $school->profile_locked ? 'disabled' : '' }}>
                                @error('email')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <h6 class="text-primary mb-3 pb-2 border-bottom mt-4">
                            <i class="bi bi-person-badge me-2"></i>Data Kepala Sekolah
                        </h6>

                        <div class="row mb-4">
                            <div class="col-md-12">
                                <label class="form-label fw-bold">
                                    <i class="bi bi-person-fill text-muted me-1"></i>Nama Kepala Sekolah
                                </label>
                                <input type="text" name="principal_name" class="form-control @error('principal_name') is-invalid @enderror" value="{{ old('principal_name', $school->principal_name) }}" placeholder="Nama lengkap kepala sekolah" {{ $school->profile_locked ? 'disabled' : '' }}>
                                @error('principal_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label class="form-label fw-bold">
                                    <i class="bi bi-card-text text-muted me-1"></i>NIP Kepala Sekolah
                                </label>
                                <input type="text" name="principal_nip" class="form-control @error('principal_nip') is-invalid @enderror" value="{{ old('principal_nip', $school->principal_nip) }}" placeholder="18 digit NIP" {{ $school->profile_locked ? 'disabled' : '' }}>
                                @error('principal_nip')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">
                                    <i class="bi bi-phone-fill text-muted me-1"></i>HP Kepala Sekolah
                                </label>
                                <input type="text" name="principal_phone" class="form-control @error('principal_phone') is-invalid @enderror" value="{{ old('principal_phone', $school->principal_phone) }}" placeholder="08xxxxxxxxxx" {{ $school->profile_locked ? 'disabled' : '' }}>
                                @error('principal_phone')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <h6 class="text-primary mb-3 pb-2 border-bottom mt-4">
                            <i class="bi bi-universal-access me-2"></i>Unit Layanan Disabilitas (ULD)
                        </h6>

                        <div class="mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="has_uld" name="has_uld" value="1" {{ old('has_uld', $school->has_uld) ? 'checked' : '' }} {{ $school->profile_locked ? 'disabled' : '' }}>
                                <label class="form-check-label fw-bold" for="has_uld">
                                    <i class="bi bi-check-circle text-muted me-1"></i>
                                    Sekolah memiliki Unit Layanan Disabilitas (ULD)
                                </label>
                            </div>
                        </div>

                        <div class="row mb-4" id="uld_count_wrapper" style="display: none;">
                            <div class="col-md-6">
                                <label class="form-label fw-bold">
                                    <i class="bi bi-123 text-muted me-1"></i>Jumlah ULD Aktif
                                </label>
                                <input type="number" name="uld_count" id="uld_count" class="form-control @error('uld_count') is-invalid @enderror" value="{{ old('uld_count', $school->uld_count) }}" min="0" placeholder="Masukkan jumlah ULD" {{ $school->profile_locked ? 'disabled' : '' }}>
                                @error('uld_count')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">Jumlah Unit Layanan Disabilitas yang aktif</small>
                            </div>
                        </div>

                        <!-- ULD Locations Dynamic Form -->
                        <div id="uld_locations_wrapper" style="display: none;">
                            <h6 class="text-primary mb-3 pb-2 border-bottom mt-4">
                                <i class="bi bi-geo-fill me-2"></i>Data Lokasi ULD
                            </h6>
                            <div id="uld_locations_container">
                                <!-- ULD location forms will be inserted here dynamically -->
                            </div>
                        </div>

                        <h6 class="text-primary mb-3 pb-2 border-bottom mt-4">
                            <i class="bi bi-award me-2"></i>Informasi Tambahan
                        </h6>

                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label class="form-label fw-bold">
                                    <i class="bi bi-globe text-muted me-1"></i>Website
                                </label>
                                <input type="url" name="website" class="form-control @error('website') is-invalid @enderror" value="{{ old('website', $school->website) }}" placeholder="https://www.sekolah.sch.id" {{ $school->profile_locked ? 'disabled' : '' }}>
                                @error('website')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">
                                    <i class="bi bi-award-fill text-muted me-1"></i>Akreditasi
                                </label>
                                <select name="accreditation" class="form-select @error('accreditation') is-invalid @enderror" {{ $school->profile_locked ? 'disabled' : '' }}>
                                    <option value="">Pilih Akreditasi</option>
                                    <option value="A" {{ old('accreditation', $school->accreditation) == 'A' ? 'selected' : '' }}>A (Sangat Baik)</option>
                                    <option value="B" {{ old('accreditation', $school->accreditation) == 'B' ? 'selected' : '' }}>B (Baik)</option>
                                    <option value="C" {{ old('accreditation', $school->accreditation) == 'C' ? 'selected' : '' }}>C (Cukup)</option>
                                    <option value="Belum Terakreditasi" {{ old('accreditation', $school->accreditation) == 'Belum Terakreditasi' ? 'selected' : '' }}>Belum Terakreditasi</option>
                                </select>
                                @error('accreditation')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="d-flex justify-content-end gap-2 mt-4 pt-3 border-top">
                            @if($school->profile_locked)
                                <div class="alert alert-info mb-0 w-100">
                                    <i class="bi bi-info-circle me-2"></i>
                                    Data profil terkunci. Hubungi Admin Dinas untuk membuka kunci.
                                </div>
                            @else
                                <button type="reset" class="btn btn-secondary">
                                    <i class="bi bi-x-circle me-1"></i>
                                    Reset
                                </button>
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-save me-1"></i>
                                    Simpan Perubahan
                                </button>
                            @endif
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Kepala Sekolah -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-gradient text-white border-bottom py-3" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                    <h6 class="mb-0 fw-bold">
                        <i class="bi bi-person-badge-fill me-2"></i>
                        Kepala Sekolah
                    </h6>
                </div>
                <div class="card-body">
                    @if($school->principal_name)
                    <div class="text-center mb-3">
                        <div class="rounded-circle bg-primary bg-opacity-10 d-inline-flex align-items-center justify-content-center mb-2" style="width: 100px; height: 100px;">
                            <i class="bi bi-person-fill text-primary" style="font-size: 3rem;"></i>
                        </div>
                        <h6 class="fw-bold mb-0">{{ $school->principal_name }}</h6>
                        @if($school->principal_nip)
                        <small class="text-muted">NIP: {{ $school->principal_nip }}</small>
                        @endif
                    </div>
                    
                    @if($school->principal_phone || $school->email)
                    <div class="border-top pt-3">
                        @if($school->email)
                        <div class="mb-2 pb-2 border-bottom">
                            <div class="d-flex align-items-start">
                                <i class="bi bi-envelope-fill text-muted me-2 mt-1"></i>
                                <div>
                                    <small class="text-muted d-block">Email Sekolah</small>
                                    <small class="fw-medium text-break">{{ $school->email }}</small>
                                </div>
                            </div>
                        </div>
                        @endif
                        
                        @if($school->principal_phone)
                        <div class="mb-2">
                            <div class="d-flex align-items-start">
                                <i class="bi bi-phone-fill text-muted me-2 mt-1"></i>
                                <div>
                                    <small class="text-muted d-block">HP Kepala Sekolah</small>
                                    <small class="fw-medium">{{ $school->principal_phone }}</small>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                    @endif
                    @else
                    <div class="text-center text-muted py-4">
                        <i class="bi bi-person-x-fill mb-2 opacity-50" style="font-size: 3rem;"></i>
                        <p class="mb-0 small">Data kepala sekolah<br>belum tersedia</p>
                        <small class="text-muted">Silakan lengkapi data di bawah</small>
                    </div>
                    @endif
                </div>
            </div>

            <!-- Contact Info -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white border-bottom py-3">
                    <h6 class="mb-0 fw-bold">
                        <i class="bi bi-telephone-fill text-primary me-2"></i>
                        Kontak Sekolah
                    </h6>
                </div>
                <div class="card-body">
                    @if($school->phone || $school->email || $school->website)
                        @if($school->phone)
                        <div class="mb-3 pb-3 border-bottom">
                            <div class="d-flex align-items-start">
                                <div class="flex-shrink-0">
                                    <div class="rounded-circle bg-primary bg-opacity-10 p-2">
                                        <i class="bi bi-telephone-fill text-primary"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <small class="text-muted d-block">Telepon</small>
                                    <a href="tel:{{ $school->phone }}" class="text-dark text-decoration-none fw-bold">
                                        {{ $school->phone }}
                                    </a>
                                </div>
                            </div>
                        </div>
                        @endif
                        
                        @if($school->email)
                        <div class="mb-3 pb-3 border-bottom">
                            <div class="d-flex align-items-start">
                                <div class="flex-shrink-0">
                                    <div class="rounded-circle bg-info bg-opacity-10 p-2">
                                        <i class="bi bi-envelope-fill text-info"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <small class="text-muted d-block">Email</small>
                                    <a href="mailto:{{ $school->email }}" class="text-dark text-decoration-none fw-bold text-break">
                                        {{ $school->email }}
                                    </a>
                                </div>
                            </div>
                        </div>
                        @endif
                        
                        @if($school->website)
                        <div>
                            <div class="d-flex align-items-start">
                                <div class="flex-shrink-0">
                                    <div class="rounded-circle bg-success bg-opacity-10 p-2">
                                        <i class="bi bi-globe text-success"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <small class="text-muted d-block">Website</small>
                                    <a href="{{ $school->website }}" target="_blank" class="text-primary fw-bold text-break">
                                        {{ str_replace(['http://', 'https://'], '', $school->website) }}
                                        <i class="bi bi-box-arrow-up-right ms-1"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        @endif
                    @else
                    <div class="text-center py-4">
                        <i class="bi bi-info-circle fs-1 text-muted d-block mb-2"></i>
                        <p class="text-muted mb-0">Belum ada informasi kontak</p>
                        <small class="text-muted">Lengkapi data kontak sekolah</small>
                    </div>
                    @endif
                </div>
            </div>

            <!-- School Address -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white border-bottom py-3">
                    <h6 class="mb-0 fw-bold">
                        <i class="bi bi-geo-alt-fill text-danger me-2"></i>
                        Alamat Lengkap
                    </h6>
                </div>
                <div class="card-body">
                    @if($school->address)
                    <p class="mb-0">{{ $school->address }}</p>
                    <hr>
                    <small class="text-muted">
                        <i class="bi bi-pin-map me-1"></i>
                        {{ $school->kabKota->name ?? 'Kab/Kota' }}
                    </small>
                    @else
                    <div class="text-center py-3">
                        <i class="bi bi-map fs-1 text-muted d-block mb-2"></i>
                        <p class="text-muted mb-0 small">Alamat belum diisi</p>
                    </div>
                    @endif
                </div>
            </div>

            <!-- Info Card -->
            <div class="card border-0 shadow-sm bg-light">
                <div class="card-body">
                    <h6 class="mb-3">
                        <i class="bi bi-lightbulb-fill text-warning me-2"></i>
                        Tips
                    </h6>
                    <ul class="small text-muted mb-0 ps-3">
                        <li class="mb-2">Lengkapi semua informasi kontak agar mudah dihubungi</li>
                        <li class="mb-2">Update data secara berkala untuk akurasi informasi</li>
                        <li class="mb-2">Pastikan email dan website dapat diakses dengan baik</li>
                        <li>Isi data ULD jika sekolah memiliki unit layanan disabilitas</li>
                    </ul>
                </div>
            </div>

            <!-- ULD Locations Display -->
            @if($school->has_uld && $uldLocations->count() > 0)
            <div class="card border-0 shadow-sm mt-4">
                <div class="card-header bg-gradient text-white border-bottom py-3" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                    <h6 class="mb-0 fw-bold">
                        <i class="bi bi-geo-alt-fill me-2"></i>
                        Lokasi ULD ({{ $uldLocations->count() }})
                    </h6>
                </div>
                <div class="card-body">
                    @foreach($uldLocations as $index => $location)
                    <div class="mb-3 {{ !$loop->last ? 'pb-3 border-bottom' : '' }}">
                        <div class="d-flex align-items-start mb-2">
                            <div class="flex-shrink-0">
                                <div class="rounded-circle bg-primary bg-opacity-10 d-flex align-items-center justify-content-center" style="width: 35px; height: 35px;">
                                    <span class="fw-bold text-primary">{{ $index + 1 }}</span>
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h6 class="mb-1 fw-bold">{{ $location->name }}</h6>
                                <p class="mb-1 small text-muted">
                                    <i class="bi bi-geo-alt me-1"></i>{{ $location->address }}
                                </p>
                                <p class="mb-0 small">
                                    <i class="bi bi-signpost me-1"></i>
                                    <span class="badge bg-info">{{ $location->kecamatan }}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // ULD checkbox toggle
    const hasUldCheckbox = document.getElementById('has_uld');
    const uldCountWrapper = document.getElementById('uld_count_wrapper');
    const uldCountInput = document.getElementById('uld_count');
    const uldLocationsWrapper = document.getElementById('uld_locations_wrapper');
    const uldLocationsContainer = document.getElementById('uld_locations_container');
    const isProfileLocked = {{ $school->profile_locked ? 'true' : 'false' }};
    
    // Store existing ULD locations data
    const existingLocations = @json($uldLocations ?? []);
    
    if (hasUldCheckbox && uldCountWrapper) {
        function toggleUldCount() {
            if (hasUldCheckbox.checked) {
                uldCountWrapper.style.display = 'block';
                uldCountInput.required = true;
            } else {
                uldCountWrapper.style.display = 'none';
                uldCountInput.required = false;
                uldCountInput.value = '';
                uldLocationsWrapper.style.display = 'none';
                uldLocationsContainer.innerHTML = '';
            }
        }
        
        hasUldCheckbox.addEventListener('change', toggleUldCount);
        
        // Initial state
        toggleUldCount();
    }
    
    // ULD Count change handler - Generate dynamic forms
    if (uldCountInput) {
        uldCountInput.addEventListener('input', function() {
            const count = parseInt(this.value) || 0;
            
            if (count > 0) {
                uldLocationsWrapper.style.display = 'block';
                generateUldLocationForms(count);
            } else {
                uldLocationsWrapper.style.display = 'none';
                uldLocationsContainer.innerHTML = '';
            }
        });
        
        // Trigger on page load if value exists
        if (uldCountInput.value > 0) {
            uldLocationsWrapper.style.display = 'block';
            generateUldLocationForms(parseInt(uldCountInput.value));
        }
    }
    
    function generateUldLocationForms(count) {
        uldLocationsContainer.innerHTML = '';
        
        for (let i = 0; i < count; i++) {
            const existingData = existingLocations[i] || {};
            const formHtml = `
                <div class="card mb-3 border-start border-primary border-3">
                    <div class="card-header bg-light">
                        <h6 class="mb-0">
                            <i class="bi bi-pin-map-fill text-primary me-2"></i>
                            ULD ${i + 1}
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label fw-bold">
                                <i class="bi bi-building text-muted me-1"></i>Nama ULD <span class="text-danger">*</span>
                            </label>
                            <input type="text" 
                                name="uld_locations[${i}][name]" 
                                class="form-control" 
                                placeholder="Contoh: ULD Gedung A" 
                                value="${existingData.name || ''}"
                                ${isProfileLocked ? 'disabled' : 'required'}>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold">
                                <i class="bi bi-geo-alt text-muted me-1"></i>Alamat ULD <span class="text-danger">*</span>
                            </label>
                            <textarea 
                                name="uld_locations[${i}][address]" 
                                class="form-control" 
                                rows="2" 
                                placeholder="Alamat lengkap lokasi ULD"
                                ${isProfileLocked ? 'disabled' : 'required'}>${existingData.address || ''}</textarea>
                        </div>
                        <div class="mb-0">
                            <label class="form-label fw-bold">
                                <i class="bi bi-signpost text-muted me-1"></i>Kecamatan <span class="text-danger">*</span>
                            </label>
                            <input type="text" 
                                name="uld_locations[${i}][kecamatan]" 
                                class="form-control" 
                                placeholder="Nama kecamatan" 
                                value="${existingData.kecamatan || ''}"
                                ${isProfileLocked ? 'disabled' : 'required'}>
                        </div>
                    </div>
                </div>
            `;
            
            uldLocationsContainer.insertAdjacentHTML('beforeend', formHtml);
        }
    }
});
</script>
@endpush