@extends('admin.layouts.app')

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

@section('content')
<div class="card">
    <div class="card-header">
        <div class="card-tools">
            <a href="{{ route('admin.sliders.create') }}" class="btn btn-primary btn-sm">
                <i class="fas fa-plus mr-1"></i> Yeni Slider
            </a>
        </div>
    </div>

    <div class="card-body table-responsive p-0">
        <table class="table table-hover text-nowrap">
            <thead>
                <tr>
                    <th>Başlık</th>
                    <th>Durum</th>
                    <th style="width: 150px"></th>
                </tr>
            </thead>
            <tbody id="sortable">
                @forelse($sliders as $slider)
                    <tr data-id="{{ $slider->id }}" class="{{ !App\View\Components\Helper::isMobile() ? 'cursor-move' : '' }}">
                        <td>
                            <div class="d-flex flex-column">
                                <div class="font-weight-bold">{{ $slider->title }}</div>
                                @if($slider->description)
                                    <div class="text-muted">{{ Str::limit(strip_tags($slider->description), 50) }}</div>
                                @endif
                                @if($slider->link_url)
                                    <a href="{{ $slider->link_url }}" target="_blank" class="text-primary">
                                        {{ $slider->link_text ?? 'Bağlantıyı Görüntüle' }}
                                    </a>
                                @endif
                            </div>
                        </td>
                        <td>
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input"
                                       id="status_{{ $slider->id }}"
                                       {{ $slider->is_active ? 'checked' : '' }}
                                       data-url="{{ route('admin.sliders.toggle-status', $slider) }}">
                                <label class="custom-control-label" for="status_{{ $slider->id }}"></label>
                            </div>
                        </td>
                        <td>
                            <div class="d-flex justify-content-end gap-2">
                                <a href="{{ route('admin.sliders.edit', $slider) }}"
                                   class="btn btn-info btn-sm mr-2">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <form action="{{ route('admin.sliders.destroy', $slider) }}"
                                      method="POST"
                                      class="d-inline delete-form"
                                      id="delete-form-{{ $slider->id }}">
                                    @csrf
                                    @method('DELETE')
                                    <button type="button" class="btn btn-danger btn-sm"
                                            onclick="confirmDelete('delete-form-{{ $slider->id }}', 'Bu slider\'ı silmek istediğinize emin misiniz?', 'Bu işlem geri alınamaz!')">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="text-center">Henüz slider bulunmuyor</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($sliders->hasPages())
        <div class="card-footer clearfix">
            <div class="float-right">
                {{ $sliders->onEachSide(1)->links('admin.layouts.pagination') }}
            </div>
            <div class="float-left text-muted">
                {{ $sliders->total() }} sonuçtan {{ $sliders->firstItem() }} - {{ $sliders->lastItem() }} arası gösteriliyor
            </div>
        </div>
    @endif
</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;
    }
    .delete-form {
        margin: 0;
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    @if(!App\View\Components\Helper::isMobile())
    var el = document.getElementById('sortable');
    var sortable = new Sortable(el, {
        animation: 150,
        ghostClass: 'sortable-ghost',
        onEnd: function(evt) {
            var order = [];
            document.querySelectorAll('#sortable tr').forEach(function(el, index) {
                order.push({
                    id: el.dataset.id,
                    order: index + 1
                });
            });

            fetch('{{ route("admin.sliders.update-order-bulk") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ order: 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