@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h1 class="text-primary">
                        <i class="fas fa-print me-2"></i>
                        إعدادات الطابعات
                    </h1>
                    <p class="text-muted">إدارة وتكوين الطابعات المتصلة بالنظام</p>
                </div>
                <div>
                    <button type="button" class="btn btn-success me-2" id="syncWithLocalServer">
                        <i class="fas fa-sync-alt me-1"></i>
                        مزامنة مع السيرفر المحلي
                    </button>
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addPrinterModal">
                        <i class="fas fa-plus me-1"></i>
                        إضافة طابعة جديدة
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Status Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 id="totalPrinters">0</h4>
                            <p class="mb-0">إجمالي الطابعات</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-print fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 id="activePrinters">0</h4>
                            <p class="mb-0">طابعات نشطة</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-check-circle fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-warning text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 id="inactivePrinters">0</h4>
                            <p class="mb-0">طابعات غير نشطة</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-exclamation-triangle fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 id="localServerStatus">غير متصل</h4>
                            <p class="mb-0">حالة السيرفر المحلي</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-server fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Printers Grid -->
    <div class="row" id="printersGrid">
        <!-- Printers will be loaded here -->
    </div>
</div>

<!-- Add Printer Modal -->
<div class="modal fade" id="addPrinterModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title">
                    <i class="fas fa-plus me-2"></i>
                    إضافة طابعة جديدة
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="addPrinterForm">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">
                                    <i class="fas fa-tag me-1"></i>
                                    اسم الطابعة
                                </label>
                                <input type="text" class="form-control" name="name" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">
                                    <i class="fas fa-list me-1"></i>
                                    نوع الطابعة
                                </label>
                                <select class="form-select" name="type" required>
                                    <option value="">اختر النوع</option>
                                    <option value="kitchen">طابعة المطبخ</option>
                                    <option value="receipt">طابعة الفواتير</option>
                                    <option value="bar">طابعة البار</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-8">
                            <div class="mb-3">
                                <label class="form-label">
                                    <i class="fas fa-network-wired me-1"></i>
                                    عنوان IP
                                </label>
                                <input type="text" class="form-control" name="ip_address" placeholder="192.168.1.100" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">
                                    <i class="fas fa-plug me-1"></i>
                                    المنفذ
                                </label>
                                <input type="number" class="form-control" name="port" value="9100" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">
                                    <i class="fas fa-cog me-1"></i>
                                    موديل الطابعة
                                </label>
                                <input type="text" class="form-control" name="printer_model" placeholder="اختياري">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">
                                    <i class="fas fa-ruler me-1"></i>
                                    عرض الورق (مم)
                                </label>
                                <input type="number" class="form-control" name="paper_width" value="80">
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="is_active" value="1" checked>
                            <label class="form-check-label">
                                <i class="fas fa-power-off me-1"></i>
                                تفعيل الطابعة
                            </label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i>
                        إلغاء
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-1"></i>
                        حفظ الطابعة
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Printer Modal -->
<div class="modal fade" id="editPrinterModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-warning text-dark">
                <h5 class="modal-title">
                    <i class="fas fa-edit me-2"></i>
                    تعديل الطابعة
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="editPrinterForm">
                <div class="modal-body" id="editPrinterBody">
                    <!-- Content will be loaded dynamically -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i>
                        إلغاء
                    </button>
                    <button type="submit" class="btn btn-warning">
                        <i class="fas fa-save me-1"></i>
                        حفظ التغييرات
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .printer-card {
        transition: all 0.3s ease;
        border: none;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .printer-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    }
    
    .printer-status {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
    }
    
    .status-online {
        background-color: #28a745;
        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
    }
    
    .status-offline {
        background-color: #dc3545;
        box-shadow: 0 0 10px rgba(220, 53, 69, 0.5);
    }
    
    .printer-type-icon {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }
    
    .kitchen { color: #fd7e14; }
    .receipt { color: #20c997; }
    .bar { color: #6f42c1; }
    
    .action-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 2px;
        transition: all 0.3s ease;
    }
    
    .action-btn:hover {
        transform: scale(1.1);
    }
    
    .loading-spinner {
        display: none;
    }
    
    .card-gradient {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    let printers = [];
    
    // Load printers on page load
    loadPrinters();
    checkLocalServerStatus();
    
    // Auto refresh every 30 seconds
    setInterval(function() {
        loadPrinters();
        checkLocalServerStatus();
    }, 30000);
    
    // Load printers from API
    function loadPrinters() {
        $.ajax({
            url: '{{ url("/api/printers") }}',
            method: 'GET',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'Accept': 'application/json'
            },
            success: function(response) {
                printers = Array.isArray(response) ? response : response.data || [];
                renderPrinters();
                updateStats();
            },
            error: function(xhr) {
                console.error('Error loading printers:', xhr);
                showNotification('خطأ في تحميل الطابعات', 'error');
            }
        });
    }
    
    // Render printers grid
    function renderPrinters() {
        const grid = $('#printersGrid');
        grid.empty();
        
        if (printers.length === 0) {
            grid.html(`
                <div class="col-12">
                    <div class="text-center py-5">
                        <i class="fas fa-print fa-5x text-muted mb-3"></i>
                        <h4 class="text-muted">لا توجد طابعات مسجلة</h4>
                        <p class="text-muted">قم بإضافة طابعة جديدة للبدء</p>
                    </div>
                </div>
            `);
            return;
        }
        
        printers.forEach(printer => {
            const typeIcons = {
                kitchen: 'fa-utensils',
                receipt: 'fa-receipt',
                bar: 'fa-cocktail'
            };
            
            const typeNames = {
                kitchen: 'المطبخ',
                receipt: 'الفواتير', 
                bar: 'البار'
            };
            
            const card = `
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="card printer-card h-100">
                        <div class="card-body text-center position-relative">
                            <div class="printer-status ${printer.is_active ? 'status-online' : 'status-offline'}"></div>
                            
                            <div class="printer-type-icon ${printer.type}">
                                <i class="fas ${typeIcons[printer.type] || 'fa-print'}"></i>
                            </div>
                            
                            <h5 class="card-title">${printer.name}</h5>
                            <p class="text-muted mb-2">طابعة ${typeNames[printer.type] || printer.type}</p>
                            
                            <div class="mb-3">
                                <small class="text-muted d-block">
                                    <i class="fas fa-network-wired me-1"></i>
                                    ${printer.ip_address}:${printer.port}
                                </small>
                                ${printer.printer_model ? `<small class="text-muted d-block">${printer.printer_model}</small>` : ''}
                            </div>
                            
                            <div class="mb-3">
                                <span class="badge ${printer.is_active ? 'bg-success' : 'bg-danger'}">
                                    ${printer.is_active ? 'نشطة' : 'غير نشطة'}
                                </span>
                            </div>
                            
                            <div class="d-flex justify-content-center">
                                <button class="btn btn-info action-btn test-printer" data-id="${printer.id}" title="اختبار الطباعة">
                                    <i class="fas fa-print"></i>
                                </button>
                                <button class="btn btn-warning action-btn edit-printer" data-id="${printer.id}" title="تعديل">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="btn btn-danger action-btn delete-printer" data-id="${printer.id}" title="حذف">
                                    <i class="fas fa-trash"></i>
                                </button>
                                <button class="btn btn-success action-btn sync-printer" data-id="${printer.id}" title="مزامنة">
                                    <i class="fas fa-sync"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            grid.append(card);
        });
        
        // Bind events
        bindPrinterEvents();
    }
    
    // Update statistics
    function updateStats() {
        const total = printers.length;
        const active = printers.filter(p => p.is_active).length;
        const inactive = total - active;
        
        $('#totalPrinters').text(total);
        $('#activePrinters').text(active);
        $('#inactivePrinters').text(inactive);
    }
    
    // Check local server status
    function checkLocalServerStatus() {
        $.ajax({
            url: 'http://localhost:3001/health',
            method: 'GET',
            timeout: 5000,
            headers: {
                'Content-Type': 'application/json'
            },
            success: function() {
                $('#localServerStatus').text('متصل').parent().removeClass('bg-danger').addClass('bg-success');
            },
            error: function() {
                $('#localServerStatus').text('غير متصل').parent().removeClass('bg-success').addClass('bg-danger');
            }
        });
    }
    
    // Bind printer events
    function bindPrinterEvents() {
        // Test printer
        $('.test-printer').click(function() {
            const printerId = $(this).data('id');
            testPrinter(printerId);
        });
        
        // Edit printer
        $('.edit-printer').click(function() {
            const printerId = $(this).data('id');
            editPrinter(printerId);
        });
        
        // Delete printer
        $('.delete-printer').click(function() {
            const printerId = $(this).data('id');
            deletePrinter(printerId);
        });
        
        // Sync printer
        $('.sync-printer').click(function() {
            const printerId = $(this).data('id');
            syncPrinter(printerId);
        });
    }
    
    // Add printer form
    $('#addPrinterForm').submit(function(e) {
        e.preventDefault();
        
        const formData = {
            name: $('input[name="name"]').val(),
            type: $('select[name="type"]').val(),
            ip_address: $('input[name="ip_address"]').val(),
            port: $('input[name="port"]').val(),
            printer_model: $('input[name="printer_model"]').val(),
            paper_width: $('input[name="paper_width"]').val(),
            is_active: $('input[name="is_active"]').is(':checked') ? 1 : 0
        };
        
        $.ajax({
            url: '{{ url("/api/printers") }}',
            method: 'POST',
            data: formData,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'Accept': 'application/json'
            },
            success: function(response) {
                $('#addPrinterModal').modal('hide');
                $('#addPrinterForm')[0].reset();
                showNotification('تم إضافة الطابعة بنجاح', 'success');
                loadPrinters();
            },
            error: function(xhr) {
                console.error('Error adding printer:', xhr);
                showNotification('خطأ في إضافة الطابعة', 'error');
            }
        });
    });
    
    // Test printer function
    function testPrinter(printerId) {
        $.ajax({
            url: `{{ url("/api/printers") }}/${printerId}/test`,
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'Accept': 'application/json'
            },
            success: function() {
                showNotification('تم إرسال اختبار الطباعة بنجاح', 'success');
            },
            error: function(xhr) {
                console.error('Error testing printer:', xhr);
                showNotification('خطأ في اختبار الطابعة', 'error');
            }
        });
    }
    
    // Edit printer function
    function editPrinter(printerId) {
        const printer = printers.find(p => p.id == printerId);
        if (!printer) return;
        
        const editForm = `
            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label class="form-label">اسم الطابعة</label>
                        <input type="text" class="form-control" name="name" value="${printer.name}" required>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label class="form-label">نوع الطابعة</label>
                        <select class="form-select" name="type" required>
                            <option value="kitchen" ${printer.type === 'kitchen' ? 'selected' : ''}>طابعة المطبخ</option>
                            <option value="receipt" ${printer.type === 'receipt' ? 'selected' : ''}>طابعة الفواتير</option>
                            <option value="bar" ${printer.type === 'bar' ? 'selected' : ''}>طابعة البار</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8">
                    <div class="mb-3">
                        <label class="form-label">عنوان IP</label>
                        <input type="text" class="form-control" name="ip_address" value="${printer.ip_address}" required>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="mb-3">
                        <label class="form-label">المنفذ</label>
                        <input type="number" class="form-control" name="port" value="${printer.port}" required>
                    </div>
                </div>
            </div>
            <div class="mb-3">
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" name="is_active" value="1" ${printer.is_active ? 'checked' : ''}>
                    <label class="form-check-label">تفعيل الطابعة</label>
                </div>
            </div>
        `;
        
        $('#editPrinterBody').html(editForm);
        $('#editPrinterModal').modal('show');
        
        // Handle edit form submission
        $('#editPrinterForm').off('submit').on('submit', function(e) {
            e.preventDefault();
            
            const formData = {
                name: $('#editPrinterBody input[name="name"]').val(),
                type: $('#editPrinterBody select[name="type"]').val(),
                ip_address: $('#editPrinterBody input[name="ip_address"]').val(),
                port: $('#editPrinterBody input[name="port"]').val(),
                is_active: $('#editPrinterBody input[name="is_active"]').is(':checked') ? 1 : 0
            };
            
            $.ajax({
                url: `{{ url("/api/printers") }}/${printerId}`,
                method: 'PUT',
                data: formData,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'Accept': 'application/json'
                },
                success: function(response) {
                    $('#editPrinterModal').modal('hide');
                    showNotification('تم تحديث الطابعة بنجاح', 'success');
                    loadPrinters();
                },
                error: function(xhr) {
                    console.error('Error updating printer:', xhr);
                    showNotification('خطأ في تحديث الطابعة', 'error');
                }
            });
        });
    }
    
    // Delete printer function
    function deletePrinter(printerId) {
        if (confirm('هل أنت متأكد من حذف هذه الطابعة؟')) {
            $.ajax({
                url: `{{ url("/api/printers") }}/${printerId}`,
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'Accept': 'application/json'
                },
                success: function() {
                    showNotification('تم حذف الطابعة بنجاح', 'success');
                    loadPrinters();
                },
                error: function(xhr) {
                    console.error('Error deleting printer:', xhr);
                    showNotification('خطأ في حذف الطابعة', 'error');
                }
            });
        }
    }
    
    // Sync printer with local server
    function syncPrinter(printerId) {
        const printer = printers.find(p => p.id == printerId);
        if (!printer) return;
        
        // Send printer config to local server
        $.ajax({
            url: 'http://localhost:3001/config',
            method: 'POST',
            data: {
                printers: {
                    [printer.type]: {
                        enabled: printer.is_active,
                        ip: printer.ip_address,
                        port: printer.port,
                        name: printer.name
                    }
                }
            },
            success: function() {
                showNotification(`تم مزامنة طابعة ${printer.name} مع السيرفر المحلي`, 'success');
            },
            error: function(xhr) {
                console.error('Error syncing printer:', xhr);
                showNotification('خطأ في مزامنة الطابعة مع السيرفر المحلي', 'error');
            }
        });
    }
    
    // Sync all printers with local server
    $('#syncWithLocalServer').click(function() {
        const config = {
            printers: {}
        };
        
        printers.forEach(printer => {
            config.printers[printer.type] = {
                enabled: printer.is_active,
                ip: printer.ip_address,
                port: printer.port,
                name: printer.name
            };
        });
        
        $.ajax({
            url: 'http://localhost:3001/config',
            method: 'POST',
            data: config,
            success: function() {
                showNotification('تم مزامنة جميع الطابعات مع السيرفر المحلي', 'success');
            },
            error: function(xhr) {
                console.error('Error syncing all printers:', xhr);
                showNotification('خطأ في مزامنة الطابعات مع السيرفر المحلي', 'error');
            }
        });
    });
    
    // Show notification
    function showNotification(message, type) {
        const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
        const icon = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-triangle';
        
        const notification = $(`
            <div class="alert ${alertClass} alert-dismissible fade show position-fixed" 
                 style="top: 20px; right: 20px; z-index: 9999; min-width: 300px;">
                <i class="fas ${icon} me-2"></i>
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `);
        
        $('body').append(notification);
        
        setTimeout(function() {
            notification.alert('close');
        }, 5000);
    }
});
</script>
@endpush