@extends('layouts.app')

@section('title', 'Raporlar')
@section('page-title', 'Raporlar')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Raporlar</h2>
            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400 dark:text-gray-400">Özelleştirilebilir raporlar oluşturun ve yönetin</p>
        </div>
        <div>
            <a href="{{ route('reports.create') }}" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 dark:bg-indigo-500 dark:bg-indigo-500 hover:bg-indigo-700 dark:hover:bg-indigo-600 dark:hover:bg-indigo-600 dark:bg-indigo-500">
                <i class="fas fa-plus mr-2"></i>
                Yeni Rapor Oluştur
            </a>
        </div>
    </div>

    <!-- Statistics -->
    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-5">
        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-file-alt text-2xl text-blue-500"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Toplam Rapor</dt>
                            <dd class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ $statistics['total'] }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-check-circle text-2xl text-green-500"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Tamamlanan</dt>
                            <dd class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ $statistics['completed'] }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-spinner text-2xl text-blue-500"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">İşleniyor</dt>
                            <dd class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ $statistics['processing'] }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-exclamation-triangle text-2xl text-red-500"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Başarısız</dt>
                            <dd class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ $statistics['failed'] }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-clock text-2xl text-yellow-500"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Süresi Dolmuş</dt>
                            <dd class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ $statistics['expired'] }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-4">
        <form method="GET" action="{{ route('reports.index') }}" class="space-y-4">
            <div class="flex items-center space-x-4 mb-4">
                <a href="{{ route('reports.index', ['filter' => 'all']) }}" class="px-4 py-2 rounded-md text-sm font-medium {{ $filter === 'all' ? 'bg-indigo-100 dark:bg-indigo-900/50 text-indigo-700 dark:text-indigo-300' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700' }}">
                    Tümü
                </a>
                <a href="{{ route('reports.index', ['filter' => 'completed']) }}" class="px-4 py-2 rounded-md text-sm font-medium {{ $filter === 'completed' ? 'bg-indigo-100 dark:bg-indigo-900/50 text-indigo-700 dark:text-indigo-300' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700' }}">
                    Tamamlanan
                </a>
                <a href="{{ route('reports.index', ['filter' => 'processing']) }}" class="px-4 py-2 rounded-md text-sm font-medium {{ $filter === 'processing' ? 'bg-indigo-100 dark:bg-indigo-900/50 text-indigo-700 dark:text-indigo-300' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700' }}">
                    İşleniyor
                </a>
                <a href="{{ route('reports.index', ['filter' => 'failed']) }}" class="px-4 py-2 rounded-md text-sm font-medium {{ $filter === 'failed' ? 'bg-indigo-100 dark:bg-indigo-900/50 text-indigo-700 dark:text-indigo-300' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700' }}">
                    Başarısız
                </a>
                <a href="{{ route('reports.index', ['filter' => 'expired']) }}" class="px-4 py-2 rounded-md text-sm font-medium {{ $filter === 'expired' ? 'bg-indigo-100 dark:bg-indigo-900/50 text-indigo-700 dark:text-indigo-300' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700' }}">
                    Süresi Dolmuş
                </a>
            </div>
            
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
                <input type="hidden" name="filter" value="{{ $filter }}">
                <div>
                    <label for="type" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Tip</label>
                    <select name="type" id="type" class="block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                        <option value="">Tümü</option>
                        @foreach($reportTypes as $key => $reportType)
                        <option value="{{ $key }}" {{ request('type') === $key ? 'selected' : '' }}>{{ $reportType['name'] }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label for="format" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Format</label>
                    <select name="format" id="format" class="block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                        <option value="">Tümü</option>
                        <option value="csv" {{ request('format') === 'csv' ? 'selected' : '' }}>CSV</option>
                        <option value="excel" {{ request('format') === 'excel' ? 'selected' : '' }}>Excel</option>
                        <option value="pdf" {{ request('format') === 'pdf' ? 'selected' : '' }}>PDF</option>
                    </select>
                </div>
                <div>
                    <label for="date_from" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Başlangıç Tarihi</label>
                    <input type="date" name="date_from" id="date_from" value="{{ request('date_from') }}" class="block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                </div>
                <div>
                    <label for="date_to" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Bitiş Tarihi</label>
                    <input type="date" name="date_to" id="date_to" value="{{ request('date_to') }}" class="block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                </div>
                <div>
                    <label for="search" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Ara</label>
                    <input type="text" name="search" id="search" value="{{ request('search') }}" placeholder="Rapor adı, oluşturan..." class="block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                </div>
            </div>
            <div class="flex items-center gap-2">
                <button type="submit" class="inline-flex items-center gap-2 px-4 py-2 border border-transparent text-sm font-semibold rounded-lg shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">
                    <i class="fas fa-filter"></i>
                    Filtrele
                </button>
                <a href="{{ route('reports.index') }}" class="inline-flex items-center gap-2 px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-semibold rounded-lg shadow-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700">
                    <i class="fas fa-times"></i>
                    Temizle
                </a>
                <a href="{{ route('reports.export-list', request()->query()) }}" class="inline-flex items-center gap-2 px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-semibold rounded-lg shadow-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700">
                    <i class="fas fa-file-csv"></i>
                    CSV İndir
                </a>
            </div>
        </form>
    </div>

    <!-- Bulk Actions -->
    <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-4 hidden" id="bulk-actions">
        <div class="flex items-center justify-between">
            <span class="text-sm text-gray-700 dark:text-gray-300">
                <span id="selected-count">0</span> rapor seçildi
            </span>
            <div class="flex gap-2">
                <form action="{{ route('reports.delete-multiple') }}" method="POST" id="bulk-delete-form" onsubmit="return confirm('Seçili raporları silmek istediğinizden emin misiniz?');">
                    @csrf
                    <input type="hidden" name="report_ids" id="bulk-delete-ids">
                    <button type="submit" class="inline-flex items-center gap-2 px-4 py-2 border border-red-300 dark:border-red-600 text-sm font-semibold rounded-lg shadow-sm text-red-700 dark:text-red-300 bg-white dark:bg-gray-800 hover:bg-red-50 dark:hover:bg-red-900/30">
                        <i class="fas fa-trash"></i>
                        Seçilenleri Sil
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- Report Preview Modal -->
    <div id="preview-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-6xl w-full mx-4 max-h-[90vh] overflow-y-auto">
            <div class="p-6 border-b border-gray-200 dark:border-gray-700">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Rapor Önizleme</h3>
                    <button id="close-preview-modal" class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
            <div class="p-6">
                <div id="preview-loading" class="text-center py-8">
                    <i class="fas fa-spinner fa-spin text-4xl text-gray-400 dark:text-gray-500 mb-4"></i>
                    <p class="text-gray-600 dark:text-gray-400">Yükleniyor...</p>
                </div>
                <div id="preview-content" class="hidden">
                    <div class="mb-4 text-sm text-gray-600 dark:text-gray-400">
                        <span id="preview-info"></span>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                            <thead id="preview-thead" class="bg-gray-50 dark:bg-gray-700">
                            </thead>
                            <tbody id="preview-tbody" class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                            </tbody>
                        </table>
                    </div>
                </div>
                <div id="preview-error" class="hidden text-center py-8 text-red-600 dark:text-red-400">
                </div>
            </div>
        </div>
    </div>

    <!-- Reports Table -->
    <div class="bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-lg">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead class="bg-gray-50 dark:bg-gray-700">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            <input type="checkbox" id="select-all-reports" class="rounded border-gray-300 dark:border-gray-600">
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Rapor Adı
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Tip
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Format
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Durum
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Kayıt Sayısı
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Oluşturan
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Oluşturulma
                        </th>
                        <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            İşlemler
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                    @forelse($reports as $report)
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                        <td class="px-6 py-4 whitespace-nowrap">
                            <input type="checkbox" name="report_ids[]" value="{{ $report->id }}" class="report-checkbox rounded border-gray-300 dark:border-gray-600">
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900 dark:text-gray-100">
                                <a href="{{ route('reports.show', $report) }}" class="hover:text-indigo-600 dark:hover:text-indigo-400">
                                    {{ $report->name }}
                                </a>
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-300">
                                {{ $reportTypes[$report->type]['name'] ?? $report->type }}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                            {{ strtoupper($report->file_format ?? '-') }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ $report->status_badge_class }}">
                                {{ $report->status_label }}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                            {{ $report->record_count ? number_format($report->record_count) : '-' }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                            {{ $report->creator->name }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                            {{ $report->created_at->format('d.m.Y H:i') }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                            <div class="flex items-center justify-end space-x-2">
                                @if($report->status === 'completed')
                                <button type="button" class="preview-report-btn text-purple-600 dark:text-purple-400 hover:text-purple-900 dark:hover:text-purple-300" data-report-id="{{ $report->id }}" title="Önizle">
                                    <i class="fas fa-eye"></i>
                                </button>
                                @endif
                                <a href="{{ route('reports.show', $report) }}" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300" title="Detay">
                                    <i class="fas fa-info-circle"></i>
                                </a>
                                @if($report->status === 'completed' && $report->file_path)
                                <a href="{{ route('reports.download', $report) }}" class="text-green-600 dark:text-green-400 hover:text-green-900 dark:hover:text-green-300" title="İndir">
                                    <i class="fas fa-download"></i>
                                </a>
                                @endif
                                @if($report->status === 'failed')
                                <form action="{{ route('reports.regenerate', $report) }}" method="POST" class="inline">
                                    @csrf
                                    <button type="submit" class="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300" title="Yeniden Oluştur">
                                        <i class="fas fa-redo"></i>
                                    </button>
                                </form>
                                @endif
                                <form action="{{ route('reports.destroy', $report) }}" method="POST" class="inline" onsubmit="return confirm('Bu raporu silmek istediğinizden emin misiniz?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300" title="Sil">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="px-6 py-4 text-center text-gray-500 dark:text-gray-400">
                            <div class="py-8">
                                <i class="fas fa-file-alt text-4xl text-gray-300 dark:text-gray-600 mb-4"></i>
                                <p class="text-lg font-medium text-gray-900 dark:text-gray-100">Henüz rapor bulunmuyor</p>
                                <p class="text-sm mt-2 text-gray-600 dark:text-gray-400">Yeni bir rapor oluşturmak için "Yeni Rapor Oluştur" butonuna tıklayın.</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        @if($reports->hasPages())
        <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700">
            {{ $reports->links() }}
        </div>
        @endif
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const selectAllCheckbox = document.getElementById('select-all-reports');
    const reportCheckboxes = document.querySelectorAll('.report-checkbox');
    const bulkActions = document.getElementById('bulk-actions');
    const selectedCount = document.getElementById('selected-count');
    const bulkDeleteForm = document.getElementById('bulk-delete-form');
    const bulkDeleteIds = document.getElementById('bulk-delete-ids');
    const previewModal = document.getElementById('preview-modal');
    const closePreviewModal = document.getElementById('close-preview-modal');
    const previewBtns = document.querySelectorAll('.preview-report-btn');

    // Select All
    if (selectAllCheckbox) {
        selectAllCheckbox.addEventListener('change', function() {
            reportCheckboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
            });
            updateBulkActions();
        });
    }

    // Individual checkboxes
    reportCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', updateBulkActions);
    });

    function updateBulkActions() {
        const checked = document.querySelectorAll('.report-checkbox:checked');
        const count = checked.length;
        
        if (count > 0) {
            bulkActions.classList.remove('hidden');
            selectedCount.textContent = count;
            
            const ids = Array.from(checked).map(cb => cb.value);
            bulkDeleteIds.value = JSON.stringify(ids);
        } else {
            bulkActions.classList.add('hidden');
        }
        
        if (selectAllCheckbox) {
            selectAllCheckbox.checked = count === reportCheckboxes.length && reportCheckboxes.length > 0;
        }
    }

    // Preview Modal
    if (closePreviewModal) {
        closePreviewModal.addEventListener('click', () => {
            previewModal.classList.add('hidden');
        });
    }

    previewModal?.addEventListener('click', function(e) {
        if (e.target === previewModal) {
            previewModal.classList.add('hidden');
        }
    });

    // Preview Report
    previewBtns.forEach(btn => {
        btn.addEventListener('click', async function() {
            const reportId = this.dataset.reportId;
            previewModal.classList.remove('hidden');
            
            document.getElementById('preview-loading').classList.remove('hidden');
            document.getElementById('preview-content').classList.add('hidden');
            document.getElementById('preview-error').classList.add('hidden');

            try {
                const response = await fetch(`/reports/${reportId}/preview`, {
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    }
                });

                const data = await response.json();

                if (data.success) {
                    const preview = data.preview;
                    const thead = document.getElementById('preview-thead');
                    const tbody = document.getElementById('preview-tbody');
                    const info = document.getElementById('preview-info');

                    // Clear previous content
                    thead.innerHTML = '';
                    tbody.innerHTML = '';

                    // Get headers from first row
                    if (preview.length > 0) {
                        const headers = Object.keys(preview[0]);
                        const headerRow = document.createElement('tr');
                        headers.forEach(header => {
                            const th = document.createElement('th');
                            th.className = 'px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider';
                            th.textContent = header;
                            headerRow.appendChild(th);
                        });
                        thead.appendChild(headerRow);

                        // Add rows
                        preview.forEach(row => {
                            const tr = document.createElement('tr');
                            tr.className = 'hover:bg-gray-50 dark:hover:bg-gray-700/50';
                            headers.forEach(header => {
                                const td = document.createElement('td');
                                td.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100';
                                td.textContent = row[header] ?? '-';
                                tr.appendChild(td);
                            });
                            tbody.appendChild(tr);
                        });
                    }

                    info.textContent = `${data.showing} / ${data.total_records} kayıt gösteriliyor`;
                    
                    document.getElementById('preview-loading').classList.add('hidden');
                    document.getElementById('preview-content').classList.remove('hidden');
                } else {
                    document.getElementById('preview-loading').classList.add('hidden');
                    document.getElementById('preview-error').classList.remove('hidden');
                    document.getElementById('preview-error').textContent = data.error || 'Rapor önizlenemedi.';
                }
            } catch (error) {
                document.getElementById('preview-loading').classList.add('hidden');
                document.getElementById('preview-error').classList.remove('hidden');
                document.getElementById('preview-error').textContent = 'Bir hata oluştu: ' + error.message;
            }
        });
    });
});
</script>
@endpush
@endsection