@extends('adminlte::page')

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

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

@section('content')

    <x-filter>
        <x-row>
            <x-form-group.input type="select" col="4" for="continent_id" label="global.Continent" id="continent_id">
                @foreach (get_intitules_by_group([['slug', '=', 'continents']]) as $intitule)
                    <option value="{{ $intitule->id }}">{{ $intitule->libelle }}</option>
                @endforeach
            </x-form-group.input>

            <x-form-group.input type="select" col="4" for="sub_region_id" label="global.Sub Region" id="sub_region_id">
                @foreach (get_intitules_by_group([['slug', '=', 'sub_region']]) as $intitule)
                    <option value="{{ $intitule->id }}">{{ $intitule->libelle }}</option>
                @endforeach
            </x-form-group.input>
            
            <x-form-group.input type="select" col="4" for="currency_id" label="global.Currency" id="currency_id">
                @foreach (get_intitules_by_group([['slug', '=', 'monnaies']]) as $intitule)
                    <option value="{{ $intitule->id }}">{{ $intitule->libelle }}</option>
                @endforeach
            </x-form-group.input>
        </x-row>
    </x-filter>

    <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.Country Code')</th>
                            <th>@lang('global.Name') (@lang('global.En') / @lang('global.Local'))</th>
                            <th>@lang('global.Region')</th>
                            <th>@lang('global.Sub Region')</th>
                            <th>@lang('global.Nationality')</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: {
                    url: '{{ route('countries.index') }}',
                    data: d => {
                        if($('#continent_id').val()) {
                            d.continent_id = $('#continent_id').val();
                        }
                        if($('#sub_region_id').val()) {
                            d.sub_region_id = $('#sub_region_id').val();
                        }
                        if($('#currency_id').val()) {
                            d.currency_id = $('#currency_id').val();
                        }
                    }
                },
                serverSide:true,
                processing: true,
                order: [[0, "desc"]],
                columns: [
                    {data: 'id'},
                    {data: 'telephone_prefix'},
                    {data: 'code'},
                    {data: 'all_name'},
                    {data: 'continent_id'},
                    {data: 'sub_region_id'},
                    {data: 'nationality'},
                    @can('countries.edit', 'countries.delete')
                    {data: 'action', className: 'text-center, text-nowrap'},
                    @endcan
                ],
                columnDefs: [
                    {targets: [-1 @can('countries.edit', 'countries.delete'),-2 @endcan], orderable: false , className: 'text-center'}
                ]
            });

            $('#continent_id').on('change', function () {
                window.dataTable.ajax.reload();
            });
            $('#sub_region_id').on('change', function () {
                window.dataTable.ajax.reload();
            });
            $('#currency_id').on('change', function () {
                window.dataTable.ajax.reload();
            });
        });
    </script>
@endsection