@extends('layouts.app')

@section('content')

<style>
    .active-group {
        outline: 2px solid #28a745;
        background-color: #e6ffe6 !important;
    }
</style>

    <div class="page-wrapper">
        <div class="row page-titles">

            <div class="col-md-5 align-self-center">

                <h3 class="text-themecolor">Sections Manage</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 active">Sections Manage</li>
                </ol>
            </div>

            <div>

            </div>

        </div>
        <div class="container-fluid">
            <div class="cat-edite-page max-width-box">
                <form action="{{ route('category.page.put') }}" 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="#section_manage" aria-controls="description" role="tab"
                                        data-toggle="tab" class="nav-link active">{{ trans('lang.section_manage') }}</a>
                                </li>  --}}
                                <li class="nav-item">
                                    <a class="nav-link {{ $activeTab == 'discover' ? 'active' : '' }}"
                                        href="{{ route('category.page', ['tab' => 'discover']) }}">
                                        Discover
                                    </a>
                                </li>

                                <li class="nav-item">
                                    <a class="nav-link {{ $activeTab == 'shop' ? 'active' : '' }}"
                                        href="{{ route('category.page', ['tab' => 'shop']) }}">
                                        Shop
                                    </a>
                                </li>
                                {{-- <li role="presentation" class="nav-item">
                                <a href="#review_attributes" aria-controls="review_attributes" role="tab"
                                   data-toggle="tab"
                                   class="nav-link">{{trans('lang.reviewattribute_plural')}}</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')  --}}
                            @if ($errors->sectionForm->any())
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach ($errors->sectionForm->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            <div class="row restaurant_payout_create" role="tabpanel">

                                <div class="restaurant_payout_create-inner tab-content">
                                    <div role="tabpanel" class="tab-pane active" id="category_information">
                                        <fieldset>
                                            {{--  <legend>{{ trans('lang.sections') }}</legend>  --}}

                                            <div class="card-header">
                                                <ul class="nav nav-tabs align-items-end card-header-tabs w-100">
                                                    <li class="nav-item">
                                                        <a class="nav-link active" href="{!! url()->current() !!}"><i
                                                                class="fa fa-list mr-2"></i>{{ trans('lang.sections') }}</a>
                                                    </li>
                                                    <li class="nav-item">
                                                        <a class="nav-link" href="{!! route('sections.create') !!}"><i
                                                                class="fa fa-plus mr-2"></i>{{ trans('lang.create_section') }}</a>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="form-group">
                                                <label>Section Group</label>

                                                <div class="row">
                                                    <div class="col-md-10">
                                                        <input type="text" id="section_group_name" class="form-control"
                                                            placeholder="Group name (e.g. Top Picks)">
                                                    </div>

                                                    <div class="col-md-2">
                                                        <button type="button" class="btn btn-primary w-100"
                                                            id="addSectionGroup">
                                                            Add Group
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="form-group mt-5">
                                                <label>Select Section</label>
                                                <select id="section_select" class="form-control">
                                                    <option value="">-- Select Section --</option>
                                                    @foreach ($sections as $section)
                                                        <option value="{{ $section->id }}"
                                                            data-type="{{ strtolower($section->section_type) }}"
                                                            data-name="{{ strtolower(str_replace(' ', '_', $section->title)) }}">
                                                            {{ $section->title }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="form-group mt-4 d-none" id="typeContainer">
                                                <label id="typeLabel"></label>

                                                <select id="reference_ids" class="form-control" multiple
                                                    name="reference_ids[]">
                                                </select>

                                                <small class="text-muted">You can select multiple items</small>
                                            </div>
                                            <!-- Brand list container -->
                                            <div class="mb-4" id="brandList" style="display:none;">
                                                <label for="">Brands List</label>
                                                <ul id="brandSortable" class="list-group"></ul>
                                            </div>

                                            <!-- hidden input to store order -->
                                            <input type="hidden" name="brand_order" id="brandOrder">

                                            <!-- Store list container -->
                                            <div class="mb-4" id="storeList" style="display:none;">
                                                <label for="">Stores List</label>
                                                <ul id="storeSortable" class="list-group"></ul>
                                            </div>

                                            <!-- hidden input to store order -->
                                            <input type="hidden" name="store_order" id="storeOrder">


                                            <input type="hidden" name="category_id" value="{{ $category->id }}">
                                            <h3><strong>Sections</strong></h3>
                                            <table class="table mt-4">
                                                <thead>
                                                    <tr>
                                                        <th>Section Name</th>
                                                        <th>Action</th>
                                                        <th>Status</th>
                                                    </tr>
                                                </thead>

                                                <tbody id="groupsContainer">
                                                    @foreach ($categorySections as $groupName => $sections)
                                                        {{-- group header --}}
                                                        <tr class="table-secondary group-header" data-group-name="{{ $groupName }}"
                                                            data-group-key="{{ Str::slug($groupName) }}">

                                                            <td colspan="3">
                                                                <div
                                                                    class="d-flex justify-content-between align-items-center">

                                                                    <strong>{{ $groupName }}</strong>

                                                                    @if (!empty($sections->first()->group_icon))
                                                                        <img src="{{ asset('storage/' . $sections->first()->group_icon) }}"
                                                                            alt="Group Icon"
                                                                            style="width:30px;height:30px;margin-right:8px;">
                                                                    @endif

                                                                    <div>
                                                                        <input type="hidden"
                                                                            name="groups[{{ Str::slug($groupName) }}][name]"
                                                                            value="{{ $groupName }}">

                                                                        <button type="button"
                                                                            class="btn btn-danger btn-sm remove-group"
                                                                            data-group-key="{{ Str::slug($groupName) }}"
                                                                            title="Remove group">
                                                                            Remove Group
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                            </td>
                                                        </tr>

                                                        {{-- group sections --}}
                                                        <tr>
                                                            <td colspan="3" class="p-0">
                                                                <table class="table mb-0">
                                                                    <tbody id="sortable_{{ Str::slug($groupName) }}"
                                                                        data-group-key="{{ Str::slug($groupName) }}">

                                                                        @foreach ($sections as $row)
                                                                            <tr
                                                                                id="{{ Str::slug($groupName) }}_section_{{ $row->section_id }}">
                                                                                <td style="cursor:move">
                                                                                    <i class="fa fa-bars mr-2"></i>
                                                                                    {{ $row->section_name }}


                                                                                    <input type="hidden"
                                                                                        name="groups[{{ Str::slug($groupName) }}][sections][{{ $row->section_id }}][id]"
                                                                                        value="{{ $row->section_id }}">

                                                                                    <input type="hidden"
                                                                                        class="display-order"
                                                                                        name="groups[{{ Str::slug($groupName) }}][sections][{{ $row->section_id }}][order]"
                                                                                        value="{{ $row->display_order }}">
                                                                                </td>

                                                                                <td>
                                                                                    <a href="{{ route('sections.edit', $row->section_id) }}"
                                                                                        class="btn btn-primary btn-sm"
                                                                                        title="Edit Section"
                                                                                        data-section-id="{{ $row->section_id }}"
                                                                                        data-section-name="{{ $row->section_name }}"
                                                                                        target="_blank">
                                                                                        <i class="fa fa-pencil"></i>
                                                                                    </a>
                                                                                    <button type="button"
                                                                                        class="btn btn-info btn-sm view-section"
                                                                                        title="View selected items"
                                                                                        data-section-id="{{ $row->section_id }}"
                                                                                        data-section-name="{{ $row->section_name }}">
                                                                                        <i class="fa fa-eye"></i>
                                                                                    </button>
                                                                                    <button type="button"
                                                                                        class="btn btn-danger btn-sm remove-row"
                                                                                        data-group-key="{{ Str::slug($groupName) }}"
                                                                                        data-section-id="{{ $row->section_id }}">
                                                                                        X
                                                                                    </button>
                                                                                </td>

                                                                                <td>
                                                                                    <label class="switch">
                                                                                        <input type="checkbox"
                                                                                            name="groups[{{ Str::slug($groupName) }}][sections][{{ $row->section_id }}][status]"
                                                                                            {{ $row->status ? 'checked' : '' }}>
                                                                                        <span class="slider"></span>
                                                                                    </label>
                                                                                </td>
                                                                            </tr>
                                                                        @endforeach

                                                                    </tbody>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                    <!-- groups will be injected here -->
                                                </tbody>

                                                {{-- <tbody id="sortableSections">

                                                    @foreach ($categorySections as $row)
                                                        <tr id="row_{{ $row->section_id }}">
                                                            <td style="cursor:move">
                                                                <i class="fa fa-bars mr-2"></i>
                                                                {{ $row->section_name }}

                                                                <input type="hidden"
                                                                    name="section_id[{{ $row->section_id }}]"
                                                                    value="{{ $row->section_id }}">


                                                                <input type="hidden"
                                                                    name="display_order[{{ $row->section_id }}]"
                                                                    value="{{ $row->display_order }}"
                                                                    class="display-order">
                                                            </td>

                                                            <td>
                                                                <a href="{{ route('sections.edit', $row->section_id) }}"
                                                                    class="btn btn-primary btn-sm" title="Edit Section"
                                                                    data-section-id="{{ $row->section_id }}"
                                                                    data-section-name="{{ $row->section_name }}"
                                                                    target="_blank">
                                                                    <i class="fa fa-pencil"></i>
                                                                </a>
                                                                <button type="button"
                                                                    class="btn btn-info btn-sm view-section"
                                                                    title="View selected items"
                                                                    data-section-id="{{ $row->section_id }}"
                                                                    data-section-name="{{ $row->section_name }}">
                                                                    <i class="fa fa-eye"></i>
                                                                </button>
                                                                <button type="button"
                                                                    class="btn btn-danger btn-sm remove-row"
                                                                    data-id="{{ $row->section_id }}">
                                                                    X
                                                                </button>
                                                            </td>

                                                            <td>
                                                                <label class="switch">
                                                                    <input type="checkbox"
                                                                        name="status[{{ $row->section_id }}]"
                                                                        {{ $row->status ? 'checked' : '' }}>
                                                                    <span class="slider"></span>
                                                                </label>
                                                            </td>
                                                        </tr>
                                                    @endforeach

                                                </tbody> --}}
                                            </table>
                                            <div id="sectionItemsContainer"></div>

                                        </fieldset>
                                    </div>

                                    {{-- <div role="tabpanel" class="tab-pane" id="review_attributes">

                                </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('categories') !!}" class="btn btn-default"><i
                                    class="fa fa-undo"></i>{{ trans('lang.cancel') }}</a>
                        </div>

                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="sectionViewModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">
                        Section: <span id="modalSectionName"></span>
                    </h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <div class="modal-body">
                    <ul class="list-group" id="quadrantList">
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        Cancel
                    </button>

                    <button type="button" class="btn btn-primary" id="updateSectionItems">
                        Update
                    </button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.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>


    <script>
        $(document).ready(function() {

            let groupCounter = 0;
            let currentGroupKey = null;

            const sectionMappings = @json($sectionMappings);

            /* =========================
               ADD SECTION GROUP
            ========================== */
            // $('#addSectionGroup').on('click', function () {

            //     let groupName = $('#section_group_name').val().trim();

            //     if (!groupName) {
            //         alert('Please enter section group name');
            //         return;
            //     }

            //     // prevent duplicate group names
            //     if ($(`[data-group-name="${groupName}"]`).length) {
            //         alert('Group already exists');
            //         return;
            //     }

            //     groupCounter++;
            //     currentGroupKey = 'group_' + groupCounter;

            //     let groupHtml = `
        //         <!-- GROUP HEADER -->
        //         <tr class="table-secondary"
        //             data-group-key="${currentGroupKey}"
        //             data-group-name="${groupName}">
        //             <td colspan="3">
        //                 <strong>${groupName}</strong>

        //                 <input type="hidden"
        //                     name="groups[${currentGroupKey}][name]"
        //                     value="${groupName}">
        //             </td>
        //         </tr>

        //         <!-- GROUP SECTIONS CONTAINER -->
        //         <tr>
        //             <td colspan="3" class="p-0">
        //                 <table class="table mb-0">
        //                     <tbody id="sortable_${currentGroupKey}"
        //                         data-group-key="${currentGroupKey}">
        //                     </tbody>
        //                 </table>
        //             </td>
        //         </tr>
        //     `;

            //     $('#groupsContainer').append(groupHtml);
            //     $('#section_group_name').val('');

            //     initSortable(currentGroupKey);
            // });

            // $('#addSectionGroup').on('click', function () {

            //     let groupName = $('#section_group_name').val().trim();
            //     let groupIconInput = document.getElementById('section_group_icon');

            //     if (!groupName) {
            //         alert('Please enter section group name');
            //         return;
            //     }

            //     let groupKey = 'group_' + Date.now(); // unique & safe
            //     currentGroupKey = groupKey;

            //     let iconInputHtml = '';

            //     if (groupIconInput.files.length > 0) {
            //         iconInputHtml = `
        //             <input type="file"
        //                 name="groups[${groupKey}][icon]"
        //                 class="d-none group-icon-input"
        //                 data-group-key="${groupKey}">
        //         `;
            //     }

            //     let groupHtml = `
        //         <tr class="table-secondary"
        //             data-group-key="${groupKey}">

        //             <td colspan="3">
        //                 <div class="d-flex justify-content-between align-items-center w-100">
        //                     <div class="d-flex align-items-center">
        //                         <strong>${groupName}</strong>
        //                     </div>

        //                     <div>
        //                         <input type="hidden"
        //                             name="groups[${groupKey}][name]"
        //                             value="${groupName}">

        //                         ${iconInputHtml}

        //                         <button type="button"
        //                             class="btn btn-danger btn-sm remove-group"
        //                             data-group-key="${groupKey}">
        //                             Remove Group
        //                         </button>
        //                     </div>
        //                 </div>
        //             </td>
        //         </tr>

        //         <tr>
        //             <td colspan="3" class="p-0">
        //                 <table class="table mb-0">
        //                     <tbody id="sortable_${groupKey}"
        //                         data-group-key="${groupKey}">
        //                     </tbody>
        //                 </table>
        //             </td>
        //         </tr>
        //     `;

            //     $('#groupsContainer').append(groupHtml);

            //     // 🔥 copy uploaded file into hidden input
            //     if (groupIconInput.files.length > 0) {
            //         let hiddenFileInput = $(`.group-icon-input[data-group-key="${groupKey}"]`)[0];
            //         hiddenFileInput.files = groupIconInput.files;
            //     }

            //     // reset fields
            //     $('#section_group_name').val('');
            //     $('#section_group_icon').val('');

            //     initSortable(groupKey);
            // });

            $('#addSectionGroup').on('click', function() {

                let groupName = $('#section_group_name').val().trim();
                if (!groupName) return alert('Enter group name');

                let groupKey = 'group_' + Date.now();

                let html = `
                    <tr class="table-secondary">
                        <td colspan="3">
                        <div class="d-flex justify-content-between align-items-center w-100">
                            <strong>${groupName}</strong>
                            <div>
                            <input type="hidden"
                                name="groups[${groupKey}][name]"
                                value="${groupName}">

                            <input type="file"
                                name="groups[${groupKey}][icon]"
                                accept="image/*">

                            <button type="button"
                                class="btn btn-danger btn-sm remove-group">
                                Remove Group
                            </button>
                            </div>
                        </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                        <table class="table mb-0">
                            <tbody id="sortable_${groupKey}"></tbody>
                        </table>
                        </td>
                    </tr>
                `;

                $('#groupsContainer').append(html);
                $('#section_group_name').val('');

                currentGroupKey = groupKey;

                // visual highlight (optional but recommended)
                $('.group-header').removeClass('active-group');
                $(`[data-group-key="${groupKey}"]`).addClass('active-group');

            });

            $(document).on('click', '.group-header', function () {
                currentGroupKey = $(this).data('group-key');

                // visual feedback
                $('.group-header').removeClass('active-group');
                $(this).addClass('active-group');
            });


            $(document).on('click', '.view-section', function() {

                let sectionId = $(this).data('section-id');
                let sectionName = $(this).data('section-name');

                if (!sectionId) {
                    console.error('Section ID missing on view button', this);
                    return;
                }

                $('#modalSectionName').text(sectionName || 'Section');
                $('#quadrantList').empty();

                if (sectionMappings[sectionId]) {
                    sectionMappings[sectionId].forEach(item => {
                        let icon = item.reference_type === 'brand' ?
                            'fa-tag' :
                            'fa-th-large';

                        $('#quadrantList').append(`
                    <li class="list-group-item d-flex align-items-center justify-content-between"
                        data-id="${item.reference_id}"
                        data-section-id="${sectionId}">
                        <div>
                            <i class="fa ${icon} text-success me-2"></i>
                            ${item.item_name}
                            <span class="badge bg-light text-dark ms-2">
                                ${item.reference_type}
                            </span>
                        </div>
                    </li>
                `);
                    });
                } else {
                    $('#quadrantList').append(`
                <li class="list-group-item text-muted">
                    No items selected
                </li>
            `);
                }

                $('#sectionViewModal').modal('show');
            });



            /* =========================
               SECTION SELECT
            ========================== */
            $('#section_select').on('change', function() {

                if (!currentGroupKey) {
                    alert('Please select or create a Section Group first');
                    $(this).val('');
                    return;
                }

                if (!currentGroupKey) {
                    alert('Please create a Section Group first');
                    $(this).val('');
                    return;
                }

                let sectionId = $(this).val();
                let sectionName = $(this).find(':selected').text();

                if (!sectionId) return;

                let tbody = $(`#sortable_${currentGroupKey}`);

                if (!tbody.length) {
                    alert('Invalid group selected');
                    return;
                }

                let rowId = `${currentGroupKey}_section_${sectionId}`;

                // prevent duplicate section inside same group
                if ($('#' + rowId).length) {
                    alert('Section already added in this group');
                    return;
                }

                let order = $(`#sortable_${currentGroupKey} tr`).length + 1;

                let row = `
            <tr id="${rowId}">
                <td style="cursor:move; padding-left:30px;">
                    <i class="fa fa-bars mr-2"></i> ${sectionName}

                    <input type="hidden"
                        name="groups[${currentGroupKey}][sections][${sectionId}][id]"
                        value="${sectionId}">

                    <input type="hidden"
                        class="display-order"
                        name="groups[${currentGroupKey}][sections][${sectionId}][order]"
                        value="${order}">
                </td>

                <td>
                    <button type="button"
                            class="btn btn-danger btn-sm remove-row"
                            data-group-key="${currentGroupKey}"
                            data-section-id="${sectionId}">
                        X
                    </button>
                </td>

                <td>
                    <label class="switch">
                        <input type="checkbox"
                            name="groups[${currentGroupKey}][sections][${sectionId}][status]"
                            checked>
                        <span class="slider"></span>
                    </label>
                </td>
            </tr>
        `;

                // $(`#sortable_${currentGroupKey}`).append(row);
                tbody.append(row);
            });


            /* =========================
               REMOVE SECTION
            ========================== */
            $(document).on('click', '.remove-row', function() {

                if (!confirm('Are you sure you want to remove this section?')) return;

                let groupKey = $(this).data('group-key');
                let sectionId = $(this).data('section-id');

                $(`#${groupKey}_section_${sectionId}`).remove();
                updateOrder(groupKey);
            });

            $(document).on('click', '.remove-group', function() {

                if (!confirm('Are you sure you want to remove this entire section group?')) {
                    return;
                }

                // group header row
                let $groupHeaderRow = $(this).closest('tr');

                // the row that contains the inner table (sections)
                let $groupSectionsRow = $groupHeaderRow.next('tr');

                // remove both
                $groupHeaderRow.remove();
                $groupSectionsRow.remove();

                // reset active group if this was the active one
                let groupKey = $(this).data('group-key');
                if (typeof currentGroupKey !== 'undefined' && currentGroupKey === groupKey) {
                    currentGroupKey = null;
                }
            });


            /* =========================
               SORTABLE PER GROUP
            ========================== */
            function initSortable(groupKey) {
                $(`#sortable_${groupKey}`).sortable({
                    update: function() {
                        updateOrder(groupKey);
                    }
                });
            }

            function updateOrder(groupKey) {
                let i = 1;
                $(`#sortable_${groupKey} .display-order`).each(function() {
                    $(this).val(i++);
                });
            }

            $('[data-group-key]').each(function() {
                let groupKey = $(this).data('group-key');
                initSortable(groupKey);
                currentGroupKey = groupKey; // last group active
            });

        });
    </script>
@endsection