@extends('layout', ['page' => 'center'])
@section('title', 'Centers - ' . config('app.name'))

@section('content')
    @if(isset($breadcrumb) && !empty($breadcrumb))
        @include('partials._breadcrumb-title', ['breadcrumb' => $breadcrumb])
    @endif

    <section class="wrap">
        <div class="container shadow p-4">
            <div class="abt-dec">
                <p class="mb-4">
                    {{ config('app.name') }} has established strong relationships with a diverse array of companies across various industries, ensuring excellent placement opportunities for its students. Explore our courses and take the first step towards your career growth.
                </p>

                @if(!empty($centers))
                <!-- DataTables Table -->
                <div class="table-responsive">
                    <table id="centerTable" class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Photo</th>
                                <th>Franchisee Name</th>
                                <th>EMAIL ID</th>
                                <th>ADDRESS</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($centers as $key => $franchisee)
                                <tr>
                                    <td>{{ ++$key }}</td>
                                    <td>
                                        @if($franchisee?->photo)
                                        <div class="text-center">
                                            <img src="{{ asset('storage/' . $franchisee->photo) }}" 
                                                alt="{{ $franchisee->name }}" 
                                                width="50"
                                                height="50" 
                                            >
                                        </div>
                                        @endif
                                    </td>
                                    <td class="text-primary text-capitalize">{{ $franchisee->name }}</td>
                                    <td>
                                        <a href="mailto:{{ $franchisee->email }}">{{ $franchisee->email }}</a>
                                    </td>
                                    <td class="text-capitalize">
                                        {{ $franchisee->address }} , {{ $franchisee->city_name }}, {{ $franchisee->state_name }}, IN - {{ $franchisee->pincode }}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @endif
            </div>
        </div>
    </section>
@endsection

@push('js')
<script>
    $(document).ready(function () {
        $('#centerTable').DataTable({
            "paging": true,
            "ordering": true,
            "info": true,
            "lengthMenu": [10, 25, 50, 100],
            "language": {
                "search": "Search Centers:",
                "lengthMenu": "Show _MENU_ entries",
            }
        });
    });
</script>
@endpush