@extends('layouts.master')
@section('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('build/assets/libs/toastify-js/src/toastify.css') }}">
    <style>
        /* small styles for draggable list */
        .section-list { list-style: none; padding: 0; margin: 0; }
        .section-item { display:flex; align-items:center; justify-content:space-between; padding:12px; border:1px solid #eef2f6; border-radius:8px; background:#fff; margin-bottom:10px; cursor:grab; }
        .section-handle { margin-right:12px; cursor:grab; }
        .section-left { display:flex; align-items:center; gap:10px; }
        .section-title { font-weight:500; }
        .drag-hint { font-size:12px; color:#888; }
    </style>
@endsection

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}" />
<!-- Page Header (same as before) -->
<div class="d-flex align-items-center justify-content-between page-header-breadcrumb flex-wrap gap-2">
    <div>
        <nav>
            <ol class="breadcrumb mb-1">
                <li class="breadcrumb-item"><a href="javascript:void(0);">Home Page</a></li>
                <li class="breadcrumb-item active" aria-current="page">Categories</li>
            </ol>
        </nav>
        <h1 class="page-title fw-medium fs-18 mb-0">Categories</h1>
    </div>
</div>

<!-- New layout: left column for sections, right column for table -->
<div class="row">
    <!-- LEFT: sections (draggable) -->
    <div class="col-md-4">
        <x-ui.card :cardClass="'overflow-hidden'" :hr_line="false" title="Sections">
            <x-slot name="header">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <small class="drag-hint">Drag to reorder. Position changes will be saved automatically.</small>
                    </div>
                    <a href="{{ route('admin.home.cat.add') }}" class="btn btn-sm btn-primary">+ Add</a>
                </div>
            </x-slot>

            <div class="card-body">
                <ul id="section-list" class="section-list" data-update-url="{{ route('admin.home.cat.reorder') }}">
                    @foreach($sections as $section)
                        <li class="section-item" data-id="{{ $section->id }}">
                            <div class="section-left">
                                <span class="section-handle"><i class="ri-drag-move-2-line"></i></span>
                                <div>
                                    <div class="section-title">{{ $section->title }}</div>
                                    <div class="text-muted small">Theme: {{ $section->cat_theme ?? '-' }} · Order: <span class="order-num">{{ $section->row_order }}</span></div>
                                </div>
                            </div>
                            <div>
                                @if($section->status == 1)
                                    <span class="badge bg-success-transparent text-success">Active</span>
                                @else
                                    <span class="badge bg-danger-transparent text-danger">Inactive</span>
                                @endif
                            </div>
                        </li>
                    @endforeach
                </ul>
                <div class="text-center">
                    <button id="save-order-btn" class="btn btn-sm btn-primary d-none">Save order</button>
                </div>
            </div>
        </x-ui.card>
    </div>

    <!-- RIGHT: existing table (keep your DataTable card) -->
    <div class="col-md-8">
         <x-ui.card :cardClass="'overflow-hidden'" :hr_line="false" title="">
            <x-slot name="header">
                <div class="card-title d-flex gap-2">
                    <x-form.dropdown label="Bulk Actions" class="bulk-actions">
                        <li><a class="dropdown-item" href="#" id="enable" data-id="home_cat">Active</a></li>
                        <li><a class="dropdown-item" href="#" id="disable" data-id="home_cat">Disable</a></li>
                    </x-form.dropdown>
                    <div>
                        <input class="form-control" type="text" id="search" placeholder="Search Here" aria-label=".form-control-sm example">
                    </div>
                </div>
                <a href="{{route('admin.home.cat.add')}}" class="btn btn-primary btn-wave add-data">
                    <i class="ri-add-line me-1 align-middle"></i>
                    Add Category
                </a>
            </x-slot>

            @php
                $columns = [
                    ['checkbox' => true, 'class' => 'ps-4'],
                    ['label' => 'Title'],
                    ['label' => 'Theme'],
                    ['label' => 'Status'],
                    ['label' => 'Action'],
                ];
            @endphp

            <x-ui.table id="data_table" :columns="$columns"></x-ui.table>
        </x-ui.card>
    </div>
</div>
@endsection

@section('scripts')
    @include('layouts.components.common-script')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <!-- SortableJS CDN -->
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>

    @vite('resources/assets/js/modal.js')
    @vite('resources/assets/js/select2.js')

    <script>
    $(document).ready(function() {
        // Initialize your DataTableUtility and expose to window for reloads
        window.homeCatDataTable = new DataTableUtility('data_table', "{{ route('admin.home.cat.data') }}", {}, [
            { data: 'id', orderable: false, render: function(data){ return `<input class="form-check-input sub_chk" type="checkbox" data-id="${data}" value="${data}">`; } },
            { data: 'title' },
            { data: 'cat_theme' },
            { data: 'status', render: function(data){ return (data == 1) ? `<span class="badge fw-semibold badge-pill bg-success-transparent text-success fs-11">Active</span>` : `<span class="badge fw-semibold badge-pill bg-danger-transparent text-danger fs-11">Inactive</span>`; } },
            { data: null, orderable: false, render: function(data, type, row) {
                if(row.editable==0){
                    return `<a href="/admin/home-page/category/edit/${row.id}" class="btn btn-icon btn-sm btn-info-light"><i class="ri-edit-line"></i></a>
                            <a href="javascript:void(0);" id="${row.id}" data-id="home_cat" class="joblist-btn btn btn-icon btn-sm btn-primary2-light deleteItem"><i class="ri-delete-bin-line"></i></a>`;
                } else {
                    return `<a href="/admin/home-page/category/edit/${row.id}" class="btn btn-icon btn-sm btn-info-light"><i class="ri-edit-line"></i></a>`;
                }
            } }
        ]);
        window.homeCatDataTable.initialize();

        // make the left list sortable
        const list = document.getElementById('section-list');
        if(list){
            const updateUrl = list.dataset.updateUrl;

            const sortable = Sortable.create(list, {
                handle: '.section-handle',
                animation: 150,
                onEnd: function(evt) {
                    // collect new order of ids
                    const ids = Array.from(list.children).map(li => li.dataset.id);
                    // update UI order numbers immediately
                    list.querySelectorAll('.section-item').forEach((li, idx) => {
                        li.querySelector('.order-num').textContent = idx + 1;
                    });

                    AjaxUtil.post(updateUrl,{
                        order: ids,
                        _token: $('meta[name="csrf-token"]').attr('content')
                    }, function(response) {
                        if(response.status==201){
                            AjaxUtil.showToast(response.message, 'success');
                            try {
                                if (window.homeCatDataTable && typeof window.homeCatDataTable.reload === 'function') {
                                    window.homeCatDataTable.reload();
                                } else if ($.fn.DataTable && $('#data_table').hasClass('dataTable')) {
                                    $('#data_table').DataTable().ajax.reload(null, false);
                                } else {
                                    // fallback: reload whole page
                                    //location.reload();
                                }
                            } catch(e) { console.error(e); }
                        }else{
                            AjaxUtil.showToast(response.message, 'error');
                        }
                    }, function(xhr, status, error) {
                        console.error('Error:', error);
                        AjaxUtil.showToast('Unable to save.', 'error');
                    });
                }
            });
        }
    });
    </script>
@endsection