{{-- Filter --}}
<style>
    .select2-container .select2-selection--single {
        height: calc(1.5em + 0.5rem + 2px) !important;
    }
    .select2-selection--single .select2-selection__rendered{
        line-height: calc(1.5em + 0.5rem + 2px) !important;
    }
</style>

<div class="card bg-white">
    <div class="card-body">
        <div class="row">

            {{-- ObjectFilter.ordre_fabrication.article_id --}}
            <div {!! $view!='index' ? 'hidden':'' !!} class="col-md-3 col-xs-12 my-2">
                @if ($view=='index')
                    
                <div wire:ignore>
                    <select wire:model="ObjectFilter.ordre_fabrication.article_id" class="form-control form-control-sm styleSelect2">
                        <option value="">{{ __('Article...') }}</option>
                        @foreach ($articles as $key => $type)
                            <option value="{{ $key }}">{{ $type }}</option>
                        @endforeach
                    </select>
                </div>
                @endif
            </div>

            {{-- Object.ordre_fabrication.reference --}}
            <div class="col-md-3 my-2">
                <div class="input-group bg-light">
                    <input wire:model="ObjectFilter.ordre_fabrication.reference" type="text" class="form-control form-control-sm" placeholder="{{ __('OF Reference')}} ..." />                        
                </div>
            </div>  

            <div class="col-md-6 row my-2">
                {{-- Date Debut --}}
                <label class="col-2 my-1 pr-0 nowrap text-secondary" for="article_date_livrer" nowrap>{{ __('Date')}}</label>
                <div class="col-xl col-md-4 px-0">
                    <div class="input-group bg-light">
                        <input wire:model="ObjectFilter.Date" type="date" id="article_date_livrer" class="form-control form-control-sm" name="article_date_livrer" placeholder="{{ __('Date Livrer...')}}" />
                    </div>
                </div>
                
                <label class="col-1 my-1 px-0 text-center text-secondary" for="article_date_livrer1">{{ __('to')}}</label>

                {{-- Date Fin --}}
                <div class="col-xl col-md-4 px-0">
                    <div class="input-group bg-light">
                        <input wire:model="ObjectFilter.DATE" type="date" id="article_date_livrer1" class="form-control form-control-sm" name="article_date_livrer" placeholder="{{ __('Date Livrer...')}}" />
                    </div>
                </div>
            </div>

            {{-- Object.ordre_fabrication.num_of_sage --}}
            <div class="col-md-3 my-2">
                <div class="input-group bg-light">
                    <input wire:model="ObjectFilter.ordre_fabrication.num_of_sage" type="text" class="form-control form-control-sm" placeholder="{{ __('N° Sage')}} ..." />                        
                </div>
            </div>

            {{-- resetAll --}}
            <div class="col-md-1 my-2 text-centre pt-1">
                <svg wire:click="resetFilter()" onclick="resetFilter()" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                    fill="currentColor" class="bi bi-x-square-fill" viewBox="0 0 16 16">
                    <path
                        d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm3.354 4.646L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 1 1 .708-.708z" />
                </svg>
            </div>
        </div>
    </div>
</div>