@extends('adminlte::page')

@section('content_header')
<h1>@lang('global.Validity rules')</h1>
@endsection

@section('content')
    <x-filter>
        <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> --}}

                    <div class="row">
                        <div class="col-xs-12 col-sm-4 col-sm-4">
                            <div class="from-group">
                                <label for="group">@lang('global.Group')</label>
                                <select name="group" id="group" class="form-control init-select2 @error('group') is-invalid @enderror">
                                    <option value="" selected disabled>@lang('global.Choose')</option>
                                    @foreach (get_intitules_by_group([['slug', '=', 'validations-rules']]) as $intitule)
                                        <option value="{{ $intitule->id }}" data-valeur="{{ $intitule->valeur }}">{{ $intitule->libelle }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    
                {{-- </x-card> --}}
            </div>
        </div>
    </x-filter>

    <div class="row">
        <div class="col-md-12">
            <x-card>
                <x-slot name="tools">
                    @if(Storage::exists('public/national-rules.json'))
                        {!! Util::Link(__('global.Country Rules'), route('validity-rules.show-rules-modal'), null, null, ['class' => 'btn btn-primary btn-sm open-ajax-modal']) !!}
                    @endif

                    @can('validity-rules.export')
                        <a class="btn btn-info btn-sm" href="{{ route("validity-rules.download-json") }}">@lang('global.Export')</a>
                    @endcan

                    @can('validity-rules.create')
                        <a class="btn btn-primary btn-sm" href="{{ route('validity-rules.create') }}">@lang('global.Add New')</a>
                    @endcan
                </x-slot>

                <x-table id="table">
                    <thead>
                        <tr>
                            <th>@lang('global.id')</th>
                            <th>@lang('global.Group')</th>
                            <th>@lang('global.Label')</th>
                            <th>@lang('global.Value')</th>
                            <th>@lang('global.Action')</th>
                        </tr>
                    </thead>
                </x-table>

            </x-card>
        </div>
    </div>

@endsection


@section('adminlte_js')
    <script>
        $(function () {

            window.dataTable = $('#table').DataTable({
                serverSide: true,
                processing: true,
                // ajax: "{{ route('validity-rules.index') }}",

                ajax: {
                    url: '{{ route('validity-rules.index') }}',
                    data: function (d) {

                        if($('#group').val()) {

                            d.group = $('#group').val();
                        }
                    }
                },
                columns: [
                    {data: 'id'},
                    {data: 'group'},
                    {data: 'label'},
                    {data: 'value'},
                    {data: 'action'}
                ],
                columnDefs: [
                    {targets: -1, orderable: false,  className: 'text-center'}
                ]
            });

            $('#group').on('change', function () {

                window.dataTable.ajax.reload();
            });
        });
    </script>
@endsection