@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>الطابعات</h1>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createPrinterModal">
            <i class="fas fa-plus"></i> إضافة طابعة
        </button>
    </div>
    
    <div class="card">
        <div class="card-header">
            <h5 class="card-title">قائمة الطابعات</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover" id="printersTable">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>الاسم</th>
                            <th>النوع</th>
                            <th>العنوان</th>
                            <th>الحالة</th>
                            <th>الإجراءات</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($printers as $printer)
                            <tr>
                                <td>{{ $printer->id }}</td>
                                <td>{{ $printer->name }}</td>
                                <td>{{ $printer->type }}</td>
                                <td>{{ $printer->ip_address ?: $printer->connection_info }}</td>
                                <td>
                                    @if($printer->is_active)
                                        <span class="badge bg-success">نشطة</span>
                                    @else
                                        <span class="badge bg-danger">غير نشطة</span>
                                    @endif
                                </td>
                                <td>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-sm btn-info test-printer" data-id="{{ $printer->id }}">
                                            <i class="fas fa-print"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-primary edit-printer" data-id="{{ $printer->id }}">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-danger delete-printer" data-id="{{ $printer->id }}">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Create Printer Modal -->
<div class="modal fade" id="createPrinterModal" tabindex="-1" aria-labelledby="createPrinterModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createPrinterModalLabel">إضافة طابعة جديدة</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="createPrinterForm" action="{{ route('printers.store') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="name" class="form-label">اسم الطابعة <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="name" name="name" required>
                        <small class="form-text text-muted">مثال: طابعة المطبخ، طابعة الكاشير، إلخ</small>
                    </div>
                    
                    <div class="mb-3">
                        <label for="type" class="form-label">نوع الطابعة <span class="text-danger">*</span></label>
                        <select class="form-select" id="type" name="type" required>
                            <option value="">اختر النوع</option>
                            <option value="kitchen">طابعة المطبخ</option>
                            <option value="receipt">طابعة الفواتير</option>
                            <option value="bar">طابعة البار</option>
                        </select>
                    </div>
                    
                    <div id="network_fields" class="d-none">
                        <div class="mb-3">
                            <label for="ip_address" class="form-label">عنوان IP <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="ip_address" name="ip_address">
                        </div>
                        
                        <div class="mb-3">
                            <label for="port" class="form-label">المنفذ</label>
                            <input type="number" class="form-control" id="port" name="port" value="9100">
                            <small class="form-text text-muted">المنفذ الافتراضي هو 9100</small>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="is_active" name="is_active" value="1" checked>
                            <label class="form-check-label" for="is_active">نشطة</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                    <button type="submit" class="btn btn-primary">حفظ</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Printer Modal -->
<div class="modal fade" id="editPrinterModal" tabindex="-1" aria-labelledby="editPrinterModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editPrinterModalLabel">تعديل الطابعة</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editPrinterForm" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <!-- Form fields will be populated via JavaScript -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                    <button type="submit" class="btn btn-primary">حفظ التغييرات</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deletePrinterModal" tabindex="-1" aria-labelledby="deletePrinterModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deletePrinterModalLabel">تأكيد الحذف</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>هل أنت متأكد من حذف هذه الطابعة؟</p>
                <p class="text-danger" id="delete_warning"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                <form id="deletePrinterForm" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">تأكيد الحذف</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        // Todos los tipos de impresoras requieren configuración de red
        $('#type').change(function() {
            // Mostrar siempre los campos de red para todos los tipos de impresoras
            $('#network_fields').removeClass('d-none');
        });
        
        // Submit create form via AJAX
        $('#createPrinterForm').submit(function(e) {
            e.preventDefault();
            const form = $(this);
            const url = form.attr('action');
            const formData = form.serialize();
            
            $.ajax({
                url: url,
                type: 'POST',
                data: formData,
                success: function(response) {
                    $('#createPrinterModal').modal('hide');
                    alert('تم إضافة الطابعة بنجاح');
                    location.reload();
                },
                error: function(error) {
                    console.error('Error creating printer:', error);
                    let errorMessage = 'حدث خطأ أثناء إضافة الطابعة';
                    
                    if (error.responseJSON && error.responseJSON.errors) {
                        errorMessage += ':\n';
                        for (const field in error.responseJSON.errors) {
                            errorMessage += `${error.responseJSON.errors[field][0]}\n`;
                        }
                    }
                    
                    alert(errorMessage);
                }
            });
        });
        
        // Edit printer
        $('.edit-printer').click(function() {
            const printerId = $(this).data('id');
            
            $.ajax({
                url: `{{ url('/') }}/printers/${printerId}/edit`,
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    // Populate the edit form
                    const modalBody = `
                        <div class="mb-3">
                            <label for="edit_name" class="form-label">اسم الطابعة <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="edit_name" name="name" value="${response.name}" required>
                        </div>
                        
                        <div class="mb-3">
                            <label for="edit_type" class="form-label">نوع الطابعة <span class="text-danger">*</span></label>
                            <select class="form-select" id="edit_type" name="type" required>
                                <option value="kitchen" ${response.type === 'kitchen' ? 'selected' : ''}>طابعة المطبخ</option>
                                <option value="receipt" ${response.type === 'receipt' ? 'selected' : ''}>طابعة الفواتير</option>
                                <option value="bar" ${response.type === 'bar' ? 'selected' : ''}>طابعة البار</option>
                            </select>
                        </div>
                        
                        <div id="edit_network_fields" class="${response.type === 'network' ? '' : 'd-none'}">
                            <div class="mb-3">
                                <label for="edit_ip_address" class="form-label">عنوان IP <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="edit_ip_address" name="ip_address" value="${response.ip_address || ''}">
                            </div>
                            
                            <div class="mb-3">
                                <label for="edit_port" class="form-label">المنفذ</label>
                                <input type="number" class="form-control" id="edit_port" name="port" value="${response.port || 9100}">
                            </div>
                        </div>
                        

                        
                        <div class="mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="edit_is_active" name="is_active" value="1" ${response.is_active ? 'checked' : ''}>
                                <label class="form-check-label" for="edit_is_active">نشطة</label>
                            </div>
                        </div>
                    `;
                    
                    $('#editPrinterForm .modal-body').html(modalBody);
                    $('#editPrinterForm').attr('action', `{{ url('/') }}/printers/${printerId}`);
                    
                    // Todos los tipos de impresoras requieren configuración de red
                    $('#edit_type').change(function() {
                        // Mostrar siempre los campos de red para todos los tipos de impresoras
                        $('#edit_network_fields').removeClass('d-none');
                    });
                    
                    $('#editPrinterModal').modal('show');
                },
                error: function(error) {
                    console.error('Error fetching printer details:', error);
                    alert('حدث خطأ أثناء جلب بيانات الطابعة');
                }
            });
        });
        
        // Submit edit form via AJAX
        $('#editPrinterForm').submit(function(e) {
            e.preventDefault();
            const form = $(this);
            const url = form.attr('action');
            const formData = form.serialize();
            
            $.ajax({
                url: url,
                type: 'POST',
                data: formData,
                success: function(response) {
                    $('#editPrinterModal').modal('hide');
                    alert('تم تحديث الطابعة بنجاح');
                    location.reload();
                },
                error: function(error) {
                    console.error('Error updating printer:', error);
                    let errorMessage = 'حدث خطأ أثناء تحديث الطابعة';
                    
                    if (error.responseJSON && error.responseJSON.errors) {
                        errorMessage += ':\n';
                        for (const field in error.responseJSON.errors) {
                            errorMessage += `${error.responseJSON.errors[field][0]}\n`;
                        }
                    }
                    
                    alert(errorMessage);
                }
            });
        });
        
        // Delete printer
        $('.delete-printer').click(function() {
            const printerId = $(this).data('id');
            
            $.ajax({
                url: `{{ url('/') }}/printers/${printerId}`,
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    if (response.products_count > 0) {
                        $('#delete_warning').text(`تحذير: هذه الطابعة مرتبطة بـ ${response.products_count} منتج. حذف الطابعة سيؤثر على طباعة طلبات هذه المنتجات.`);
                    } else {
                        $('#delete_warning').text('');
                    }
                    
                    $('#deletePrinterForm').attr('action', `{{ url('/') }}/printers/${printerId}`);
                    $('#deletePrinterModal').modal('show');
                },
                error: function(error) {
                    console.error('Error fetching printer details:', error);
                    alert('حدث خطأ أثناء جلب بيانات الطابعة');
                }
            });
        });
        
        // Test printer
        $('.test-printer').click(function() {
            const printerId = $(this).data('id');
            
            $.ajax({
                url: `{{ url('/') }}/printers/${printerId}/test`,
                type: 'POST',
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    alert('تم إرسال صفحة اختبار إلى الطابعة بنجاح.');
                },
                error: function(error) {
                    console.error('Error testing printer:', error);
                    alert('حدث خطأ أثناء اختبار الطابعة. يرجى التحقق من اتصال الطابعة.');
                }
            });
        });
    });
</script>
@endpush