@extends('layouts.web')

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

@section('content')
    <div class="container my-5">
        <h2 class="text-center mb-4">Profil {{$school->nama_sekolah}}</h2>
        <hr class="mb-5">

        <div class="row align-items-center mb-5">
            <div class="col-md-4 text-center mb-4 mb-md-0">
                <img src="{{ asset('images/kepala-sekolah.jpg') }}" alt="Foto Kepala Sekolah" class="img-fluid rounded-circle shadow-lg" style="width: 250px; height: 250px; object-fit: cover; border: 5px solid #fbc02d;">
            </div>
            <div class="col-md-8">
                <div class="card p-4 shadow-sm">
                    <h4 class="text-primary mb-3">Sambutan Kepala Sekolah</h4>
                    <p class="lead">
                        {{$school->sambutan}}
                    </p>
                    <div class="mt-4">
                        <h5 class="mb-0 text-primary">{{$school->kepala_sekolah}}</h5>
                        <p class="text-muted">Kepala Sekolah {{$school->nama_sekolah}}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row my-5">
            <div class="col-12">
                <div class="card p-4 shadow-sm">
                    <h4 class="text-primary mb-3">Tentang Sekolah Kami</h4>
                    {{$school->tentang}}
                </div>
            </div>
        </div>

    </div>
    
@endsection