@extends('layouts.website_layout')

@section('content')

<!-- Main Content -->
<main id="main-content">
    <!-- Page Header -->
    <div class="position-relative page-header text-white overflow-hidden">
        <div class="container position-relative">
            <div>
                @if($parentPageTitle)
                <span class="badge bg-white text-primary mb-2">{{ $parentPageTitle }}</span>
                @endif
                <h3 class="display-6 fw-bold mb-1">
                    {{ $pageTitle }}
                </h3>
            </div>
        </div>
    </div>

    <div class="tc-container">
        <!-- Floating Statistics Section -->
        <section class="tc-stats-wrapper">
            <div class="tc-stats-grid">
                <div class="tc-stat-card is-primary">
                    <div class="tc-stat-icon-box">
                        <i class="fas fa-building"></i>
                    </div>
                    <div class="tc-stat-content">
                        <div class="stat-number" data-count="{{ $stats['training_centers'] }}">
                            <h4>{{ $stats['training_centers'] }}</h4>
                        </div>
                        <p>Training Centers</p>
                    </div>
                </div>

                <div class="tc-stat-card is-secondary">
                    <div class="tc-stat-icon-box">
                        <i class="fas fa-users"></i>
                    </div>
                    <div class="tc-stat-content">
                        <div class="stat-number" data-count="{{ $stats['total_seats'] }}">
                            <h4>{{ $stats['total_seats'] }}</h4>
                        </div>
                        <p>Total Seats</p>
                    </div>
                </div>

                <div class="tc-stat-card is-success">
                    <div class="tc-stat-icon-box">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <div class="tc-stat-content">
                        <div class="stat-number" data-count="{{ $stats['placement_rate'] }}">
                            <h4>{{ $stats['placement_rate'] }}%</h4>
                        </div>
                        <p>Placement Rate</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Modern Search Section -->
        <section class="tc-search-section">
            <div class="tc-search-card">
                <div class="tc-search-header">
                    <h2>Find a Training Centre</h2>
                    <p>Discover our network of accredited training centers across India with comprehensive facilities and programs.</p>
                </div>
                <div class="tc-search-bar">
                    <div class="tc-input-wrapper">
                        <i class="fas fa-search tc-input-icon"></i>
                        <input type="text" placeholder="Search by centre name, city or state..." class="tc-search-input" id="centreSearch">
                    </div>
                    <button class="tc-search-btn" onclick="searchCentres()">
                        Search Centers
                    </button>
                </div>
            </div>
        </section>

        <!-- Training Centres Grid -->
        <section class="tc-grid-section">
            <div class="tc-grid" id="centresGrid">
                @foreach ($trainingCenters as $item)
                    @php
                        $centre = $item['centre'];
                        $basicDetails = $item['basicDetails'];
                        $address = $item['addresses'];
                        $programs = $item['programs'];
                        $facilities = $item['facilities'];
                    @endphp

                    <div class="tc-card" data-location="{{ strtolower($centre->city ?? 'unknown') }}" data-name="{{ $centre->name }}">
                        <!-- Card Header -->
                        <div class="tc-card-top">
                            <div class="tc-est-badge">Est. {{ $basicDetails->establish_year ?? 'N/A' }}</div>
                            <h4 class="tc-card-title">{{ $basicDetails->centre_name }}</h4>
                            <div class="tc-card-location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>{{ $address->city ?? 'N/A' }}, {{ $address->state ?? '' }}</span>
                            </div>
                        </div>

                        <!-- Card Body -->
                        <div class="tc-card-body">
                            <!-- Contact Info -->
                            <div class="tc-contact-list">
                                <div class="tc-contact-item">
                                    <i class="fas fa-envelope"></i>
                                    <a href="mailto:{{ $centre->email }}" class="text-truncate">{{ $basicDetails->official_email }}</a>
                                </div>
                                <div class="tc-contact-item">
                                    <i class="fas fa-phone-alt"></i>
                                    <a href="tel:{{ $centre->phone }}">{{ $basicDetails->primary_phone }}</a>
                                </div>
                            </div>

                            <hr style="margin: 0; border-top: 1px solid var(--tc-border);">

                            <!-- Programs -->
                            <div>
                                <div class="tc-sub-head"><i class="fas fa-graduation-cap"></i> Programs</div>
                                <div class="tc-tags">
                                    @foreach($programs->take(2) as $program)
                                        <span class="tc-tag">{{ Str::limit($program->title, 20) }}</span>
                                    @endforeach
                                    @if($programs->count() > 2)
                                        <span class="tc-tag tc-tag-more">+{{ $programs->count() - 2 }}</span>
                                    @endif
                                </div>
                            </div>

                            <!-- Facilities -->
                            <div>
                                <div class="tc-sub-head"><i class="fas fa-building"></i> Facilities</div>
                                <ul class="tc-facility-list">
                                    @foreach($facilities->take(4) as $facility)
                                        <li class="tc-facility-item">{{ $facility->name }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>

                        <!-- Card Footer -->
                        <div class="tc-card-footer">
                            <a href="{{ route('training-centers.show', $centre->id) }}" class="tc-btn tc-btn-outline">View Details</a>
                            <a href="{{ route('public.login') }}" class="tc-btn tc-btn-primary">Apply Now</a>
                        </div>
                    </div>
                @endforeach
            </div>
        </section>
    </div>

</main>
@endsection