@extends('adminlte::page')

@section('title', __('global.Countries'))

@section('content_header', __('global.Countries'))

@section('content')

    <div class="row">
        <div class="col-md-12">
            <x-card border="none" class="collapsed-card" cardBodyStyle="display: none;">
                <x-slot name="title">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
                        <i class="fa fa-filter"></i> @lang('global.Filters')
                    </button>
                </x-slot>
                <x-slot name="tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
                        <i class="fas fa-plus"></i>
                    </button>
                </x-slot>
            </x-card>
        </div>
    </div>   
    <div class="row">
        <div class="col-sm-12">
            <x-card> 
                @if (auth()->user()->can('countries.create'))    
                    <x-slot name="tools">
                        <a href="{{ route('countries.create') }}" class="btn btn-primary btn-sm">@lang('global.Add New')</a>
                    </x-slot>
                @endif
                <x-table id="countries">
                    <thead>
                        <tr>
                            <th>@lang('global.Id')</th>
                            <th>@lang('global.Tel') @lang('global.Prefix') </th>
                            <th>@lang('global.Code')</th>
                            <th>@lang('global.Name') (@lang('global.Local'))</th>
                            <th>@lang('global.Name') (@lang('global.En'))</th>
                            <th>@lang('global.Nationality')</th>
                            <th>@lang('global.Currency')</th>
                            @can('countries.edit', 'countries.delete')
                            <th>@lang('global.Action')</th>
                            @endcan
                        </tr>
                    </thead>
                </x-table>

            </x-card>
        </div>
    </div>    
@endsection

@section('adminlte_js')
    <script>
        $(document).ready(function () {
            window.dataTable = $('#countries').DataTable({
                ajax: '{{ route('countries.index') }}',
                serverSide:true,
                processing: true,
                order: [[0, "desc"]],
                columns: [
                    {data: 'id'},
                    {data: 'telephone_prefix'},
                    {data: 'code'},
                    {data: 'name'},
                    {data: 'name_local'},
                    {data: 'nationality'},
                    {data: 'currency'},
                    @can('countries.edit', 'countries.delete')
                    {data: 'action'},
                    @endcan                
                ],
                columnDefs: [
                    {targets: [-1 @can('countries.edit', 'countries.delete'),-2 @endcan], orderable: false , className: 'text-center'}
                ]
            });
        });
    </script>
@endsection