@extends('admin.admin_app')

@section('content')

<div class="content bg-gray-lighter">
    <div class="row items-push">
        <div class="col-sm-7">
            <h1 class="page-heading">Items in {{ $group->name }}</h1>
        </div>
        <div class="col-sm-5 text-right hidden-xs">
            <ol class="breadcrumb push-10-t">
                <li><a href="{{ url('admin/dashboard') }}">Dashboard</a></li>
                <li><a href="{{ url('admin/hotel/menu/'.$hotel_id) }}">Menu {{ $menu_id }}</a></li>
                <li class="active">Items List</li>
            </ol>
        </div>
    </div>
</div>

<div class="content">
    <div class="block">
        <div class="block-header">
            <a href="{{ url('admin/hotel/menu/'.$hotel_id) }}" class="btn btn-primary pull-right">
                <i class="fa fa-arrow-left"></i> Back to Groups
            </a>
           
        </div>

        <div class="block-content">

            {{-- Validation Errors --}}
            @if ($errors->any())
                <div class="alert alert-danger">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            {{-- Flash Message --}}
            @if (Session::has('flash_message'))
                <div class="alert alert-success">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    {{ Session::get('flash_message') }}
                </div>
            @endif

            {{-- Assign Groups Button --}}
            <div  class="d-flex justify-content-end w-100" style='margin:5px;width: 100%;justify-content: flex-end;display: flex;'>
               @php
                // Collect all item IDs from $menu_items
                $itemIds = $menu_items->map(function($menu_item) {
                    return $menu_item->item->id ?? null;
                })->filter()->values(); // remove nulls and reindex
            @endphp

            <button 
                class="assign_groups_btn btn btn-primary" 
                data-id="{{ $menu_id }}" 
                data-item-groups='@json($itemIds)'>
                Assign Items
            </button>
            </div>

            <h4>Group: {{ $group->name }}</h4>
            <p>{{ $group->description ?? 'No description available.' }}</p>

            {{-- Items Table --}}
            @if($menu_items->count())
                <table id="menuTable" class="table table-bordered table-hover table-header-bg table-striped">
                    <thead>
                        <tr>
                            <th>S.No</th>
                            <th>Item Name</th>
                            <th>Description</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($menu_items as $index => $menu_item)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>{{ $menu_item->item->name }}</td>
                                <td>{!! $menu_item->description ?? '-' !!}</td>
                                <td>
                                         @if($menu_item->status)
                                        <a href="{{ url('/menu/items_status/toggle-status/'.$menu_item->id.'/'.$hotel_id) }}" 
                                        class="badge bg-success text-white">Active</a>
                                    @else
                                        <a href="{{ url('/menu/items_status/toggle-status/'.$menu_item->id.'/'.$hotel_id)  }}" 
                                        class="badge bg-danger text-white">Inactive</a>
                                    @endif
                                </td>
                                <td>
               <button
                class="btn btn-xs btn-default edit_menu_item_btn"
                title="Edit Menu Item"
                data-id="{{ $menu_item->id }}">
                <i class="fa fa-pencil"></i>
            </button>
                               

                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @else
                <div class="alert alert-info">No items found in this group.</div>
            @endif
        </div>
    </div>
</div>

{{-- 🟢 Modal: Assign Item Groups --}}
<div class="modal fade" id="modal-assign-groups" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-popout">
        <div class="modal-content">
            <div class="modal-header bg-primary-dark">
                <h4 class="modal-title text-white">Assign Items</h4>
                <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                {!! Form::open(['url' => 'menu/items_group/save_menu_item', 'id' => 'assign_groups_form']) !!}
                    <input type="hidden" name="menu_id" id="assign_menu_id">

                    <div class="form-group">
                        <label>Search Items</label>
                        <input type="text" id="search_groups" class="form-control" placeholder="Search groups...">
                    </div>

                    <div class="form-group" id="groups_list" style="max-height: 250px; overflow-y: auto;">
                        @foreach($group->items as $item)
                            <div class="form-check mb-1">
                                <input type="checkbox" 
                                       name="item_id_array[]" 
                                       value="{{ $item->id }}" 
                                       class="form-check-input group_checkbox" 
                                       id="group{{ $item->id }}">
                                <label class="form-check-label" for="group{{ $item->id }}">{{ $item->name }}</label>
                            </div>
                        @endforeach
                    </div>

                    <div class="text-right mt-2">
                         <button type="submit" class="btn btn-primary">Save</button>
                              <button type='button' class="btn btn-success pull-right mr-2" id="add_item_btn">
                                    <i class="fa fa-plus"></i> Add Item
                                </button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Back</button>
                    </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
</div>

{{-- 🟢 Modal: Add/Edit Item --}}
<div class="modal fade" id="modal-add_item" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-popout">
        <div class="modal-content">
            <div class="modal-header bg-primary-dark">
                <h4 class="modal-title text-white">Add Item</h4>
                <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                {!! Form::open(['url' => 'menu/items_group/save_item', 'id' => 'item_form']) !!}
                    <input type="hidden" name="id" id="item_id">
                    <input type="hidden" name="menu_id" value="{{ $menu_id }}">
                     <input type="hidden" name="group_id" value="{{ $group->id }}">

                    <div class="form-group">
                        <label>Item Name</label>
                        <input type="text" class="form-control" name="name" id="item_name" required>
                    </div>

                    <div class="form-group">
                        <label>Description</label>
                        <textarea class="form-control" name="description" id="description" rows="3"></textarea>
                    </div>

                    <button type="submit" class="btn btn-primary">Save</button> 
                
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
</div>

{{-- 🟢 Modal: Edit Menu Item --}}
<div class="modal fade" id="modal-edit-menu-item" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-popout">
        <div class="modal-content">
            <div class="modal-header bg-primary-dark">
                <h4 class="modal-title text-white">Edit Menu Item</h4>
                <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                {!! Form::open(['url' => 'menu/items_group/update_menu_item', 'id' => 'edit_menu_item_form']) !!}
                    <input type="hidden" name="id" id="edit_menu_item_id">

                    <div class="form-group">
                        <label>Item Name</label>
                        <input type="text" class="form-control" id="edit_item_name" name="item_name" disabled>
                    </div>

                    <div class="form-group">
                        <label>Description</label>
                        <textarea class="form-control" name="description" id="edit_description" rows="3"></textarea>
                    </div>
                    
                        <div class="form-group">
                            <h3>Rate details</h3>
                            <div id="rateDetailsContainer">
                                 <div class="rate-row d-flex flex-row" style="display:flex;flex-direction:row;gap:5px;margin-bottom:10px;align-items: flex-end;">
                                    <div class="bottommargin my-custom-single-dropdown-container"
                                        data-save-url="{{ route('add.venueCategory') }}"
                                        data-model="RateType"
                                        data-field="name">

                                        <label>Type</label>
                                        <select name="menu_item_rate[id][]" class="form-control rate-type-dropdown">
                                            <option value="">--Select or Add Type--</option>
                                            @foreach($rateTypes as $val)
                                                <option value="{{ $val->id }}">{{ $val->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div>
                                        <label>Rate</label>
                                        <input type="number" class="form-control" name="menu_item_rate[rate][]" />
                                    </div>

                                    <div>
                                        <label>Note</label>
                                        <input type="text" class="form-control" name="menu_item_rate[note][]" />
                                    </div>

                                    
                                        <button type="button" class="btn btn-danger removeRateRow">X</button>
                                   
                                </div>
                            </div>

                            <button type="button" id="addMoreRateRow" class="btn btn-success mt-2">+ Add More</button>
                        </div>

        <!-- jQuery + Select2 -->
     
                    <div class="text-right">
                        <button type="submit" class="btn btn-primary">Update</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
</div>

   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
     const rateTypes = @json($rateTypes);
$(document).ready(function() {
    // 🟢 Add Item
    $('#add_item_btn').click(function() {
        $('#item_form')[0].reset();
        $('#modal-assign-groups').modal('hide');
        $('#item_id').val('');
        $('.modal-title').text('Add Item');
        $('#modal-add_item').modal('show');
    });

    // 🟢 Edit Item
    let dataRate ;
    // $(document).on('click', '.edit_item_btn', function() {
    //     var id = $(this).data('id');
    //     $.get('{{ url("menu/items_group/get_item") }}/' + id, function(data) {
    //         $('#item_id').val(data.id);
    //         $('#item_name').val(data.name);
    //         $('#description').val(data.description);
    //         dataRate= data.rates;
    //         $('.modal-title').text('Edit Item');
    //         $('#modal-add_item').modal('show');

    //     });
    //      console.log("----------------->>>>>>>.",dataRate)

    // });

    $(document).on('click', '.edit_item_btn', async function() {
    const id = $(this).data('id');
    let dataRate = [];

    try {
        const response = await fetch(`{{ url('menu/items_group/get_item') }}/${id}`);
        if (!response.ok) throw new Error('Network response was not ok');

        const data = await response.json();
        console.log("Fetched Data:", data);

        // Fill form fields
        $('#item_id').val(data.id);
        $('#item_name').val(data.name+"6383");
            if (data?.rates && data?.rates?.length > 0) {
                        // const rates = data.rates || [];

            // Store as JSON string
            $('#edit_rateDetailsContainer').val('hhjvjhvj');
                $('#rateDetailsContainer').append('<h3>jgjhgjhxbdsjcb</h3>')
                    // Show modal
        }
        $('#description').val(data.description);
        
        // Store rate data
        
        // dataRate = data.rates || [];
     
        $('.modal-title').text('Edit Item');
        $('#modal-add_item').modal('show');

        // ✅ Log after fetch completes
        console.log("----------------->>>>>>>.", dataRate);

    } catch (error) {
        console.error('Error fetching item data:', error);
    }
});

   // $(document).on('click', '.edit_item_btn', function() {
    // 🟢 Assign Groups
    // $(document).on('click', '.assign_groups_btn', function() {
    
    //     var menuId = $(this).data('id');
       
    //     var assigned = $(this).data('item-groups') || [];
    //     $('#assign_menu_id').val(menuId);
    //     $('.group_checkbox').prop('checked', false);
    //     assigned.forEach(id => $('#group' + id).prop('checked', true));
    //     $('#modal-assign-groups').modal('show');
    // });

    $(document).on('click', '.assign_groups_btn', function() {
    var menuId = $(this).data('id');
    var assigned = $(this).data('item-groups') || [];
    
    $('#assign_menu_id').val(menuId);

    var $list = $('#groups_list');
    var $checks = $list.find('.group_checkbox');

    // Uncheck all first
    $checks.prop('checked', false);

    // ✅ Separate selected and unselected
    var selected = [];
    var unselected = [];

    $checks.each(function() {
        var $wrapper = $(this).closest('.form-check');
        var id = $(this).val();
        if (assigned.includes(Number(id))) {
            $(this).prop('checked', true);
            selected.push($wrapper);
        } else {
            unselected.push($wrapper);
        }
    });

    // ✅ Reorder: selected ones first
    $list.empty().append(selected).append(unselected);

    $('#modal-assign-groups').modal('show');
});


    // 🔍 Search Groups
    $('#search_groups').on('keyup', function() {
        var val = $(this).val().toLowerCase();
        $('#groups_list .form-check').each(function() {
            $(this).toggle($(this).text().toLowerCase().includes(val));
        });
    });

    // 🟢 DataTable
    $('#menuTable').DataTable({
        pageLength: 10,
        ordering: true,
        searching: true,
        language: {
            searchPlaceholder: "Search Items...",
            search: "",
        },
        columnDefs: [{ orderable: false, targets: [4] }]
    });


    $(document).on('click', '.edit_menu_item_btn', function() {
    const id = $(this).data('id');

        $.get('{{ url("menu/items_group/get_menu_item") }}/' + id, function(data) {
            // assuming the API returns: { id, item: { name }, description, rate }
            $('#edit_menu_item_id').val(data.id);
            $('#edit_item_name').val(data.item?.name || '');
            $('#edit_description').val(data.description || '');
            $('#edit_rate').val(data.rate || '');
                   if (data.rates && data.rates.length > 0) {
                                $('#rateDetailsContainer').empty();
                            data.rates.forEach(function(rate) {
                                let optionsHtml ;//= `<option value="">--Select or Add Type--</option>`;

                                // rateTypes array must be defined globally
                                rateTypes.forEach(rt => {
                                    const selected = rate.rate_type_id == rt.id ? 'selected' : '';
                                    optionsHtml += `<option value="${rt.id}" ${selected}>${rt.name}</option>`;
                                });

                                let rateRow = `
                                    <div class="rate-row d-flex flex-row" style="display:flex;flex-direction:row;gap:5px;margin-bottom:10px;align-items: flex-end;">
                                        <div class="my-custom-single-dropdown-container">
                                            <label>Type</label>
                                            <select name="menu_item_rate[id][]" class="form-control rate-type-dropdown">
                                                    
                        ${optionsHtml}
                                        </select>
                            </div>

                            <div>
                                <label>Rate</label>
                                <input type="number" class="form-control" name="menu_item_rate[rate][]" value="${rate.rate}" />
                            </div>

                            <div>
                                <label>Note</label>
                                <input type="text" class="form-control" name="menu_item_rate[note][]" value="${rate.note ?? ''}" />
                            </div>

                          
                                <button type="button" class="btn btn-danger removeRateRow">X</button>
                          
                        </div>
                    `;

                    $('#rateDetailsContainer').append(rateRow);
                    //  initSelect2();sss
                      });
                   }
                    else {
                        // No rates found → add an empty row
                        $('#rateDetailsContainer').empty();
                        // addRateRow();
                        // initSelect2();

                    }

            $('#modal-edit-menu-item').modal('show');
        });
    });
});
</script>
<!-- make sure only ONE copy of jQuery is included in the page -->
<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>

<script>
$(function() {
    // --- CONFIG ---
    var MODAL_SELECTOR = '#modal-edit-menu-item'; // change if your modal ID is different
    var SAVE_URL_ATTR = 'data-save-url';
    var MODEL_ATTR = 'data-model';
    var FIELD_ATTR = 'data-field';

    // If inside bootstrap modal, avoid focus issues.
    if ($.fn.modal) {
        try {
            $.fn.modal.Constructor.prototype.enforceFocus = function() {};
        } catch (e) {
            // ignore if not available
            console.warn('Could not override enforceFocus:', e);
        }
    }

    // Initialize Select2 on a container (single row or full container)
    function initSelect2(container) {
        console.log('initSelect2 called for container:', container);

        container.find('.rate-type-dropdown').each(function() {
            var $sel = $(this);

            // Destroy previous select2 to avoid double-init issues
            if ($sel.hasClass('select2-hidden-accessible')) {
                try { $sel.select2('destroy'); } catch (e) { /* ignore */ }
            }

            $sel.select2({
                tags: true,
                placeholder: "--Select or Add Type--",
                width: '100%',
                dropdownParent: $(MODAL_SELECTOR).length ? $(MODAL_SELECTOR) : $(document.body),
                createTag: function(params) {
                    return {
                        id: 'new:' + params.term,
                        text: params.term,
                        newOption: true
                    };
                },
                templateResult: function(data) {
                    var $result = $("<span></span>").text(data.text || '');
                    if (data && data.newOption) $result.append(" <em>(Add New)</em>");
                    return $result;
                }
            });

            // Attach 'select2:select' per element (safe because we destroyed and re-init)
            $sel.off('select2:select.select2handler').on('select2:select.select2handler', function(e) {
                console.log('select2:select fired for element:', this, e.params && e.params.data);
                var data = e.params.data || {};   
                var $containerEl = $sel.closest('.my-custom-single-dropdown-container');
                var saveUrl = $containerEl.attr(SAVE_URL_ATTR) || $containerEl.data('save-url');
                var model = $containerEl.attr(MODEL_ATTR) || $containerEl.data('model');
                var field = $containerEl.attr(FIELD_ATTR) || $containerEl.data('field');
           console.log("----------------->>>>>>>>", e.params.data)
                // If it is a new option (our createTag used new: prefix and newOption true)
                if (data.newOption || (String(data.id || '').indexOf('new:') === 0)) {
                    if (!saveUrl) {
                        console.warn('No saveUrl on container to save new option');
                        return;
                    }

                    // Disable selection while saving
                    $sel.prop('disabled', true);

                    $.ajax({
                        url: saveUrl,
                        method: 'POST',
                       data: {
    [field]: data.text,
    model: model,
    // fieldName: field,
    name: e.params.data.text,
    category_name:e.params.data.text,
    _token: '{{ csrf_token() }}'
}
                    }).done(function(response) {
                        console.log('AJAX response:', response);
                        if (response && response.id) {
                            // Remove temporary option (value 'new:term')
                            $sel.find('option[value="' + data.id + '"]').remove();
                            // Add new option with DB id and select it
                            var newOption = new Option(response.name, response.id, true, true);
                            $sel.append(newOption).trigger('change'); // triggers change event
                        } else {
                            console.warn('Unexpected response format. Expected {id, name}. Got:', response);
                        }
                    }).fail(function(xhr) {
                        console.error('Failed to save new option:', xhr.responseText || xhr.statusText);
                        alert('Failed to add new type. See console for details.');
                    }).always(function() {
                        $sel.prop('disabled', false);
                    });
                }
            });

            // Also log when dropdown opens and closes for debug
            $sel.off('select2:open.openhandler').on('select2:open.openhandler', function() {
                console.log('select2:open on', this);
            });

            // No need to attach change here — we'll attach delegated handler below for dynamic elements
        });
    }

    // Delegated change handler (works for dynamic rows)
    $(document).off('change', '.rate-type-dropdown.changehandler').on('change', '.rate-type-dropdown.changehandler', function(e) {
        console.log('Delegated change event fired for', this, 'value:', $(this).val());
    });

    // Note: Select2 triggers the native 'change' event on the original <select>.
    // Ensure elements have the class 'changehandler' so delegated handler picks them up.
    // If you don't want that class, use '.rate-type-dropdown' in delegated selector.

    // Initialize existing rows at DOM ready
    initSelect2($('#rateDetailsContainer'));

    // When you append new rows, call initSelect2 on that new row (example for your add button)
    $('#addMoreRateRow').on('click', function() {
        var rowHtml = `<div class="rate-row d-flex flex-row" style="display:flex;flex-direction:row;gap:5px;margin-bottom:10px;">
                    <div class="bottommargin my-custom-single-dropdown-container"
                        data-save-url="{{ route('add.venueCategory') }}"
                        data-model="RateType"
                        data-field="name">

                        <label>Type</label>
                        <select name="menu_item_rate[id][]" class="form-control rate-type-dropdown">
                            <option value="">--Select or Add Type--</option>
                            @foreach($rateTypes as $val)
                                <option value="{{ $val->id }}">{{ $val->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label>Rate</label>
                        <input type="number" class="form-control" name="menu_item_rate[rate][]" />
                    </div>

                    <div>
                        <label>Note</label>
                        <input type="text" class="form-control" name="menu_item_rate[note][]" />
                    </div>

                    <div style="align-self:end;">
                        <button type="button" class="btn btn-danger removeRateRow">X</button>
                    </div>
                </div>
        `;
        var $row = $(rowHtml);
        $('#rateDetailsContainer').append($row);
        initSelect2($row);
    });

    // Remove row handler
    $(document).on('click', '.removeRateRow', function() {
        $(this).closest('.rate-row').remove();
    });

    // If you want to capture change without adding '.changehandler' class, you can also do:
    $(document).off('change', '.rate-type-dropdown').on('change', '.rate-type-dropdown', function(e) {
        console.log('Alternate delegated change for rate-type-dropdown:', this, $(this).val());
    });

});
</script>



{{-- ✅ JS Section --}}




@endsection