@extends('layouts.admin')

@php
    $is_update = false;
    if(isset($meal) && !empty($meal)){
        $is_update = true;
    }
@endphp

@section('css')
<link href="{{ Helper::assets('assets/libs/multiselect/bootstrap.multiselect.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('breadcrumb')
<div class="row page-title align-items-center">
    <div class="col-sm-6 col-xl-6">
        <h4 class="mb-1 mt-0 font-weight-medium">{{ $is_update ? 'Edit' : 'Add new' }} food</h4>
    </div>
</div>
@endsection

@section('content')
<form method="POST" action="{{ $is_update ? route('admin.meal.update') : route('admin.meal.save') }}" class="meal-form" id="meal-form" enctype="multipart/form-data">
    @csrf
    @if($is_update)
    <input type="hidden" name="id" value="{{ $meal->_id }}">
    @endif
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-6 order-lg-1 order-2">
                            <div class="form-group row mt-lg-4">
                                <label class="col-xl-4 col-form-label">Food name</label>
                                <div class="col-xl-7">
                                    <input type="text" class="form-control input-validate" name="name" value="{{ $is_update ? $meal->name : old('name') }}">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 order-lg-2 order-1">
                            <div class="form-group row align-items-center justify-content-center upload-image">
                                <div class="col-xl-4 col-auto">
                                    {{-- <div class="d-inline-block school-logo-box mr-md-4 mr-2 mb-3 mb-md-2 p-0">
                                        <img src="{{ Helper::assets('assets/images/smily.png') }}" data-src="{{ Helper::assets('assets/images/smily.png') }}" class="img-fluid">
                                    </div> --}}
                                    <div class="d-inline-block position-relative custom-upload-section {{ $is_update && $meal->image != "" ? 'show' : '' }}">
                                        <span class="image-upload-icon"></span>
                                        <div class="img-upload"></div>
                                        {{-- <i class="icon-pencil"></i> --}}
                                        {{-- <input type="file" class="custom-input" name="image" id=image> --}}
                                        <img class="custom-img" src="{{ $is_update ? $meal->image : "" }}" data-src="{{ Helper::assets('assets/images/smily.png') }}" alt="Meal">
                                    </div>
                                </div>
                                <div class="col-xl-8 col-auto">
                                    <button type="button" class="btn btn-pink mr-2 mb-2 btn-upload">Upload new image</button>
                                    {{-- <button class="btn btn-danger mb-2 btn-remove-image" type="button">Remove</button> --}}
                                    <input type="file" class=" input-validate" name="image" id="image">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <button type="submit" class="btn btn-success btn-min-width" id="save">Save</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
@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/js/pages/admin/meal.js') }}" type="text/javascript"></script>
@endsection