@include('vendorr.header')

<!-- MAIN-CONTENT -->
<div class="main-content app-content">
    <div class="main-container container-fluid">
        <div class="breadcrumb-header justify-content-between">
            <div class="my-auto">
                <h4 class="page-title">My Categories </h4>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                @if (session('success'))
                    <div class="alert alert-success">{{ session('success') }}</div>
                @endif

                @if ($subcategories->isEmpty())
                    <div class="alert alert-info">You don’t have any subcategories yet.</div>
                @else
                    <form method="POST" action="{{ route('user.subcategories.update_positions') }}">
                        @csrf

                        <div class="mb-3 text-end">
                            <button type="submit" class="btn btn-primary">Save Positions</button>
                        </div>

                        <div class="table-responsive">
                            <table class="table align-middle table-bordered table-hover">
                                <thead class="table-light">
                                    <tr>
                                        <th style="width: 60px;">#</th>
                                        <th>Subcategory</th>
                                        <th style="width: 160px;">Position</th>
                                        <th style="width: 140px;">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($subcategories as $index => $sub)
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td>
                                                <strong>{{ $sub->name }}</strong>
                                                @if (!empty($sub->description))
                                                    <div class="text-muted small">
                                                        {{ \Illuminate\Support\Str::limit($sub->description, 80) }}
                                                    </div>
                                                @endif
                                            </td>

                                            <td>
                                                <input type="number" name="positions[{{ $sub->id }}]"
                                                        class="text-center form-control form-control-sm js-position-input"
                                                        min="0"
                                                        value="{{ isset($sub->position) ? $sub->position : 0 }}">
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <div class="mt-3 text-end">
                            <button type="submit" class="btn btn-primary">Save Positions</button>
                        </div>
                    </form>
                @endif
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
    </div>
    <!-- /.col -->
    </section>
    @include('vendorr.footer')

    @section('scripts')
        <!-- INTERNAL SELECT2 JS -->
        <script src="{{ asset('build/assets/plugins/select2/js/select2.min.js') }}"></script>

        <!-- DATA TABLE JS-->
        <script src="{{ asset('build/assets/plugins/datatable/js/jquery.dataTables.min.js') }}"></script>
        <script src="{{ asset('build/assets/plugins/datatable/js/dataTables.bootstrap5.js') }}"></script>
        <script src="{{ asset('build/assets/plugins/datatable/js/dataTables.buttons.min.js') }}"></script>
        <script src="{{ asset('build/assets/plugins/datatable/js/buttons.bootstrap5.min.js') }}"></script>
        <script src="{{ asset('build/assets/plugins/datatable/js/jszip.min.js') }}"></script>
        <script src="{{ asset('build/assets/plugins/datatable/pdfmake/pdfmake.min.js') }}"></script>
        <script src="{{ asset('build/assets/plugins/datatable/pdfmake/vfs_fonts.js') }}"></script>
        <script src="{{ asset('build/assets/plugins/datatable/js/buttons.html5.min.js') }}"></script>
        <script src="{{ asset('build/assets/plugins/datatable/js/buttons.print.min.js') }}"></script>
        <script src="{{ asset('build/assets/plugins/datatable/js/buttons.colVis.min.js') }}"></script>
        <script src="{{ asset('build/assets/plugins/datatable/dataTables.responsive.min.js') }}"></script>
        <script src="{{ asset('build/assets/plugins/datatable/responsive.bootstrap5.min.js') }}"></script>

        <!--INTERNAL DATATABLE JS -->
        @vite('resources/assets/js/table-data.js')

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // increment/decrement buttons
                document.querySelectorAll('.js-increment').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const input = this.closest('.input-group').querySelector('.js-position-input');
                        input.value = Math.max(0, parseInt(input.value || 0) + 1);
                    });
                });
                document.querySelectorAll('.js-decrement').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const input = this.closest('.input-group').querySelector('.js-position-input');
                        input.value = Math.max(0, parseInt(input.value || 0) - 1);
                    });
                });

                // Optional: Save single row via AJAX (requires Axios)
                document.querySelectorAll('.js-save-single').forEach(btn => {
                    btn.addEventListener('click', async function() {
                        const id = this.dataset.id;
                        const row = this.closest('tr');
                        const input = row.querySelector('.js-position-input');
                        const position = parseInt(input.value || 0);

                        // minimal confirmation
                        this.disabled = true;
                        this.textContent = 'Saving...';

                        try {
                            const token = document.querySelector('meta[name="csrf-token"]')
                                .getAttribute('content');
                            const res = await fetch(
                                "{{ route('user.subcategories.update_positions') }}", {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'Accept': 'application/json',
                                        'X-CSRF-TOKEN': token
                                    },
                                    body: JSON.stringify({
                                        positions: {
                                            [id]: position
                                        }
                                    })
                                });

                            if (!res.ok) throw new Error('Network error');

                            // simple UX - reload to reflect flash message or new ordering
                            window.location.reload();
                        } catch (err) {
                            alert('Failed to save position. Try again.');
                            console.error(err);
                            this.disabled = false;
                            this.textContent = 'Save';
                        }
                    });
                });
            });
        </script>
    @endsection