@section('title','Recipe')
@include('layout.header')
@include('layout.sidebar')
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .radio-container {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .radio-container label {
        margin-right: 10px;
    }

    .card .search{
        width: 80px;
    }
    #myTable1_filter  label,
    #myTable1_filter input[type=search] {
        display: none;
    }
</style>
<script src="{{ url('assets/custom/jquery.dataTables.min')}}"></script>

<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">Recipe</h1>
        <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
            <li class="breadcrumb-item text-muted">
                <a href="{{ url('dashboard')}}" class="text-muted text-hover-primary">Dashboard</a>
            </li>
            <li class="breadcrumb-item">
                <span class="bullet bg-gray-500 w-5px h-2px"></span>
            </li>
            <li class="breadcrumb-item text-muted">Recipe</li>
        </ul>
        
    </div>
    <div class="d-flex align-items-center gap-2 gap-lg-3">
        <div class="radio-container">
            
            <input type="radio" id="language_english" class="language-name" name="language" value="English" checked>
            <label for="englishRadio">English</label>

          
            <input type="radio" id="language_hindi" class="language-name"  name="language" value="Hindi" >
            <label for="hindiRadio">Hindi</label>

            <input type="radio" id="language_gujarati" class="language-name" name="language" value="Gujarati" >
            <label for="gujaratiRadio">Gujarati</label>

        </div>
        <button type="button" class="btn btn-sm fw-bold btn-primary" data-toggle="collapse" data-target="#tabing">Search </button>
        <a href="{{ route('add-recipe')}}" class="btn btn-sm fw-bold btn-primary" id="add_btn" >Add</a>
    </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">
            <section class="main-sec">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="title-sec-wrapper">
                                <div class="title-sec-left">
                                    <div class="page-title-wrapper">
                                        <div class="daterange-title-wrapper">
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div id="docuement_loader" style="display: none;">
                            <img src="{{asset('loader/loading.gif')}}" alt="">
                        </div>
                        <div class="col-12">
                            <div class="page-content-wrapper1">
                                <div id="tabing" class="collapse">
                                    <div id="serchfilter" class="filter-sec-wrapper dataTables_filter mt-10">
                                        <div class="row">
                                            <div class="col-md-3">
                                                <div class="form-group mb-5">
                                                    <div class="form-group form-group-filter-inq filter-search dataTables_filter searchFilterClass">
                                                        <input type="text" id="bulksearch" class="form-control searchInput filter-search-input" placeholder="Search"><br>
                                                    </div>
                                                    <div class="form-group form-group-filter-inq filter-search dataTables_filter searchFilterClass">
                                                        <input type="hidden" id="language_val_id" name="language" class="searchInput filter-search-input"><br>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group mb-5">
                                                    <select class="form-select my-dropdown searchInput" id="cuisine_id" name="cuisine_id" data-control="select2" data-placeholder="Select cuisines" data-size="6" data-live-search="true"  multiple>
                                                    <option value="" >Cuisine</option>
                                                        @if(isset($cuisines))
                                                            @foreach($cuisines as $cuisine)
                                                            <option value="{{$cuisine->cuisine_name_en}}">{{$cuisine->cuisine_name_en}}</option>
                                                            @endforeach
                                                        @endif
                                                    </select>
                                                </div>
                                            </div>
                                          
                                            <div class="col-md-3">
                                                <div class="form-group mb-5">
                                                    <select class="form-control my-dropdown searchInput"  data-control="select2" data-placeholder="Select Status" data-size="6" data-live-search="true" id="status">
                                                        <option value="" >Status</option>
                                                        <option value="All">All</option>
                                                        <option value="Pending">Pending</option>
                                                        <option value="Approved">Approved</option>
                                                        <option value="Rejected">Rejected</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group mb-5 ">
                                                    <button class="btn-primary-mro form-control btn btn-danger"  onclick="clearDatatableSearchFilters();" type="button">Reset</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="search-result">
                            <div class="bp-list-wrapper">
                                <div class="table-responsive">
                                    <table class="table table-striped basic-datatables dynamicTable text-left" cellpadding="0"
                                        cellspacing="0" id="myTable1">
                                        <thead>
                                        <tr>
                                            <th class="no-sort all" data-width="98px" data-bSortable="true">Sr</th>
                                            <th class="no-sort all text-left" data-bSortable="true">Recipe Name </th>
                                            <th class="no-sort all text-left" data-bSortable="true">Cuisine </th>
                                            <th class="no-sort all text-left" data-bSortable="true">Date</th>
                                            <th class="no-sort all text-left" data-bSortable="true">Status</th>
                                            <th class="no-sort desktop text-left" data-bSortable="true">Action</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>
@include('layout.footer')
<script src="{{ url('assets/custom/datatable.js')}}"></script>
<script src="{{ url('assets/custom/datatables.min.js')}}"></script>
<script>
    $(document).ready(function() {
        $('.language-name').change(function() {
            var selectedLanguage = $(this).val();
            $('#language_val_id').val(selectedLanguage).trigger('change');
        }); 
    });

    function deleteData(id){
            var x =confirm("Are you sure you want to delete?");
            if(x){
                var id= id;
                var url = "{{ url('Recipe/delete-recipe/') }}/"+ id;
                $.ajax({
                    type:'GET',
                    url: url,
                    dataType: 'json',
                    success: (response) => {
                        if (response.status === true) {
                        window.location.href = "{{ url('Recipe') }}";
                    } else {
                        alert('Something went wrong. Please try again.');
                    }
                },
                error: function(response){
                    $.each( response.responseJSON.errors, function( key, alert ) {
                    });
                }
                });
            }
        }
</script>