@extends('admin.layouts.app')

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

@section('content')
<div class="card">
    <div class="card-header">
        <div class="float-right">
            <a href="{{ route('admin.pages.create') }}" class="btn btn-primary">
                <i class="fas fa-plus"></i> Yeni Sayfa
            </a>
        </div>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover text-nowrap">
                <thead>
                    <tr>
                        <th>Başlık</th>
                        <th>URL</th>
                        <th>Meta Başlık</th>
                        <th>Durum</th>
                        <th style="width: 150px">İşlemler</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($pages as $page)
                        <tr>
                            <td>{{ $page->title }}</td>
                            <td>{{ $page->slug }}</td>
                            <td>{{ $page->meta_title }}</td>
                            <td>
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input"
                                           id="status_{{ $page->id }}"
                                           {{ $page->is_active ? 'checked' : '' }}
                                           data-url="{{ route('admin.pages.toggle-status', $page) }}">
                                    <label class="custom-control-label" for="status_{{ $page->id }}"></label>
                                </div>
                            </td>
                            <td>
                                <a href="{{ route('admin.pages.edit', $page) }}" class="btn btn-sm btn-info">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <button type="button" class="btn btn-sm btn-danger delete-btn">
                                    <i class="fas fa-trash"></i>
                                </button>
                                <form action="{{ route('admin.pages.destroy', $page) }}" method="POST" class="d-none">
                                    @csrf
                                    @method('DELETE')
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center">Henüz sayfa bulunmuyor.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 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');
                    });
            });
        });

        // Delete Button
        document.querySelectorAll('.delete-btn').forEach(function(button) {
            button.addEventListener('click', function() {
                const form = this.nextElementSibling;

                Swal.fire({
                    title: 'Emin misiniz?',
                    text: "Bu sayfa kalıcı olarak silinecektir!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Evet, sil!',
                    cancelButtonText: 'İptal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        form.submit();
                    }
                });
            });
        });
    });
</script>
@endpush
@endsection