@include('layouts.header');
@include('layouts.sidebar');
<link href='css/jquery-ui.css' rel='stylesheet'>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.validate.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>

<script>
    $(document).ready(function() {



        var count = 1;

        dynamic_field(count);

        function dynamic_field(number) {
            html = '<tr>';
            html += '<td> <div class="col-md-8">\
                                                    <div class="form-floating mb-3">\
                                                        <input type="text" class="form-control" id="ingredient" name="ingredient[]" autocomplete="off" placeholder="Your Name" required="">\
                                                        <label for="floatingName">Ingredient</label>\
                                                        <p id="ErrorID_4"></p>\
                                                    </div>\
                                                </div></td>';
            html += '<td><div class="col-md-8">\
                                                    <div class="form-floating mb-3">\
                                                        <select class="form-select" name="units[]" aria-label="SI" id="units" required>\
                                                            <option selected></option>\
                                                            <option>ML</option>\
                                                            <option>Grams</option>\
                                                            <option>Numbers</option>\
                                                        </select>\
                                                        <label for="floatingName">Units</label>\
                                                        <p id="ErrorID_5"></p>\
                                                    </div>\
                                                </div></td>';

            html += '<td> <div class="col-md-8">\
                                                    <div class="form-floating mb-3">\
                                                        <input type="text" class="form-control" id="value" pattern="[1-9]{1}[0-9]{9}" onkeypress="return /[0-9]/i.test(event.key)" name="value[]" autocomplete="off" placeholder="Your Name" required="">\
                                                        <label for="floatingName">Value</label>\
                                                        <p id="ErrorID_6"></p>\
                                                    </div>\
                                                </div></td>';
            if (number > 1) {
                html += '<td><button type="button" name="remove" id="" class="btn btn-danger remove">Remove</button></td></tr>';
                $('#user_table tbody').append(html);
            } else {
                html += '<td><button style="background-color: #ba434d;border: #ba434d; name="add" id="add" type="button" class="btn btn-success"><i class="fa-solid fa-plus"></i></button></td></tr>';
                $('#user_table tbody').html(html);
            }
        }

        $(document).on('click', '#add', function() {
            count++;
            dynamic_field(count);
        });

        $(document).on('click', '.remove', function() {
            count--;
            $(this).closest("tr").remove();
        });

    });


    function submit_data() {
        if ($("#dynamic_form").valid()) {
            event.preventDefault();
            var recipe_name = $("#receipe_name option:selected").text();;
            $("#receipe_name_data").val(recipe_name)
            $.ajax({
                url: 'Receipe_management_data',
                method: 'post',
                data: $("#dynamic_form").serialize(),
                dataType: 'json',
                success: function(data) {
                    if (data == 1) {
                        alert("Ingredients Saved for this Recipe");
                        $("#dynamic_form")[0].reset();
                        load_receipe_req_data();
                    } else {
                        alert("Ingredient Already Exists for this Recipe");
                    }
                }
            })
        }
    };
</script>
<style>
    .error {
        color: red;
        font-size: 13px;
        font-weight: 600;
        /* margin-top: 45px; */
    }

    .info-card {
        height: 190px;
    }

    .success-border {
        border: 2px lightgreen ridge;
    }

    .error-border {
        border: 2px red ridge;
    }

    .save_brand_message {
        display: none;
    }

    .flex-box {
        float: right;
        margin-top: -51px;
    }



    .ps-3 {
        font-size: 30px;
        font-weight: 600;
        color: #ba434d;
    }

    .ps-4 {
        font-size: 30px;
        font-weight: 600;
        color: #ba434d;
    }

    .ps-5 {
        font-size: 30px;
        font-weight: 600;
        color: #ba434d;
    }

    .loader {
        position: fixed;
        left: 50%;
        top: 50%;
        width: 100%;
        height: 100%;
        z-index: 9999;
    }

    .btn-primary {
        color: #fff !important;
        background-color: #963131 !important;
        border-color: #963131 !important;
    }
</style>
</head>

<body>
    @include ('layouts.head')
    <main id="main" class="main">
        <div id="infinity_loader" class="loader"><img src="{{asset('assets/img/loader.gif')}}"></div>
        <section class="section dashboard">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Recipe Management</h5>
                    <ul class="nav nav-tabs nav-tabs-bordered d-flex" id="borderedTabJustified" role="tablist">
                    </ul>
                    <div class="tab-content pt-2" id="borderedTabJustifiedContent">
                        <div class="tab-pane fade show active" id="bordered-justified-home" role="tabpanel" aria-labelledby="home-tab">
                            <div class="col-lg-12">
                                <div class="card">
                                    <div class="card-body" style="overflow-x:auto;">
                                        <h5 class="card-title"></h5>
                                        <form class="row g-3" id="dynamic_form" autocomplete="off" method="post">
                                            <input type="hidden" value="{{csrf_token()}}" name="_token">
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <div class="form-floating mb-3">
                                                        <select class="form-select" name="kitchen_name[]" onchange="get_brands_on_kitchen(this.value)" aria-label="State" id="kitchen_name" required>
                                                            <option selected></option>
                                                            @foreach($kitchens as $kitchen){
                                                            <option value="{{$kitchen->kitchen_new_id}}">{{$kitchen->kitchen_name}}</option>
                                                            }
                                                            @endforeach
                                                        </select>
                                                        <label for="floatingName">Kitchen Name</label>
                                                        <p id="ErrorID_1"></p>
                                                    </div>
                                                </div>

                                                <div class="col-md-4">
                                                    <div class="form-floating mb-3">
                                                        <select class="form-select" name="brand_name[]" onchange="getReceipes(this.value)" aria-label="State" id="brand_name" required>
                                                            <option selected></option>
                                                        </select>
                                                        <label for="floatingName">Brand Name</label>
                                                        <p id="ErrorID_2"></p>
                                                    </div>
                                                </div>

                                                <div class="col-md-4">
                                                    <div class="form-floating mb-3">
                                                        <select class="form-select" name="receipe_name[]" aria-label="State" id="receipe_name" required>
                                                        </select>
                                                        <label for="floatingName">Recipe</label>
                                                        <p id="ErrorID_3"></p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <div class="form-floating mb-3">
                                                        <input type="text" class="form-control" id="min_weight" name="min_weight" autocomplete="off">
                                                        <label for="floatingName">Min Weight (in Grams)</label>
                                                        <p id="ErrorID_8"></p>
                                                    </div>
                                                </div>

                                                <div class="col-md-4">
                                                    <div class="form-floating mb-3">
                                                        <input type="text" class="form-control" id="max_weight" name="max_weight" autocomplete="off">
                                                        <label for="floatingName">Max Weight (in Grams)</label>
                                                        <p id="ErrorID_9"></p>
                                                    </div>
                                                </div>

                                                <div class="col-md-4">
                                                    <div class="form-floating mb-3">
                                                        <input type="text" class="form-control" id="min_temp" name="min_temp" autocomplete="off">
                                                        <label for="floatingName">Min Temp (in Decgree Celcius)</label>
                                                        <p id="ErrorID_10"></p>
                                                    </div>
                                                </div>

                                            </div>

                                            <div class="row">
                                                <div class="col-md-4">
                                                    <div class="form-floating mb-3">
                                                        <input type="text" class="form-control" id="max_temp" name="max_temp" autocomplete="off">
                                                        <label for="floatingName">Max Temp (in Decgree Celcius)</label>
                                                        <p id="ErrorID_11"></p>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <table class="table table-bordered" id="user_table" >
                                                        <thead>
                                                            <tr>
                                                                <th>Ingredient</th>
                                                                <th>Unit</th>
                                                                <th>Value</th>
                                                                <th>Action</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>

                                                        </tbody>
                                                        <input type="hidden" id="receipe_name_data" name="receipe_name_data" value="">
                                                    </table>
                                                </div>
                                            </div>
                                            <div class="text-center">
                                                <button type="button" name="save" id="save" onclick="submit_data();" class="btn btn-primary" value="Save" class="btn btn-primary">Submit</button>
                                                <button type="reset" name="" id="" class="btn btn-primary" value="Save" class="btn btn-primary">Reset</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>


                            <p id="kitchen_name_error"></p>
                        </div>
                    </div>
                </div>
            </div>
            </div>
            </div>
            </div>


            </div><!-- End Bordered Tabs Justified -->
            <div class="modal fade" id="ExtralargeModal" tabindex="-1">
                <div class="modal-dialog modal-md modal-dialog-centered">
                    <div class="modal-content" class="delete_modal">
                        <button type="button" class="btn-close" style="width: 30px; font-weight:500; " data-bs-dismiss="modal" aria-label="Close"></button>
                        <div class="card">
                            <div class="tab-pane fade show active" id="bordered-justified-home" role="tabpanel" aria-labelledby="home-tab">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="tab-content pt-3" id="myTabjustifiedContent">
                                            <div class="tab-pane fade show active" id="home-justified_view" role="tabpanel" aria-labelledby="home-tab">
                                                <div class="card">
                                                    <div class="card-body">
                                                        <form class="row pt-3 g-3" id="view_registeredKitchen">
                                                            <input type="hidden" name="" id="hidden_delete_id">
                                                            <div class="col-md-12">
                                                                <h4>Delete Ingredients for <span style="color:red;" id="receiepe_name"></span> Recipe</h4>
                                                            </div>
                                                            <div class="row">
                                                                <div class="text-center col-md-6 button" style="align-self: center;">
                                                                    <button type="button" id="submit_registeredKitchen" onclick="deleteReceipe()" class="btn btn-primary">Delete</button>
                                                                </div>
                                                                <div class="text-center col-md-6 button reset-space" style="align-self: center;">
                                                                    <button type="reset" id="reset_main" onclick="closeTab();" class="btn btn-primary reset-btn">Cancel</button>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-content pt-2" id="borderedTabContent">
                <div class="tab-pane fade show active" id="bordered-home" role="tabpanel" aria-labelledby="home-tab">
                    <div class="col-lg-12" id="tcp_table1">
                        <!-- <div class="col-lg-12"> -->
                        <div class="card">
                            <div class="card-body" style="overflow-x:auto;">
                                <table id="reciepe_table" class='display dataTable nowrap'>
                                    <thead>
                                        <tr>
                                            <th scope="col">#</th>
                                            <th scope="col">Kitchen Name</th>
                                            <th scope="col">Brand Name</th>
                                            <th scope="col">Recipe Name</th>
                                            <th scope="col">Ingredients</th>
                                            <th scope="col">Unit</th>
                                            <th scope="col">Value</th>
                                            <th scope="col">Max Weight(in Grams)</th>
                                            <th scope="col">Min Weight(in Grams)</th>
                                            <th scope="col">Max Temperature(in celcius)</th>
                                            <th scope="col">Min Temperature(in celcius)</th>
                                            <!--<th scope="col">Action</th>-->
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </main><!-- End #main -->
    @include('layouts.footer');

    <link rel="stylesheet" href="css/jquery.dataTables.min.css">
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="js/jquery.dataTables.min.js"></script>
    <script src='js/jquery.validate.js'></script>
    <script type="text/javascript">
        var data = {};
        data['_token'] = "{{csrf_token()}}";


        function get_brands_on_kitchen(kitchen_id) {
            var data = {}
            data['kitchen'] = kitchen_id;
            data['_token'] = "{{csrf_token()}}";
            $.ajax({
                type: 'post',
                url: 'get_brands_on_kitchen_cancel',
                data: data,
                success: function(data) {
                    var arr = jQuery.parseJSON(data);
                    console.log(arr);
                    var s = '<option value="0">Select Brands</option>';
                    $.each(arr, function(key, val) {
                        // console.log(arr[key]);
                        s += '<option value="' + arr[key]['id'] + '">' + arr[key]['entity'] + '</option>';
                    });
                    $("#brand_name").html(s);
                }
            })
        }

        function getReceipes(brand_id) {
            var s = '<option value="0">Loading Recipes</option>';
            $("#receipe_name").html(s);
            var data = {}
            data['brand_id'] = brand_id;
            data['kitchen_id'] = $("#kitchen_name").val();
            data['_token'] = "{{csrf_token()}}";
            $.ajax({
                type: 'post',
                url: 'get_receipes_on_brands',
                data: data,
                success: function(returnData) {
                    var arr = jQuery.parseJSON(returnData);
                    var s = '<option value="0">Select Recipe</option>';
                    $.each(arr, function(key, val) {
                        s += '<option value="' + arr[key]['recipe_id'] + '">' + arr[key]['order_name'] + '</option>';
                    });
                    $("#receipe_name").html(s);
                }
            })
        }

        function closeTab() {
            $(".btn-close").click();
        }

        function deleteReceipe() {
            data['_token'] = "{{csrf_token()}}";
            data['delete_id'] = $('#hidden_delete_id').val();
            $.ajax({
                type: 'post',
                url: 'delete_receipe',
                data: data,
                success: function(data) {
                    if (data == 1) {
                        alert("Recipe Deleted");
                        $(".btn-close").click();
                        load_receipe_req_data();
                    }
                }
            })
        }

        $(document).ready(function(e) {
            load_receipe_req_data();
            $(".ps-5").html('0');
            $("#infinity_loader").hide();
            $('#dynamic_form').validate({
                rules: {
                    kitchen_name: "required",
                    brand_name: "required",
                    receipe_name: "required",
                    ingredient: "required",
                    units: "required",
                    value: "required"
                },
                messages: {
                    kitchen_name: "This field is required",
                    brand_name: "This field is required",
                    receipe_name: "This field is required",
                    ingredient: "This field is required",
                    units: "This field is required",
                    value: "This field is required"
                },
                errorPlacement: function(error, element) {
                    if (element.attr("id") == "kitchen_name") {
                        error.appendTo('#ErrorID_1');
                    } else if (element.attr("id") == "brand_name") {
                        error.appendTo('#ErrorID_2');
                    } else if (element.attr("id") == "receipe_name") {
                        error.appendTo('#ErrorID_3');
                    } else if (element.attr("id") == "ingredient") {
                        error.appendTo('#ErrorID_4');
                    } else if (element.attr("id") == "units") {
                        error.appendTo('#ErrorID_5');
                    } else if (element.attr("id") == "value") {
                        error.appendTo('#ErrorID_6');
                    } else {
                        error.insertAfter(element);
                    }
                },
            });
        })


        function load_receipe_req_data() {
            $('#reciepe_table').DataTable().destroy();
            var table = $('#reciepe_table').DataTable({
                "autoWidth": true,
                "ordering": false,
                "order": [0, 'desc'],

                "ajax": {
                    url: "get_receipe_requirement_data", // Ajax request
                    type: "post",
                    data: data,
                },

                "columns": [{
                        "data": "id",
                        "title": "#"
                    },
                    {
                        "data": "kitchen_name",
                        "title": "Kitchen Name"
                    },
                    {
                        "data": "entity",
                        "title": "Brand Name"
                    },
                    {
                        "data": "receipe_name",
                        "title": "Recipe Name"
                    },
                    {
                        "data": "ingredient",
                        "title": "Ingredients"
                    },
                    {
                        "data": "units",
                        "title": "Unit"
                    },
                    {
                        "data": "VALUE",
                        "title": "Value"
                    },
                    {
                        "data": "max_weight",
                        "title": "Max Weight"
                    },
                    {
                        "data": "min_weight",
                        "title": "Min Weigth"
                    },
                    {
                        "data": "max_temp",
                        "title": "Max Temperature"
                    },
                    {
                        "data": "min_temp",
                        "title": "Min Temperature"
                    },
                    /*{
                        "data": 'id',
                        render: function(data, full, type) {
                            console.log(data)
                            return '<input type="hidden" id="table_id"  value="' + data + '"></input> <button data-bs-toggle="modal" data-bs-target="#ExtralargeModal" type="submit" class="btn btn-danger" onclick="viewmodel(' + data + ')"><i class="fa-solid fa-trash"></i></button>';
                        }
                    }*/
                ],

                columnDefs: [{
                        "width": "1%",
                        "targets": [0],
                        "orderable": false,
                        "className": "dt-center",
                        "searching": true,
                    },
                    {
                        "width": "10%",
                        "targets": [1],
                        "className": "dt-center"
                    },
                    {
                        "width": "10%",
                        "targets": [2],
                        "className": "dt-center"
                    },
                    {
                        "width": "20%",
                        "targets": [3],
                        "className": "dt-center"
                    },
                ],
            });
            table.on('order.dt search.dt', function() {
                let i = 1;
                table.cells(null, 0, {
                    search: 'applied',
                    order: 'applied'
                }).every(function(cell) {
                    this.data(i++);
                });
            }).draw();
        }

        function viewmodel(id) {
            data['receipe_id'] = id;
            $("#hidden_delete_id").val(id);
            $.ajax({
                type: 'post',
                url: "get_receipe_name", // Ajax request  
                data: data,
                success: function(returnData) {
                    var receipe_name = returnData[0]['order_name'];
                    // alert(receipe_name);return false;
                    $("#receiepe_name").text(receipe_name);
                    var obj = jQuery.parseJSON(returnData);
                    console.log(obj[0]);
                }
            });
        }

        function save_store() {
            if ($('#store').valid()) {}
        }
    </script>

    <link rel='stylesheet' href='https://harvesthq.github.io/chosen/chosen.css'>
    <script src='//harvesthq.github.io/chosen/chosen.jquery.js'></script>
</body>

</html>