@extends('layouts.app')

@section('title', 'منشئ التقارير')

@section('content')
<div style="padding: 28px;">
    {{-- Header --}}
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
        <div>
            <h1 style="font-size: 22px; color: #1B2A4A; margin: 0 0 4px;">
                <i class="fas fa-chart-bar" style="color: #E8502F;"></i> منشئ التقارير
            </h1>
            <p style="color: #6B7280; font-size: 14px; margin: 0;">إنشاء تقارير مخصصة حسب احتياجاتك</p>
        </div>
    </div>

    <form action="{{ route('report-builder.generate') }}" method="POST" id="reportForm">
        @csrf

        <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 24px;">
            {{-- Sidebar: Report Configuration --}}
            <div>
                {{-- Data Source --}}
                <div style="background: white; border-radius: 16px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); margin-bottom: 20px;">
                    <h3 style="font-size: 15px; color: #1B2A4A; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid #F3F4F6;">
                        <i class="fas fa-database" style="color: #E8502F;"></i> مصدر البيانات
                    </h3>
                    <select name="data_source" id="dataSource" required
                        style="width: 100%; padding: 10px 14px; border: 1px solid #D1D5DB; border-radius: 10px; font-size: 14px; background: white; margin-bottom: 12px;"
                        onchange="updateColumns()">
                        <option value="">اختر مصدر البيانات</option>
                        <option value="employees" {{ old('data_source') == 'employees' ? 'selected' : '' }}>الموظفون</option>
                        <option value="attendance" {{ old('data_source') == 'attendance' ? 'selected' : '' }}>الحضور والانصراف</option>
                        <option value="payroll" {{ old('data_source') == 'payroll' ? 'selected' : '' }}>الرواتب</option>
                        <option value="leaves" {{ old('data_source') == 'leaves' ? 'selected' : '' }}>الإجازات</option>
                        <option value="departments" {{ old('data_source') == 'departments' ? 'selected' : '' }}>الأقسام</option>
                    </select>
                    @error('data_source') <span style="color: #E8502F; font-size: 12px;">{{ $message }}</span> @enderror
                </div>

                {{-- Columns --}}
                <div style="background: white; border-radius: 16px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); margin-bottom: 20px;">
                    <h3 style="font-size: 15px; color: #1B2A4A; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid #F3F4F6;">
                        <i class="fas fa-columns" style="color: #E8502F;"></i> الأعمدة المطلوبة
                    </h3>
                    <div id="columnsContainer">
                        {{-- Employees --}}
                        <div class="columns-group" data-source="employees" style="display: none;">
                            @foreach(['name' => 'الاسم', 'employee_id' => 'الرقم الوظيفي', 'department' => 'القسم', 'position' => 'المسمى الوظيفي', 'hire_date' => 'تاريخ التعيين', 'salary' => 'الراتب', 'status' => 'الحالة', 'phone' => 'الهاتف', 'email' => 'البريد'] as $val => $label)
                            <label style="display: flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer;">
                                <input type="checkbox" name="columns[]" value="{{ $val }}" style="accent-color: #E8502F;">
                                <span style="font-size: 13px; color: #374151;">{{ $label }}</span>
                            </label>
                            @endforeach
                        </div>
                        {{-- Attendance --}}
                        <div class="columns-group" data-source="attendance" style="display: none;">
                            @foreach(['employee_name' => 'الموظف', 'date' => 'التاريخ', 'check_in' => 'وقت الحضور', 'check_out' => 'وقت الانصراف', 'hours_worked' => 'ساعات العمل', 'overtime' => 'الإضافي', 'status' => 'الحالة', 'department' => 'القسم'] as $val => $label)
                            <label style="display: flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer;">
                                <input type="checkbox" name="columns[]" value="{{ $val }}" style="accent-color: #E8502F;">
                                <span style="font-size: 13px; color: #374151;">{{ $label }}</span>
                            </label>
                            @endforeach
                        </div>
                        {{-- Payroll --}}
                        <div class="columns-group" data-source="payroll" style="display: none;">
                            @foreach(['employee_name' => 'الموظف', 'month' => 'الشهر', 'basic_salary' => 'الراتب الأساسي', 'allowances' => 'البدلات', 'deductions' => 'الخصومات', 'net_salary' => 'صافي الراتب', 'department' => 'القسم'] as $val => $label)
                            <label style="display: flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer;">
                                <input type="checkbox" name="columns[]" value="{{ $val }}" style="accent-color: #E8502F;">
                                <span style="font-size: 13px; color: #374151;">{{ $label }}</span>
                            </label>
                            @endforeach
                        </div>
                        {{-- Leaves --}}
                        <div class="columns-group" data-source="leaves" style="display: none;">
                            @foreach(['employee_name' => 'الموظف', 'leave_type' => 'نوع الإجازة', 'start_date' => 'من', 'end_date' => 'إلى', 'days' => 'عدد الأيام', 'status' => 'الحالة', 'department' => 'القسم'] as $val => $label)
                            <label style="display: flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer;">
                                <input type="checkbox" name="columns[]" value="{{ $val }}" style="accent-color: #E8502F;">
                                <span style="font-size: 13px; color: #374151;">{{ $label }}</span>
                            </label>
                            @endforeach
                        </div>
                        {{-- Departments --}}
                        <div class="columns-group" data-source="departments" style="display: none;">
                            @foreach(['name' => 'اسم القسم', 'manager' => 'المدير', 'employees_count' => 'عدد الموظفين', 'budget' => 'الميزانية'] as $val => $label)
                            <label style="display: flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer;">
                                <input type="checkbox" name="columns[]" value="{{ $val }}" style="accent-color: #E8502F;">
                                <span style="font-size: 13px; color: #374151;">{{ $label }}</span>
                            </label>
                            @endforeach
                        </div>
                        <p id="columnsPlaceholder" style="color: #9CA3AF; font-size: 13px; text-align: center; padding: 10px;">اختر مصدر البيانات أولاً</p>
                    </div>
                </div>

                {{-- Filters --}}
                <div style="background: white; border-radius: 16px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); margin-bottom: 20px;">
                    <h3 style="font-size: 15px; color: #1B2A4A; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid #F3F4F6;">
                        <i class="fas fa-filter" style="color: #E8502F;"></i> التصفية
                    </h3>
                    <div style="margin-bottom: 12px;">
                        <label style="display: block; font-size: 12px; color: #6B7280; margin-bottom: 4px;">القسم</label>
                        <select name="filter_department"
                            style="width: 100%; padding: 8px 12px; border: 1px solid #D1D5DB; border-radius: 8px; font-size: 13px; background: white;">
                            <option value="">الكل</option>
                            @foreach($departments ?? [] as $dept)
                                <option value="{{ $dept->id }}">{{ $dept->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div style="margin-bottom: 12px;">
                        <label style="display: block; font-size: 12px; color: #6B7280; margin-bottom: 4px;">من تاريخ</label>
                        <input type="date" name="filter_date_from"
                            style="width: 100%; padding: 8px 12px; border: 1px solid #D1D5DB; border-radius: 8px; font-size: 13px; box-sizing: border-box;">
                    </div>
                    <div>
                        <label style="display: block; font-size: 12px; color: #6B7280; margin-bottom: 4px;">إلى تاريخ</label>
                        <input type="date" name="filter_date_to"
                            style="width: 100%; padding: 8px 12px; border: 1px solid #D1D5DB; border-radius: 8px; font-size: 13px; box-sizing: border-box;">
                    </div>
                </div>

                {{-- Grouping & Sorting --}}
                <div style="background: white; border-radius: 16px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); margin-bottom: 20px;">
                    <h3 style="font-size: 15px; color: #1B2A4A; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid #F3F4F6;">
                        <i class="fas fa-sort" style="color: #E8502F;"></i> التجميع والترتيب
                    </h3>
                    <div style="margin-bottom: 12px;">
                        <label style="display: block; font-size: 12px; color: #6B7280; margin-bottom: 4px;">تجميع حسب</label>
                        <select name="group_by"
                            style="width: 100%; padding: 8px 12px; border: 1px solid #D1D5DB; border-radius: 8px; font-size: 13px; background: white;">
                            <option value="">بدون تجميع</option>
                            <option value="department">القسم</option>
                            <option value="status">الحالة</option>
                            <option value="month">الشهر</option>
                        </select>
                    </div>
                    <div style="margin-bottom: 12px;">
                        <label style="display: block; font-size: 12px; color: #6B7280; margin-bottom: 4px;">ترتيب حسب</label>
                        <select name="sort_by"
                            style="width: 100%; padding: 8px 12px; border: 1px solid #D1D5DB; border-radius: 8px; font-size: 13px; background: white;">
                            <option value="">الترتيب الافتراضي</option>
                            <option value="name_asc">الاسم (أ - ي)</option>
                            <option value="name_desc">الاسم (ي - أ)</option>
                            <option value="date_asc">التاريخ (الأقدم)</option>
                            <option value="date_desc">التاريخ (الأحدث)</option>
                        </select>
                    </div>
                </div>

                {{-- Generate Button --}}
                <button type="submit" style="width: 100%; background: #E8502F; color: white; padding: 14px; border: none; border-radius: 12px; font-size: 16px; font-weight: 700; cursor: pointer;">
                    <i class="fas fa-play"></i> إنشاء التقرير
                </button>
            </div>

            {{-- Main: Preview --}}
            <div>
                <div style="background: white; border-radius: 16px; padding: 28px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); min-height: 400px;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                        <h3 style="font-size: 16px; color: #1B2A4A; margin: 0;">
                            <i class="fas fa-table" style="color: #E8502F;"></i> معاينة التقرير
                        </h3>
                    </div>

                    @if(isset($preview) && $preview)
                    <div style="overflow-x: auto;">
                        <table style="width: 100%; border-collapse: collapse; min-width: 500px;">
                            <thead>
                                <tr style="background: #F9FAFB;">
                                    @foreach($previewColumns ?? [] as $col)
                                    <th style="padding: 12px 14px; text-align: right; font-size: 13px; color: #6B7280; font-weight: 600; white-space: nowrap;">{{ $col }}</th>
                                    @endforeach
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($previewData ?? [] as $row)
                                <tr style="border-top: 1px solid #F3F4F6;">
                                    @foreach($row as $cell)
                                    <td style="padding: 10px 14px; font-size: 13px; color: #374151;">{{ $cell }}</td>
                                    @endforeach
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <p style="font-size: 12px; color: #9CA3AF; margin-top: 12px; text-align: center;">يتم عرض أول 10 صفوف كمعاينة — اضغط "إنشاء التقرير" للتقرير الكامل</p>
                    @else
                    <div style="text-align: center; padding: 80px 20px;">
                        <div style="width: 70px; height: 70px; border-radius: 50%; background: #F3F4F6; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 28px;">
                            <i class="fas fa-chart-bar" style="color: #D1D5DB;"></i>
                        </div>
                        <h3 style="color: #6B7280; font-size: 16px; margin-bottom: 6px;">لم يتم إنشاء تقرير بعد</h3>
                        <p style="color: #9CA3AF; font-size: 14px;">اختر مصدر البيانات والأعمدة ثم اضغط "إنشاء التقرير"</p>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </form>
</div>

<script>
function updateColumns() {
    var source = document.getElementById('dataSource').value;
    var groups = document.querySelectorAll('.columns-group');
    var placeholder = document.getElementById('columnsPlaceholder');

    groups.forEach(function(g) { g.style.display = 'none'; });

    if (source) {
        placeholder.style.display = 'none';
        var target = document.querySelector('.columns-group[data-source="' + source + '"]');
        if (target) target.style.display = 'block';
    } else {
        placeholder.style.display = 'block';
    }
}

document.addEventListener('DOMContentLoaded', function() {
    updateColumns();
});
</script>
@endsection