@extends('admin.layouts.app')

@section('title', 'Kategoriler')
@section('header', 'Kategoriler')

@section('content')
<div class="card">
    <div class="card-header">
        <div class="card-tools">
            <a href="{{ route('admin.categories.create') }}" class="btn btn-primary btn-sm">
                <i class="fas fa-plus mr-1"></i> Yeni Kategori
            </a>
        </div>
    </div>
    <div class="card-body table-responsive p-0">
        <table class="table table-hover text-nowrap">
            <thead>
                <tr>
                    <th>Kategori</th>
                    <th>Ürün Sayısı</th>
                    <th>Tip</th>
                    <th>Durum</th>
                    <th style="width: 120px"></th>
                </tr>
            </thead>
            <tbody id="sortable">
                @forelse($categories as $category)
                    <tr data-id="{{ $category->id }}" class="{{ !App\View\Components\Helper::isMobile() ? 'cursor-move' : '' }}">
                        <td>
                            <div class="d-flex align-items-center">
                                <div>
                                    <div class="font-weight-bold">{{ $category->name }}</div>
                                    @if($category->description)
                                        <small class="text-muted">{{ Str::limit(strip_tags($category->description), 50) }}</small>
                                    @endif
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="badge badge-info">
                                {{ $category->type === 'online' ? $category->products_count : $category->bakery_products_count }} ürün
                            </span>
                        </td>
                        <td>
                            <span class="badge badge-{{ $category->type === 'online' ? 'primary' : 'info' }}">
                                {{ $category->type === 'online' ? 'Online Menü' : 'Pastane Menüsü' }}
                            </span>
                        </td>
                        <td>
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input"
                                    id="status_{{ $category->id }}"
                                    {{ $category->is_active ? 'checked' : '' }}
                                    data-url="{{ route('admin.categories.toggle-status', $category) }}">
                                <label class="custom-control-label" for="status_{{ $category->id }}"></label>
                            </div>
                        </td>
                        <td>
                            <div class="d-flex justify-content-end gap-2">
                                <a href="{{ route('admin.categories.edit', $category) }}"
                                   class="btn btn-info btn-sm mr-2">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <form action="{{ route('admin.categories.destroy', $category) }}"
                                      method="POST"
                                      class="d-inline delete-form"
                                      id="delete-form-{{ $category->id }}">
                                    @csrf
                                    @method('DELETE')
                                    <button type="button" class="btn btn-danger btn-sm"
                                            onclick="confirmDelete('delete-form-{{ $category->id }}')">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="text-center">Henüz kategori bulunmuyor</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

@push('styles')
<style>
    .cursor-move {
        cursor: move;
    }
    tr.sortable-ghost {
        background-color: #f8f9fa;
        opacity: 0.5;
    }
    .gap-2 > * {
        margin-right: 0.5rem;
    }
    .gap-2 > *:last-child {
        margin-right: 0;
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    @if(!App\View\Components\Helper::isMobile())
    // Initialize Sortable
    const sortable = Sortable.create(document.getElementById('sortable'), {
        animation: 150,
        ghostClass: 'sortable-ghost',
        onEnd: function() {
            const rows = document.querySelectorAll('#sortable tr');
            const order = Array.from(rows).map((row, index) => ({
                id: row.dataset.id,
                order: index + 1
            }));

            fetch('{{ route("admin.categories.update-order-bulk") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ order })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    toastr.success('Sıralama güncellendi');
                } else {
                    toastr.error('Sıralama güncellenirken bir hata oluştu');
                }
            })
            .catch(error => {
                toastr.error('Sıralama güncellenirken bir hata oluştu');
            });
        }
    });
    @endif

    // Handle status toggle
    document.querySelectorAll('.custom-control-input').forEach(function(checkbox) {
        checkbox.addEventListener('change', function() {
            const url = this.dataset.url;
            const checked = this.checked;

            fetch(url, {
                method: 'PATCH',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    toastr.success('Durum güncellendi');
                } else {
                    this.checked = !checked;
                    toastr.error('Durum güncellenirken bir hata oluştu');
                }
            })
            .catch(() => {
                this.checked = !checked;
                toastr.error('Durum güncellenirken bir hata oluştu');
            });
        });
    });
});
</script>
@endpush
@endsection