@extends('admin.layout.master')
@section('title','MENU')
@section('custom_style')
    @include('inventory.blade_styles.posting_blade_css')
@endsection
@section('content')  
    <!--end breadcrumb-->
    <div class="card sina-card">
        <div class="card-header card-header-s">
            <div class="d-flex">
                <h4 class="col-md-6 pl-0">Update Menu</h4> 
            </div>
        </div>   
        <div class="card-body">
            <form action="{{ route('restaurant.menu.update') }}" enctype="multipart/form-data" method="post">
                @csrf
                <div class="row g-3"> 
                    <div class="col-md-4">
                        <label>Menu Name</label>
                        <input type="text" value="{{ $menu->name }}" name="name" class="form-control" />
                        <input type="hidden" value="{{ $menu->id }}" name="id" class="form-control" />
                        @if ($errors->has('name'))
                            <p class="error" style="color: red">{{ $errors->first('name') }}</p>
                        @endif
                    </div>

                    <div class="col-md-2">
                        <label>Start Time</label>
                        <input type="text" value="{{ $menu->start_time }}" name="start_time" class="form-control time_picker" />
                        @if ($errors->has('start_time'))
                            <p class="error" style="color: red">{{ $errors->first('start_time') }}</p>
                        @endif
                    </div>
                    <div class="col-md-2">
                        <label>End Time</label>
                        <input type="text" value="{{ $menu->end_time }}" name="end_time" class="form-control time_picker" />
                        @if ($errors->has('end_time'))
                            <p class="error" style="color: red">{{ $errors->first('end_time') }}</p>
                        @endif
                    </div>
                    <div class="col-md-2">
                        <label>Menu Icon </label>
                        <input type="file" id="file-upload" name="icon" class="form-control" />
                        <img src="{{ asset($menu->icon) }}" style="height:50px; border: 2px solid grey" />
                        <img id="blah" src="#" alt="" style="height:50px; border: 2px solid grey" />
                        @if ($errors->has('icon'))
                            <p class="error" style="color: red">{{ $errors->first('icon') }}</p>
                        @endif
                    </div>  
                    <div class="col-md-2">
                        <label>Status</label>
                        <select class="form-control customClass" name="status">
                            <option {{ $menu->status == 1 ? 'selected' : '' }} value="1">Active</option>
                            <option {{ $menu->status == 2 ? 'selected' : '' }} value="2">Inactive</option>
                        </select>
                    </div>
                    <div class="col-md-12">
                        <label class="labels col-2 text-nowrap">{{__('obs.menu')}} {{__('obs.items')}}</label>
                            <div class="form-group col-10">
                                <select class="form-control select_2 product_ids" name="product_ids[]" id="product_ids" multiple style="width: 100%">
                                    @forelse ($products as $product)
                                        <option value="{{$product->id}}" @if(!empty($menu) && in_array($menu->product_id, ($menu->products ? $menu->products->pluck('product_id')->toArray() : []))) selected @endif>{{$product->name_eng}}</option>
                                    @empty
                                    @endforelse
                                </select>
                            </div>
                        @if ($errors->has('product_ids'))
                            <p class="error" style="color: red">{{ $errors->first('product_ids') }}</p>
                        @endif
                    </div>
                </div>

                <div class="d-flex justify-content-end mt-3" style="gap: 5px">
                    <a href="{{ route('restaurant.menu.index') }}" type="button" class="btn btn-danger px-4 btn-sm mr-2">Back</a>
                    <button type="submit" id="but_upload" class="btn btn-primary px-4 btn-sm">Submit</button>
                </div>
            </form>
        </div> 
    </div>
    <script>
        $('#blah').hide();

        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#blah').attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
            $('#blah').show();
        }
        $("#file-upload").change(function() {
            readURL(this);
        });
        $(document).ready(function() {
            $('.customClass').select2();
            $('.select_2').select2();
        });
    </script>
@endsection