@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_create') }}</li>
            </ol>
        </div>
    </div>

    <div class="container-fluid">
        <div class="cat-edite-page max-width-box">
            <form action="{{ route('recipes.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <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">

                                <!-- Recipes Info Tab -->
                                <div role="tabpanel" class="tab-pane active" id="recipes_information">
                                    <fieldset>
                                        <legend>{{ trans('lang.recipes_create') }}</legend>

                                        {{-- Recipe Name --}}
                                        <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">
                                                <div class="form-text text-muted">{{ trans('lang.recipes_name_help') }}</div>
                                            </div>
                                        </div>

                                        {{-- Description --}}
                                        <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') }}</textarea>
                                                <div class="form-text text-muted">{{ trans('lang.category_description_help') }}</div>
                                            </div>
                                        </div>

                                        {{-- Store --}}
                                        <div class="form-group row width-100">
                                            <label class="col-3 control-label">{{ trans('lang.store') }}</label>
                                            <div class="col-7">
                                                <select 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') == $store->id ? 'selected' : '' }}>
                                                        {{ $store->name }}
                                                    </option>
                                                    @endforeach
                                                </select>
                                                <div class="form-text text-muted">{{ trans('lang.recipes_store_help') }}</div>
                                            </div>
                                        </div>

                                        {{--Chef --}}
                                        <div class="form-group row width-100">
                                            <label class="col-3 control-label">{{ trans('lang.chef') }}</label>
                                            <div class="col-7">
                                                <select 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') == $chef->id ? 'selected' : '' }}>
                                                        {{ $chef->name }}
                                                    </option>
                                                    @endforeach
                                                </select>
                                                <div class="form-text text-muted">{{ trans('lang.recipes_chef_help') }}</div>
                                            </div>
                                        </div>

                                        {{-- Category --}}
                                        <div class="form-group row width-100">
                                            <label class="col-3 control-label">{{ trans('lang.category') }}</label>
                                            <div class="col-7">
                                                <select 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.product_category_help') }}</div>
                                            </div>
                                        </div>

                                        {{-- Steps --}}
                                        <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"></textarea>
                                                <div class="form-text text-muted">{{ trans('lang.recipes_steps_help') }}</div>
                                            </div>
                                        </div>

                                        {{-- Price --}}
                                        <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">
                                                <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-7">
                                                <input type="file" id="recipe_video_thumbnails" name="recipe_video_thumbnails">
                                                <div id="uploading_image"></div>
                                                <div class="form-text text-muted w-50">
                                                    {{ trans('lang.recipe_thumbnail_help') }}
                                                </div>
                                            </div>
                                        </div>

                                        {{-- Recipe 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">
                                                <div id="uploding_video"></div>
                                                <div class="form-text text-muted w-50">
                                                    {{ trans('lang.recipes_video_help') }}
                                                </div>
                                            </div>
                                        </div>

                                        {{-- Checkboxes --}}
                                        <div class="form-check row width-100">
                                            <input type="checkbox" class="is_active" name="is_active" value="1" id="is_active">
                                            <label class="col-3 control-label" for="is_active">{{ trans('lang.is_active') }}</label>
                                        </div>
                                        <div class="form-check row width-100">
                                            <input type="checkbox" class="is_active" name="feature_item" value="1" id="feature_item">
                                            <label class="col-3 control-label" for="feature_item">{{ trans('lang.feature_item') }}</label>
                                        </div>
                                        <div class="form-check row width-100">
                                            <input type="checkbox" class="is_active" name="is_published" value="1" id="is_published">
                                            <label class="col-3 control-label" for="is_published">{{ trans('lang.publish') }}</label>
                                        </div>
                                        <div class="form-check row width-100">
                                            <input type="checkbox" class="is_active" name="is_daily" value="1" id="is_veg">
                                            <label class="col-3 control-label" for="is_veg">{{ trans('lang.is_daily') }}</label>
                                        </div>

                                        <div class="form-check row width-100" id="is_daily_recipe_1">
                                            <input type="checkbox" name="is_daily_recipe" id="is_daily_recipe" value="1"
                                                {{ old('is_daily_recipe', $recipe->is_daily_recipe ?? false) ? '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>

                                        {{-- Days of Week --}}
                                        <div class="form-group row width-100" id="days-of-week-section"
                                            style="{{ old('is_daily_recipe', $recipe->is_daily_recipe ?? false) ? '' : '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 size="7">
                                                    @php
                                                    $selectedDays = old('daily_days', explode(',', $recipe->daily_days ?? ''));
                                                    @endphp
                                                    @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>

                                <!-- Ingredients Tab -->
                                <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->ingredient_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>

                                <!-- Product Additional Tab -->
                                <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">
                                            </tbody>
                                        </table>

                                        <button type="button" class="btn btn-sm btn-success" id="add-additional-row">
                                            {{ trans('lang.add_additional') }}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- ✅ Save & Cancel Button -->
                        <div class="form-group col-12 text-center btm-btn mt-4">
                            <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>

</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 -->

<!-- ✅ TinyMCE -->
<script src="https://cdn.tiny.cloud/1/fcx3mdrpam9rpi7fp14grd82y1an2580njij315tlt4llv1g/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
<script>
    $(document).ready(function() {
        // Initialize Select2 for existing dropdowns
        $('.select2').select2({
            placeholder: "{{ trans('lang.select') }}",
            width: '100%'
        });

        // Add new row
        $('#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);

            // Re-initialize Select2 for all dropdowns
            $('.select2').select2({
                placeholder: "{{ trans('lang.select') }}",
                width: '100%'
            });
        });

        // Remove row
        $(document).on('click', '.remove-product-row', function() {
            $(this).closest('tr').remove();
        });
    });
</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>

<!-- ✅ Main App Logic -->
<script>
    const ingredients = @json($ingredients);
    const product_units = @json($product_units);
    const existingIngredients = @json($recipeIngredients);

    function generateIngredientRow(index = Date.now(), selected = {}) {
        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>`;
        });

        let unitOptions = '<option value="">Select</option>';
        product_units.forEach(unit => {
            const isSelected = selected.unit == unit.id ? 'selected' : '';
            unitOptions += `<option value="${unit.id}" ${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]" class="form-control unit-select" data-index="${index}">
                        ${unitOptions}
                    </select>
                </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>`;
    }

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

    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);
        });
    }

    function initUnitSelect2() {
        $('.unit-select').select2({
            placeholder: 'Select unit',
            width: '100%'
        });
    }

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

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

    $(document).ready(function() {
        if (existingIngredients.length > 0) {
            existingIngredients.forEach((item, i) => {
                const row = generateIngredientRow(Date.now() + i, item);
                $('#ingredient-rows').append(row);
            });
        }

        $('#add-ingredient-row').on('click', function() {
            const newRow = generateIngredientRow();
            $('#ingredient-rows').append(newRow);
            initIngredientSelect2();
            initUnitSelect2();
        });

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

        $('#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);
        });

        initSelect2();
        initIngredientSelect2();
        initUnitSelect2();

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

        $('#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'));
            }
        });

        $('#is_daily_recipe').on('change', toggleDailyRecipe);
        toggleDailyRecipe();
        $('#unit').on('change', toggleUnitValueField);
        toggleUnitValueField();

        $(document).on('select2:select', '.ingredient-select', function(e) {
            let data = e.params.data;
            let index = $(this).data('index');
            let $row = $(this).closest('tr');
            if (data.id === data.text) {
                $row.find('.ingredient-name').val(data.text);
            } else {
                let selectedName = $(this).find('option:selected').data('name') || data.text;
                $row.find('.ingredient-name').val(selectedName);
            }
        });
    });
</script>
@endsection