@extends('layouts.master')

@section('title', $department->name)

@section('content')
<section class="page-header text-center">
    <div class="container">
        <nav aria-label="breadcrumb" class="mb-3">
            <ol class="breadcrumb" style="justify-content: center;">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('departments') }}">Ministries</a></li>
                <li class="breadcrumb-item active">{{ $department->name }}</li>
            </ol>
        </nav>
        <h1 class="display-4 fw-bold">{{ $department->name }}</h1>
    </div>
</section>

@if($department->image)
<section class="py-4 text-center">
    <div class="container">
        <img src="{{ asset('images/' . $department->image) }}" alt="{{ $department->name }}" class="img-fluid rounded shadow" style="max-height: 400px; width: auto;">
    </div>
</section>
@endif

<section class="section-padding">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <div class="service-card" style="border-radius: 20px;">
                    <div class="card-body p-5">
                        <h3 class="mb-4">About This Ministry</h3>
                        <p class="lead mb-4">{{ $department->description }}</p>
                        
                        <hr class="my-4">
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <h5><i class="fas fa-tasks me-2" style="color: var(--primary-color);"></i>Activities</h5>
                                <p class="text-muted">{{ $department->activities }}</p>
                            </div>
                            <div class="col-md-6 mb-3">
                                <h5><i class="fas fa-users me-2" style="color: var(--primary-color);"></i>Target Age Group</h5>
                                <p class="text-muted">{{ $department->age }}</p>
                            </div>
                            <div class="col-md-6 mb-3">
                                <h5><i class="fas fa-clock me-2" style="color: var(--primary-color);"></i>Meeting Time</h5>
                                <p class="text-muted">{{ $department->meeting }}</p>
                            </div>
                        </div>
                        
                        <hr class="my-4">
                        
                        <div class="text-center">
                            <h4 class="mb-3">Want to Join This Ministry?</h4>
                            <p class="text-muted mb-4">We welcome you to be part of this department. Contact us to learn more.</p>
                            <a href="{{ route('contact') }}" class="btn btn-primary-custom btn-lg">Contact Us</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section-padding" style="background-color: #f8f9fa;">
    <div class="container">
        <h3 class="text-center mb-4">Other Ministries</h3>
        <div class="row g-3 justify-content-center">
            @php
                $otherDepts = [
                    'children-ministry' => 'Children Ministry',
                    'youth-ministry' => 'Youth Ministry',
                    'women-ministry' => 'Women Ministry',
                    'men-ministry' => 'Men Ministry',
                    'choir-ministry' => 'Choir Ministry',
                    'prayer-ministry' => 'Prayer Ministry',
                    'evangelism-ministry' => 'Evangelism Ministry',
                    'welfare-ministry' => 'Welfare Ministry',
                    'technical-department' => 'Technical Department',
                    'security-department' => 'Security Department'
                ];
                unset($otherDepts[$department->slug]);
            @endphp
            @foreach($otherDepts as $slug => $name)
                <div class="col-auto">
                    <a href="{{ route('department.show', $slug) }}" class="btn btn-outline-secondary px-4" style="border-radius: 50px;">{{ $name }}</a>
                </div>
            @endforeach
        </div>
    </div>
</section>
@endsection
