@extends('admin.layouts.app')

@section('title', 'Why Select LECL Management')

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h1 class="h3 mb-0 text-gray-800">Why Select LECL Management</h1>
                    <a href="{{ route('admin.why-lecl.edit') }}" class="btn btn-primary">
                        <i class="fas fa-edit"></i> Edit Section
                    </a>
                </div>

                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ 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">
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                <!-- Section Overview -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">Section Overview</h6>
                    </div>
                    <div class="card-body">
                        @if ($whyLeclSection)
                            <div class="row">
                                <div class="col-md-6">
                                    <h5 class="text-primary">{{ $whyLeclSection->title }}</h5>
                                    <p class="text-muted">{{ $whyLeclSection->content }}</p>
                                </div>
                                <div class="col-md-6">
                                    <div class="text-end">
                                        <span class="badge {{ $whyLeclSection->is_active ? 'bg-success' : 'bg-secondary' }}">
                                            {{ $whyLeclSection->is_active ? 'Active' : 'Inactive' }}
                                        </span>
                                        <p class="small text-muted mt-2">
                                            Last updated: {{ $whyLeclSection->updated_at->format('M d, Y H:i') }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        @else
                            <div class="text-center py-4">
                                <i class="fas fa-exclamation-triangle fa-3x text-warning mb-3"></i>
                                <h5>Section Not Found</h5>
                                <p class="text-muted">The Why Select LECL section has not been created yet.</p>
                                <a href="{{ route('admin.why-lecl.edit') }}" class="btn btn-primary">
                                    <i class="fas fa-plus"></i> Create Section
                                </a>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Benefits List -->
                @if ($whyLeclSection && $whyLeclSection->data && isset($whyLeclSection->data['benefits']))
                    <div class="card shadow">
                        <div class="card-header py-3 d-flex justify-content-between align-items-center">
                            <h6 class="m-0 font-weight-bold text-primary">Benefits ({{ count($whyLeclSection->data['benefits']) }})</h6>
                            <a href="{{ route('admin.why-lecl.edit') }}" class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-edit"></i> Manage Benefits
                            </a>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                @foreach ($whyLeclSection->data['benefits'] as $index => $benefit)
                                    <div class="col-md-4 mb-3">
                                        <div class="card border-left-primary h-100">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center mb-2">
                                                    <div class="rounded-circle d-inline-flex align-items-center justify-content-center me-3"
                                                        style="width: 40px; height: 40px; background: {{ $benefit['color'] ?? 'var(--primary-navy)' }};">
                                                        <i class="{{ $benefit['icon'] ?? 'bi bi-star' }} text-white"></i>
                                                    </div>
                                                    <h6 class="font-weight-bold text-primary mb-0">{{ $benefit['title'] }}</h6>
                                                </div>
                                                <p class="text-muted small mb-0">{{ $benefit['description'] }}</p>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @else
                    <div class="card shadow">
                        <div class="card-body text-center py-5">
                            <i class="fas fa-list fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">No Benefits Added</h5>
                            <p class="text-muted">Start by adding some benefits to showcase why students should select LECL.</p>
                            <a href="{{ route('admin.why-lecl.edit') }}" class="btn btn-primary">
                                <i class="fas fa-plus"></i> Add Benefits
                            </a>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection