@extends('adminlte::page')

@section('title', __('global.Uos').' '.__('global.List'))

@section('content_header')
    <h1>@lang('global.Uos') @lang('global.List')</h1>
@endsection

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

                <x-slot name="tools">
                    @can('uos.export')
                        <a class="btn btn-success btn-sm" href="{{ route('uos.export') }}">@lang('global.Export')</a>
                    @endcan
                    {{-- <a href="#" class="btn btn-primary btn-sm"><i class="fas fa-map-marker-alt"></i>@lang('global.MapCenter')</a> --}}
                    @can('uos.create')
                        <a class="btn btn-primary btn-sm" href="{{ route('uos.create') }}">@lang('global.Add New')</a>
                    @endcan
                </x-slot>

                <x-table id="uo">
                    <thead>
                        <tr>
                            <th>@lang('global.Id')</th>
                            <th>@lang('global.Type')</th>
                            <th nowrap>@lang('global.Account No')</th>
                            <th nowrap>@lang('global.Denomination')</th>
                            <th>@lang('global.Address')</th>
                            <th>@lang('global.Contact')</th>
                            <th>@lang('global.Etat')</th>
                            <th>@lang('global.Action')</th>
                        </tr>
                    </thead>
                </x-table>
            </x-card>
        </div>
    </div>
@endsection

@section('js')

<script>
    $(function () {
        
        window.dataTable = $('#uo').DataTable({
            serverSide: true,
            processing: true,
            ajax: {
                url: '{{ route('uos.index') }}',
                data: function (d) {

                    d.type_id = $('#type_id').val();
                }
            },
            columns: [
                {data: "id"},
                {data: "type_id"},
                {data: "num_compte"},
                {data: "raison_sociale"},
                {data: "adresse"},
                {data: "contact"},
                {data: "etat"},
                {data: "action"},
            ],
            columnDefs: [
                {targets: [-1, -2], orderable: false, className: 'text-center'}
            ]
        });

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

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

@endsection