@extends('admin.layouts.app')
@section('panel')
    <div class="row">
        <div class="col-lg-12">
            <div class="card b-radius--10 ">
                <div class="card-body p-0">
                    <div class="table-responsive--sm table-responsive">
                        <table class="table table--light style--two custom-data-table" id="itemsTable">
                            <thead>
                                <tr>
                                    <th>@lang('Sort')</th>
                                    <th>@lang('Title')</th>
                                    <th>@lang('Priority')</th>
                                    <th>@lang('Status')</th>
                                    <th>@lang('Type')</th>
                                    <th>@lang('Default')</th>
                                    <th>@lang('Media Type')</th>
                                    <th>@lang('Logo')</th>
                                    <th>@lang('Icon')</th>
                                    <th>@lang('Created At')</th>
                                    <th>@lang('Action')</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($homepage as $type)
                                    <tr data-id="{{ $type->id }}">
                                        <td><i class="las la-grip-vertical" style="cursor: move;"></i></td>
                                        <td>{{ $type->title }}</td>
                                        <td>{{ $type->priority ?? 0 }}</td>
                                        <td>{{ $type->status == 1 ? 'Active' : 'InActive' }}</td>
                                        <td>{{ optional($type->type)->title ?: 'Default (No Type)' }}</td>
                                        <td>{{ $type->is_default ? 'Yes' : 'No' }}</td>
                                        <td>{{ strtoupper($type->hero_media_type ?? 'image') }}</td>
                                        <td>
                                            @if($type->hero_logo_light || $type->hero_logo_dark)
                                                <span class="badge badge--success">Configured</span>
                                            @else
                                                <span class="badge badge--dark">None</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($type->image)
                                                <img src="{{ $type->image }}" alt="icon" style="width: 38px; height: 38px; object-fit: cover; border-radius: 8px;">
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td>{{ showDateTime($type->created_at) }}</td>
                                        <td>
                                            <a href="{{ route('admin.homepage.items.edit', $type->id) }}" class="btn btn-sm btn--primary"><i class="las la-edit"></i></a>
                                            <a href="{{ route('admin.homepage.items.delete', $type->id) }}" class="btn btn-sm btn--danger"><i class="las la-trash"></i></a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td class="text-muted text-center" colspan="100%">{{ __($emptyMessage) }}</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
                @if ($homepage->hasPages())
                    <div class="card-footer py-4">
                        {{ paginateLinks($homepage) }}
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection

@push('breadcrumb-plugins')
    <a href="{{ route('admin.homepage.items.create') }}" class="btn btn-sm btn--primary "><i class="las la-plus"></i>@lang('Add New')</a>
@endpush

@push('script')
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const tbody = document.querySelector('#itemsTable tbody');
            if (!tbody) return;

            new Sortable(tbody, {
                animation: 150,
                handle: '.la-grip-vertical',
                onEnd: function () {
                    const order = Array.from(tbody.querySelectorAll('tr')).map((tr) => tr.dataset.id);

                    fetch("{{ route('admin.homepage.items.update-order') }}", {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({ order })
                    })
                    .then((response) => response.json())
                    .then((data) => {
                        if (data.status !== 'success') {
                            alert(data.message || 'Error saving order');
                        }
                    })
                    .catch(() => alert('Error connecting to server'));
                }
            });
        });
    </script>
@endpush