@extends('admin.layouts.master')

@section('title', 'إضافة فئة مصروف جديدة')

@section('css')
<style>
    .create-hero {
        background: linear-gradient(135deg, #1a1a2e 0%, #c0392b 100%);
        border-radius: 14px;
        padding: 20px 24px;
    }
    .form-control-lg { font-size: 1rem; }
    .form-check-input[role="switch"] { width: 2.8em; height: 1.5em; }
</style>
@endsection

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

        {{-- Breadcrumb + Hero --}}
        <div class="create-hero mb-4 text-white">
            <nav aria-label="breadcrumb" class="mb-2">
                <ol class="breadcrumb mb-0" style="--bs-breadcrumb-divider-color:rgba(255,255,255,.5);">
                    <li class="breadcrumb-item">
                        <a href="{{ route('admin.expense_categories.index') }}" class="text-white-50 text-decoration-none">
                            <i class="ti ti-tags me-1"></i>فئات المصروفات
                        </a>
                    </li>
                    <li class="breadcrumb-item active text-white" aria-current="page">إضافة جديدة</li>
                </ol>
            </nav>
            <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
                <div>
                    <h4 class="mb-1 fw-bold"><i class="ti ti-plus me-2"></i>إضافة فئة مصروف جديدة</h4>
                    <p class="mb-0 small opacity-75">
                        أنشئ فئة لتصنيف مصروفاتك — شحن، إيجار، رواتب، كهرباء، صيانة وغيرها.
                    </p>
                </div>
                <a href="{{ route('admin.expense_categories.index') }}" class="btn btn-outline-light btn-sm">
                    <i class="ti ti-arrow-right me-1"></i>رجوع
                </a>
            </div>
        </div>

        {{-- Validation Errors --}}
        @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show mb-4">
                <i class="ti ti-alert-triangle me-2"></i>
                <strong>يرجى تصحيح الأخطاء التالية:</strong>
                <ul class="mb-0 mt-2 ps-3">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        {{-- Form Card --}}
        <div class="card shadow-sm">
            <div class="card-header bg-white border-bottom py-3">
                <h5 class="mb-0 fw-bold">
                    <i class="ti ti-forms me-2 text-danger"></i>بيانات الفئة
                </h5>
            </div>
            <div class="card-body p-4">
                <form method="POST" action="{{ route('admin.expense_categories.store') }}" novalidate>
                    @include('admin.expense_categories._form')
                </form>
            </div>
        </div>

        {{-- Tips Card --}}
        <div class="card border-0 bg-light mt-3">
            <div class="card-body py-3">
                <h6 class="text-muted mb-2"><i class="ti ti-bulb me-2 text-warning"></i>أمثلة شائعة لفئات المصروفات في مجال الألواح</h6>
                <div class="d-flex flex-wrap gap-2">
                    @foreach(['مصاريف الشحن والنقل','مصاريف إيجار المستودع','مصاريف الكهرباء والمياه','مصاريف رواتب العمال','مصاريف صيانة المعدات','مصاريف التسويق والإعلان','مصاريف المواد المساعدة','مصاريف التأمين','مصاريف إدارية'] as $tip)
                        <span class="badge bg-white border text-secondary fw-normal px-3 py-2" style="cursor:pointer;" onclick="document.querySelector('[name=name_ar]').value='{{ $tip }}'">
                            <i class="ti ti-plus me-1 text-danger"></i>{{ $tip }}
                        </span>
                    @endforeach
                </div>
                <div class="form-text mt-2">انقر على أي مثال لنسخه مباشرة في حقل الاسم.</div>
            </div>
        </div>

    </div>
</div>
@endsection

@stack('scripts')