@extends("Kitchen-Owner.layout.app")
@section("title","Kitchen Dashboard")
@section("content")
<div class="nk-content ">
                    <div class="container-fluid">
                        <div class="nk-content-inner">
                            <div class="nk-content-body">
                                <div class="components-preview mx-auto">
                                    
                                    <div class="nk-block nk-block-lg">
                                        <div class="nk-block-head">
                                            <div class="row g-4">
                                                <div class="col-lg-6">
                                                    <div class="nk-block-head-content">
                                                        <h4 class="title nk-block-title">Add New Tiffin Meals</h4>
                                                        <div class="nk-block-des">
                                                            <p>You can add new Tiffin Meals using this form.</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="form-group float-right">
                                                        <a href="{{route('kitchen.tiffin')}}" class="btn btn-lg btn-primary">List Of Tiffin Meals</a>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                        </div>
                                        
                                        <div class="card card-bordered">
                                            <div class="card-inner">
                                                
                                                
                                                <form action="{{ route('kitchen.storeTiffin') }}" method="POST" id="insert_form" enctype="multipart/form-data">
                                                    @csrf
                                                <div class="card-head">
                                                    <h5 class="card-title">Tiffin Information</h5>
                                                </div>
                                                <div class="row g-4">
                                                <div class="col-md-6 col-lg-4 col-xl-4">
                                                    <div class="form-group">
                                                        <label class="form-label" for="tiffin_name">Tiffin Name</label>
                                                        <div class="form-control-wrap">
                                                            <input type="text" class="form-control " name="tiffin_name" id="tiffin_name" value="" placeholder="Enter Tiffin Name">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6 col-lg-4 col-xl-4">
                                                            <div class="form-group">
                                                                <label class="form-label" for="customFileLabel">Tiffin Image</label>
                                                                <div class="form-control-wrap">
                                                                    <div class="custom-file">
                                                                        <input type="file" class="custom-file-input " name="tiffin_image" id="tiffin_image">
                                                                        <label class="custom-file-label" for="tiffin_image">Choose file</label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                </div>
                                                
                                                <div class="card-head mt-4">
                                                    <h5 class="card-title">Items Information</h5>
                                                </div>
                                                <div class="table-repsonsive">
                                                 <span id="error"></span>
                                                 <table class="table table-bordered" id="item_table">
                                                  <tr>
                                                   <th valign="middle">Select Item Name</th>
                                                   <th valign="middle">Enter Quantity</th>
                                                   <th valign="middle">Enter Remark</th>
                                                   <th valign="middle"><button type="button" name="add" class="btn btn-success btn-sm add"><em class="icon ni ni-plus"></em></button></th>
                                                  </tr>
                                                  <tr>
                                                    <td><select class="form-select item_name" data-search="on" name="item_name[]"> <option value="Tawa Roti">Tawa Roti</option> <option value="Tawa Roti Butter">Tawa Roti Butter</option><option value="Tawa Paratha">Tawa Paratha</option> <option value="Aalu Paratha">Aalu Paratha</option><option value="Matar Paratha">Matar Paratha</option><option value="Gobhi Paratha">Gobhi Paratha</option><option value="Onian Paratha">Onian Paratha</option><option value="Paneer Paratha">Paneer Paratha</option><option value="Daal Tadka">Daal Tadka</option> <option value="Daal Fry">Daal Fry</option><option value="Daal Makhni">Daal Makhni</option><option value="Raita">Raita</option> <option value="Green Veg Mix">Green Veg Mix</option> <option value="Green Veg (Seasonal)">Green Veg (Seasonal)</option> <option value="Salad">Salad</option> <option value="Chicken">Chicken</option> <option value="Matar Paneer">Matar Paneer</option> <option value="Palak Paneer">Palak Paneer</option> <option value="Matar Aloo">Matar Aloo</option> <option value="White Channa">White Channa</option> <option value="Kaala Channa">Kaala Channa</option></select></td>
                                                    <td><input type="text" name="item_quantity[]" class="form-control item_quantity" placeholder="Enter Quantity"/></td>
                                                    <!--<td><input type="text" name="item_remark[]" class="form-control item_remark" /></td>-->
                                                    <td><textarea class="form-control form-control-sm item_remark" name="item_remark[]" id="item_remark" placeholder="Enter Remark" style="height: 47px; min-height: 3px;">{{old('user_address')}}</textarea></td>
                                                    
                                                    <td width="80"><button type="button" name="remove" class="btn btn-danger btn-sm remove"><em class="icon ni ni-trash"></em></button></td>
                                                  </tr>
                                                 </table>
                                                 
                                                </div>
                                                
                                                <div class="card-head">
                                                    <h5 class="card-title mt-5">Price Information</h5>
                                                </div>
                                                <div class="table-repsonsive">
                                                 <span id="error"></span>
                                                 <table class="table table-bordered" id="price_table" style="width: 59%;">
                                                  <tr>
                                                   <th valign="middle">Tiffin Meal Plans</th>
                                                   <th valign="middle">Tiffin Price</th>
                                                   <th valign="middle" width="80"><button type="button" name="add_price" class="btn btn-success btn-sm add_price"><em class="icon ni ni-plus"></em></button></th>
                                                  </tr>
                                                  <tr>
                                                    <td><select class="form-select" data-search="on" name="item_day_time[]"> <option value="1">1 Day</option> <option value="7">7 Days</option> <option value="15">15 Days</option> <option value="30">30 Days</option> </select></td>
                                                    <td><input type="number" name="tiffine_price[]" class="form-control tiffine_price" placeholder="Enter Price"/></td>
                                                    <td><button type="button" name="remove_price" class="btn btn-danger btn-sm remove_price"><em class="icon ni ni-trash"></em></button></td>
                                                  </tr>
                                                 </table>
                                                 
                                                 <!--<div class="col-lg-6 mt-3">-->
                                                    <div class="form-group mt-3">
                                                        <button type="submit" name="submit" class="btn btn-lg btn-info">Save Information</button>
                                                    <!--</div>-->
                                                </div>
                                                </div>
                                               </form>
                                            </div>
                                        </div>
                                    </div><!-- .nk-block -->
                                </div><!-- .components-preview -->
                            </div>
                        </div>
                    </div>
                </div>  
@endsection
@push("script")
@if(Session::has('msg'))
        @switch(Session::get('status'))
        
        @case('success')
        <script>
            toastr.options = {
            "closeButton": true,
            "progressBar": true,
            "positionClass": "toast-top-center"
            }
            toastr.success("{{ Session::get('msg') }}");
        </script>
        @break

        @case('error')
        <script>
            toastr.options = {
            "closeButton": true,
            "progressBar": true,
            "positionClass": "toast-top-center"
            }
            toastr.error("{{ Session::get('msg') }}");
        </script>
        @break

        @endswitch
@endif

<script>
$(document).ready(function() {
    $(document).on('click', '.add', function(){
        var html = '';
        html += '<tr>';
        html += '<td><select class="form-select item_name" data-search="on" name="item_name[]"> <option value="Tawa Roti">Tawa Roti</option> <option value="Tawa Roti Butter">Tawa Roti Butter</option><option value="Tawa Paratha">Tawa Paratha</option> <option value="Aalu Paratha">Aalu Paratha</option><option value="Matar Paratha">Matar Paratha</option><option value="Gobhi Paratha">Gobhi Paratha</option><option value="Onian Paratha">Onian Paratha</option><option value="Paneer Paratha">Paneer Paratha</option><option value="Daal Tadka">Daal Tadka</option> <option value="Daal Fry">Daal Fry</option><option value="Daal Makhni">Daal Makhni</option><option value="Raita">Raita</option> <option value="Green Veg Mix">Green Veg Mix</option> <option value="Green Veg (Seasonal)">Green Veg (Seasonal)</option> <option value="Salad">Salad</option> <option value="Chicken">Chicken</option> <option value="Matar Paneer">Matar Paneer</option> <option value="Palak Paneer">Palak Paneer</option> <option value="Matar Aloo">Matar Aloo</option> <option value="White Channa">White Channa</option> <option value="Kaala Channa">Kaala Channa</option></select></td>';
        html += '<td><input type="text" name="item_quantity[]" class="form-control item_quantity" placeholder="Enter Quantity"/></td>';
        html += '<td><textarea class="form-control form-control-sm item_remark" name="item_remark[]" placeholder="Enter Remark" style="height: 47px; min-height: 47px;">{{old('user_address')}}</textarea></td>';
        html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><em class="icon ni ni-trash"></em></button></td></tr>';
        $('#item_table').append(html);

        // Initialize Select2 on the newly added select element
        $('.form-select').select2();
    });

    $(document).on('click', '.remove', function(){
        $(this).closest('tr').remove();
    });
    
    $(document).on('click', '.add_price', function(){
        var html = '';
        html += '<tr>';
        html += '<td><select class="form-select" data-search="on" name="item_day_time[]"> <option value="1">1 Day</option> <option value="7">7 Days</option> <option value="15">15 Days</option> <option value="30">30 Days</option> </select></td>';
        html += '<td><input type="number" name="tiffine_price[]" class="form-control tiffine_price" placeholder="Enter Price"/></td>';
        html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><em class="icon ni ni-trash"></em></button></td></tr>';
        $('#price_table').append(html);

        // Initialize Select2 on the newly added select element
        $('.form-select').select2();
    });

    $(document).on('click', '.remove_price', function(){
        $(this).closest('tr').remove();
    });
    
});
        
</script>

@endpush