@extends('layouts.app')

@section('title', 'الباركودات')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="page-title">
            <i class="fas fa-barcode me-2"></i>
            الباركودات
        </h1>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">الرئيسية</a></li>
                <li class="breadcrumb-item active">الباركودات</li>
            </ol>
        </nav>
    </div>
    <div>
        <a href="{{ route('barcodes.lookup') }}" class="btn btn-primary me-2">
            <i class="fas fa-search me-2"></i>
            البحث عن باركود
        </a>
        <a href="{{ route('barcodes.generate') }}" class="btn btn-success">
            <i class="fas fa-magic me-2"></i>
            توليد باركودات جديدة
        </a>
    </div>
</div>

<!-- Filters -->
<div class="card mb-4">
    <div class="card-body">
        <form action="{{ route('barcodes.index') }}" method="GET" class="row g-3">
            <div class="col-md-5">
                <label class="form-label">حالة الطباعة</label>
                <select name="printed" class="form-select">
                    <option value="">-- الكل --</option>
                    <option value="1" {{ request('printed') === '1' ? 'selected' : '' }}>مطبوع</option>
                    <option value="0" {{ request('printed') === '0' ? 'selected' : '' }}>غير مطبوع</option>
                </select>
            </div>
            <div class="col-md-5">
                <label class="form-label">البحث</label>
                <input type="text" 
                       name="search" 
                       class="form-control" 
                       placeholder="ابحث عن باركود..."
                       value="{{ request('search') }}">
            </div>
            <div class="col-md-2">
                <label class="form-label">&nbsp;</label>
                <button type="submit" class="btn btn-primary w-100">
                    <i class="fas fa-search me-2"></i>
                    بحث
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Barcodes -->
<div class="card">
    <div class="card-body">
        @if($barcodes->count() > 0)
            <!-- Bulk Actions -->
            <div class="mb-3 d-flex justify-content-between align-items-center">
                <div>
                    <input type="checkbox" id="select-all" class="form-check-input" onchange="toggleSelectAll()">
                    <label for="select-all" class="form-check-label ms-2">تحديد الكل</label>
                </div>
                <div>
                    <button type="button" class="btn btn-danger btn-sm" onclick="deleteSelected()" id="delete-selected-btn" disabled>
                        <i class="fas fa-trash me-2"></i>
                        حذف المحدد
                    </button>
                </div>
            </div>
            
            <form id="bulk-delete-form" action="{{ route('barcodes.bulk-delete') }}" method="POST" style="display: none;">
                @csrf
                <input type="hidden" name="ids" id="selected-ids">
            </form>
            
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th width="3%">
                                <input type="checkbox" id="select-all-header" class="form-check-input" onchange="toggleSelectAll()">
                            </th>
                            <th width="5%">#</th>
                            <th width="27%">قيمة الباركود</th>
                            <th width="20%">المادة</th>
                            <th width="10%">النوع</th>
                            <th width="10%">الحالة</th>
                            <th width="15%">تاريخ التوليد</th>
                            <th width="10%" class="text-center">الإجراءات</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($barcodes as $barcode)
                        <tr>
                            <td>
                                <input type="checkbox" 
                                       class="form-check-input barcode-checkbox" 
                                       value="{{ $barcode->id }}"
                                       onchange="updateDeleteButton()">
                            </td>
                            <td>{{ $barcode->id }}</td>
                            <td>
                                <code style="font-size: 0.8rem;">{{ $barcode->barcode_value }}</code>
                            </td>
                            <td>
                                @if($barcode->item)
                                    <strong>{{ $barcode->item->name }}</strong>
                                    <br>
                                    <small class="text-muted">
                                        {{ $barcode->item->organization->name }}
                                    </small>
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>
                            <td>
                                <span class="badge bg-info">{{ $barcode->barcode_type }}</span>
                            </td>
                            <td>
                                @if($barcode->printed)
                                    <span class="badge bg-success">
                                        <i class="fas fa-check"></i> مطبوع
                                    </span>
                                    <br>
                                    <small class="text-muted">{{ $barcode->printed_at->format('Y-m-d') }}</small>
                                @else
                                    <span class="badge bg-warning">
                                        <i class="fas fa-clock"></i> غير مطبوع
                                    </span>
                                @endif
                            </td>
                            <td>
                                <small>{{ $barcode->generated_at->format('Y-m-d H:i') }}</small>
                            </td>
                            <td class="text-center">
                                <div class="btn-group" role="group">
                                    <a href="{{ route('barcodes.show', $barcode) }}" 
                                       class="btn btn-sm btn-info"
                                       title="عرض">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="{{ route('barcodes.print') }}?ids={{ $barcode->id }}" 
                                       class="btn btn-sm btn-primary"
                                       title="طباعة">
                                        <i class="fas fa-print"></i>
                                    </a>
                                    <button type="button" 
                                            class="btn btn-sm btn-danger"
                                            onclick="confirmDelete({{ $barcode->id }})"
                                            title="حذف">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                                
                                <form id="delete-form-{{ $barcode->id }}" 
                                      action="{{ route('barcodes.destroy', $barcode) }}" 
                                      method="POST" 
                                      style="display: none;">
                                    @csrf
                                    @method('DELETE')
                                </form>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            
            <!-- Pagination -->
            <div class="mt-3 d-flex justify-content-center">
                <style>
                    .pagination {
                        margin-bottom: 0 !important;
                        font-size: 0.75rem !important;
                        justify-content: center;
                        display: flex !important;
                        align-items: center;
                    }
                    .pagination .page-link {
                        padding: 0.2rem 0.4rem !important;
                        font-size: 0.75rem !important;
                        line-height: 1.3 !important;
                        min-width: 28px !important;
                        max-width: 28px !important;
                        height: 28px !important;
                        text-align: center !important;
                        border-radius: 4px !important;
                        margin: 0 1px !important;
                        display: flex !important;
                        align-items: center !important;
                        justify-content: center !important;
                    }
                    .pagination .page-item {
                        margin: 0 !important;
                    }
                    .pagination .page-item .page-link {
                        min-width: 28px !important;
                        max-width: 28px !important;
                        height: 28px !important;
                        text-align: center !important;
                        padding: 0.2rem 0.4rem !important;
                    }
                    .pagination .page-item:first-child .page-link,
                    .pagination .page-item:last-child .page-link {
                        font-size: 0.7rem !important;
                        padding: 0.2rem 0.4rem !important;
                        min-width: 28px !important;
                        max-width: 28px !important;
                        height: 28px !important;
                        display: flex !important;
                        align-items: center !important;
                        justify-content: center !important;
                    }
                    .pagination .page-item.disabled .page-link {
                        opacity: 0.5;
                        cursor: not-allowed;
                    }
                    .pagination .page-item.active .page-link {
                        font-weight: 600;
                        z-index: 1;
                    }
                    .pagination .page-link svg,
                    .pagination .page-link i {
                        width: 12px !important;
                        height: 12px !important;
                        font-size: 12px !important;
                    }
                </style>
                {{ $barcodes->links('pagination::bootstrap-5') }}
            </div>
        @else
            <div class="text-center py-5">
                <i class="fas fa-barcode fa-3x text-muted mb-3"></i>
                <h5 class="text-muted">لا توجد باركودات</h5>
                <p class="text-muted">ابدأ بتوليد باركودات للمواد</p>
                <a href="{{ route('barcodes.generate') }}" class="btn btn-success">
                    <i class="fas fa-magic me-2"></i>
                    توليد باركودات جديدة
                </a>
            </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script>
    function confirmDelete(id) {
        if (confirm('هل أنت متأكد من حذف هذا الباركود؟')) {
            document.getElementById('delete-form-' + id).submit();
        }
    }
    
    function toggleSelectAll() {
        const selectAll = document.getElementById('select-all');
        const selectAllHeader = document.getElementById('select-all-header');
        const checkboxes = document.querySelectorAll('.barcode-checkbox');
        
        const isChecked = selectAll.checked || selectAllHeader.checked;
        checkboxes.forEach(checkbox => {
            checkbox.checked = isChecked;
        });
        
        // تحديث حالة الـ checkboxes
        selectAll.checked = isChecked;
        selectAllHeader.checked = isChecked;
        
        updateDeleteButton();
    }
    
    function updateDeleteButton() {
        const checkboxes = document.querySelectorAll('.barcode-checkbox:checked');
        const deleteBtn = document.getElementById('delete-selected-btn');
        
        if (checkboxes.length > 0) {
            deleteBtn.disabled = false;
        } else {
            deleteBtn.disabled = true;
        }
    }
    
    function deleteSelected() {
        const checkboxes = document.querySelectorAll('.barcode-checkbox:checked');
        const ids = Array.from(checkboxes).map(cb => cb.value);
        
        if (ids.length === 0) {
            alert('يرجى تحديد باركود واحد على الأقل للحذف');
            return;
        }
        
        if (confirm('هل أنت متأكد من حذف ' + ids.length + ' باركود محدد؟')) {
            const form = document.getElementById('bulk-delete-form');
            document.getElementById('selected-ids').value = ids.join(',');
            
            // التأكد من أن الـ form موجود
            if (form) {
                form.submit();
            } else {
                console.error('Form not found');
                alert('حدث خطأ. يرجى إعادة تحميل الصفحة والمحاولة مرة أخرى.');
            }
        }
    }
</script>
@endpush