@extends('admin.layouts.app')

@section('title', 'Müşteri Yorumları')
@section('header', 'Müşteri Yorumları')

@section('content')
<div class="card">
    <div class="card-header">
        <div class="float-right">
            <a href="{{ route('admin.testimonials.create') }}" class="btn btn-primary">
                <i class="fas fa-plus"></i> Yeni Yorum
            </a>
        </div>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover text-nowrap">
                <thead>
                    <tr>
                        <th>Müşteri</th>
                        <th>Şehir</th>
                        <th>Yorum</th>
                        <th>Durum</th>
                        <th style="width: 150px">İşlemler</th>
                    </tr>
                </thead>
                <tbody id="sortable">
                    @forelse($testimonials as $testimonial)
                        <tr data-id="{{ $testimonial->id }}" class="{{ !App\View\Components\Helper::isMobile() ? 'cursor-move' : '' }}">
                            <td>{{ $testimonial->customer_name }}</td>
                            <td>{{ $testimonial->city }}</td>
                            <td>{{ Str::limit($testimonial->content, 100) }}</td>
                            <td>
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input"
                                           id="status_{{ $testimonial->id }}"
                                           {{ $testimonial->is_active ? 'checked' : '' }}
                                           data-url="{{ route('admin.testimonials.toggle-active', $testimonial) }}">
                                    <label class="custom-control-label" for="status_{{ $testimonial->id }}"></label>
                                </div>
                            </td>
                            <td>
                                <a href="{{ route('admin.testimonials.edit', $testimonial) }}" class="btn btn-sm btn-info">
                                    <i class="fas fa-edit"></i>
                                </a>

                                <form action="{{ route('admin.testimonials.destroy', $testimonial) }}"
                                      method="POST"
                                      class="d-inline delete-form"
                                      id="delete-form-{{ $testimonial->id }}">
                                    @csrf
                                    @method('DELETE')
                                    <button type="button" class="btn btn-danger btn-sm"
                                            onclick="confirmDelete('delete-form-{{ $testimonial->id }}')">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center">Henüz müşteri yorumu bulunmuyor.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </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.testimonials.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