@extends('admin.layouts.app')

@section('content')
    <section class="section">
        <div class="section-header">
            <h1>{{ $pageTitle }}</h1>
            <div class="section-header-breadcrumb">
                <div class="breadcrumb-item active"><a href="/admin/">{{trans('admin/main.dashboard')}}</a></div>
                <div class="breadcrumb-item">{{ $pageTitle }}</div>
            </div>
        </div>

        <div class="section-body">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4>قائمة الجداول (Migrations)</h4>
                            <div class="card-header-action">
                                <button class="btn btn-primary" onclick="runAllMigrations()">
                                    <i class="fas fa-play"></i> تشغيل جميع المايجريشن المعلقة
                                </button>
                                <button class="btn btn-info" onclick="checkStatus()">
                                    <i class="fas fa-info-circle"></i> حالة المايجريشن
                                </button>
                            </div>
                        </div>

                        <div class="card-body">
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle"></i> 
                                <strong>ملاحظة:</strong> يمكنك تشغيل المايجريشن المحددة أو جميع المايجريشن المعلقة من هنا.
                            </div>

                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>اسم المايجريشن</th>
                                            <th>الحالة</th>
                                            <th>التاريخ</th>
                                            <th>الإجراءات</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($migrations as $migration)
                                            <tr>
                                                <td>
                                                    <strong>{{ $migration['name'] }}</strong>
                                                    <br>
                                                    <small class="text-muted">{{ $migration['file'] }}</small>
                                                </td>
                                                <td>
                                                    @if($migration['ran'])
                                                        <span class="badge badge-success">
                                                            <i class="fas fa-check"></i> تم التشغيل
                                                        </span>
                                                    @else
                                                        <span class="badge badge-warning">
                                                            <i class="fas fa-clock"></i> معلق
                                                        </span>
                                                    @endif
                                                </td>
                                                <td>{{ $migration['date'] }}</td>
                                                <td>
                                                    @if(!$migration['ran'])
                                                        <button class="btn btn-sm btn-success" 
                                                                onclick="runMigration('{{ $migration['file'] }}', '{{ $migration['name'] }}')">
                                                            <i class="fas fa-play"></i> تشغيل
                                                        </button>
                                                    @else
                                                        <span class="text-muted">تم التشغيل</span>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Output Modal -->
            <div class="modal fade" id="outputModal" tabindex="-1" role="dialog" aria-labelledby="outputModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="outputModalLabel">نتيجة التشغيل</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div id="outputContent" style="white-space: pre-wrap; font-family: monospace; max-height: 500px; overflow-y: auto;"></div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">إغلاق</button>
                            <button type="button" class="btn btn-primary" onclick="location.reload()">تحديث الصفحة</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts_bottom')
    <script>
        function runMigration(path, name) {
            if (!confirm('هل أنت متأكد من تشغيل المايجريشن: ' + name + '?')) {
                return;
            }

            const btn = event.target.closest('button');
            const originalHtml = btn.innerHTML;
            btn.disabled = true;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري التشغيل...';

            $.ajax({
                url: '/admin/migrations/run',
                method: 'POST',
                data: {
                    path: path,
                    force: true,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        $('#outputContent').text(response.output || response.message || 'تم التشغيل بنجاح');
                        $('#outputModalLabel').text('تم التشغيل بنجاح');
                        $('#outputModal').modal('show');
                    } else {
                        $('#outputContent').text(response.error || response.message || 'حدث خطأ');
                        $('#outputModalLabel').text('خطأ');
                        $('#outputModal').modal('show');
                    }
                },
                error: function(xhr) {
                    const errorMsg = xhr.responseJSON?.error || xhr.responseJSON?.message || 'حدث خطأ غير متوقع';
                    $('#outputContent').text(errorMsg);
                    $('#outputModalLabel').text('خطأ');
                    $('#outputModal').modal('show');
                },
                complete: function() {
                    btn.disabled = false;
                    btn.innerHTML = originalHtml;
                }
            });
        }

        function runAllMigrations() {
            if (!confirm('هل أنت متأكد من تشغيل جميع المايجريشن المعلقة؟')) {
                return;
            }

            const btn = event.target;
            const originalHtml = btn.innerHTML;
            btn.disabled = true;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري التشغيل...';

            $.ajax({
                url: '/admin/migrations/run',
                method: 'POST',
                data: {
                    force: true,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        $('#outputContent').text(response.output || response.message || 'تم التشغيل بنجاح');
                        $('#outputModalLabel').text('تم التشغيل بنجاح');
                        $('#outputModal').modal('show');
                    } else {
                        $('#outputContent').text(response.error || response.message || 'حدث خطأ');
                        $('#outputModalLabel').text('خطأ');
                        $('#outputModal').modal('show');
                    }
                },
                error: function(xhr) {
                    const errorMsg = xhr.responseJSON?.error || xhr.responseJSON?.message || 'حدث خطأ غير متوقع';
                    $('#outputContent').text(errorMsg);
                    $('#outputModalLabel').text('خطأ');
                    $('#outputModal').modal('show');
                },
                complete: function() {
                    btn.disabled = false;
                    btn.innerHTML = originalHtml;
                }
            });
        }

        function checkStatus() {
            const btn = event.target;
            const originalHtml = btn.innerHTML;
            btn.disabled = true;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري التحقق...';

            $.ajax({
                url: '/admin/migrations/status',
                method: 'GET',
                success: function(response) {
                    if (response.success) {
                        $('#outputContent').text(response.output || 'لا توجد معلومات');
                        $('#outputModalLabel').text('حالة المايجريشن');
                        $('#outputModal').modal('show');
                    } else {
                        $('#outputContent').text(response.error || 'حدث خطأ');
                        $('#outputModalLabel').text('خطأ');
                        $('#outputModal').modal('show');
                    }
                },
                error: function(xhr) {
                    const errorMsg = xhr.responseJSON?.error || 'حدث خطأ غير متوقع';
                    $('#outputContent').text(errorMsg);
                    $('#outputModalLabel').text('خطأ');
                    $('#outputModal').modal('show');
                },
                complete: function() {
                    btn.disabled = false;
                    btn.innerHTML = originalHtml;
                }
            });
        }
    </script>
@endpush