@extends('adminlte::page')

@section('title', $country->name . ' :: '.__('global.Cities') . ' '. __('global.List'))

@section('content_header')
    <h1>{{ $country->name }} :: @lang('global.Cities') @lang('global.List')</h1>
@endsection

@section('content')
    <x-row>
        <x-col>
            <x-card>
                <x-slot name="tools">
                    @can('cities.create')
                        <a href="{{ route('cities.create', ['country' => $country]) }}" class="btn btn-primary btn-sm">
                            @lang('global.Add New')
                        </a>
                    @endcan
                </x-slot>

                <x-table id="cities">
                    <thead>
                        <tr>
                            <th>@lang('global.Id')</th>
                            <th>@lang('global.Name')</th>
                            <th>@lang('global.Prefix')
                            <th>@lang('global.Iso')</th>
                            <th>@lang('global.Cp')</th>
                            <th>@lang('global.Department')</th>
                            <th>@lang('global.Region')</th>
                            <th class="col-1 text-center">@lang('global.Action')</th>
                        </tr>
                    </thead>
                </x-table>
            </x-card>
        </x-col>
    </x-row>
@endsection

@section('adminlte_js')
    <script>
        $(document).ready(function () {
            window.dataTable = $('#cities').DataTable({
                ajax: '{{ route('cities.index', ['country' => $country]) }}',
                serverSide:true,
                processing: true,
                order: [[0, "desc"]],
                columns: [
                    {data: 'id'},
                    {data: 'name'},
                    {data: 'prefix'},
                    {data: 'iso'},
                    {data: 'cp'},
                    {data: 'department'},
                    {data: 'region'},
                    {data: 'action'},
                ],
                columnDefs: [
                    {targets: -1, orderable: false}
                ]
            });
        });
    </script>
@endsection