@extends('admin.layouts.master')
@section('title', 'إضافة مصروف جديد')

@section('css')
<style>
.form-header { background:linear-gradient(135deg,#fd7e14 0%,#e65c00 100%); border-radius:16px; padding:1.5rem; color:#fff; }
.form-section { border-right:3px solid #fd7e14; padding-right:1rem; margin-bottom:1.5rem; }
.form-section-title { font-weight:700; color:#6c3d00; font-size:.9rem; text-transform:uppercase; letter-spacing:.5px; margin-bottom:.75rem; }
.form-label { font-weight:600; color:#444; font-size:.88rem; }
.form-control:focus, .form-select:focus { border-color:#fd7e14; box-shadow:0 0 0 .2rem rgba(253,126,20,.15); }
.required-star { color:#dc3545; }
.amount-input-group .input-group-text { background:#fff8ee; border-color:#ffe0a0; color:#fd7e14; font-weight:700; }
.upload-zone { border:2px dashed #ffe0a0; border-radius:12px; background:#fffbf5; padding:1.5rem; text-align:center; cursor:pointer; transition:all .2s; }
.upload-zone:hover { border-color:#fd7e14; background:#fff5e0; }
</style>
@endsection

@section('content')
<div class="pc-container"><div class="pc-content">

    <div class="form-header mb-4 d-flex justify-content-between align-items-center flex-wrap gap-2">
        <div>
            <h4 class="mb-1 text-white fw-bold"><i class="ti ti-plus-circle me-2"></i>إضافة مصروف جديد</h4>
            <div class="opacity-75 small">تسجيل مصروف جديد على المنشأة</div>
        </div>
        <a href="{{ route('admin.expenses.index') }}" class="btn btn-light btn-sm">
            <i class="ti ti-arrow-right me-1"></i> قائمة المصروفات
        </a>
    </div>

    @if ($errors->any())
        <div class="alert alert-danger alert-dismissible fade show shadow-sm mb-4">
            <i class="ti ti-alert-circle me-2"></i>
            <strong>يوجد أخطاء في البيانات المدخلة:</strong>
            <ul class="mb-0 mt-2">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="card shadow-sm">
        <div class="card-body p-4">
            <form method="post" action="{{ route('admin.expenses.store') }}" enctype="multipart/form-data">
                @include('admin.expenses._form')
            </form>
        </div>
    </div>

</div></div>
@endsection