@extends('layouts.app')

@section('content')
<div class="page-wrapper">
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">{{ trans('lang.recipes') }}</h3>
        </div>
        <div class="col-md-7 align-self-center">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url('/dashboard') }}">{{ trans('lang.dashboard') }}</a></li>
                <li class="breadcrumb-item"><a href="{{ route('recipes.index') }}">{{ trans('lang.recipes') }}</a></li>
                <li class="breadcrumb-item active">{{ trans('lang.recipes_edit') }}</li>
            </ol>
        </div>
    </div>

    <div class="container-fluid">
        <div class="cat-edite-page max-width-box">
            <form action="{{ route('recipes.update', $recipe->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="card pb-4">
                    <div class="card-header">
                        <ul class="nav nav-tabs align-items-end card-header-tabs w-100">
                            <li role="presentation" class="nav-item">
                                <a href="#recipes_information" aria-controls="description" role="tab" data-toggle="tab"
                                    class="nav-link active">{{ trans('lang.recipes_information') }}</a>
                            </li>
                            <li role="presentation" class="nav-item">
                                <a href="#review_attributes" aria-controls="ingredients" role="tab" data-toggle="tab"
                                    class="nav-link">{{ trans('lang.ingredients') }}</a>
                            </li>
                            <li role="presentation" class="nav-item">
                                <a href="#product_additional" aria-controls="product_additional" role="tab"
                                    data-toggle="tab" class="nav-link">{{ trans('lang.additional_product') }}</a>
                            </li>
                        </ul>
                    </div>

                    <div class="card-body">
                        <div id="data-table_processing" class="dataTables_processing panel panel-default"
                            style="display: none;">
                            {{ trans('lang.processing') }}
                        </div>
                        <div class="error_top" style="display:none"></div>
                        @include('alerts.error_messages')
                        <div class="row restaurant_payout_create" role="tabpanel">
                            <div class="restaurant_payout_create-inner tab-content">
                                <div role="tabpanel" class="tab-pane active" id="recipes_information">
                                    <fieldset>
                                        <legend>{{ trans('lang.recipes_edit') }}</legend>
                                        <div class="form-group row width-100">
                                            <label class="col-3 control-label">{{ trans('lang.recipes_name') }}</label>
                                            <div class="col-7">
                                                <input type="text" class="form-control recipes-name" name="name"
                                                    value="{{ old('name', $recipe->name) }}">
                                                <div class="form-text text-muted">
                                                    {{ trans('lang.recipes_name_help') }}
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group row width-100">
                                            <label class="col-3 control-label">{{ trans('lang.recipes_description') }}</label>
                                            <div class="col-7">
                                                <textarea rows="7" class="category_description form-control" id="category_description" name="description">{{ old('description', $recipe->description) }}</textarea>
                                                <div class="form-text text-muted">
                                                    {{ trans('lang.category_description_help') }}
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group row width-100">
                                            <label class="col-3 control-label">{{ trans('lang.store') }}</label>
                                            <div class="col-7">
                                                <select rows="7" class="parent_category form-control" id="store" name="store_id">
                                                    <option value="">{{ trans('lang.select_store') }}</option>
                                                    @foreach ($stores as $store)
                                                    <option value="{{ $store->id }}"
                                                        {{ old('store_id', $recipe->store_id ?? '') == $store->id ? 'selected' : '' }}>
                                                        {{ $store->name }}
                                                    </option>
                                                    @endforeach
                                                </select>
                                                <div class="form-text text-muted">
                                                    {{ trans('lang.recipes_store_help') }}
                                                </div>
                                            </div>
                                        </div>


                                        <div class="form-group row width-100">
                                            <label class="col-3 control-label">{{ trans('lang.chef') }}</label>
                                            <div class="col-7">
                                                <select rows="7" class="parent_category form-control" id="chef" name="chef_id">
                                                    <option value="">{{ trans('lang.select_chef') }}</option>
                                                    @foreach ($chefs as $chef)
                                                    <option value="{{ $chef->id }}"
                                                        {{ old('chef_id', $recipe->chef_id ?? '') == $chef->id ? 'selected' : '' }}>
                                                        {{ $chef->name }}
                                                    </option>
                                                    @endforeach
                                                </select>
                                                <div class="form-text text-muted">
                                                    {{ trans('lang.recipes_chef_help') }}
                                                </div>
                                            </div>
                                        </div>


                                        <div class="form-group row width-100">
                                            <label class="col-3 control-label">{{ trans('lang.category') }}</label>
                                            <div class="col-7">
                                                <select rows="7" class="parent_category form-control" id="parent_category" name="category_id">
                                                    <option value="">{{ trans('lang.select_category') }}</option>
                                                    @foreach ($categories as $category)
                                                    <option value="{{ $category->id }}"
                                                        {{ (old('category_id') ?? ($recipe->category_id ?? null)) == $category->id ? 'selected' : '' }}>
                                                        {{ $category->full_name }}
                                                    </option>
                                                    @endforeach
                                                </select>
                                                <div class="form-text text-muted">
                                                    {{ trans('lang.recipes_category_help') }}
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group row width-100">
                                            <label class="col-3 control-label">{{ trans('lang.recipes_steps') }}</label>
                                            <div class="col-7">
                                                <textarea class="form-control recipe-content-editor" name="recipe_steps" rows="5" id="tinymce-editor">{{ old('content', $recipe->recipe_steps) }}</textarea>
                                                <div class="form-text text-muted">
                                                    {{ trans('lang.recipes_steps_help') }}
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group row width-100">
                                            <label class="col-3 control-label">{{ trans('lang.recipes_price') }}</label>
                                            <div class="col-7">
                                                <input type="number" step="any" class="form-control recipes-price" min="0.01"
                                                    name="price" value="{{ old('price', $recipe->price) }}">
                                                <div class="form-text text-muted">
                                                    {{ trans('lang.recipes_price_help') }}
                                                </div>
                                            </div>
                                        </div>

                                        {{-- Recipe Thumbnail --}}
                                        <div class="form-group row width-100">
                                            <label class="col-3 control-label">{{ trans('lang.recipe_thumbnail') }}</label>
                                            <div class="col-9">
                                                {{-- Upload New Thumbnail --}}
                                                <input type="file" id="recipe_video_thumbnails" name="recipe_video_thumbnails" class="mt-2">
                                                <div id="uploading_image"></div>
                                                <div class="form-text text-muted w-50 mb-3">
                                                    {{ trans('lang.recipe_thumbnail_help') }}
                                                </div>

                                                {{-- Existing Thumbnails --}}
                                                @php
                                                $thumbnails = $recipe->getMedia('recipe_video_thumbnails');
                                                @endphp

                                                @if ($thumbnails->count())
                                                <table class="table table-bordered">
                                                    <thead>
                                                        <tr>
                                                            <th>{{ trans('lang.thumbnail') }}</th>
                                                            <th>{{ trans('lang.action') }}</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($thumbnails as $thumb)
                                                        <tr>
                                                            <td>
                                                                <img src="{{ $thumb->getUrl() }}" alt="Recipe Thumbnail" style="width: 120px; height: 180px; border-radius: 8px;">
                                                            </td>
                                                            <td>

                                                                <button type="button" class="btn btn-danger btn-sm"
                                                                    onclick="deleteThumbnail({{ $recipe->id }}, {{ $thumb->id }})">
                                                                    ✕ {{ trans('lang.delete') }}
                                                                </button>
                                                            </td>
                                                        </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                                @endif
                                            </div>
                                        </div>


                                        {{-- Upload new video --}}
                                        <div class="form-group row width-100">
                                            <label class="col-3 control-label">{{ trans('lang.recipes_video') }}</label>
                                            <div class="col-7">
                                                <input type="file" id="recipes_video" name="video" accept="video/*">
                                                <div class="form-text text-muted w-50">
                                                    {{ trans('lang.recipes_video_help') }}
                                                </div>
                                            </div>
                                        </div>

                                        {{-- Existing Video --}}
                                        @if ($recipe->hasMedia('recipe_video'))
                                        <div class="form-group row width-100">
                                            <label class="col-3 control-label">{{ trans('lang.existing_video') }}</label>
                                            <div class="col-9">
                                                <table class="table table-bordered">
                                                    <thead>
                                                        <tr>
                                                            <th>{{ trans('lang.video') }}</th>
                                                            <th>{{ trans('lang.action') }}</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($recipe->getMedia('recipe_video') as $media)
                                                        <tr>
                                                            <td>
                                                                <video width="200" controls>
                                                                    <source src="{{ $media->getUrl() }}" type="video/mp4">
                                                                    Your browser does not support the video tag.
                                                                </video>
                                                            </td>
                                                            <td>
                                                                <button type="button" class="btn btn-danger btn-sm"
                                                                    onclick="deleteMedia({{ $recipe->id }}, {{ $media->id }})">
                                                                    ✕ {{ trans('lang.delete') }}
                                                                </button>
                                                            </td>
                                                        </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                        @endif

                                        <!-- Is Active -->
                                        <div class="form-check row width-100">
                                            <input type="checkbox" class="is_active" name="is_active" value="1"
                                                id="is_active" @if ($recipe->is_active == 1) checked @endif>
                                            <label class="col-3 control-label"
                                                for="is_active">{{ trans('lang.is_active') }}</label>
                                        </div>

                                        <!-- Feature Item -->
                                        <div class="form-check row width-100">
                                            <input type="hidden" name="feature_item" value="0">
                                            <input type="checkbox" class="is_active" name="feature_item" value="1" id="feature_item"
                                                {{ old('feature_item', $recipe->is_featured) ? 'checked' : '' }}>
                                            <label class="col-3 control-label" for="feature_item">{{ trans('lang.feature_item') }}</label>
                                        </div>

                                        <!-- Publish -->
                                        <div class="form-check row width-100">
                                            <input type="hidden" name="publish" value="0">
                                            <input type="checkbox" class="is_active" name="publish" value="1" id="publish"
                                                {{ old('publish', $recipe->is_published) ? 'checked' : '' }}>
                                            <label class="col-3 control-label" for="publish">{{ trans('lang.publish') }}</label>
                                        </div>

                                        <!-- Is Daily -->
                                        <div class="form-check row width-100">
                                            <input type="hidden" name="is_daily" value="0">
                                            <input type="checkbox" class="is_active" name="is_daily" value="1" id="is_daily"
                                                {{ old('is_daily', $recipe->is_daily) ? 'checked' : '' }}>
                                            <label class="col-3 control-label" for="is_daily">{{ trans('lang.is_daily') }}</label>
                                        </div>

                                        <!-- Is Daily Recipe -->
                                        <div class="form-check row width-100" id="is_daily_recipe_1">
                                            <input type="hidden" name="is_daily_recipe" value="0">
                                            <input type="checkbox" name="is_daily_recipe" id="is_daily_recipe" value="1"
                                                {{ old('daily_days', $recipe->daily_days) != null ? 'checked' : '' }}>
                                            <label class="col-3 control-label" for="is_daily_recipe">{{ trans('lang.is_daily_recipe') }}</label>
                                            <div class="form-text text-muted w-50">
                                                {{ trans('lang.is_daily_recipe_desc') }} <span id="forsection"></span>
                                            </div>
                                        </div>

                                        @php
                                        $selectedDays = old('daily_days', explode(',', $recipe->daily_days ?? ''));
                                        @endphp

                                        <!-- Select Days -->
                                        <div class="form-group row width-100" id="days-of-week-section" style="{{ !empty($selectedDays) ? '' : 'display: none;' }}">
                                            <label class="col-3 control-label">{{ trans('lang.select_days') }}</label>
                                            <div class="col-7">
                                                <select name="daily_days[]" id="daily_days" class="form-control" multiple>
                                                    @foreach (['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'] as $day)
                                                    <option value="{{ $day }}" {{ in_array($day, $selectedDays) ? 'selected' : '' }}>
                                                        {{ trans('lang.' . strtolower($day)) }}
                                                    </option>
                                                    @endforeach
                                                </select>
                                                <div class="form-text text-muted">
                                                    {{ trans('lang.select_days_help') }}
                                                </div>
                                            </div>
                                        </div>


                                    </fieldset>
                                </div>
                                <div role="tabpanel" class="tab-pane" id="review_attributes">
                                    <div class="form-group col-12">
                                        <h5>{{ trans('lang.product_ingredients') }}</h5>
                                        <table class="table table-bordered" id="product-ingredients-table">
                                            <thead>
                                                <tr>
                                                    <th>{{ trans('lang.ingredients') }}</th>
                                                    <th>{{ trans('lang.description') }}</th>
                                                    <th>{{ trans('lang.unit') }}</th>
                                                    <th>{{ trans('lang.unit_value') }}</th>
                                                    <th>{{ trans('lang.note') }}</th>
                                                    <th>{{ trans('lang.action') }}</th>
                                                </tr>
                                            </thead>
                                            <tbody id="ingredient-rows">
                                                @php $recipeIngredients = $recipeIngredients ?? []; @endphp
                                                @foreach($recipeIngredients as $index => $ingredient)
                                                <tr data-id="{{ $index }}">
                                                    <td>
                                                        <select name="ingredients[{{ $index }}][product_id]"
                                                            class="form-control ingredient-select"
                                                            data-index="{{ $index }}">
                                                            <option value="">{{ trans('lang.select') }}</option>
                                                            @foreach($ingredients as $product)
                                                            <option value="{{ $product->id }}"
                                                                data-name="{{ $product->name }}"
                                                                {{ $ingredient->product_id == $product->id ? 'selected' : '' }}>
                                                                {{ $product->name }}
                                                            </option>
                                                            @endforeach
                                                            @if(!empty($ingredient->product_id) && !$ingredients->contains('id', $ingredient->product_id))
                                                            <option value="{{ $ingredient->product_id }}" selected>{{ $ingredient->name }}</option>
                                                            @endif
                                                        </select>
                                                        <input type="hidden" name="ingredients[{{ $index }}][name]" class="ingredient-name" value="{{ $ingredient->name }}">
                                                    </td>
                                                    <td><input type="text" name="ingredients[{{ $index }}][description]" class="form-control" value="{{ $ingredient->description }}"></td>
                                                    <td>
                                                        <select name="ingredients[{{ $index }}][unit]" class="form-control unit-select" data-index="{{ $index }}">
                                                            <option value="">{{ trans('lang.select') }}</option>
                                                            @foreach($product_units as $unit)
                                                            <option value="{{ $unit->id }}" {{ $ingredient->unit == $unit->id ? 'selected' : '' }}>
                                                                {{ $unit->name }}
                                                            </option>
                                                            @endforeach
                                                        </select>
                                                    </td>
                                                    <td><input type="number" name="ingredients[{{ $index }}][unit_value]" class="form-control" value="{{ $ingredient->unit_value }}"></td>
                                                    <td><input type="text" name="ingredients[{{ $index }}][note]" class="form-control" value="{{ $ingredient->note }}"></td>
                                                    <td><button type="button" class="btn btn-danger btn-sm remove-ingredient-row">X</button></td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                        <button type="button" class="btn btn-sm btn-success" id="add-ingredient-row">
                                            {{ trans('lang.add_ingredients') }}
                                        </button>
                                    </div>
                                </div>

                                <div role="tabpanel" class="tab-pane" id="product_additional">
                                    <div class="form-group col-12">
                                        <table class="table table-bordered" id="product-additional-table">
                                            <thead>
                                                <tr>
                                                    <th>{{ trans('lang.select_product') }}</th>
                                                    <th>{{ trans('lang.action') }}</th>
                                                </tr>
                                            </thead>
                                            <tbody id="product-additional-rows">
                                                @if(isset($recipe->additionalProducts) && count($recipe->additionalProducts))
                                                @foreach($recipe->additionalProducts as $product)
                                                <tr>
                                                    <td>
                                                        <select name="product_ids[]" class="form-control select2">
                                                            <option value="">{{ trans('lang.select') }}</option>
                                                            @foreach($ingredients as $item)
                                                            <option value="{{ $item->id }}" {{ $product->id == $item->id ? 'selected' : '' }}>
                                                                {{ $item->name }}
                                                            </option>
                                                            @endforeach
                                                        </select>
                                                    </td>
                                                    <td>
                                                        <button type="button" class="btn btn-danger btn-sm remove-product-row">X</button>
                                                    </td>
                                                </tr>
                                                @endforeach
                                                @endif
                                            </tbody>
                                        </table>

                                        <button type="button" class="btn btn-sm btn-success" id="add-additional-row">
                                            {{ trans('lang.add_additional') }}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group col-12 text-center btm-btn">
                            <button type="submit" class="btn btn-primary save_category_btn"><i class="fa fa-save"></i>
                                {{ trans('lang.save') }}
                            </button>
                            <a href="{{ route('recipes.index') }}" class="btn btn-default"><i
                                    class="fa fa-undo"></i>{{ trans('lang.cancel') }}</a>
                        </div>
                    </div>
            </form>
        </div>
    </div>

    <form id="video-delete-form" method="POST" style="display: none;">
        @csrf
        @method('DELETE')
    </form>
    <form id="thumbnail-delete-form" method="POST" style="display: none;">
        @csrf
        @method('DELETE')
    </form>
</div>
@endsection

@section('scripts')

<!-- ✅ jQuery + Select2 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<!-- ✅ TinyMCE -->
<script src="https://cdn.tiny.cloud/1/fcx3mdrpam9rpi7fp14grd82y1an2580njij315tlt4llv1g/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
<script>
    tinymce.init({
        selector: '.recipe-content-editor',
        plugins: [
            // Core editing features
            'anchor', 'autolink', 'charmap', 'codesample', 'emoticons', 'image', 'link', 'lists', 'media', 'searchreplace', 'table', 'visualblocks', 'wordcount',
            // Your account includes a free trial of TinyMCE premium features
            // Try the most popular premium features until Aug 1, 2025:
            'checklist', 'mediaembed', 'casechange', 'formatpainter', 'pageembed', 'a11ychecker', 'tinymcespellchecker', 'permanentpen', 'powerpaste', 'advtable', 'advcode', 'editimage', 'advtemplate', 'ai', 'mentions', 'tinycomments', 'tableofcontents', 'footnotes', 'mergetags', 'autocorrect', 'typography', 'inlinecss', 'markdown', 'importword', 'exportword', 'exportpdf'
        ],
        toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | addcomment showcomments | spellcheckdialog a11ycheck typography | align lineheight | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
        tinycomments_mode: 'embedded',
        tinycomments_author: 'Author name',
        mergetags_list: [{
                value: 'First.Name',
                title: 'First Name'
            },
            {
                value: 'Email',
                title: 'Email'
            },
        ],
        ai_request: (request, respondWith) => respondWith.string(() => Promise.reject('See docs to implement AI Assistant')),
    });
</script>
<script>
    $(document).ready(function() {
        // Initialize Select2 for existing dropdowns
        $('.select2').select2({
            placeholder: "{{ trans('lang.select') }}",
            width: '100%'
        });

        // Add new row when button is clicked
        $('#add-additional-row').click(function() {
            let newRow = `
                <tr>
                    <td>
                        <select name="product_ids[]" class="form-control select2">
                            <option value="">{{ trans('lang.select') }}</option>
                            @foreach($ingredients as $product)
                                <option value="{{ $product->id }}">{{ $product->name }}</option>
                            @endforeach
                        </select>
                    </td>
                    <td>
                        <button type="button" class="btn btn-danger btn-sm remove-product-row">X</button>
                    </td>
                </tr>
            `;

            $('#product-additional-rows').append(newRow);

            // Initialize Select2 for the new select
            $('#product-additional-rows .select2').last().select2({
                placeholder: "{{ trans('lang.select') }}",
                allowClear: true,
                width: '100%'
            });
        });

        // Remove a row when X button is clicked
        $(document).on('click', '.remove-product-row', function() {
            $(this).closest('tr').remove();
        });
    });
</script>
<!-- ✅ Main Edit Script -->
<script>
    // ✅ JSON data from backend
    const ingredients = @json($ingredients);
    const product_units = @json($product_units);
    const existingIngredients = @json($recipeIngredients);

    // ✅ Delete functions (global)
    function deleteMedia(recipeId, mediaId) {
        if (confirm('Are you sure you want to delete this video?')) {
            const form = document.getElementById('video-delete-form');
            form.action = `/recipes/${recipeId}/media/${mediaId}`;
            form.submit();
        }
    }

    function deleteThumbnail(recipeId, mediaId) {
        if (confirm('Are you sure you want to delete the thumbnail?')) {
            const form = document.getElementById('thumbnail-delete-form');
            form.action = `/recipes/${recipeId}/media/${mediaId}`;
            form.submit();
        }
    }

    // ✅ Generate ingredient row HTML
    function generateIngredientRow(index = Date.now(), selected = {}) {
        // Ingredient options
        let ingredientOptions = '<option value="">Select</option>';
        ingredients.forEach(ingredient => {
            const isSelected = selected.ingredient_id == ingredient.id ? 'selected' : '';
            ingredientOptions += `<option value="${ingredient.id}" data-name="${ingredient.name}" ${isSelected}>${ingredient.name}</option>`;
        });

        // Unit options
        let unitOptions = '<option value="">Select</option>';
        product_units.forEach(unit => {
            const isSelected = selected.unit_id == unit.id ? 'selected' : '';
            unitOptions += `<option value="${unit.id}" data-name="${unit.name}" ${isSelected}>${unit.name}</option>`;
        });

        return `
            <tr data-id="${index}">
                <td>
                    <select name="ingredients[${index}][ingredient_id]" 
                            class="form-control ingredient-select" 
                            data-index="${index}">
                        ${ingredientOptions}
                        ${selected.ingredient_id && !ingredients.find(i => i.id == selected.ingredient_id) 
                            ? `<option value="${selected.ingredient_id}" selected>${selected.name}</option>` : ''}
                    </select>
                    <input type="hidden" name="ingredients[${index}][name]" class="ingredient-name" value="${selected.name || ''}" />
                </td>
                <td><input type="text" name="ingredients[${index}][description]" class="form-control" value="${selected.description || ''}"></td>
                <td>
                    <select name="ingredients[${index}][unit_id]" class="form-control unit-select" data-index="${index}">
                        ${unitOptions}
                        ${selected.unit_id && !product_units.find(u => u.id == selected.unit_id)
                            ? `<option value="${selected.unit_id}" selected>${selected.unit_name || ''}</option>` : ''}
                    </select>
                    <input type="hidden" name="ingredients[${index}][unit_name]" class="unit-name" value="${selected.unit_name || ''}" />
                </td>
                <td><input type="number" name="ingredients[${index}][unit_value]" class="form-control" value="${selected.unit_value || ''}"></td>
                <td><input type="text" name="ingredients[${index}][note]" class="form-control" value="${selected.note || ''}"></td>
                <td><button type="button" class="btn btn-danger btn-sm remove-ingredient-row">X</button></td>
            </tr>`;
    }

    // ✅ Init select2 dropdowns
    function initSelect2() {
        $('#daily_days').select2({
            placeholder: 'Select days',
            width: '100%'
        });

        $('#contains').select2({
            placeholder: 'Select Allergens',
            width: '100%'
        });
    }

    // ✅ Init ingredient select2
    function initIngredientSelect2() {
        $('.ingredient-select').select2({
            placeholder: 'Select or add ingredient',
            tags: true,
            width: '100%'
        }).on('change', function() {
            const selectedText = $(this).find(':selected').text();
            const index = $(this).data('index');
            $(`input[name="ingredients[${index}][name]"]`).val(selectedText);
        });

        $('.unit-select').select2({
            placeholder: 'Select unit',
            tags: true,
            width: '100%'
        }).on('change', function() {
            const selectedText = $(this).find(':selected').text();
            const index = $(this).data('index');
            $(`input[name="ingredients[${index}][unit_name]"]`).val(selectedText);
        });
    }

    // ✅ Daily recipe toggle
    function toggleDailyRecipe() {
        if ($('#is_daily_recipe').is(':checked')) {
            $('#days-of-week-section').slideDown();
        } else {
            $('#days-of-week-section').slideUp();
            $('#daily_days').val([]).trigger('change');
        }
    }

    // ✅ Toggle unit value field
    function toggleUnitValueField() {
        if ($('#unit').val()) {
            $('#unit-value-wrapper').show();
        } else {
            $('#unit-value-wrapper').hide();
            $('#unit_value').val('');
        }
    }

    // ✅ Document ready
    $(document).ready(function() {
        // Add ingredient row
        $('#add-ingredient-row').on('click', function() {
            const newRow = generateIngredientRow();
            $('#ingredient-rows').append(newRow);
            initIngredientSelect2();
        });

        // Remove ingredient row
        $('#ingredient-rows').on('click', '.remove-ingredient-row', function() {
            $(this).closest('tr').remove();
        });

        // Update hidden name fields when selections change
        $('#ingredient-rows').on('change', '.ingredient-select', function() {
            const selectedText = $(this).find(':selected').text();
            const index = $(this).data('index');
            $(`input[name="ingredients[${index}][name]"]`).val(selectedText);
        });

        $('#ingredient-rows').on('change', '.unit-select', function() {
            const selectedText = $(this).find(':selected').text();
            const index = $(this).data('index');
            $(`input[name="ingredients[${index}][unit_name]"]`).val(selectedText);
        });

        // Init everything
        initSelect2();
        initIngredientSelect2();


        $('#parent_category').on('change', function() {
            const categoryId = $(this).val();
            $('#brand').empty().append('<option value="">Select Brand</option>');
            if (categoryId) {
                $.get(`/get-brands-by-category/${categoryId}`, function(data) {
                    $.each(data, function(_, brand) {
                        $('#brand').append(`<option value="${brand.id}">${brand.name}</option>`);
                    });
                }).fail(() => alert('Unable to load brands'));
            }
        });

        // Toggles
        $('#is_daily_recipe').on('change', toggleDailyRecipe);
        toggleDailyRecipe();

        $('#unit').on('change', toggleUnitValueField);
        toggleUnitValueField();
    });
</script>

@endsection