@extends('layouts.app')

@section('title', 'استيراد المصروفات')
@section('page-title', 'استيراد المصروفات')
@section('title-icon', 'bx-upload')
@section('page-icon-color', '#009688')

@section('breadcrumbs')
    <span class="text-muted mx-2">/</span>
    <a href="{{ route('expenses.index') }}" class="text-muted">إدارة المصروفات</a>
    <span class="text-muted mx-2">/</span>
    <span>استيراد</span>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <!-- Import Card -->
            <div class="card shadow-sm mb-4">
                <div class="card-header py-3 d-flex justify-content-between align-items-center" style="background: linear-gradient(135deg, #009688, #4DB6AC);">
                    <h5 class="mb-0 text-white">
                        <i class='bx bx-upload me-2'></i>
                        استيراد مصروفات من ملف Excel
                    </h5>
                </div>
                <div class="card-body p-4">
                    @if(session('success'))
                        <div class="alert alert-success d-flex align-items-center">
                            <i class='bx bx-check-circle me-2 fs-5'></i>
                            {{ session('success') }}
                        </div>
                    @endif

                    @if(session('error'))
                        <div class="alert alert-danger d-flex align-items-center">
                            <i class='bx bx-error-circle me-2 fs-5'></i>
                            {{ session('error') }}
                        </div>
                    @endif

                    @if($errors->any())
                        <div class="alert alert-danger">
                            <i class='bx bx-error-circle me-2'></i>
                            <strong>يرجى تصحيح الأخطاء التالية:</strong>
                            <ul class="mb-0 mt-2">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('expenses.import') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="mb-4">
                            <label class="form-label fw-bold">
                                <i class='bx bx-file me-1' style="color: #009688;"></i>
                                اختر ملف Excel
                            </label>
                            <input type="file" name="file" class="form-control form-control-lg" accept=".xlsx,.xls,.csv" required>
                            <div class="form-text">
                                <i class='bx bx-info-circle me-1'></i>
                                الصيغ المدعومة: xlsx, xls, csv
                            </div>
                        </div>
                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-lg" style="background: linear-gradient(135deg, #009688, #4DB6AC); color: white;">
                                <i class='bx bx-upload me-1'></i>
                                استيراد الملف
                            </button>
                            <a href="{{ route('expenses.index') }}" class="btn btn-outline-secondary btn-lg">
                                <i class='bx bx-x me-1'></i>
                                إلغاء
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Instructions Card -->
            <div class="card shadow-sm">
                <div class="card-header py-3" style="background: rgba(0, 150, 136, 0.1);">
                    <h5 class="mb-0" style="color: #009688;">
                        <i class='bx bx-info-circle me-2'></i>
                        تعليمات الاستيراد
                    </h5>
                </div>
                <div class="card-body">
                    <p class="mb-3">يجب أن يحتوي ملف Excel على الأعمدة التالية:</p>
                    <div class="table-responsive">
                        <table class="table table-bordered table-sm">
                            <thead style="background: #E0F2F1;">
                                <tr>
                                    <th class="text-center" style="width: 50px;">#</th>
                                    <th>اسم العمود</th>
                                    <th>الوصف</th>
                                    <th class="text-center">مطلوب</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="text-center">1</td>
                                    <td><strong>التاريخ</strong></td>
                                    <td>تاريخ المصروف (مثال: 2024-01-15)</td>
                                    <td class="text-center"><span class="badge bg-danger">مطلوب</span></td>
                                </tr>
                                <tr>
                                    <td class="text-center">2</td>
                                    <td><strong>المبلغ</strong></td>
                                    <td>مبلغ المصروف</td>
                                    <td class="text-center"><span class="badge bg-danger">مطلوب</span></td>
                                </tr>
                                <tr>
                                    <td class="text-center">3</td>
                                    <td><strong>البيان</strong></td>
                                    <td>وصف أو بيان المصروف</td>
                                    <td class="text-center"><span class="badge bg-secondary">اختياري</span></td>
                                </tr>
                                <tr>
                                    <td class="text-center">4</td>
                                    <td><strong>طريقة الدفع</strong></td>
                                    <td>شبكة / كاش / تحويل بنكي</td>
                                    <td class="text-center"><span class="badge bg-secondary">اختياري</span></td>
                                </tr>
                                <tr>
                                    <td class="text-center">5</td>
                                    <td><strong>الحساب البنكي</strong></td>
                                    <td>الحساب البنكي الذي تم السداد منه</td>
                                    <td class="text-center"><span class="badge bg-secondary">اختياري</span></td>
                                </tr>
                                <tr>
                                    <td class="text-center">6</td>
                                    <td><strong>ملاحظات</strong></td>
                                    <td>أي ملاحظات إضافية</td>
                                    <td class="text-center"><span class="badge bg-secondary">اختياري</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="alert alert-warning mt-3 mb-0">
                        <i class='bx bx-bulb me-2'></i>
                        <strong>نصيحة:</strong> يمكنك تصدير ملف Excel من قائمة المصروفات لاستخدامه كقالب للاستيراد.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection