@section('title','Add Recipe Category')
@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
            Category</h1>
        <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
            <li class="breadcrumb-item text-muted">
                <a href="{{ url('/RecipeCategory') }}" class="text-muted text-hover-primary">Recipe Category</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 Category</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-category')}}" method="POST" id="recipe_category_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">
                                    <label for="category_name_en" class="form-label">Category Name<span class="error"> * </span></label>
                                    <div class="form-group mb-5">
                                        <input type="text" class="form-control" id="category_name_en" name="category_name_en"
                                            placeholder="Category Name" />
                                    </div>
                                    <!-- <label for="images_en" class="form-label">Category Images<span class="error"> * </span></label>
                                    <div class="form-group mb-5">
                                         <input type="file" class="form-control-file" id="images_en" name="images_en"  />
                                    </div> -->

                                    <div class="col-md-6 mt-3">
                                        <label  for="images_en" class="form-label">Category Images <span class="error"> * </span></label>
                                        <div class="form-group mb-5 mt-5">
                                            <div class="image-input image-input-empty image-input-outline image-input-placeholder" data-kt-image-input="true">
                                                <div class="image-input-wrapper w-125px h-125px"></div>
                                                <label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change" data-bs-toggle="tooltip" aria-label="Change topical" data-bs-original-title="Change topical" data-kt-initialized="1">
                                                    <i class="ki-duotone ki-pencil fs-7">
                                                        <span class="path1"></span>
                                                        <span class="path2"></span></i>
                                                    <input type="file" name="images_en" accept=".png, .jpg, .jpeg">
                                                    <input type="hidden" name="images_en_remove">
                                                </label>
                                                <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="cancel" data-bs-toggle="tooltip" aria-label="Cancel topical" data-bs-original-title="Cancel topical" data-kt-initialized="1">
                                                    <i class="ki-duotone ki-cross fs-2"><span class="path1"></span><span class="path2"></span></i> 
                                                </span>
                                                <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="remove" data-bs-toggle="tooltip" aria-label="Remove topical" data-bs-original-title="Remove topical" data-kt-initialized="1">
                                                    <i class="ki-duotone ki-cross fs-2"><span class="path1"></span><span class="path2"></span></i>                
                                                </span>
                                            </div>
                                        </div>
                                    </div>

                                    <label for="status" class="form-label">Status</label>
                                    <div class="form-group mb-5">
                                        <select class="form-select" data-hide-search="true" name="status" data-control="select2"
                                            data-placeholder="Select Status">
                                            <option></option>
                                            <option value="active" selected>Active</option>
                                            <option value="in-active">In-Active</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">
                                    <label for="category_name_hi" class="form-label">Category Name<span class="error"> * </span></label>
                                    <div class="form-group mb-5">
                                        <input type="text" class="form-control" id="category_name_hi" name="category_name_hi"
                                            placeholder="श्रेणी नाम" />
                                    </div>
                                    <!-- <label for="images_hi" class="form-label">Category Images<span class="error"> * </span></label>
                                    <div class="form-group mb-5">
                                         <input type="file" class="form-control-file" id="images_hi" name="images_hi" />
                                    </div> -->
                                    <div class="col-md-6 mt-3">
                                        <label  for="images_hi" class="form-label">Category Images <span class="error"> * </span></label>
                                        <div class="form-group mb-5 mt-5">
                                            <div class="image-input image-input-empty image-input-outline image-input-placeholder" data-kt-image-input="true">
                                                <div class="image-input-wrapper w-125px h-125px"></div>
                                                <label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change" data-bs-toggle="tooltip" aria-label="Change topical" data-bs-original-title="Change topical" data-kt-initialized="1">
                                                    <i class="ki-duotone ki-pencil fs-7">
                                                        <span class="path1"></span>
                                                        <span class="path2"></span></i>
                                                    <input type="file" name="images_hi" accept=".png, .jpg, .jpeg">
                                                    <input type="hidden" name="images_hi_remove">
                                                </label>
                                                <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="cancel" data-bs-toggle="tooltip" aria-label="Cancel topical" data-bs-original-title="Cancel topical" data-kt-initialized="1">
                                                    <i class="ki-duotone ki-cross fs-2"><span class="path1"></span><span class="path2"></span></i> 
                                                </span>
                                                <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="remove" data-bs-toggle="tooltip" aria-label="Remove topical" data-bs-original-title="Remove topical" data-kt-initialized="1">
                                                    <i class="ki-duotone ki-cross fs-2"><span class="path1"></span><span class="path2"></span></i>                
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <label for="status" class="form-label">Status</label>
                                    <div class="form-group mb-5">

                                        <select class="form-select" name="status" data-control="select2"
                                            data-placeholder="Select Status">
                                            <option></option>
                                            <option value="active" selected>Active</option>
                                            <option value="in-active">In-Active</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">
                                    <label for="category_name_gu" class="form-label">Category Name<span class="error"> * </span></label>
                                    <div class="form-group mb-5">
                                        <input type="text" class="form-control" id="category_name_gu" name="category_name_gu"
                                            placeholder="શ્રેણીનું નામ" />
                                    </div>
                                    <!-- <label for="images_gu" class="form-label">Category Images<span class="error"> * </span></label>
                                    <div class="form-group mb-5">
                                        <input type="file" class="form-control-file" id="images_gu" name="images_gu" />
                                    </div> -->
                                    <div class="col-md-6 mt-3">
                                        <label  for="images_gu" class="form-label">Category Images <span class="error"> * </span></label>
                                        <div class="form-group mb-5 mt-5">
                                            <div class="image-input image-input-empty image-input-outline image-input-placeholder" data-kt-image-input="true">
                                                <div class="image-input-wrapper w-125px h-125px"></div>
                                                <label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change" data-bs-toggle="tooltip" aria-label="Change topical" data-bs-original-title="Change topical" data-kt-initialized="1">
                                                    <i class="ki-duotone ki-pencil fs-7">
                                                        <span class="path1"></span>
                                                        <span class="path2"></span></i>
                                                    <input type="file" name="images_gu" accept=".png, .jpg, .jpeg">
                                                    <input type="hidden" name="images_gu_remove">
                                                </label>
                                                <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="cancel" data-bs-toggle="tooltip" aria-label="Cancel topical" data-bs-original-title="Cancel topical" data-kt-initialized="1">
                                                    <i class="ki-duotone ki-cross fs-2"><span class="path1"></span><span class="path2"></span></i> 
                                                </span>
                                                <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="remove" data-bs-toggle="tooltip" aria-label="Remove topical" data-bs-original-title="Remove topical" data-kt-initialized="1">
                                                    <i class="ki-duotone ki-cross fs-2"><span class="path1"></span><span class="path2"></span></i>                
                                                </span>
                                            </div>
                                        </div>
                                    </div>

                                    <label for="status" class="form-label">Status</label>
                                    <div class="form-group mb-5">

                                        <select class="form-select" name="status" data-control="select2"
                                            data-placeholder="Select Status">
                                            <option></option>
                                            <option value="active" selected>Active</option>
                                            <option value="in-active">In-Active</option>
                                        </select>
                                    </div>
                                    <div class="form-group mb-5 col-md-2">
                                        <button type="submit" class="form-control btn btn-primary">Submit</button>
                                    </div>
                        </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@include('layout.footer')
<script>
      
    $("#recipe_category_form").validate({
    debug: true,
    rules: {
        category_name_en: {
            required: true,
            remote: {
                        url:"{{ url('RecipeCategory/is-available-recipe-category') }}",
                        type: "get",
                        async: false,
                        data: {
                            category_name_en: function() {
                            return $( "#category_name_en" ).val();
                                   }
                               }
                             }
        },
        category_name_hi: {
            required: true,
            remote: {
                        url:"{{ url('RecipeCategory/is-available-recipe-category') }}",
                        type: "get",
                        async: false,
                        data: {
                            category_name_en: function() {
                            return $( "#category_name_en" ).val();
                                   }
                               }
                             }
        },category_name_gu: {
            required: true,
            remote: {
                        url:"{{ url('RecipeCategory/is-available-recipe-category') }}",
                        type: "get",
                        async: false,
                        data: {
                            category_name_en: function() {
                            return $( "#category_name_en" ).val();
                                   }
                               }
                             }
        },
        images_en: {
            required: true
        },

        images_hi: {
            required: true
        },

        images_gu: {
            required: true
        },
        status: {
            required: true
        }
    },
    messages: {
        category_name_en: {
            required: 'Category Name!!',
            remote:"Category alredy exist!!"
        },
        category_name_hi: {
            required: 'Category Name!!',
            remote:"Category alredy exist!!"
        },
        category_name_gu: {
            required: 'Category Name!!',
            remote:"Category alredy exist!!"
        },
        images_en: {
            required: "Upload Category Image!!"
        },

        images_hi: {
            required: "Upload Category Image!!"
        },

        images_gu: {
            required: "Upload Category Image!!"
        },
        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>