@extends('layout.admin-app')

@section('content')
    <div class="float-sm-left">
        <a href="{{ route('admin.food.index') }}" class="btn btn-success">Back</a>
    </div>
    <br>
    <br>

    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0" style="font-size: 2.5rem; color: #333; font-weight: bold;">Edit Food</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#" style="color: #666;">Food</a></li>
                        <li class="breadcrumb-item active" aria-current="page" style="color: #333; font-weight: bold;">
                            Dashboard
                        </li>
                    </ol>
                </div>
            </div>
            <br>
            <form action="{{route('admin.food.update',$food->id)}}" method="post" enctype="multipart/form-data">
                @csrf

                <div class="row">

                    <div class="col-md-12">
                        <label for="title" style="font-size: 1.2rem; color: #555; font-weight: bold;">Name</label>
                        <input type="text" name="name" class="form-control" placeholder="Name"
                               value="{{$food->name ?? ''}}">
                    </div>

                    <div class="col-md-12">
                        <label for="title" style="font-size: 1.2rem; color: #555; font-weight: bold;">Price</label>
                        <input type="text" name="price" class="form-control" placeholder="$"
                               value="{{$food->price ?? ''}}">
                    </div>

                    <div class="col-md-12">
                        <label for="title" style="font-size: 1.2rem; color: #555; font-weight: bold;">Image</label>
                        <input type="file" name="image" class="form-control" accept="image/*">
                        <img width="200" height="200" src="{{$food->get_first_image()}}" alt="">
                    </div>



                    <div class="col-md-12">
                        <label for="food_variations">Choose food variations:</label>
                        <select class="js-example-basic-multiple" name="food_variations[]" id="food_variations" multiple>
                            @foreach($foodCategories as $category)
                                <optgroup label="{{ $category->name }}">
                                    @foreach($category->variation as $variation)
                                        @php
                                            $isSelected = $selectedVariations->contains('variation_id', $variation->id);
                                        @endphp

                                            <option value="{{ $variation->id }}" @if($isSelected)  selected @endif> {{ $variation->name }}</option>

                                            @endforeach
                                </optgroup>
                            @endforeach

                            {{-- Options for variations where category_id is null --}}
                            <optgroup label="Others">
                                @foreach($uncategorizedVariations as $uncategorizedVariation)
                                    @php
                                        $isSelected = $selectedVariations->contains('variation_id', $uncategorizedVariation->id);
                                    @endphp
                                    <option value="{{ $uncategorizedVariation->id }}" @if($isSelected)  selected @endif>{{ $uncategorizedVariation->name }}</option>
                                @endforeach
                            </optgroup>
                        </select>

                    </div>


{{--                    <div class="col-md-12">--}}
{{--                        <label for="food_variations">Choose food variations:</label>--}}
{{--                        <select class="js-example-basic-multiple" name="food_variations[]" id="food_variations" multiple>--}}
{{--                            @foreach($foodCategories as $category)--}}
{{--                                <optgroup label="{{ $category->name }}">--}}
{{--                                    @foreach($category->variation as $variation)--}}
{{--                                        <option value="{{ $variation->id }}">{{ $variation->name }}</option>--}}
{{--                                    @endforeach--}}
{{--                                </optgroup>--}}
{{--                            @endforeach--}}
{{--                        </select>--}}
{{--                    </div>--}}

                    {{--                    <div class="col-md-12">--}}
                    {{--                        <label>Any Variations</label>--}}
                    {{--                        <select class="js-example-basic-multiple" name="variation_id[]" multiple="multiple">--}}
                    {{--                            @foreach($variations as $variation)--}}
{{--                                                    @php--}}
{{--                                                        $contains = $food->selectedVariations->contains('variation_id', $variation->id);--}}
{{--                                                    @endphp--}}

                    {{--                                <option value="{{ $variation->id }}" {{ $contains ? 'selected' : '' }}>--}}
                    {{--                                    {{ $variation->name }}--}}
                    {{--                                </option>--}}
                    {{--                            @endforeach--}}
                    {{--                        </select>--}}


                    {{--                    </div>--}}


                </div>

                <button type="submit" class="btn-success">Submit</button>
            </form>


        </div>
    </div>
@endsection