@extends('layouts.app')

@section('title', 'التقارير المفصلة')

@section('content')
<div class="mb-4">
    <h1 class="page-title">
        <i class="fas fa-file-alt 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 class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">
                    <i class="fas fa-filter me-2"></i>
                    اختر القسم أو الشعبة أو الوحدة لعرض التقرير
                </h5>
            </div>
            <div class="card-body">
                <div class="row g-4">
                    <!-- Department Report -->
                    <div class="col-md-4">
                        <div class="card border-primary h-100">
                            <div class="card-header bg-primary text-white">
                                <h6 class="mb-0">
                                    <i class="fas fa-sitemap me-2"></i>
                                    تقرير القسم
                                </h6>
                            </div>
                            <div class="card-body">
                                <p class="text-muted">عرض تقرير مفصل لجميع الأجهزة والأثاث في القسم المحدد</p>
                                
                                <form action="{{ route('reports.department', 0) }}" method="GET" id="departmentForm">
                                    <div class="mb-3">
                                        <label for="department_id" class="form-label">اختر القسم:</label>
                                        <select name="department_id" id="department_id" class="form-select" required>
                                            <option value="">-- اختر القسم --</option>
                                            @foreach($departments as $dept)
                                                <option value="{{ $dept->id }}">{{ $dept->name }} ({{ $dept->code }})</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    
                                    <button type="submit" class="btn btn-primary w-100">
                                        <i class="fas fa-file-pdf me-2"></i>
                                        عرض التقرير
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>

                    <!-- Section Report -->
                    <div class="col-md-4">
                        <div class="card border-success h-100">
                            <div class="card-header bg-success text-white">
                                <h6 class="mb-0">
                                    <i class="fas fa-layer-group me-2"></i>
                                    تقرير الشعبة
                                </h6>
                            </div>
                            <div class="card-body">
                                <p class="text-muted">عرض تقرير مفصل لجميع الأجهزة والأثاث في الشعبة المحددة</p>
                                
                                <form action="{{ route('reports.section', 0) }}" method="GET" id="sectionForm">
                                    <div class="mb-3">
                                        <label for="section_id" class="form-label">اختر الشعبة:</label>
                                        <select name="section_id" id="section_id" class="form-select" required>
                                            <option value="">-- اختر الشعبة --</option>
                                            @foreach($sections as $section)
                                                <option value="{{ $section->id }}">{{ $section->name }} ({{ $section->code }})</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    
                                    <button type="submit" class="btn btn-success w-100">
                                        <i class="fas fa-file-pdf me-2"></i>
                                        عرض التقرير
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>

                    <!-- Unit Report -->
                    <div class="col-md-4">
                        <div class="card border-warning h-100">
                            <div class="card-header bg-warning text-dark">
                                <h6 class="mb-0">
                                    <i class="fas fa-cubes me-2"></i>
                                    تقرير الوحدة
                                </h6>
                            </div>
                            <div class="card-body">
                                <p class="text-muted">عرض تقرير مفصل لجميع الأجهزة والأثاث في الوحدة المحددة</p>
                                
                                <form action="{{ route('reports.unit', 0) }}" method="GET" id="unitForm">
                                    <div class="mb-3">
                                        <label for="unit_id" class="form-label">اختر الوحدة:</label>
                                        <select name="unit_id" id="unit_id" class="form-select" required>
                                            <option value="">-- اختر الوحدة --</option>
                                            @foreach($units as $unit)
                                                <option value="{{ $unit->id }}">{{ $unit->name }} ({{ $unit->code }})</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    
                                    <button type="submit" class="btn btn-warning w-100">
                                        <i class="fas fa-file-pdf me-2"></i>
                                        عرض التقرير
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.getElementById('departmentForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const departmentId = document.getElementById('department_id').value;
    if (departmentId) {
        window.location.href = '{{ route("reports.department", ":id") }}'.replace(':id', departmentId);
    }
});

document.getElementById('sectionForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const sectionId = document.getElementById('section_id').value;
    if (sectionId) {
        window.location.href = '{{ route("reports.section", ":id") }}'.replace(':id', sectionId);
    }
});

document.getElementById('unitForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const unitId = document.getElementById('unit_id').value;
    if (unitId) {
        window.location.href = '{{ route("reports.unit", ":id") }}'.replace(':id', unitId);
    }
});
</script>
@endsection