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

@section('title', 'Countries')

@section('content')
<x-page-header page-title="Countries" active-title="Countries" :create-button="true"
    create-link="{{ route('countries.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%">Flag</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($countries);
         @endphp

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

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

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

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