@extends('adminlte::page')

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

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

@section('content')

    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header">
                        <div class="card-tools">
                            @can('cities.create')
                                <a href="{{ route('cities.create', ['country' => $country->id]) }}" class="btn btn-success btn-sm">
                                    <i class="fa fa-plus"></i> @lang('global.Create')
                                </a>
                            @endcan
                        </div>
                    </div>
                    <div class="card-body">
                        <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>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('adminlte_js')
    <script>
        $(document).ready(function () {
            window.dataTable = $('#cities').DataTable({
                ajax: '{{ route('cities.index', ['country' => $country->id]) }}',
                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