@extends('adminlte::page')

@section('title', __('global.Covid').' '.__('global.Products').' '. __('global.List'))

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

@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>

                <div class="row">
                    <div class="col-sm-3">
                        <div class="from-group">
                            <label for="typeproduit_id">@lang('global.Product Type')</label>
                            <select name="typeproduit_id" id="typeproduit_id" class="form-control init-select2 @error('typeproduit_id') is-invalid @enderror">
                                <option selected value="">@lang('global.Choose')</option>
                                @foreach (get_intitules_by_group([['slug', '=', 'types-produits']]) as $intitule)
                                    <option value="{{ $intitule->id }}">{{ $intitule->libelle }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                
            </x-card>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <x-card>
                
                @if (auth()->user()->can('covid-products.create'))    
                    <x-slot name="tools">
                        <a href="{{ route('covid-products.create') }}" class="btn btn-primary btn-sm">@lang('global.Add New')</a>
                    </x-slot>
                @endif

                <x-table id="covid-products">
                    <thead>
                        <tr>
                            <th>@lang('global.id')</th>
                            <th>@lang('global.Type')</th>
                            <th>@lang('global.Name')</th>
                            <th nowrap>@lang('global.Code') @lang('global.Name')</th>
                            <th>@lang('global.Mp')</th>
                            <th>@lang('global.Code') @lang('global.Mp')</th>
                            <th>@lang('global.Vp')</th>
                            <th>@lang('global.Depreciated?')</th>
                            <th>@lang('global.Etat')</th>
                            @can('covid-products.edit', 'covid-products.delete')
                            <th>@lang('global.Action')</th>
                            @endcan
                        </tr>
                    </thead>
                </x-table>
            </x-card>
        </div>
    </div>

@endsection

@section('adminlte_js')

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

                        d.typeproduit_id = $('#typeproduit_id').val();
                    }
                },
                order: [[0, "desc"]],
                columns: [
                    {data: 'id'},
                    {data: 'typeproduit_id'},
                    {data: 'name'},
                    {data: 'codename'},
                    {data: 'mp'},
                    {data: 'codemp'},
                    {data: 'vp'},
                    {data: 'depreciated', className: 'text-center'},
                    {data: 'etat'},
                    @can('covid-products.edit', 'covid-products.delete')
                    {data: 'action'},
                    @endcan
                ],
                columnDefs: [
                    {targets: [-1 @can('covid-products.edit', 'covid-products.delete'),-2 @endcan], orderable: false , className: 'text-center'}
                ]
            });

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

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

@endsection