@extends('admin.layouts.container')

@section('content')

<div class="side-title">
    <div class="row">
        <div class="col-lg-5">
            <h3 class="mb-0">طلبات المطبخ</h3>
        </div>
    </div>
</div>

<div class="border-item"> 

    <form id="formKitchen" onsubmit='fetchKitchen(this)'>
    <h5 class="text-center mb-5"> اختر اليوم لعرض طلبات المطبخ </h5>
    
    <div class="row justify-content-center">
        <div class="col-lg-6">
            <div class="days_calender">
                <input type="hidden" id="date" name="date">
                <div id="datepicker2" class="kitchen_calender"></div>
            </div>
        </div>
        <div class="col-lg-6">
            <label>{{ __('areas.city') }} </label>
            <select name="city_id" class="form-control  {{ $errors->has('city_id') ? 'is-invalid' : '' }}">
                <option  value="">{{__('cities.select')}}</option>
                @foreach($cities as $row)
                    <option @if($area ?? ''  && $area->id)  @if($area->city_id == $row->id) selected @endif @endif  value="{{$row->id}}" > {{$row->descriptions()->name}} </option>  
                 @endforeach
            </select>     
        </div>
    </div>
    
    <div class="text-center mt-5 col-12">
        <button type="submit" class="butn px-5"><span>عرض</span></button>
    </div>
    
    
    <div class="row justify-content-center">
        <div class="col-12" id="meals">
        </div>
    </div>
        
    </form>
    
</div>

@endsection


@section('inner_js')

<script>
    $( function() {
        $( "#datepicker2" ).datepicker({
            dateFormat: 'yy-mm-dd',
            onSelect: function(selected,evnt) {
                $('#date').val(selected);
            }
        });
    } );
    function fetchKitchen(elem)
    {
        event.preventDefault(); 
        var dataform = $(elem).serialize();
        console.log(dataform);
        $.ajax
        ({
            url : {!! json_encode(url(getCurrentLocale().'/admin/select/less/statistics')) !!},
            type: 'GET',              
            data: dataform,
            success:function(data)
            {
                $('#meals').html(data);
            }
        })
    }
</script>

@endsection