@extends('layouts.app')

@section('title', 'Detail Sekolah - ' . $school->name)

@section('content')
<div class="container-fluid">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('admin-dinas.sekolah.index') }}">Daftar Sekolah</a></li>
            <li class="breadcrumb-item active" aria-current="page">Detail Sekolah</li>
        </ol>
    </nav>

    <!-- 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>

    <!-- Action Buttons -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex gap-2 justify-content-end">
                <a href="{{ route('admin-dinas.sekolah.index') }}" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-left me-1"></i>Kembali
                </a>
                @if($school->profile_locked)
                <form action="{{ route('admin-dinas.sekolah.unlock', $school->id) }}" method="POST" class="d-inline">
                    @csrf
                    <button type="submit" class="btn btn-warning" onclick="return confirm('Buka kunci profil sekolah ini?')">
                        <i class="bi bi-unlock-fill me-1"></i>Buka Kunci Profil
                    </button>
                </form>
                @endif
                <a href="{{ route('admin-dinas.sekolah.edit', $school->id) }}" class="btn btn-primary">
                    <i class="bi bi-pencil-fill me-1"></i>Edit Data
                </a>
            </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($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') : '-' }}.</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 -->
        <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">
                    <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 text-muted">NPSN</label>
                            <p class="fs-5">{{ $school->npsn }}</p>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold text-muted">Nama Sekolah</label>
                            <p class="fs-5">{{ $school->name }}</p>
                        </div>
                    </div>

                    <div class="row mb-4">
                        <div class="col-md-6">
                            <label class="form-label fw-bold text-muted">Jenjang</label>
                            <p class="fs-5">{{ strtoupper($school->level) }}</p>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold text-muted">Status</label>
                            <p class="fs-5">{{ $school->status }}</p>
                        </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 text-muted">Alamat Lengkap</label>
                        <p>{{ $school->address ?: '-' }}</p>
                    </div>

                    <div class="row mb-4">
                        <div class="col-md-6">
                            <label class="form-label fw-bold text-muted">Kabupaten/Kota</label>
                            <p>{{ $school->kabKota->name ?? '-' }}</p>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold text-muted">KCD</label>
                            <p>{{ $school->kcd->name ?? '-' }}</p>
                        </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 text-muted">Nomor Telepon</label>
                            <p>{{ $school->phone ?: '-' }}</p>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold text-muted">Email</label>
                            <p>{{ $school->email ?: '-' }}</p>
                        </div>
                    </div>

                    <div class="row mb-4">
                        <div class="col-md-6">
                            <label class="form-label fw-bold text-muted">Website</label>
                            <p>
                                @if($school->website)
                                <a href="{{ $school->website }}" target="_blank">{{ $school->website }} <i class="bi bi-box-arrow-up-right"></i></a>
                                @else
                                -
                                @endif
                            </p>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold text-muted">Akreditasi</label>
                            <p>{{ $school->accreditation ?: '-' }}</p>
                        </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 text-muted">Nama Kepala Sekolah</label>
                            <p>{{ $school->principal_name ?: '-' }}</p>
                        </div>
                    </div>

                    <div class="row mb-4">
                        <div class="col-md-6">
                            <label class="form-label fw-bold text-muted">NIP Kepala Sekolah</label>
                            <p>{{ $school->principal_nip ?: '-' }}</p>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold text-muted">HP Kepala Sekolah</label>
                            <p>{{ $school->principal_phone ?: '-' }}</p>
                        </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="row">
                        <div class="col-md-6">
                            <label class="form-label fw-bold text-muted">Memiliki ULD</label>
                            <p>
                                @if($school->has_uld)
                                <span class="badge bg-success">
                                    <i class="bi bi-check-circle-fill me-1"></i>Ya
                                </span>
                                @else
                                <span class="badge bg-secondary">
                                    <i class="bi bi-x-circle-fill me-1"></i>Tidak
                                </span>
                                @endif
                            </p>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold text-muted">Jumlah ULD</label>
                            <p>{{ $school->uld_count ?: '-' }}</p>
                        </div>
                    </div>

                    @if($school->has_uld && $school->uldLocations->count() > 0)
                    <div class="mt-4">
                        <h6 class="text-primary mb-3 pb-2 border-bottom">
                            <i class="bi bi-geo-fill me-2"></i>Detail Lokasi ULD
                        </h6>
                        @foreach($school->uldLocations as $index => $location)
                        <div class="card mb-3 border-start border-primary border-3">
                            <div class="card-body">
                                <div class="d-flex align-items-start">
                                    <div class="flex-shrink-0">
                                        <div class="rounded-circle bg-primary bg-opacity-10 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                            <span class="fw-bold text-primary">{{ $index + 1 }}</span>
                                        </div>
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <h6 class="fw-bold mb-2">
                                            <i class="bi bi-building me-1"></i>{{ $location->name }}
                                        </h6>
                                        <p class="mb-1 text-muted">
                                            <i class="bi bi-geo-alt-fill me-1"></i>{{ $location->address }}
                                        </p>
                                        <p class="mb-0">
                                            <i class="bi bi-signpost me-1"></i>
                                            <span class="badge bg-info">{{ $location->kecamatan }}</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    @endif
                </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>
                    </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>
                    </div>
                    @endif
                </div>
            </div>

            <!-- ULD Summary (if has ULD) -->
            @if($school->has_uld)
            <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, #f093fb 0%, #f5576c 100%);">
                    <h6 class="mb-0 fw-bold">
                        <i class="bi bi-universal-access me-2"></i>
                        Ringkasan ULD
                    </h6>
                </div>
                <div class="card-body">
                    <div class="text-center py-3">
                        <div class="rounded-circle bg-primary bg-opacity-10 d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                            <h2 class="mb-0 text-primary fw-bold">{{ $school->uld_count }}</h2>
                        </div>
                        <h6 class="mb-1">Unit Layanan Disabilitas</h6>
                        <p class="text-muted small mb-0">Total lokasi ULD aktif</p>
                        
                        @if($school->uldLocations->count() > 0)
                        <div class="alert alert-info mt-3 mb-0 small">
                            <i class="bi bi-info-circle me-1"></i>
                            {{ $school->uldLocations->count() }} lokasi ULD tercatat
                        </div>
                        @else
                        <div class="alert alert-warning mt-3 mb-0 small">
                            <i class="bi bi-exclamation-triangle me-1"></i>
                            Detail lokasi belum diisi
                        </div>
                        @endif
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection