@extends('cms::layouts.master', ['dataTable' => true])

@section('title', 'Institutes')

@section('content')
<x-page-header page-title="Institutes" active-title="Institutes" :create-button="true"
    create-link="{{ route('institutes.create') }}" />

<x-crud-table>
    <x-slot name="header">
        <th class="text-center" width="10%">SN.</th>
        <th width="40%">Name</th>
        <th class="text-center" width="15%">Display Order</th>
        <th class="text-center" width="15%">Logo</th>
        <th class="text-center" width="10%">Status</th>
        <th class="text-center" width="10%">Actions</th>
    </x-slot>

    <x-slot name="body">

        @php
         $count = count($institutes);
         @endphp

        @foreach ($institutes as $institute)
        <tr>
            <td class="text-center">{{ $count-- }}</td>
            <td>{{ $institute->title }}</td>
            <td class="text-center">{{ $institute->display_order }}</td>

            <td class="text-center">
                <x-table-image :image="$institute->feature_image" :alt="$institute->feature_image"
                    path="{{ 'institutes/'.$institute->feature_image }}" />
            </td>

            <td class="text-center">
                <x-active-status route="institutes.update" :model="$institute" :isEditable="true" />
            </td>

            <td class="text-center">
                <x-table-actions :edit="true" :delete="true" route-prefix="institutes" model-name="institute"
                    :model-id="$institute->id" />
            </td>
        </tr>
        @endforeach
    </x-slot>
</x-crud-table>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            // Destroy the existing DataTable instance
            if ($.fn.DataTable.isDataTable('.zero-configuration')) {
                $('.zero-configuration').DataTable().destroy();
            }

            // Re-initialize the DataTable with new configuration
            $('.zero-configuration').DataTable({
                "order": [
                    [0, 'desc']
                ],
            });
        });
    </script>
@endpush