@extends('layouts.app')

@section('title', 'معاينة الباركودات')

@section('content')
<div class="mb-4">
    <h1 class="page-title">
        <i class="fas fa-eye 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"><a href="{{ route('barcodes.index') }}">الباركودات</a></li>
            <li class="breadcrumb-item active">معاينة</li>
        </ol>
    </nav>
</div>

@if(session('error'))
<div class="alert alert-danger alert-dismissible fade show">
    <i class="fas fa-exclamation-circle me-2"></i>
    <strong>خطأ!</strong> {{ session('error') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

<!-- Success Message -->
<div class="alert alert-success alert-dismissible fade show">
    <i class="fas fa-check-circle me-2"></i>
    <strong>نجح!</strong> تم توليد {{ $barcodes->count() }} باركود بنجاح
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<!-- Print Options -->
<div class="card mb-4">
    <div class="card-header bg-primary text-white">
        <h5 class="mb-0">
            <i class="fas fa-print me-2"></i>
            خيارات الطباعة
        </h5>
    </div>
    <div class="card-body">
        <form id="printForm" action="{{ route('barcodes.print') }}" method="GET">
            <input type="hidden" name="ids" value="{{ $barcodes->pluck('id')->join(',') }}">
            
            <!-- Barcode Size -->
            <div class="mb-4">
                <label class="form-label fw-bold">حجم الباركود (بالسنتيمتر):</label>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-check p-3 border rounded">
                            <input class="form-check-input" type="radio" name="size" id="size_4x10" value="4x10" checked>
                            <label class="form-check-label w-100" for="size_4x10">
                                <strong>4 x 10 سم</strong> (قياس قياسي)
                            </label>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-check p-3 border rounded">
                            <input class="form-check-input" type="radio" name="size" id="size_5x10" value="5x10">
                            <label class="form-check-label w-100" for="size_5x10">
                                <strong>5 x 10 سم</strong> (قياس كبير)
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Display Options -->
            <div class="mb-4">
                <label class="form-label fw-bold">المعلومات المطلوب إظهارها مع الباركود:</label>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" name="show_item_name" id="show_item_name" value="1" checked>
                            <label class="form-check-label" for="show_item_name">
                                📦 اسم المادة
                            </label>
                        </div>
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" name="show_organization" id="show_organization" value="1" checked>
                            <label class="form-check-label" for="show_organization">
                                🏢 الهيئة
                            </label>
                        </div>
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" name="show_department" id="show_department" value="1" checked>
                            <label class="form-check-label" for="show_department">
                                📊 القسم
                            </label>
                        </div>
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" name="show_unit" id="show_unit" value="1" checked>
                            <label class="form-check-label" for="show_unit">
                                🗂️ الشعبة
                            </label>
                        </div>
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" name="show_code" id="show_code" value="1" checked>
                            <label class="form-check-label" for="show_code">
                                🏷️ الترميز
                            </label>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" name="show_item_type" id="show_item_type" value="1" checked>
                            <label class="form-check-label" for="show_item_type">
                                🏷️ نوع المادة
                            </label>
                        </div>
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" name="show_material_type" id="show_material_type" value="1" checked>
                            <label class="form-check-label" for="show_material_type">
                                🏷️ نوع الخامة
                            </label>
                        </div>
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" name="show_sequence" id="show_sequence" value="1" checked>
                            <label class="form-check-label" for="show_sequence">
                                #️⃣ الرقم التسلسلي
                            </label>
                        </div>
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" name="show_barcode_value" id="show_barcode_value" value="1" checked>
                            <label class="form-check-label" for="show_barcode_value">
                                🔢 قيمة الباركود
                            </label>
                        </div>
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" name="show_date" id="show_date" value="1">
                            <label class="form-check-label" for="show_date">
                                📅 تاريخ الطباعة
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="row align-items-end">
                <div class="col-md-3">
                    <label class="form-label">عدد الباركودات في كل صفحة</label>
                    <select name="layout" class="form-select form-select-lg">
                        <option value="1">1 باركود لكل صفحة</option>
                        <option value="2">2 باركود لكل صفحة</option>
                        <option value="4">4 باركودات لكل صفحة</option>
                        <option value="6" selected>6 باركودات لكل صفحة (موصى به)</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <button type="submit" class="btn btn-primary btn-lg w-100">
                        <i class="fas fa-print me-2"></i>
                        طباعة A4
                    </button>
                </div>
                <div class="col-md-3">
                    <button type="button" onclick="printLabels()" class="btn btn-warning btn-lg w-100">
                        <i class="fas fa-tag me-2"></i>
                        طباعة ملصقات
                    </button>
                </div>
                <div class="col-md-3">
                    <a href="{{ route('barcodes.index') }}" class="btn btn-success btn-lg w-100">
                        <i class="fas fa-list me-2"></i>
                        القائمة
                    </a>
                </div>
            </div>
            
            <div class="row mt-3">
                <div class="col-md-6">
                    <div class="alert alert-info mb-0">
                        <i class="fas fa-print me-2"></i>
                        <strong>طباعة A4:</strong>
                        <ul class="mb-0 mt-2" style="font-size: 13px;">
                            <li>للطباعة على ورق A4 عادي</li>
                            <li>يمكنك طباعة عدة باركودات في صفحة واحدة</li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="alert alert-warning mb-0">
                        <i class="fas fa-tag me-2"></i>
                        <strong>طباعة ملصقات (4×10 سم):</strong>
                        <ul class="mb-0 mt-2" style="font-size: 13px;">
                            <li>✅ للطابعات الملصقات المباشرة</li>
                            <li>✅ كل باركود يطبع على ملصق منفصل</li>
                            <li>✅ مناسب للطابعات الحرارية</li>
                        </ul>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Barcodes Preview -->
<div class="card">
    <div class="card-header bg-white">
        <h5 class="mb-0">
            <i class="fas fa-barcode me-2"></i>
            الباركودات المولدة ({{ $barcodes->count() }})
        </h5>
    </div>
    <div class="card-body">
        <div class="row g-3">
            @foreach($barcodes as $barcode)
                <div class="col-md-4">
                    <div class="card border">
                        <div class="card-body text-center">
                            <div class="bg-light p-3 rounded mb-2">
                                <i class="fas fa-barcode fa-3x text-primary"></i>
                            </div>
                            <div class="fw-bold mb-2">{{ $barcode->item->name }}</div>
                            <code style="font-size: 0.75rem; word-break: break-all;">
                                {{ $barcode->barcode_value }}
                            </code>
                            <div class="mt-2">
                                <span class="badge bg-info">{{ $barcode->barcode_type }}</span>
                            </div>
                            <hr>
                            <small class="text-muted">
                                <i class="fas fa-building me-1"></i>
                                {{ $barcode->item->organization->name }}
                            </small>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function printLabels() {
    // جمع الخيارات من الـ checkboxes
    const form = document.getElementById('printForm');
    const formData = new FormData(form);
    
    // بناء URL مع المعاملات
    const ids = formData.get('ids');
    const params = new URLSearchParams();
    params.append('ids', ids);
    
    const optionMappings = [
        { id: 'show_item_name', param: 'show_item_name' },
        { id: 'show_organization', param: 'show_organization' },
        { id: 'show_department', param: 'show_department' },
        { id: 'show_unit', param: 'show_unit' },
        { id: 'show_code', param: 'show_code' },
        { id: 'show_item_type', param: 'show_item_type' },
        { id: 'show_material_type', param: 'show_material_type' },
        { id: 'show_sequence', param: 'show_sequence' },
        { id: 'show_barcode_value', param: 'show_barcode_value' },
        { id: 'show_date', param: 'show_date' },
    ];

    optionMappings.forEach(({ id, param }) => {
        const checkbox = document.getElementById(id);
        const value = checkbox && checkbox.checked ? '1' : '0';
        params.append(param, value);

        if (param === 'show_unit') {
            params.append('show_section', value);
        }
    });
    
    // فتح صفحة طباعة الملصقات
    const url = '{{ route("barcodes.print-label") }}?' + params.toString();
    window.open(url, '_blank');
}
</script>
@endpush