@extends('layouts.app')

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

@section('content')

<div class="page-header">
    <h4><i class="bi bi-building-fill me-2" style="color:#1565c0;"></i>Profil Sekolah</h4>
    <p>Informasi lengkap SMA Negeri 5 Mimika</p>
</div>

<div class="row">

    {{-- Identitas Sekolah --}}
    <div class="col-lg-8 mb-4">
        <div class="card-table">
            <div class="card-header">
                <i class="bi bi-info-circle-fill me-2" style="color:#1565c0;"></i>
                Identitas Sekolah
            </div>
            <div style="padding:24px;">
                <div class="row g-3">
                    @php
                    $fields = [
                    ['icon'=>'building','label'=>'Nama Sekolah', 'value'=>$profil['nama']],
                    ['icon'=>'hash', 'label'=>'NPSN', 'value'=>$profil['npsn']],
                    ['icon'=>'award', 'label'=>'Akreditasi', 'value'=>$profil['akreditasi']],
                    ['icon'=>'person-fill','label'=>'Kepala Sekolah', 'value'=>$profil['kepala_sekolah']],
                    ['icon'=>'geo-alt', 'label'=>'Alamat', 'value'=>$profil['alamat']],
                    ['icon'=>'map', 'label'=>'Kota / Provinsi', 'value'=>$profil['kota'] . ' · ' . $profil['provinsi']],
                    ['icon'=>'telephone','label'=>'Telepon', 'value'=>$profil['telepon']],
                    ['icon'=>'envelope','label'=>'Email', 'value'=>$profil['email']],
                    ['icon'=>'globe', 'label'=>'Website', 'value'=>$profil['website']],
                    ['icon'=>'calendar3','label'=>'Tahun Berdiri', 'value'=>$profil['tahun_berdiri']],
                    ];
                    @endphp

                    @foreach($fields as $field)
                    <div class="col-md-6">
                        <div style="background:#f8f9fc;border-radius:10px;padding:15px;">
                            <div
                                style="font-size:.7rem;color:#9ca3af;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px;">
                                <i class="bi bi-{{ $field['icon'] }} me-1"></i> {{ $field['label'] }}
                            </div>
                            <div style="font-weight:600;color:#1a2b4a;font-size:.9rem;">
                                {{ $field['value'] }}
                            </div>
                        </div>
                    </div>
                    @endforeach

                </div>
            </div>
        </div>
    </div>

    {{-- Akreditasi Badge --}}
    <div class="col-lg-4 mb-4">
        <div class="card-table h-100">
            <div class="card-header">
                <i class="bi bi-patch-check-fill me-2" style="color:#ca8a04;"></i>
                Status & Akreditasi
            </div>
            <div style="padding:24px;text-align:center;">
                <div style="width:100px;height:100px;background:linear-gradient(135deg,#fbbf24,#f59e0b);
                            border-radius:50%;display:flex;align-items:center;
                            justify-content:center;font-size:2.5rem;color:#fff;
                            margin:0 auto 20px;box-shadow:0 8px 20px rgba(251,191,36,.4);">
                    <i class="bi bi-award-fill"></i>
                </div>
                <h3 style="color:#1a2b4a;font-weight:800;">A</h3>
                <p style="color:#ca8a04;font-weight:700;font-size:.9rem;">UNGGUL</p>
                <div
                    style="background:#fef9c3;border-radius:8px;padding:12px;margin-top:15px;font-size:.82rem;color:#713f12;">
                    <i class="bi bi-calendar-check me-1"></i>
                    Akreditasi BAN-S/M<br>Berlaku s.d. 2027
                </div>
                <div style="margin-top:20px;padding-top:20px;border-top:1px solid #f0f2f5;">
                    <div
                        style="font-size:.72rem;color:#9ca3af;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;">
                        Berdiri Sejak</div>
                    <div style="font-size:1.5rem;font-weight:700;color:#1565c0;">{{ $profil['tahun_berdiri'] }}</div>
                    <div style="font-size:.78rem;color:#9ca3af;">
                        ({{ date('Y') - $profil['tahun_berdiri'] }} tahun beroperasi)
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Visi --}}
    <div class="col-12 mb-4">
        <div class="card-table">
            <div class="card-header">
                <i class="bi bi-eye-fill me-2" style="color:#9333ea;"></i>
                Visi Sekolah
            </div>
            <div style="padding:24px;">
                <div style="background:linear-gradient(135deg,#f3e8ff,#ede9fe);border-radius:12px;
                            padding:22px;border-left:4px solid #9333ea;">
                    <p style="font-size:1rem;color:#4c1d95;font-weight:500;font-style:italic;margin:0;line-height:1.7;">
                        "{{ $profil['visi'] }}"
                    </p>
                </div>
            </div>
        </div>
    </div>

    {{-- Misi --}}
    <div class="col-12 mb-4">
        <div class="card-table">
            <div class="card-header">
                <i class="bi bi-list-check me-2" style="color:#0891b2;"></i>
                Misi Sekolah
            </div>
            <div style="padding:24px;">
                <div class="row g-3">
                    @foreach($profil['misi'] as $index => $misi)
                    <div class="col-md-6">
                        <div style="background:#f0f9ff;border-radius:10px;padding:16px;
                                    border-left:3px solid #0891b2;display:flex;gap:12px;align-items:flex-start;">
                            <div style="width:28px;height:28px;background:#0891b2;border-radius:6px;
                                        display:flex;align-items:center;justify-content:center;
                                        color:#fff;font-weight:700;font-size:.85rem;flex-shrink:0;">
                                {{ $index + 1 }}
                            </div>
                            <p style="margin:0;color:#164e63;font-size:.875rem;line-height:1.6;">
                                {{ $misi }}
                            </p>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    {{-- Kontak --}}
    <div class="col-12">
        <div style="background:linear-gradient(135deg,#0d3b7a,#1565c0);border-radius:14px;padding:28px;">
            <h6 class="text-white mb-3 fw-bold">
                <i class="bi bi-telephone-fill me-2"></i> Hubungi Kami
            </h6>
            <div class="row g-3">
                <div class="col-md-4">
                    <div style="background:rgba(255,255,255,.12);border-radius:10px;padding:16px;">
                        <div style="color:rgba(255,255,255,.65);font-size:.72rem;margin-bottom:6px;">
                            <i class="bi bi-telephone me-1"></i> TELEPON
                        </div>
                        <div style="color:#fff;font-weight:600;">{{ $profil['telepon'] }}</div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div style="background:rgba(255,255,255,.12);border-radius:10px;padding:16px;">
                        <div style="color:rgba(255,255,255,.65);font-size:.72rem;margin-bottom:6px;">
                            <i class="bi bi-envelope me-1"></i> EMAIL
                        </div>
                        <div style="color:#fff;font-weight:600;">{{ $profil['email'] }}</div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div style="background:rgba(255,255,255,.12);border-radius:10px;padding:16px;">
                        <div style="color:rgba(255,255,255,.65);font-size:.72rem;margin-bottom:6px;">
                            <i class="bi bi-globe me-1"></i> WEBSITE
                        </div>
                        <div style="color:#fff;font-weight:600;">{{ $profil['website'] }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

@endsection