@extends('layouts.app')
@section('css')
    <link href="{!! env('APP_ASSETS') !!}vendor_components/dropzone/dist/dropzone.css" rel="stylesheet">
<link href="{!! env('APP_ASSETS') !!}vendor_components/select2/dist/css/select2.min.css" rel="stylesheet">
    
    @endsection
@php
$resto = \App\Models\Restaurants::find(\App\Helpers\CommonMethods::getRestuarantID());
$lang = $resto->default_lang; 

app()->setLocale($lang);
if(session('app_lang') !==null){
$lang = session('app_lang');
app()->setLocale($lang);
}
@endphp    
@section('content')

<style>
          .alert{
            display: none;
        }
         .container-full,.content-wrapper{
            background-color: transparent !important;
        }
        .card-header{
            display: inline-block;
        }
        #image-preview {
            width: 568px;
            border-radius: 20px;
/*            height: 341px;*/
            position: relative;
            overflow: hidden;
            background-color: #f9f9f9;
            color: #ecf0f1;
            background-position: center !important;
    background-size: cover !important;
        }
        #image-preview input {
            line-height: 200px;
            font-size: 200px;
            position: absolute;
            opacity: 0;
            z-index: 10;
        }
        #image-preview label {
            position: absolute;
            z-index: 5;
            opacity: 0.8;
            cursor: pointer;
            background-color: #bdc3c7;
            width: 200px;
            height: 50px;
            font-size: 20px;
            line-height: 50px;
            text-transform: uppercase;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            text-align: center;
        }
        .form-control, .form-select {
                    height: 46px ;
                    border-color: #E4E6EB !important;
                    border-radius: 7px !important;
                }
	textarea{
        height: 80px !important;
    }
	.select2 {
		width: 100% !important;
		height: 46px;
		border-color: #E4E6EB !important;
    	border-radius: 7px !important;
		/*padding: 0.375rem 0.75rem !important;
		font-size: 1rem !important;
		font-weight: 400;
		line-height: 1.5;
		color: #212529;*/
	}
	.select2-container--default .select2-selection--multiple{
		padding:6px;
	}
	
	@media only screen and (max-width:428px){
		#image-preview{
			width:100%;
		}
	}
	
	.modal-header {
    border-bottom-color: #ffab00;
    background-color: #ffab00;
	color:white;
}
	
	
    </style>
@php
$resto = \App\Models\Restaurants::find(\App\Helpers\CommonMethods::getRestuarantID());
    $restuarant1 = $resto;
        $resto_meta = isset($restuarant1->resto_metas)?$restuarant1->resto_metas:null;
        

         $resto_metas = [];
            $billing = [];
            if(isset($resto_meta)){
                foreach($resto_meta as $meta){
                  //  dump($meta->resto_meta_defs);
                   $index_name = isset($meta->resto_meta_defs->parents)?$meta->resto_meta_defs->parents->meta_def_name:$meta->resto_meta_defs->meta_def_name;
                   if(isset($_GET['debug'])){
                      //  dump($index_name );
                    }
                    if($meta->resto_meta_defs->meta_def_name=="BILLING_GATEWAY"){
                   //     dump($meta->resto_meta_defs->meta_def_name);
                     // $resto_metas['BILLING_GATEWAY'][] = $meta->meta_val;  
                        $billing[] = array('id'=>$meta->meta_id,'value'=>$meta->meta_val);
                    }
                    $resto_metas[$index_name] = $meta->meta_val;
                }
            }
            $resto_metas['BILLING_GATEWAY'] = $billing;
            $currency = isset($resto_metas['BUSSINESS_CCY'])?$resto_metas['BUSSINESS_CCY']:"IQD";
            $business_type = isset($resto_metas['BUSSINESS_TYPE'])?$resto_metas['BUSSINESS_TYPE']:"Restaurants";

			$allow_pre_order = isset($resto_metas['ALLOW_PRE_ORDERS'])?$resto_metas['ALLOW_PRE_ORDERS']:"No";

$business_type =  trim($business_type);




            
          
@endphp
 <div class="content-wrapper"> 
        <div class="container-full">
            <section class="content">
				<h1 class="mt-4">{{__('label.recipe')}}</h1>
        <ol class="breadcrumb mb-4">
            <li class="breadcrumb-item"><a href="{!! env('APP_URL') !!}dashboard">{{__('label.dashboard')}}</a></li>
            <li class="breadcrumb-item active">  @if(isset($recipe)) {{__('label.edit_recipe')}}  @else {{__('label.new_recipe')}}  @endif</li>
        </ol>
                <div class="row">
            <div class="col-xl-12">
                <div class="card mb-4">
                    <div class="card-header">
                        <i class="fa fa-plus mr-1"></i>
                       @if(isset($recipe))
                            {{__('label.edit')}} {!! $recipe->name !!}
                            @else
                        {{__('label.new_item')}}
                            @endif
                    </div>
                    <div class="card-body">
                        <form id="restaurant-form" method="POST" action="{!! env('APP_URL') !!}recipe/save" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="id" value="{!! isset($recipe)?$recipe->id:'' !!}" />
                            <input type="hidden" name="business_type" value="{!! $business_type !!}">


                            <div class="row mb-4 main-cover-image">
                                <div class="col-sm-12">
                                    <p style="font-size: 14px">{{__('label.cover_image')}}</p>
                                <div id="image-preview" class="ratio ratio-16x9" @if(isset($recipe) && isset($recipe->main_images) && !empty($recipe->main_images->file_name)) style="background: url({!! $recipe->main_images->file_name !!})" @endif>
                                    <label for="image-upload" id="image-label">{{__('label.choose_file')}}</label>
                                    <input type="file" name="main_image" id="image-upload" />
                                </div>
                                @if(isset($recipe) && isset($recipe->main_images) && !empty($recipe->main_images->file_name))
                                <a href="#!" class="text-center text-danger remove-image" data-recipe-id="{!! isset($recipe)?$recipe->id:'' !!}">{{__('label.remove_image')}}</a>
                                @endif
									  <p class="text-warning mt-2">* image size 1920 X 1280 pixels , size 2.4 Mb</p>
                                </div>
                            </div>
                        <div class="row">
                            <div class="col-sm-4 col-md-6">
                                <div class="form-group">
                                    <label>{{__('label.english_name')}}</label>
                                    <input type="text" class="form-control" placeholder="" name="name" value="{!! isset($recipe)?$recipe->name:'' !!}" required>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-4 col-md-6">
                                <div class="form-group">
                                    <label>{{__('label.arabic_name')}}</label>
                                    <input type="text"  style="direction: rtl" class="form-control" placeholder="" name="arabic_name" value="{!! isset($recipe)?$recipe->arabic_name:'' !!}" required>
                                </div>
                            </div>
                        </div>
                            @php
                            $c = [];
                            if(isset($recipe)){
                            $c = $recipe->categories->pluck('category_id')->toArray();
                           // dump($c);

                            }
                            @endphp

                            <div class="row">
                            <div class="col-sm-4 col-md-6">
                                <div class="form-group">
                                    <label>{{__('label.category')}}</label>
                                  <select class="custom-select" name="category[]" multiple>
                                      <option value="">{{__('label.select_category')}}</option>
                                      @if(isset($categories) && $categories->count() > 0)
                                        @foreach($categories as $category)
                                            <option value="{!! $category->id !!}" @if(isset($recipe) && in_array($category->id,$c)) selected @endif>{!! $category->name !!}</option>
                                            @endforeach
                                      @endif
                                  </select>
                                </div>
                            </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-4 col-md-4">
                                    <div class="form-group">
                                        <label>{{__('label.price')}}</label>
                                        <input type="number" class="form-control" placeholder="" name="price" value="{!! isset($recipe)?$recipe->price:'' !!}" required>
                                    </div>
                                </div>
                                <div class="col-sm-4 col-md-4" style="margin-top:2.2rem">
                                    <div class="form-group">
                                     <label style="visibility: hidden;">Price</label>
                                        @if(isset($recipe))
                                        <input type="checkbox" id="basic_checkbox_2" class="filled-in"  name="show_recipe_main_price"  @if($recipe->show_recipe_main_price==1) checked @endif>
                                        <label for="basic_checkbox_2">{{__('label.show_item_price')}}</label>
                                        @else
                                         <input type="checkbox" id="basic_checkbox_2" class="filled-in"  name="show_recipe_main_price">
                                        <label for="basic_checkbox_2">{{__('label.show_item_price')}}</label>
                                         @endif
                                    </div>
                                </div>
                        </div>

                        

                        <div class="row">
                            <div class="col-sm-4 col-md-6">
                                <div class="form-group">
                                    <label>{{__('label.english_description')}}</label> 
                                    <textarea  class="form-control" placeholder="" name="short_description">{!! isset($recipe)?$recipe->short_description:'' !!}</textarea>
                                </div>
                            </div>
                        </div>
							
							 <div class="row">
                            <div class="col-sm-4 col-md-6">
                                <div class="form-group">
                                    <label>{{__('label.arabic_description')}}</label> 
                                    <textarea  class="form-control"  style="direction: rtl" placeholder="" name="short_description_arabic">{!! isset($recipe)?$recipe->short_description_arabic:'' !!}</textarea>
                                </div>
                            </div>
                        </div>
							
                        @if($business_type=="ClothsStore")
                        @php
                            $sizes = [];
                            $colors = [];
							$color_data = null;
                            if(isset($recipe)){
                                $colors = \App\Models\ClothOptions::where('product_id',$recipe->id)->where('type','color')->pluck('name')->whereNull('deleted_at')->toArray();
							//dump($colors);
                            $sizes = \App\Models\ClothOptions::where('product_id',$recipe->id)->where('type','size')->pluck('name')->toArray();
							$color_data = \App\Models\ClothOptions::where('product_id',$recipe->id)->whereIn('type',['color','color_image'])->whereNull('deleted_at')->get();
                            }
                            
                            
                        @endphp
							<div class="row">
                            <div class="col-sm-4 col-md-6">
                                <div class="form-group">
                                    <label>{{__('label.color_option')}}</label> 
                                  <select class="form-control" required name="color_option">
									  <option value="color" @if(isset($recipe) && $recipe->color_option == 'color' ) selected @endif>{{__('label.color_only')}}</option>
									  <option value="color_image" @if(isset($recipe) && $recipe->color_option =='color_image' ) selected @endif>{{__('label.color_image')}}</option>

                                  </select>
                                </div>
                            </div>
                        </div>
                         <div class="row">
                            <div class="col-sm-4 col-md-6">
                                <div class="form-group">
                                    <label>{{__('label.color')}}</label> 
                                  <select class="form-control" multiple id="color" name="color[]">

                                  </select>
                                </div>
                            </div>
                        </div>
							@if(isset($color_data))
							<div class="row">
								<div class="col-sm-4 col-md-6">
									<table class="table table-stripped">
										<tbody>
											@foreach( $color_data as $color)
											<tr>
												<td><div style="width: 20px; height: 20px; background-color: {!! $color->name !!}; float: left; border-radius: 20px;"></div></td>
												<td>@if($color->img_url!="") <img style="width: 100px" src="{!! $color->img_url!!}" @endif </td>
													<td><a href="#!" data-id="{!! $color->id !!}" class="btn btn-sm btn-danger delete-color">{{__('label.delete')}}</a></td>
											</tr>
											@endforeach
										</tbody>
									</table>
								
								</div>
							</div>
							@endif
							<div class="row">
								<div class="col-sm-4 col-md-6">
									<table id="color-table" class="table table-stripped">
										<tbody></tbody>
									</table>
								
								</div>
							</div>

                        <div class="row">
                            <div class="col-sm-4 col-md-6">
                                <div class="form-group">
                                    <label>{{__('label.size')}}</label> 
                                  <select class="form-control" multiple id="size" name="size[]">
								  <option value="30" @if(in_array('30',$sizes)) selected @endif>30</option>
                                    <option value="32" @if(in_array('32',$sizes)) selected @endif>32</option>
                                    <option value="34" @if(in_array('34',$sizes)) selected @endif>34</option>
                                    <option value="36" @if(in_array('36',$sizes)) selected @endif>36</option>
                                    <option value="38" @if(in_array('38',$sizes)) selected @endif>38</option>
                                     <option value="40" @if(in_array('40',$sizes)) selected @endif>40</option>
                                      <option value="41" @if(in_array('41',$sizes)) selected @endif>41</option>
                                    <option value="42" @if(in_array('42',$sizes)) selected @endif>42</option>
                                      <option value="43" @if(in_array('43',$sizes)) selected @endif>43</option>
                                    <option value="44" @if(in_array('44',$sizes)) selected @endif>44</option>
                                      <option value="45" @if(in_array('45',$sizes)) selected @endif>45</option>
									 <option value="46" @if(in_array('46',$sizes)) selected @endif>46</option> 
									  <option value="48" @if(in_array('48',$sizes)) selected @endif>48</option> 
									  <option value="50" @if(in_array('50',$sizes)) selected @endif>50</option> 
									   <option value="52" @if(in_array('52',$sizes)) selected @endif>52</option> 
									  <option value="54" @if(in_array('54',$sizes)) selected @endif>54</option> 
									  <option value="56" @if(in_array('56',$sizes)) selected @endif>56</option> 
									  <option value="58" @if(in_array('58',$sizes)) selected @endif>58</option> 
									  <option value="60" @if(in_array('60',$sizes)) selected @endif>60</option> 
									  <option value="62" @if(in_array('62',$sizes)) selected @endif>62</option> 
									  
                                    <option value="XXS" @if(in_array('XXS',$sizes)) selected @endif>XXS</option>
                                    <option value="XS" @if(in_array('XS',$sizes)) selected @endif>XS</option>
                                    <option value="S" @if(in_array('S',$sizes)) selected @endif>S</option>
                                    <option value="M" @if(in_array('M',$sizes)) selected @endif>M</option>
                                    <option value="L" @if(in_array('L',$sizes)) selected @endif>L</option>
                                    <option value="XL" @if(in_array('XL',$sizes)) selected @endif>XL</option>
                                    <option value="XXL" @if(in_array('XXL',$sizes)) selected @endif>XXL</option>
                                    <option value="XXXL" @if(in_array('XXXL',$sizes)) selected @endif>XXXL</option>
									
									<option value="0-3-Months" @if(in_array('0-3-Months',$sizes)) selected @endif>0-3 Months</option>
<option value="3-6-Months" @if(in_array('3-6-Months',$sizes)) selected @endif>3-6 Months</option>
<option value="6-9-Months" @if(in_array('6-9-Months',$sizes)) selected @endif>6-9 Months</option>
<option value="9-12-Months" @if(in_array('9-12-Months',$sizes)) selected @endif>9-12 Months</option>

<option value="1-2-YEARS" @if(in_array('1-2-YEARS',$sizes)) selected @endif>1-2 YEARS</option>
<option value="2-3-YEARS" @if(in_array('2-3-YEARS',$sizes)) selected @endif>2-3 YEARS</option>
<option value="3-4-YEARS" @if(in_array('3-4-YEARS',$sizes)) selected @endif>3-4 YEARS</option>
<option value="5-6-YEARS" @if(in_array('5-6-YEARS',$sizes)) selected @endif>5-6 YEARS</option>
<option value="6-7-YEARS" @if(in_array('6-7-YEARS',$sizes)) selected @endif>6-7 YEARS</option>
<option value="7-8-YEARS" @if(in_array('7-8-YEARS',$sizes)) selected @endif>7-8 YEARS</option>

<option value="1-2-Y" @if(in_array('1-2-Y',$sizes)) selected @endif>1-2 Y</option>
<option value="2-3-Y" @if(in_array('2-3-Y',$sizes)) selected @endif>2-3 Y</option>
<option value="3-4-Y" @if(in_array('3-4-Y',$sizes)) selected @endif>3-4 Y</option>
<option value="5-6-Y" @if(in_array('5-6-Y',$sizes)) selected @endif>5-6 Y</option>
<option value="6-7-Y" @if(in_array('6-7-Y',$sizes)) selected @endif>6-7 Y</option>
<option value="7-8-Y" @if(in_array('7-8-Y',$sizes)) selected @endif>7-8 Y</option>


<option value="0-3-آشهر" @if(in_array('0-3-آشهر',$sizes)) selected @endif>0-3 آشهر</option>
<option value="3-6-آشهر" @if(in_array('3-6-آشهر',$sizes)) selected @endif>3-6 آشهر</option>
<option value="6-9-آشهر" @if(in_array('6-9-آشهر',$sizes)) selected @endif>6-9 آشهر</option>
<option value="9-12-آشهر" @if(in_array('9-12-آشهر',$sizes)) selected @endif>9-12 آشهر</option>
<option value="1-2-سنوات" @if(in_array('1-2-سنوات',$sizes)) selected @endif>1-2 سنوات</option>
<option value="2-3-سنوات" @if(in_array('2-3-سنوات',$sizes)) selected @endif>2-3 سنوات</option>
<option value="3-4-سنوات" @if(in_array('3-4-سنوات',$sizes)) selected @endif>3-4 سنوات</option>
<option value="5-6-سنوات" @if(in_array('5-6-سنوات',$sizes)) selected @endif>5-6 سنوات</option>
<option value="6-7-سنوات" @if(in_array('6-7-سنوات',$sizes)) selected @endif>6-7 سنوات</option>
<option value="7-8-سنوات" @if(in_array('7-8-سنوات',$sizes)) selected @endif>7-8 سنوات</option>
									

                                  </select>
                                </div>
                            </div>
                        </div>
                        @endif
                            


                            <div class="row">
                                <div class="col-sm-4 col-md-6">
                                   <div class="form-group">
                                        <label>{{__('label.gallery')}}</label>
                                       
                                    </div>

                                    @if(isset($recipe)  && isset($recipe->galleries))
                                        <div class="row mb-2">
                                            @foreach($recipe->galleries as $gallery)
                                                <div class="col-sm-2 gallery">
                                                    <div class="mb-1" style="width: 100px; height: 100px; background-image: url({!! $gallery->file_name !!}); background-position: center; background-size: contain">


                                                    </div>
                                                    <div class="text-center">
                                                        <a href="#!" class="delete-image text-danger" data-id="{!! $gallery->id !!}"><i class="glyphicon glyphicon-trash"></i> </a>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>

                                    @endif
                                </div>
                            </div>

                        @if($business_type!="ClothsStore")

                         @if(isset($recipe->extra_options) && $recipe->extra_options->count() > 0)
                             <h3>{{__('label.extra_options')}}</h3>
                             <hr />
                                <div class="row">
                                    <div class="col-sm-6 col-md-8">
                             <table class="table table-bordered">
                                 <thead>
                                    <tr>
                                        <th>{{__('label.option_name')}}</th>
                                        <th>{{__('label.price')}}Price</th>
                                        <th>{{__('label.items')}}</th>
                                        <th>{{__('label.is_mandatory')}}?</th>
                                        <th></th>
                                    </tr>
                                 </thead>
                                 <tbody>
                                    @foreach($recipe->extra_options as $option)
                                        <tr>
                                            <td>{!! $option->name !!} @if($option->name_arabic!="") ( {!! $option->name_arabic !!} ) @endif</td>
                                            <td>{!! $option->price !!}</td>
                                            <td>
                                             @if(isset($option->extra_option_items) && $option->extra_option_items->count() > 0)
                                                <a href="#!" class="badge badge-success view-items" data-id="{!! $option->id !!}" >{!! $option->extra_option_items->count() !!}</a>

                                              @endif
                                                 <a href="#!" class="badge badge-danger add-new-items"  data-id="{!! $option->id !!}"><i class="glyphicon glyphicon-plus"></i> </a>
                                            </td>
                                            <td>

                                                @if(isset($option->extra_option_items) && $option->extra_option_items->count() > 0)
                                         <!--        <input type="checkbox" class="is_mandatory" @if($option->is_mandatory==1) checked @endif value="" data-id="{!! $option->id !!}" /> -->
                                                <input type="checkbox" id="is_mandatory{!! $option->id !!}" class="filled-in is_mandatory"  name="is_mandatory" @if($option->is_mandatory==1) checked @endif value="" data-id="{!! $option->id !!}">
                                                <label for="is_mandatory{!! $option->id !!}">Mandatory Items</label>
                                                    @if($option->is_mandatory==1) User can select <span class="badge badge-success">{!! $option->mandatory_amount !!}</span> items must  @endif
                                                    @endif
                                            </td>
                                            <td>

                                                <a href="#!" class="btn btn-sm btn-primary edit-option" data-id="{!! $option->id !!}"  data-toggle="tooltip" data-placement="top" title="Edit"><i class="glyphicon glyphicon-edit"></i> </a>
                                                <a href="javascript:;" data-id="{!! $option->id !!}" class="btn btn-sm btn-danger delete-option"><i class="glyphicon glyphicon-trash" data-toggle="tooltip" data-placement="top" title="Delete"></i></a>


                                            </td>
                                        </tr>
                                    @endforeach
                                 </tbody>
                             </table>
                                    </div>
                                </div>
                         @endif

                        @endif
							@if(isset($recipe))
							@if(isset($resto_metas['ENABLED_PRODUCT_FAQS']) && $resto_metas['ENABLED_PRODUCT_FAQS']=="Yes")
								
							<div class="row mb-5">
								<div class="col-sm-8">
									<div class="card">
										<div class="card-header">
										<h3 class="pull-left">{{__('label.product_faqs')}}</h3>
											<a href="#!" class="btn btn-sm btn-primary pull-right add-faq">{{__('label.add_faq')}}</a>
										</div>
										<div class="card-body">
										
									
									@if(isset($recipe->product_faqs) && $recipe->product_faqs->count() > 0)
									
									<div class="accordion" id="accordionExample">
										@foreach($recipe->product_faqs as $faq)
										
									  <div class="accordion-item">
										<h2 class="accordion-header" id="heading{!! $faq->id !!}">
										  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{!! $faq->id !!}" aria-expanded="true" aria-controls="collapse{!! $faq->id !!}">
											{!! $faq->question !!} 
										  </button>
										</h2>
										<div id="collapse{!! $faq->id !!}" class="accordion-collapse collapse" aria-labelledby="heading{!! $faq->id !!}" data-bs-parent="#accordionExample">
										  <div class="accordion-body">
											<p>{!! nl2br($faq->answer) !!}</p>
											  <div class="text-end">
											  <a href="javascript:void(0)" data-id="{!! $faq->id !!}" class="edit-faq" style="margin: 0 3px 0 10px"><i class="glyphicon glyphicon-edit"></i></a> 
												  | 
												  <a href="javascript:void(0)" data-id="{!! $faq->id !!}" class="delete-faq" style="color:red"><i class="glyphicon glyphicon-trash"></i></a>
											  </div>
										  </div>
										</div>
									  </div>
										@endforeach
									  
									  
									</div>
									@endif
										</div>
									</div>
									
								</div>
							</div>
							@endif
							@endif

                        <div class="row">
                            <div class="col-sm-4 col-md-6">


 @if($business_type!="ClothsStore")
                                <div class="form-group">
                                    <div class="custom-control custom-checkbox">
                                        <input class="custom-control-input" id="is_customized"  @if(isset($recipe) && $recipe->is_customized=="1")   checked @endif  name="is_customized" type="checkbox" />
                                        <label class="custom-control-label" for="is_customized">{{__('label.customizedable')}}</label>
                                    </div>
                                </div>
                                @endif
                                <div class="form-group">
                                    <div class="custom-control custom-checkbox">
                                        <input class="custom-control-input" id="status" @if(isset($recipe) && $recipe->status=="1")   checked @endif name="status" type="checkbox" />
                                        <label class="custom-control-label" for="status">{{__('label.active')}}?</label>
                                    </div>
                                </div>
								 @if($allow_pre_order=="Yes")
                                <div class="form-group">
                                    <div class="custom-control custom-checkbox">
                                        <input class="custom-control-input" id="allow_pre_order" @if(isset($recipe) && $recipe->allow_pre_order=="Yes")   checked @endif name="allow_pre_order" type="checkbox" />
                                        <label class="custom-control-label" for="allow_pre_order">{{__('label.allow_pre_order')}}?</label>
                                    </div>
                                </div>

                                    @endif


                            </div>
                        </div>

                            <div class="row">
                                <div class="col-sm-12">
                                    <a href="#!" class="btn btn-primary save">{{__('label.save')}}</a>
                                    @if( isset($recipe))
                                    <a href="#!" class="btn btn-primary upload-gallery">{{__('label.upload_gallery')}}</a>
                                        @if($business_type!="ClothsStore" )
                                        <a href="#!" class="btn btn-primary add-options">{{__('label.add_extra_options')}}</a>
                                        @endif
                                    @endif
                                </div>
                            </div>

                            <div class="row mt-2">
                                <div class="col-md-12">
                                    <div class="alert alert-success success"></div>
                                    <div class="alert alert-danger error"></div>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
            </section>
        </div>
</div>





  



    @if( isset($recipe))
  


    <div class="modal" id="upload-gallery" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">{{__('label.recipe_gallery')}}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
          <div class="row">
                        <div class="col-sm-12 col-md-12">
                            <div class="form-group">
                                <label>Gallery</label>
                                <div class="dropzone dz-clickable" id="gallery">
                                    <div class="dz-default dz-message" data-dz-message="">
                                        <span>{{__('label.drop_files_here_to_upload')}} <br>
										<b>(accepted file formats .jpg,.png,.jpeg case sensitive)</b> </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
      </div>
      <div class="modal-footer">
                    <button type="button" class="btn btn-primary upload">{{__('label.upload')}}</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{__('label.close')}}</button>
                </div>
      
  </div>
</div>
</div>


     <div class="modal" id="extra-options" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">{{__('label.add_extra_options')}}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="extra-options-form" method="POST" action="{!! env('APP_URL') !!}save/extra/options">
                            @csrf
                            <input type="hidden" name="recipe_id" value="{!! $recipe->id !!}" />
                                <input type="hidden" name="resto_id" value="{!! $recipe->resto_id !!}" />
                                                <div class="row">
                                                    <div class="col-sm-4">
													<b>{{__('label.english_name')}}: </b>
                                                        <input class="form-control" name="option" placeholder="Name of option" required />
                                                    </div>
													<div class="col-sm-4">
													<b>{{__('label.name_arabic')}}: </b>
                                                        <input class="form-control" name="arabic_option" placeholder="Name of option in arabic" required />
                                                    </div>
                                                    <div class="col-sm-3">
													<b>{{__('label.price')}} : </b>
                                                        <input class="form-control" name="price" placeholder="Price if it has" />
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-sm-12 text-right"><a href="#!" class="btn btn-sm btn-danger mt-1 add-extra-items">{{__('label.add_extra_item')}}</a> </div>
                                                </div>

                                                <div id="items-list">

                                                </div>
                            </form>
      </div>
      <div class="modal-footer">
                        <button type="button" class="btn btn-primary save-extra-options">{{__('label.add')}}</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">{{__('label.close')}}</button>
                    </div>
  </div>
</div>
</div>




 <div class="modal" id="edit-extra-option" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">{{__('label.edit_option')}}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form method="POST" action="{!! env('APP_URL') !!}update/option" id="edit-form">
                        <input type="hidden" name="id" />
                        @csrf
                        <div class="row">
                            <div class="col-sm-12">
							<b>{{__('label.english_name')}} </b>
                                <input class="form-control" name="option" placeholder="Name of option" required />
                            </div>
							</div>
							<div class="row">
							<div class="col-sm-12">
							<b>{{__('label.name_arabic')}}</b>
                                <input class="form-control" name="arabic_option" placeholder="Name of option in arabic" />
                            </div>
							</div>
							<div class="row">
                            <div class="col-sm-12">
							<b>{{__('label.price')}} </b>
                                <input class="form-control" name="price" placeholder="Price" />
                            </div>
							</div>
							<div class="row">
                            <div class="col-sm-12">
							<br>
							<b></b>
                               <a href="#!" style="margin-top: 2px" class="btn btn-primary update-option">{{__('label.save')}} <i class="fa fa-save"></i> </a>
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-md-12">
                                <div class="alert alert-success success"></div>
                                <div class="alert alert-danger error"></div>
                            </div>
                        </div>
                    </form>
      </div>
	  <!--
					<div class="modal-footer">
                        <button type="button" class="btn btn-primary save-extra-options">Add</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
					-->
  </div>
</div>
</div>




<div class="modal" id="extra-option-item" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">{{__('label.customized_items_list')}}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <table class="table table-bordered" id="item-table">
                        <thead>
                        <tr>
                            <th>{{__('label.name')}}</th>
							<th>{{__('label.name_arabic')}}</th>
                            <th>{{__('label.price')}}</th>
                            <th>{{__('label.iItem_type')}}</th>
                            <th>{{__('label.customized_sub_items_list')}}</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>

                    </table>
      </div>
      
  </div>
</div>
</div>

   
            

   <div class="modal" id="edit-extra-item-option" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel"><b>{{__('label.edit_item')}}</b> </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body modal-lg">
        <form method="POST" action="{!! env('APP_URL') !!}update/item" id="edit-item-form">
                        <input type="hidden" name="id" />
                        @csrf
                        <div class="row">
                            <div class="col-sm-12">
							<b>{{__('label.english_name')}}: </b>
                                <input class="form-control" name="option" placeholder="Name of Item" required />
                            </div>
							
						</div>
						<div class="row">
							<div class="col-sm-12">
							<b><br>{{__('label.name_arabic')}}: </b>
                            <input class="form-control" name="name_arabic" placeholder="Name of option in arabic" required />
							<br>
							</div>
						</div>
						<div class="row">
                            <div class="col-sm-12">
							<b>{{__('label.price')}}: </b>
                                <input class="form-control" name="price" placeholder="Price" />
                            </div>
						</div>
						<div class="row">
                            <div class="col-sm-12">
                                <br><select class="form-control" name="item_type">
                                    <option value="">{{__('label.choose_button_type')}}</option>
                                    <option value="option">{{__('label.option_button')}}</option>
                                    <option value="check-box">{{__('label.checkbox')}}</option>
                                </select>
                            </div>
							<br>
						</div>
						
						<div class="row">
                            <div class="col-sm-12">
                                <br><a href="#!" style="margin-top: 2px" class="btn btn-primary update-item">{{__('label.save')}} <i class="fa fa-save"></i> </a>
                            </div><br>
                        </div>
                        <div class="row mt-2">
                            <div class="col-md-12">
                                <div class="alert alert-success success"></div>
                                <div class="alert alert-danger error"></div>
                            </div>
                        </div>
                    </form>
      </div>
      
  </div>
</div>
</div>


 <div class="modal" id="mandatory-extra-item-option" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">{{__('label.make_mandatory_options')}}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form method="POST" action="{!! env('APP_URL') !!}update/mandatory/item" id="mandatory-item-form">
                        <input type="hidden" name="id" />
                        @csrf
                        <div class="row">
                            <div class="col-sm-10">
                                <input class="form-control" type="number" name="mandatory_amount" placeholder="Enter quantity of items" required />
                            </div>

                            <div class="col-sm-1">
                                <a href="#!" style="margin-top: 2px" class="btn btn-sm btn-success make-mandatory-item"><i class="fa fa-save"></i> </a>
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-md-12">
                                <div class="alert alert-success success"></div>
                                <div class="alert alert-danger error"></div>
                            </div>
                        </div>
                    </form>
      </div>
      
  </div>
</div>
</div>


   
 <div class="modal" id="add-new-items" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg"> 
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">{{__('label.add_more_items')}}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
       <form id="extra-items-form" method="POST" action="{!! env('APP_URL') !!}save/add/items">
                        @csrf
                        <input type="hidden" name="extra_option_id"/>

                        <input type="hidden" name="parent_id" />

                        <div class="row">
                            <div class="col-sm-12 text-right"><a href="#!" class="btn btn-sm btn-danger mt-1 add-extra-items-2">{{__('label.add_extra_item')}}</a> </div>
                        </div>

                        <div id="items-list-2">
                            <div class="row" style="margin-top: 10px">
                                <div class="col-sm-3">
                                    <input class="form-control" name="item_name[]" placeholder="Name of item">
                                </div>
								<div class="col-sm-3">
                                    <input class="form-control" name="item_name_arabic[]" placeholder="Name of item in Arabic">
                                </div>
                                <div class="col-sm-3">
                                    <select class="form-control" name="item_type[]"><option value="option">{{__('label.option_button')}}</option><option value="check-box">{{__('label.checkbox')}}</option> </select>
                                </div>
                                <div class="col-sm-2">
                                    <input class="form-control" name="item_price[]" placeholder="Price if it has">
                                </div>

                            </div>
                        </div>
                    </form>
      </div>

      <div class="modal-footer">
                    <button type="button" class="btn btn-primary save-extra-items">{{__('label.add_items')}}</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{__('label.close')}}</button>
                </div>
      
  </div>
</div>
</div>



<div class="modal" id="add-new-faq" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">{{__('label.add_faq')}}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
       <form id="faq-form" method="POST" action="{!! env('APP_URL') !!}save/faq">
                        @csrf
                       
						<input type="hidden" name="id" />
                        <input type="hidden" name="product_id" value="{!! $recipe->id !!}" />
		   
		   						<div class="form-group">
                                    <label>{{__('label.question')}}</label> 
<!--                                    <input type="text" name="question" required class="form-control" />-->
									<textarea row="2" style="height: 200px !important" name="question" required class="form-control"></textarea>
                                </div>
		   
		   						<div class="form-group">
                                    <label>{{__('label.answer')}}</label> 
                                    <textarea row="4" style="height: 200px !important" name="answer" required class="form-control"></textarea>
                                </div>

                        

                        
                    </form>
      </div>

      <div class="modal-footer">
                    <button type="button" class="btn btn-primary save-faq">{{__('label.add')}}</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{__('label.close')}}</button>
                </div>
      
  </div>
</div>
</div>

 

    @endif
@endsection

@section('js')

    <script src="{!! env('APP_ASSETS') !!}vendor_components/dropzone/dist/min/dropzone.min.js"></script> 
    <script src="{!! env('APP_ASSETS') !!}vendor_components/select2/dist/js/select2.min.js"></script>
    <script src="{!! env('APP_ASSETS') !!}vendor_components/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>
    <script>
		var spinner = '<span class="spinner-border" role="status" aria-hidden="true"></span>';
       Dropzone.autoDiscover = false;
        var extra_option_id = 0;
		var _image_is_required = "required";
		var color_option = "color";
		color_option=$("select[name=color_option]").val();
        $(function () {
			@if(isset($recipe))
			$("body").on("change","select[name=color_option]",function(){
				var _existing = "{!! $recipe->color_option !!}";
				var _this_value = $(this).val();
				
				if(_existing!=_this_value){
					alert("{{__('label.color_setting_will_be_reset')}}");
				}
				color_option = _this_value;
				if(_this_value=="color_image"){
					_image_is_required = "required";
					
				}else{
					_image_is_required = "";
					$(".color-image-file").remove();
				}
					
					
			});
			@endif
			
			$("body").on("click",".delete-color",function(){ 
				var _id = $(this).data('id');
				var _this = $(this);
				if(confirm("Do you want to delete?")){
					$.ajax({
						type:"POST",
						url:"{!! env('APP_URL') !!}delete/color-image",
						data:{
							"id":_id,
							"_token":"{!! csrf_token() !!}"
						},
						success:function(){
							_this.parents("tr").remove();
						}
					});
				}
			});
			
			$("body").on("click",".delete-faq",function(){
				var _id = $(this).data('id');
				//alert(_id);
				var _this = $(this);
				if(confirm("Do you want to delete?")){
					$.ajax({
						type:"POST",
						url:"{!! env('APP_URL') !!}delete/faq",
						data:{
							"id":_id,
							"_token":"{!! csrf_token() !!}"
						},
						success:function(){
							_this.parents(".accordion-item").remove();
						}
					});
				}
				
			});
			
			$("body").on("click",".edit-faq",function(){
				var _id = $(this).data('id');
				$("#faq-form input[name=id]").val(_id);
				var _content = $(this).parents(".accordion-body").find('p').text();
				var _question = $(this).parents(".accordion-item").find('.accordion-button').text();
				$("#faq-form textarea[name=question]").val($.trim(_question));
				$("#faq-form textarea[name=answer]").val(_content);
				$("#add-new-faq").modal('show');
			});
			
			$("body").on("click",".save-faq",function(){
				if($("#faq-form").valid()){
					$("#faq-form").ajaxForm(function(response){ 
					location.reload();
				}).submit();   
				 }
			});
			
			$("body").on("click",".add-faq",function(){
				$("#add-new-faq").modal('show');
			});

             @if($business_type=="ClothsStore")
            var colors = [
            @foreach(\App\Models\Colors::groupBy('color_code')->get() as $color)
            {
                id:"{!! $color->color_code !!}",
                text:"{!! $color->color_name !!}",
                html:'<div class="row" style="margin:0"><div style="width: 20px; height: 20px; background-color: {!! $color->color_code !!}; float: left; border-radius: 20px;"></div><div style="float: right; width: 250px">{!! addslashes($color->color_name) !!}</div></div>', 
            },
            @endforeach
            ];

                function color_template(colors) { 
                    return colors.html;
                }
			function return_color_row(value){
				var str = "";
				$(value).each(function(i,v){
					str += '<tr>';
					str+='<td><div style="width: 20px; height: 20px; background-color: '+v+'; float: left; border-radius: 20px;"></div></td>';
					if(color_option=="color_image")
					str+='<td><input name="color_image['+v+']" type="file" class="form-control color-image-file" required />';
					str+='</tr>';
				});
				
				return str;
				
			}
            $("#color").select2({
                    data: colors,
                   templateResult: color_template,
                   escapeMarkup: function(m) {
                      return m;
                   }
            }).on('change',function(){
				var _value = $(this).val();
				var rows = return_color_row(_value);
				$("#color-table tbody").html(rows);
			});;

            $("#size").select2();
            @endif

            $("body").on("click",".remove-image",function(){
                var id = $(this).data('recipe-id');
                var _this = $(this);

                $.ajax({
                    url:"{!! env('APP_URL') !!}remove/recipe/main-image",
                    type:"POST",
                    data:{
                        id:id,
                        '_token':"{!! csrf_token() !!}"
                    },
                    success:function(){
                        _this.parents('.main-cover-image').find("#image-preview").removeAttr('style');
                    }
                });
            });

              $.uploadPreview({
                input_field: "#image-upload",   // Default: .image-upload
                preview_box: "#image-preview",  // Default: .image-preview
                label_field: "#image-label",    // Default: .image-label
                label_default: "Choose File",   // Default: Choose File
                label_selected: "Change File",  // Default: Change File
                no_label: true    ,
                success_callback: function() {
                  
                }// Default: false
            });
			
			$("#image-upload").on("change",function(e){
                var _current_file = (e.currentTarget.files[0]);



                var filesize = ((_current_file.size/1024)/1024).toFixed(2);
                if(filesize>2.4){
                    swal({title:"Image Size error",text:"You are exceeding from 2.4MB maximum size, your file size is "+filesize+" MB"},function(){
                        $("#image-preview").removeAttr('style');
                        $("#image-upload").val('');
                    });

                    return false;
                }else{
                    var reader = new FileReader();

                    reader.readAsDataURL(_current_file);

                    reader.onload = function (e) {
                        //Initiate the JavaScript Image object.
                        var image = new Image();

                        //Set the Base64 string return from FileReader as source.
                        image.src = e.target.result;

                        //Validate the File Height and Width.
                        image.onload = function () {
                            var height = this.height;
                            var width = this.width;
                            if (height > 1280 || width > 1980) {

//                                swal({title:"Image Dimensions error",text:"You are exceeding from dimension limit (1920 x 1280), your current dimensions are width: "+width+"px and height: "+height+"px"},function(){
//                                    $("#image-preview").removeAttr('style');
//                                    $("#image-upload").val('');
//                                });
//                                return false;
                            }

                        };

                    }
                }


            });

            $(".custom-select").select2();

            $("body").on("click",".make-mandatory-item",function () {
                $(".alert").hide();
                if($("#mandatory-item-form").valid()){
                    $("#mandatory-item-form").ajaxForm(function (response) {
                        response = $.parseJSON(response);
                        if(response){

                            if(response.type=="success"){
                                $('#mandatory-item-form .alert.success').html(response.message);
                                $('#mandatory-item-form .alert.success').show();

                                setTimeout(function(){
                                   location.reload();
                                },2000)
                            }else{
                                $('#mandatory-item-form .alert.error').html(response.message);
                                $('#mandatory-item-form .alert.error').show();
                            }
                        }
                    }).submit();
                }
            });

            $("body").on("click",".is_mandatory",function () {
                var id = $(this).data('id');

                if($(this).is(":checked")){
                    $("#mandatory-extra-item-option").modal('show');

                    $("#mandatory-extra-item-option input[name=id]").val(id);
                }else{
                    if(confirm("Do you want disable this option?")){
                            $.ajax({
                                url:"{!! env('APP_URL') !!}remove/mandatory/"+id,
                                success:function () {
                                 location.reload();
                                }
                            });
                    }else{
                        return false;
                    }
                }
            });
			
            $("body").on('click','.save',function () {
				var _this = $(this);
				
				
                if($("#restaurant-form").valid()){
					_this.removeClass('save');;  
					_this.html(spinner);
					
					//return false;
					

                    $("#restaurant-form").ajaxForm(function (response) {
						//_this.removeAttr('disabled');
                        response = $.parseJSON(response);
                        if(response){

                            if(response.type=="success"){
                                $('#restaurant-form .alert.success').html(response.message);
                                $('#restaurant-form .alert.success').show();

                                setTimeout(function(){
                                    //window.location = '{!! env('APP_URL') !!}recipes';
                                    location.reload();
                                },2000)
                            }else{
                                $('#restaurant-form .alert.error').html(response.message);
                                $('#restaurant-form .alert.error').show();
                            }
                        }
                    }).submit();
                }
            });
            @if( isset($recipe))
            $("body").on("click",".upload-gallery",function () {
                $("#upload-gallery").modal('show');
            });

            $("body").on("click",".add-options",function () {
                $("#extra-options").modal('show');
            });

            $("body").on("click",".add-new-items",function () {
                var id = $(this).data('id');
                $("input[name=extra_option_id]").val(id);
                $("#add-new-items").modal('show');
            });
            $("body").on("click",".add-sub-item",function () {
                var id = $(this).data('id');
                var extra_option_id = $(this).data('extra-option-id');
                $("input[name=parent_id]").val(id);
                $("input[name=extra_option_id]").val(extra_option_id);
                $("#add-new-items").modal('show');
            });

            $("body").on("click",".add-extra-items",function () {
               var new_item = add_new_item();

               $("#items-list").append(new_item);
            });

            $("body").on("click",".add-extra-items-2",function () {
                var new_item = add_new_item();

                $("#items-list-2").append(new_item);
            });

            $("body").on("click",".delete-item",function () {


                var _this = $(this);
                var id = $(this).data('id');

                $.ajax({
                    url:"{!! env('APP_URL') !!}extra/item/delete/"+id,
                    success:function (response) {
                        _this.parent().parent().remove();
                    }
                });
            });

            $("body").on("click",".delete-new-item",function () {


                $(this).parent().parent().remove();
            });

            $("body").on("click",".delete-option",function () {

                var _this = $(this);
                var id = $(this).data('id');

                $.ajax({
                    url:"{!! env('APP_URL') !!}extra/option/delete/"+id,
                    success:function (response) {
                       _this.parent().parent().remove();
                    }
                });
                //
            });

            $("body").on("click",".update-option",function () {


               if($("#edit-form").valid()){
                   $("#edit-form").ajaxForm(function (response) {
                       location.reload();
                   }).submit();
               }
            });


            $("body").on("click",".update-item",function () {


                if($("#edit-item-form").valid()){
                    $("#edit-item-form").ajaxForm(function (response) {
                        var id = extra_option_id;
                        $.ajax({
                            url:"{!! env('APP_URL') !!}view/items/"+id,
                            success:function (response) {
                                response = response.data;
                                var row = "";
                                $.each(response,function (i,v) {


                                    row+=show_item(v);
                                });

                                $("#item-table > tbody").html(row);

                                $("#edit-extra-item-option").modal('hide');

                            }
                        });
                    }).submit();
                }
            });


            $("body").on("click",".edit-option",function () {

                var id = $(this).data('id');

                $.ajax({
                    url:"{!! env('APP_URL') !!}edit/option/"+id,
                    success:function (response) {
                        response = response.data;
                        $("#edit-form input[name=id]").val(response.id);
                        $("#edit-form input[name=option]").val(response.name);
						$("#edit-form input[name=arabic_option]").val(response.name_arabic);
                        $("#edit-form input[name=price]").val(response.price);

                        $("#edit-extra-option").modal('show'); 

                    }
                });

            });

            $("body").on("click",".edit-item",function () {

                var id = $(this).data('id');

                $.ajax({
                    url:"{!! env('APP_URL') !!}edit/item/"+id,
                    success:function (response) {
                        response = response.data;
                        $("#edit-item-form input[name=id]").val(response.id);
                        $("#edit-item-form input[name=item_type]").val(response.item_type);
                        $("#edit-item-form input[name=option]").val(response.name);
						$("#edit-item-form input[name=name_arabic]").val(response.name_arabic);
                        $("#edit-item-form input[name=price]").val(response.price);

                        $("#edit-extra-item-option").modal('show');

                    }
                });

            });


            $("body").on("click",".view-items",function () {

                    var id = $(this).data('id');
                extra_option_id = id;
                    $.ajax({
                        url:"{!! env('APP_URL') !!}view/items/"+id,
                        success:function (response) {
                            response = response.data;
                            var row = "";
                            $.each(response,function (i,v) {


                                row+=show_item(v);
                            });

                            $("#item-table > tbody").html(row);

                            $("#extra-option-item").modal('show');

                        }
                    });

            });

            $("body").on("click",".save-extra-options",function () {


                    if($("#extra-options-form").valid()){
                        $("#extra-options-form").ajaxForm(function (response) {
                            response = $.parseJSON(response);
                            if(response){

                                if(response.type=="success"){
                                    $('#extra-options .alert.success').html(response.message);
                                    $('#extra-options .alert.success').show();

                                    setTimeout(function(){
                                        window.location.reload();
                                    },2000)
                                }else{
                                    $('#extra-options .alert.error').html(response.message);
                                    $('#extra-options .alert.error').show();
                                }
                            }
                        }).submit();
                    }
                        


            });

            $("body").on("click",".save-extra-items",function () {


                if($("#extra-items-form").valid()){
                    $("#extra-items-form").ajaxForm(function (response) {
                        response = $.parseJSON(response);
                        if(response){

                            if(response.type=="success"){
                                $('#extra-items-form .alert.success').html(response.message);
                                $('#extra-items-form .alert.success').show();

                                setTimeout(function(){
                                    window.location.reload();
                                },2000)
                            }else{
                                $('#extra-items-form .alert.error').html(response.message);
                                $('#extra-items-form .alert.error').show();
                            }
                        }
                    }).submit();
                }



            });

var gallery = new Dropzone("div#gallery",
                {
                    paramName: "files", // The name that will be used to transfer the file
                    addRemoveLinks: true,
                    uploadMultiple: true,
                    autoProcessQueue: false,
                    parallelUploads: 50,
                    maxFilesize: 5, // MB
                    acceptedFiles: ".png, .jpeg, .jpg, .JPG, .JPEG, .PNG,",
                    url: "{!! env('APP_URL') !!}upload/gallery/recipe",
                });

            gallery.on("sending", function(file, xhr, formData) {
                var filenames = [];

                $('.dz-preview .dz-filename').each(function() {
                    filenames.push($(this).find('span').text());
                });

                formData.append('filenames', filenames);

                formData.append('_token','{!! csrf_token() !!}');
                formData.append('recipe_id',"{!! $recipe->id !!}");

            });

            /* Add Files Script*/
            gallery.on("success", function(file, message){
                $("#msg").html(message);
                //setTimeout(function(){window.location.href="index.php"},200);
            });

            gallery.on("error", function (data) {
                $("#msg").html('<div class="alert alert-danger">{{__("label.there_is_some_thing_wrong")}}</div>');
            });

            gallery.on("complete", function(file) {
                gallery.removeFile(file);
               location.reload();
            });

            $(".upload").on("click",function (e){
                gallery.processQueue();
                e.preventDefault();
            });

            $("body").on("click",".delete-image",function () {
                var _this = $(this);
                var id = $(this).data('id');

                $.ajax({
                    url:"{!! env('APP_URL') !!}delete/image/"+id+"?type=recipe",
                    success:function (response) {
                        _this.parents(".gallery").remove();
                    }
                });
            });

          

            $("body").on("click",".delete-image",function () {
                var _this = $(this);
                var id = $(this).data('id');

                $.ajax({
                    url:"{!! env('APP_URL') !!}delete/image/"+id+"?type=recipe",
                    success:function (response) {
                        _this.parents(".gallery").remove();
                    }
                });
            });
@endif
        });

        function add_new_item() {
            return '<div class="row" style="margin-top: 10px">\n' +
                
				'                        <div class="col-sm-3">\n' +
                '                            <input class="form-control" name="item_name[]" placeholder="Name of item">\n' +
                '                        </div>\n' +

				'                        <div class="col-sm-3">\n' +
                '                            <input class="form-control" name="item_name_arabic[]" placeholder="Name of item">\n' +
                '                        </div>\n' +
				
                '<div class="col-sm-3">\n' +
            '                            <select class="form-control" name="item_type[]">' +
                '<option value="option">Option Button</option>' +
                '<option value="check-box">Checkbox</option> </select>\n' +
            '                        </div>\n' +
                '                        <div class="col-sm-2">\n' +
                '                            <input class="form-control" name="item_price[]" placeholder="Price if it has">\n' +
                '                        </div>\n' +

                '                        <div class="col-sm-1">\n' +
                '                            <a href="#!" class="delete-new-item btn btn-sm btn-danger" style="margin-top: 3px"><i class="glyphicon glyphicon-trash"></i> </a> \n' +
                '                        </div>\n' +
                '                    </div>'
        }

        function show_item(item) {
            var str = "<tr>";

                str+='<td>'+item.name+'</td>';
				str+='<td>'+item.name_arabic+'</td>';
                str+='<td>'+item.price+'</td>';
                str+='<td>'+(item.item_type?item.item_type:"")+'</td>';

                str+='<td>';
            var list = "";
                if(item.childern){
                    if(item.childern.length > 0){
                         list = '<ul class="list-group">';
                        $.each(item.childern,function (i,v) {
                            list += '<li class="list-group-item d-flex justify-content-between align-items-center"><a href="#!" class="edit-item" data-id="'+v.id+'"> '+v.name+'</a>' +
                                '<span class="badge badge-primary badge-pill">'+v.price+'</span>' +
                                '</li>';
                        });
                        list += "</ul>";
                    }
                }
                str+=list;
                str+='</td>';

                str+='<td>' +
                    '<a href="#!" class="btn btn-sm btn-primary edit-item" data-id="'+item.id+'"  data-toggle="tooltip" data-placement="top" title="Edit"><i class="glyphicon glyphicon-edit"></i> </a>'+
           ' <a href="javascript:;" data-id="'+item.id+'" class="btn btn-sm btn-danger delete-item"><i class="glyphicon glyphicon-trash" data-toggle="tooltip" data-placement="top" title="Delete"></i></a>'+
         //   ' <a href="javascript:;" data-id="'+item.id+'"  data-extra-option-id="'+item.extra_option_id+'" class="btn btn-sm btn-warning add-sub-item"><i class="glyphicon glyphicon-th-list" data-toggle="tooltip" data-placement="top" title="Add sub items"></i></a>'
            '</td>';
            str+='</tr>';

            return str;
        }
    </script>
    @endsection