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

@section('title', 'Our Teams')

@section('content')
<x-page-header page-title="Our Teams" active-title="Our Teams" :create-button="true"
    create-link="{{ route('our-teams.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%">Profile Photo</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($ourTeams);
         @endphp

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

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

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

            <td class="text-center">
                <x-table-actions :edit="true" :delete="true" route-prefix="our-teams" model-name="our_team"
                    :model-id="$ourTeam->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