@section('title','Add Recipe')
@include('layout.header')
@include('layout.sidebar')
<style>
    .error {
        color: red;
    }
</style>

<div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
    <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
        <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">Add Recipe
        </h1>
        <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
            <li class="breadcrumb-item text-muted">
                <a href="{{ url('/Recipe') }}" class="text-muted text-hover-primary">Recipes</a>
            </li>
            <li class="breadcrumb-item">
                <span class="bullet bg-gray-500 w-5px h-2px"></span>
            </li>
            <li class="breadcrumb-item text-muted">Add Recipe</li>
        </ul>
    </div>

</div>
<div id="kt_app_content" class="app-content flex-column-fluid">
    <div id="kt_app_content_container" class="app-container container-xxl">
        <div class="card mb-5 mb-xl-8">
            <div class="card-body py-3">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="english-tab" data-bs-toggle="tab" data-bs-target="#english"
                            type="button" role="tab" aria-controls="home" aria-selected="true">English</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="hindi-tab" data-bs-toggle="tab" data-bs-target="#hindi"
                            type="button" role="tab" aria-controls="profile" aria-selected="false">Hindi</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="gujarati-tab" data-bs-toggle="tab" data-bs-target="#gujarati"
                            type="button" role="tab" aria-controls="contact" aria-selected="false">Gujarati</button>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent">
                    <form action="{{ route('add-recipe')}}" method="POST" id="recipe_form" enctype="multipart/form-data">
                        @csrf
                        <div class="tab-pane fade show active" id="english" role="tabpanel" aria-labelledby="home-tab">
                            <div class="mt-5">
                                <div class="form-group mb-5">
                                    <label for="recipe_name_en" class="form-label">Recipe Name<span class="error"> * </span></label>
                                    <input type="text" class="form-control" id="recipe_name_en" name="recipe_name_en"
                                        placeholder="Recipe Name" />
                                </div>
                                <!-- Category -->
                                <div class="form-group mb-5">
                                    <label for="category_en" class="form-label">Category</label>
                                    <select class="form-select" data-control="select2" id="category_en" name="category_en[]" data-placeholder="Select Category" multiple>
                                        <option></option>
                                        @if (!empty($categories))
                                        @foreach($categories as $category)
                                        @if (!empty($category->category_name_en))
                                        <option value="{{$category->id}}">{{$category->category_name_en}}</option>
                                        @endif
                                        @endforeach
                                        @endif
                                    </select>
                                </div>


                                <!-- Masterchef/Amul Recipe -->
                                <div class="form-group mb-5">
                                    <label class="form-label">Choose from Masterchef and Amul Recipe</label><br>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="masterchef_en" id="masterchef" value="masterchef">
                                        <label class="form-check-label" for="masterchef">Masterchef</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="amul_en" id="amul" value="amul">
                                        <label class="form-check-label" for="amul">Amul Recipe</label>
                                    </div>
                                </div>

                                <!-- Veg/Non-veg -->
                                <div class="form-group mb-5">
                                    <label class="form-label">Veg/Non-veg</label><br>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="type_en" id="veg" value="veg">
                                        <label class="form-check-label" for="veg">Veg</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="type_en" id="non_veg" value="non_veg">
                                        <label class="form-check-label" for="non_veg">Non-veg</label>
                                    </div>
                                </div>

                                <!-- Cuisine -->
                                <div class="form-group mb-5">
                                    <label for="cuisine_en" class="form-label">Cuisine</label>
                                    <select class="form-select" data-control="select2" id="cuisine_en" name="cuisine_en"  data-placeholder="Select Cuisine">
                                        <option></option>
                                        @if (!empty($cuisines))
                                        @foreach($cuisines as $cuisine)
                                        @if (!empty($cuisine->cuisine_name_en))
                                        <option value="{{$cuisine->id}}">{{$cuisine->cuisine_name_en}}</option>
                                        @endif
                                        @endforeach
                                        @endif
                                        </select>
                                </div>

                                <!-- Further Categorization -->
                                <div class="form-group mb-5">
                                    <label for="further_category_en" class="form-label">Further Categorization</label>
                                    <select class="form-select" data-control="select2" id="further_category_en" name="further_category_en"  data-hide-search="true" data-placeholder="Select Further Categorization" >
                                        <option></option>
                                        <option value="Recipe of the Week">Recipe of the Week</option>
                                        <option value="Delicious Recipes">Delicious Recipes</option>
                                        <option value="Our Recommendations">Our Recommendations</option>
                                    </select>
                                </div>

                                <!-- Short Description -->
                                <div class="form-group mb-5">
                                    <label for="short_description_en" class="form-label">Short Description</label>
                                    <textarea class="form-control" id="short_description_en" name="short_description_en"
                                        rows="3" placeholder="Short Description"></textarea>
                                </div>

                                <!-- YouTube Link -->
                                <div class="form-group mb-5">
                                    <label for="youtube_link_en" class="form-label">YouTube Link</label>
                                    <input type="url" class="form-control" id="youtube_link_en" name="youtube_link_en"
                                        placeholder="YouTube Link" />
                                </div>

                                <!-- Multiple Images -->
                                <div class="form-group mb-5">
                                    <label for="images_en" class="form-label">Add Multiple Images</label>
                                    <input type="file" class="form-control-file" id="images_en" name="images_en[]" multiple />
                                </div>

                                <!-- Difficulty -->
                                <div class="form-group mb-5">
                                    <label for="difficulty_en" class="form-label">Difficulty</label>
                                    <select class="form-select" data-control="select2" id="difficulty_en" name="difficulty_en"  data-hide-search="true" data-placeholder="Select Difficulty">
                                        <option></option>
                                        <option value="easy">Easy</option>
                                        <option value="medium">Medium</option>
                                        <option value="hard">Hard</option>
                                    </select>
                                </div>

                                <!-- Cook Time -->
                                <div class="form-group mb-5">
                                    <label for="cook_time" class="form-label">Cook Time (HH:MM)</label>
                                    <div class="d-flex">
                                        <input type="number" class="form-control" id="cook_hour" name="cook_hour_en" placeholder="HH" min="0" max="23" />
                                        <input type="number" class="form-control" id="cook_minute" name="cook_minute_en" placeholder="MM" min="0" max="59" />
                                    </div>
                                </div>

                                <!-- Serves -->
                                <div class="form-group mb-5">
                                    <label for="serves" class="form-label">Serves</label>
                                    <input type="number" class="form-control" id="serves" name="serves_en"
                                        placeholder="Number of Servings" />
                                </div>

                                <!-- Recipe By -->
                                <div class="form-group mb-5">
                                    <label for="recipe_by_en" class="form-label">Recipe By (Author Name)</label>
                                    <input type="text" class="form-control" id="recipe_by_en" name="recipe_by_en"
                                        placeholder="Author Name" />
                                </div>

                                <!-- Ingredients -->
                                <div class="form-group mb-5">
                                    <label for="ingredients_en" class="form-label">Ingredients</label>
                                    <textarea class="form-control" id="ingredients_en" name="ingredients_en" rows="5"
                                        placeholder="List of Ingredients"></textarea>
                                </div>

                                <!-- Preparation -->
                                <div class="form-group mb-5">
                                    <label for="preparation_en" class="form-label">Preparation</label>
                                    <textarea class="form-control" id="preparation_en" name="preparation_en" rows="5"
                                        placeholder="Preparation Steps"></textarea>
                                </div>
                                <label for="status_en" class="form-label">Status</label>
                                <div class="form-group mb-5">
                                    <select class="form-select" data-hide-search="true" name="status_en" data-control="select2"
                                        data-placeholder="Select Status">
                                        <option></option>
                                        <option value="Pending" >Pending</option>
                                        <option value="Approved" selected>Approved</option>
                                        <option value="Rejected">Rejected</option>
                                    </select>
                                </div>
                                <div class="form-group mb-5 col-md-2">
                                    <button type="submit" class="form-control btn btn-primary">Submit</button>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade d-none" id="hindi" role="tabpanel" aria-labelledby="profile-tab">
                            <div class="mt-5">
                                <div class="form-group mb-5">
                                    <label for="recipe_name_hi" class="form-label">Recipe Name<span class="error"> * </span></label>
                                    <input type="text" class="form-control" id="recipe_name_hi" name="recipe_name_hi"
                                        placeholder="रेसिपी का नाम" />
                                </div>
                                <!-- Category -->
                                <div class="form-group mb-5">
                                    <label for="category_hi" class="form-label">Category</label>
                                    <select class="form-select" data-control="select2" id="category_hi" name="category_hi[]" data-placeholder="श्रेणी चुनना" multiple>
                                        <option></option>
                                        @if (!empty($categories))
                                        @foreach($categories as $category)
                                        @if (!empty($category->category_name_hi))
                                        <option value="{{$category->id}}">{{$category->category_name_hi}}</option>
                                        @endif
                                        @endforeach
                                        @endif
                                    </select>
                                </div>


                                <!-- Masterchef/Amul Recipe -->
                                <div class="form-group mb-5">
                                    <label class="form-label">Choose from Masterchef and Amul Recipe</label><br>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="masterchef_en" id="masterchef" value="masterchef">
                                        <label class="form-check-label" for="masterchef">Masterchef</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="amul_en" id="amul" value="amul">
                                        <label class="form-check-label" for="amul">Amul Recipe</label>
                                    </div>
                                </div>

                                <!-- Veg/Non-veg -->
                                <div class="form-group mb-5">
                                    <label class="form-label">Veg/Non-veg</label><br>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="type_hi" id="veg" value="veg">
                                        <label class="form-check-label" for="veg">Veg</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="type_hi" id="non_veg" value="non_veg">
                                        <label class="form-check-label" for="non_veg">Non-veg</label>
                                    </div>
                                </div>

                                <!-- Cuisine -->
                                <div class="form-group mb-5">
                                    <label for="cuisine_hi" class="form-label">Cuisine</label>
                                    <select class="form-select" data-control="select2" id="cuisine_hi" name="cuisine_hi"  data-placeholder="व्यंजन चुनें">
                                        <option></option>
                                        @if (!empty($cuisines))
                                        @foreach($cuisines as $cuisine)
                                        @if (!empty($cuisine->cuisine_name_hi))
                                        <option value="{{$cuisine->id}}">{{$cuisine->cuisine_name_hi}}</option>
                                        @endif
                                        @endforeach
                                        @endif
                                        </select>
                                </div>

                                <!-- Further Categorization -->
                                <div class="form-group mb-5">
                                    <label for="further_category_hi" class="form-label">Further Categorization</label>
                                    <select class="form-select" data-control="select2"    id="further_category_hi" name="further_category_hi"   data-hide-search="true" data-placeholder="आगे वर्गीकरण का चयन करें" >
                                    <option></option>
                                    <option value="Recipe of the Week">Recipe of the Week</option>
                                    <option value="Delicious Recipes">Delicious Recipes</option>
                                    <option value="Our Recommendations">Our Recommendations</option>
                                    </select>
                                </div>

                                <!-- Short Description -->
                                <div class="form-group mb-5">
                                    <label for="short_description_hi" class="form-label">Short Description</label>
                                    <textarea class="form-control" id="short_description_hi" name="short_description_hi"
                                        rows="3" placeholder="संक्षिप्त वर्णन"></textarea>
                                </div>

                                <!-- YouTube Link -->
                                <div class="form-group mb-5">
                                    <label for="youtube_link_hi" class="form-label">YouTube Link</label>
                                    <input type="url" class="form-control" id="youtube_link_hi" name="youtube_link_hi"
                                        placeholder="यूट्यूब लिंक" />
                                </div>

                                <!-- Multiple Images -->
                                <div class="form-group mb-5">
                                    <label for="images_hi" class="form-label">Add Multiple Images</label>
                                    <input type="file" class="form-control-file" id="images_hi" name="images_hi[]" multiple />
                                </div>

                                <!-- Difficulty -->
                                <div class="form-group mb-5">
                                    <label for="difficulty_hi" class="form-label">Difficulty</label>
                                    <select class="form-select" data-control="select2" id="difficulty_hi" name="difficulty_hi"  data-hide-search="true" data-placeholder="कठिनाई का चयन करें">
                                        <option></option>
                                        <option value="easy">Easy</option>
                                        <option value="medium">Medium</option>
                                        <option value="hard">Hard</option>
                                    </select>
                                </div>

                                <!-- Cook Time -->
                                <div class="form-group mb-5">
                                    <label for="cook_time" class="form-label">Cook Time (HH:MM)</label>
                                    <div class="d-flex">
                                        <input type="number" class="form-control" id="cook_hour" name="cook_hour_hi" placeholder="घंटा" min="0" max="23" />
                                        <input type="number" class="form-control" id="cook_minute" name="cook_minute_hi" placeholder="मिनट" min="0" max="59" />
                                    </div>
                                </div>

                                <!-- Serves -->
                                <div class="form-group mb-5">
                                    <label for="serves" class="form-label">Serves</label>
                                    <input type="number" class="form-control" id="serves" name="serves_hi"
                                        placeholder="सर्विंग्स की संख्या" />
                                </div>

                                <!-- Recipe By -->
                                <div class="form-group mb-5">
                                    <label for="recipe_by_hi" class="form-label">Recipe By (Author Name)</label>
                                    <input type="text" class="form-control" id="recipe_by_hi" name="recipe_by_hi"
                                        placeholder="Author Name" />
                                </div>

                                <!-- Ingredients -->
                                <div class="form-group mb-5">
                                    <label for="ingredients_hi" class="form-label">Ingredients</label>
                                    <textarea class="form-control" id="ingredients_hi" name="ingredients_hi" rows="5"
                                        placeholder="सामग्री की सूची"></textarea>
                                </div>

                                <!-- Preparation -->
                                <div class="form-group mb-5">
                                    <label for="preparation_hi" class="form-label">Preparation</label>
                                    <textarea class="form-control" id="preparation_hi" name="preparation_hi" rows="5"
                                        placeholder="तैयारी के चरण"></textarea>
                                </div>
                                <label for="status_hi" class="form-label">Status</label>
                                <div class="form-group mb-5">
                                    <select class="form-select" data-hide-search="true" name="status_hi" data-control="select2"
                                        data-placeholder="Select Status">
                                        <option></option>
                                        <option value="Pending" >Pending</option>
                                        <option value="Approved" selected>Approved</option>
                                        <option value="Rejected">Rejected</option>
                                    </select>
                                </div>
                                <div class="form-group mb-5 col-md-2">
                                    <button type="submit" class="form-control btn btn-primary">Submit</button>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade d-none" id="gujarati" role="tabpanel" aria-labelledby="contact-tab">
                            <div class="mt-5">
                                <div class="form-group mb-5">
                                    <label for="recipe_name_gu" class="form-label">Recipe Name<span class="error"> * </span></label>
                                    <input type="text" class="form-control" id="recipe_name_gu" name="recipe_name_gu"
                                        placeholder="રેસીપી નામ" />
                                </div>
                                <!-- Category -->
                                <div class="form-group mb-5">
                                    <label for="category_gu" class="form-label">Category</label>
                                    <select class="form-select" data-control="select2" id="category_gu" name="category_gu[]" data-placeholder="શ્રેણી પસંદ કરો" multiple>
                                        <option></option>
                                        @if (!empty($categories))
                                        @foreach($categories as $category)
                                        @if (!empty($category->category_name_gu))
                                        <option value="{{$category->id}}">{{$category->category_name_gu}}</option>
                                        @endif
                                        @endforeach
                                        @endif
                                    </select>
                                </div>


                                <!-- Masterchef/Amul Recipe -->
                                <div class="form-group mb-5">
                                    <label class="form-label">Choose from Masterchef and Amul Recipe</label><br>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="masterchef_gu" id="masterchef" value="masterchef">
                                        <label class="form-check-label" for="masterchef">Masterchef</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="amul_gu" id="amul" value="amul">
                                        <label class="form-check-label" for="amul">Amul Recipe</label>
                                    </div>
                                </div>

                                <!-- Veg/Non-veg -->
                                <div class="form-group mb-5">
                                    <label class="form-label">Veg/Non-veg</label><br>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="type_gu" id="veg" value="veg">
                                        <label class="form-check-label" for="veg">Veg</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="type_gu" id="non_veg" value="non_veg">
                                        <label class="form-check-label" for="non_veg">Non-veg</label>
                                    </div>
                                </div>

                                <!-- Cuisine -->
                                <div class="form-group mb-5">
                                    <label for="cuisine_gu" class="form-label">Cuisine</label>
                                    <select class="form-select" data-control="select2" id="cuisine_gu" name="cuisine_gu"  data-placeholder="ભોજન પસંદ કરો">
                                        <option></option>
                                        @if (!empty($cuisines))
                                        @foreach($cuisines as $cuisine)
                                        @if (!empty($cuisine->cuisine_name_gu))
                                        <option value="{{$cuisine->id}}">{{$cuisine->cuisine_name_gu}}</option>
                                        @endif
                                        @endforeach
                                        @endif
                                        </select>
                                </div>

                                <!-- Further Categorization -->
                                <div class="form-group mb-5">
                                    <label for="further_category_gu" class="form-label">Further Categorization</label>
                                    <select class="form-select" data-control="select2" id="further_category_gu" name="further_category_gu"  data-hide-search="true" data-placeholder="વધુ વર્ગીકરણ પસંદ કરો" >
                                    <option></option>
                                    <option value="Recipe of the Week">Recipe of the Week</option>
                                    <option value="Delicious Recipes">Delicious Recipes</option>
                                    <option value="Our Recommendations">Our Recommendations</option>
                                    </select>
                                </div>

                                <!-- Short Description -->
                                <div class="form-group mb-5">
                                    <label for="short_description_gu" class="form-label">Short Description</label>
                                    <textarea class="form-control" id="short_description_gu" name="short_description_gu"
                                        rows="3" placeholder="ટૂંકું વર્ણન"></textarea>
                                </div>

                                <!-- YouTube Link -->
                                <div class="form-group mb-5">
                                    <label for="youtube_link_gu" class="form-label">YouTube Link</label>
                                    <input type="url" class="form-control" id="youtube_link_gu" name="youtube_link_gu"
                                        placeholder="યુટ્યુબ લિંક" />
                                </div>

                                <!-- Multiple Images -->
                                <div class="form-group mb-5">
                                    <label for="images_gu" class="form-label">Add Multiple Images</label>
                                    <input type="file" class="form-control-file" id="images_gu" name="images_gu[]" multiple />
                                </div>

                                <!-- Difficulty -->
                                <div class="form-group mb-5">
                                    <label for="difficulty_gu" class="form-label">Difficulty</label>
                                    <select class="form-select" data-control="select2" id="difficulty_gu" name="difficulty_gu"  data-hide-search="true" data-placeholder="મુશ્કેલી પસંદ કરો">
                                        <option></option>
                                        <option value="easy">Easy</option>
                                        <option value="medium">Medium</option>
                                        <option value="hard">Hard</option>
                                    </select>
                                </div>

                                <!-- Cook Time -->
                                <div class="form-group mb-5">
                                    <label for="cook_time" class="form-label">Cook Time (HH:MM)</label>
                                    <div class="d-flex">
                                        <input type="number" class="form-control" id="cook_hour" name="cook_hour_gu" placeholder="કલાક" min="0" max="23" />
                                        <input type="number" class="form-control" id="cook_minute" name="cook_minute_gu" placeholder="મિનિટ" min="0" max="59" />
                                    </div>
                                </div>

                                <!-- Serves -->
                                <div class="form-group mb-5">
                                    <label for="serves" class="form-label">Serves</label>
                                    <input type="number" class="form-control" id="serves" name="serves_gu"
                                        placeholder="સર્વિંગ્સની સંખ્યા" />
                                </div>

                                <!-- Recipe By -->
                                <div class="form-group mb-5">
                                    <label for="recipe_by_gu" class="form-label">Recipe By (Author Name)</label>
                                    <input type="text" class="form-control" id="recipe_by_gu" name="recipe_by_gu"
                                        placeholder="Author Name" />
                                </div>

                                <!-- Ingredients -->
                                <div class="form-group mb-5">
                                    <label for="ingredients_gu" class="form-label">Ingredients</label>
                                    <textarea class="form-control" id="ingredients_gu" name="ingredients_gu" rows="5"
                                        placeholder="ઘટકોની સૂચિ"></textarea>
                                </div>

                                <!-- Preparation -->
                                <div class="form-group mb-5">
                                    <label for="preparation_gu" class="form-label">Preparation</label>
                                    <textarea class="form-control" id="preparation_gu" name="preparation_gu" rows="5"
                                        placeholder="તૈયારીના પગલાં"></textarea>
                                </div>
                                <label for="status_gu" class="form-label">Status</label>
                                <div class="form-group mb-5">
                                    <select class="form-select" data-hide-search="true" name="status_gu" data-control="select2"
                                        data-placeholder="Select Status">
                                        <option></option>
                                        <option value="Pending" >Pending</option>
                                        <option value="Approved" selected>Approved</option>
                                        <option value="Rejected">Rejected</option>
                                    </select>
                                </div>
                                <div class="form-group mb-5 col-md-2">
                                    <button type="submit" class="form-control btn btn-primary">Submit</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>


@include('layout.footer')
<script>
    $("#recipe_form").validate({
    debug: true,
    rules: {
        recipe_name_en: {
            required: true,
        },
        recipe_name_hi: {
            required: true,
        },
        recipe_name_gu: {
            required: true,
        },
        status: {
            required: true
        }
    },
    messages: {
        recipe_name_en: {
            required: 'Recipe Name!!',
        },
        cuisine_name_hi: {
            required: 'Cuisine Name!!',

        },
        cuisine_name_gu: {
            required: 'Cuisine Name!!',
        },
        status: {
            required: 'Required'
        }
    },
    errorPlacement: function (error, element) {
        error.insertAfter(element);
    },
    submitHandler: function(form) {
        $(".submit").attr("disabled", true);
      form.submit();
    }

});
$('#english-tab').click(function(event) {
    $('#english').removeClass("d-none");
    $('#hindi').addClass("d-none");
    $('#gujarati').addClass('d-none');
    $('#english').addClass('d-block');
});
$('#hindi-tab').click(function(event) {
    $('#hindi').removeClass("d-none");
    $('#hindi').addClass("d-block");
    $('#gujarati').addClass('d-none');
    $('#english').addClass('d-none');
});
$('#gujarati-tab').click(function(event) {
    $('#gujarati').removeClass("d-none");
    $('#hindi').addClass("d-none");
    $('#english').addClass('d-none');
    $('#gujarati').addClass('d-block');
});


</script>