@extends('layouts.vertical')

@section('css')
<link href="{{ Helper::assets('assets/libs/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ Helper::assets('assets/libs/datatables/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ Helper::assets('assets/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('breadcrumb')
<div class="row page-title align-items-center">
    <div class="col-md-12">
        <h4 class="m-0 font-weight-medium">Manage meal menu</h4>
    </div>
</div>
@endsection
@php
    $selectedDay = 0;
    $selectDay = 'mon';
    if(app('request')->input('d') != ""){
        $selectedDay = app('request')->input('d');
        if($selectedDay > 6){$selectedDay = 0;$selectDay = 'mon';}
    }
    $days = config('constant.days');
@endphp
@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <form class="" method="get" action="">
                    <div class="row mb-2">
                        <div class="col-md-8">
                            <div class="row form-group">
                                <label class="col-lg-12">Select a day to manage meal's menu</label>
                                <div class="col-lg-5">
                                    <select class="form-control" data-plugin="customselect" name="d" onchange="this.form.submit()">
                                        @php $count=0; @endphp
                                        @foreach ($days as $key => $day)
                                            <option value="{{$count}}" {{$selectedDay == $count ? 'selected' : ''}}>{{$day}}</option>
                                            @php if($selectedDay == $count){$selectDay=$key;} $count++; @endphp
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 text-sm-right mb-2">
                            <button type="button" class="btn btn-success btn-min-width" data-toggle="modal" data-target="#addMealModal">Add meal</button>
                        </div>
                    </div>
                </form>
                <form class="day-meal-form" method="post" action="{{ route('teachers.manage.day.meal') }}">
                    @csrf
                    <input type="hidden" name="day" value="{{$selectedDay}}">
                    <div class="row">
                        <div class="col-lg-12">
                            <h5 class="font-size-16 pb-3">Tap to select the meals</h5>
                            <div class="meals row">
                                @if(isset($meals) && !empty($meals))
                                @foreach ($meals as $meal)
                                {{-- @if((isset($meal->$selectDay) && $meal->$selectDay == true) || !isset($meal->$selectDay)) --}}
                                <div class="col text-center d-inline-block meal-item mb-sm-3 mb-2">
                                    <label>
                                        <input type="checkbox" class="checkbox-meal" name="meals[]" value="{{ $meal->_id }}" {{isset($meal->$selectDay) && $meal->$selectDay == true ? "checked" : ""}}>
                                        <div class="meal-image position-relative">
                                            <i class="uil uil-check icon-check"></i>
                                            <img src="{{ $meal->image }}" class="img-meal medium" alt="Meal" />
                                            <h5 class="mt-2 mb-0 font-size-18">{{ $meal->name }}</h5>
                                        </div>
                                    </label>
                                </div>
                                {{-- @endif --}}
                                @endforeach
                                @endif
                                {{-- <div class="col text-center d-inline-block meal-item mb-sm-3 mb-2">
                                    <label>
                                        <input type="checkbox" class="checkbox-meal" value="2" checked>
                                        <div class="meal-image position-relative ">
                                            <i class="uil uil-check icon-check"></i>
                                            <img src="{{ Helper::assets('assets/images/meals/2.png') }}" class="img-meal medium" alt="Meal" />
                                            <h5 class="mt-2 mb-0 font-size-18">Almond</h5>
                                        </div>
                                    </label>
                                </div>
                                <div class="col text-center d-inline-block meal-item mb-sm-3 mb-2">
                                    <label>
                                        <input type="checkbox" class="checkbox-meal" value="3">
                                        <div class="meal-image position-relative ">
                                            <i class="uil uil-check icon-check"></i>
                                            <img src="{{ Helper::assets('assets/images/meals/3.png') }}" class="img-meal medium" alt="Meal" />
                                            <h5 class="mt-2 mb-0 font-size-18">Oranges</h5>
                                        </div>
                                    </label>
                                </div>
                                <div class="col text-center d-inline-block meal-item mb-sm-3 mb-2">
                                    <label>
                                        <input type="checkbox" class="checkbox-meal" value="4">
                                        <div class="meal-image position-relative ">
                                            <i class="uil uil-check icon-check"></i>
                                            <img src="{{ Helper::assets('assets/images/meals/4.png') }}" class="img-meal medium" alt="Meal" />
                                            <h5 class="mt-2 mb-0 font-size-18">Biscuits</h5>
                                        </div>
                                    </label>
                                </div>
                                <div class="col text-center d-inline-block meal-item mb-sm-3 mb-2">
                                    <label>
                                        <input type="checkbox" class="checkbox-meal" value="5">
                                        <div class="meal-image position-relative ">
                                            <i class="uil uil-check icon-check"></i>
                                            <img src="{{ Helper::assets('assets/images/meals/5.png') }}" class="img-meal medium" alt="Meal" />
                                            <h5 class="mt-2 mb-0 font-size-18">Chicken</h5>
                                        </div>
                                    </label>
                                </div>
                                <div class="col text-center d-inline-block meal-item mb-sm-3 mb-2">
                                    <label>
                                        <input type="checkbox" class="checkbox-meal" value="6" checked>
                                        <div class="meal-image position-relative ">
                                            <i class="uil uil-check icon-check"></i>
                                            <img src="{{ Helper::assets('assets/images/meals/6.png') }}" class="img-meal medium" alt="Meal" />
                                            <h5 class="mt-2 mb-0 font-size-18">Noodles</h5>
                                        </div>
                                    </label>
                                </div>
                                <div class="col text-center d-inline-block meal-item mb-sm-3 mb-2">
                                    <label>
                                        <input type="checkbox" class="checkbox-meal" value="7">
                                        <div class="meal-image position-relative ">
                                            <i class="uil uil-check icon-check"></i>
                                            <img src="{{ Helper::assets('assets/images/meals/7.png') }}" class="img-meal medium" alt="Meal" />
                                            <h5 class="mt-2 mb-0 font-size-18">Grapes</h5>
                                        </div>
                                    </label>
                                </div>
                                <div class="col text-center d-inline-block meal-item mb-sm-3 mb-2">
                                    <label>
                                        <input type="checkbox" class="checkbox-meal" value="8" checked>
                                        <div class="meal-image position-relative ">
                                            <i class="uil uil-check icon-check"></i>
                                            <img src="{{ Helper::assets('assets/images/meals/8.png') }}" class="img-meal medium" alt="Meal" />
                                            <h5 class="mt-2 mb-0 font-size-18">Cake</h5>
                                        </div>
                                    </label>
                                </div>
                                <div class="col text-center d-inline-block meal-item mb-sm-3 mb-2">
                                    <label>
                                        <input type="checkbox" class="checkbox-meal" value="9" checked>
                                        <div class="meal-image position-relative ">
                                            <i class="uil uil-check icon-check"></i>
                                            <img src="{{ Helper::assets('assets/images/meals/9.png') }}" class="img-meal medium" alt="Meal" />
                                            <h5 class="mt-2 mb-0 font-size-18">Apples</h5>
                                        </div>
                                    </label>
                                </div>
                                <div class="col text-center d-inline-block meal-item mb-sm-3 mb-2">
                                    <label>
                                        <input type="checkbox" class="checkbox-meal" value="10">
                                        <div class="meal-image position-relative ">
                                            <i class="uil uil-check icon-check"></i>
                                            <img src="{{ Helper::assets('assets/images/meals/10.png') }}" class="img-meal medium" alt="Meal" />
                                            <h5 class="mt-2 mb-0 font-size-18">Meat</h5>
                                        </div>
                                    </label>
                                </div>
                                <div class="col text-center d-inline-block meal-item mb-sm-3 mb-2">
                                    <label>
                                        <input type="checkbox" class="checkbox-meal" value="11">
                                        <div class="meal-image position-relative ">
                                            <i class="uil uil-check icon-check"></i>
                                            <img src="{{ Helper::assets('assets/images/meals/11.png') }}" class="img-meal medium" alt="Meal" />
                                            <h5 class="mt-2 mb-0 font-size-18">Sandwich</h5>
                                        </div>
                                    </label>
                                </div>
                                <div class="col text-center d-inline-block meal-item mb-sm-3 mb-2">
                                    <label>
                                        <input type="checkbox" class="checkbox-meal" value="12">
                                        <div class="meal-image position-relative ">
                                            <i class="uil uil-check icon-check"></i>
                                            <img src="{{ Helper::assets('assets/images/meals/12.png') }}" class="img-meal medium" alt="Meal" />
                                            <h5 class="mt-2 mb-0 font-size-18">Fries</h5>
                                        </div>
                                    </label>
                                </div>
                                <div class="col text-center d-inline-block meal-item mb-sm-3 mb-2">
                                    <label>
                                        <input type="checkbox" class="checkbox-meal" value="13">
                                        <div class="meal-image position-relative ">
                                            <i class="uil uil-check icon-check"></i>
                                            <img src="{{ Helper::assets('assets/images/meals/13.png') }}" class="img-meal medium" alt="Meal" />
                                            <h5 class="mt-2 mb-0 font-size-18">Burger</h5>
                                        </div>
                                    </label>
                                </div> --}}
                            </div>
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-lg-12">
                            <button type="submit" class="btn btn-success btn-min-width">Save the menu</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@include('school.teachers.addMealModal')
@include('school.teachers.editMealModal')
@endsection

@section('script-bottom')
<script defer src="{{ Helper::assets('assets/libs/validation/validate.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/validation/additional-methods.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/select2/select2.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/js/pages/manage-day.js') }}"></script>
<script>
    
</script>
@endsection