@extends('admin.layouts.master')

@section('title', 'تعديل فئة: ' . $category->name_ar)

@section('css')
<style>
    .edit-hero {
        background: linear-gradient(135deg, #1a1a2e 0%, #e67e22 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="edit-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">
                        <a href="{{ route('admin.expense_categories.show', $category) }}" class="text-white-50 text-decoration-none">
                            {{ $category->name_ar }}
                        </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-edit me-2"></i>تعديل الفئة: {{ $category->name_ar }}
                    </h4>
                    <p class="mb-0 small opacity-75">
                        عدّل بيانات هذه الفئة. التغييرات ستُطبّق على جميع المصروفات المرتبطة بها.
                    </p>
                </div>
                <div class="d-flex gap-2">
                    <a href="{{ route('admin.expense_categories.show', $category) }}" class="btn btn-outline-light btn-sm">
                        <i class="ti ti-eye me-1"></i>عرض
                    </a>
                    <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>
        </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 d-flex justify-content-between align-items-center">
                <h5 class="mb-0 fw-bold">
                    <i class="ti ti-forms me-2 text-warning"></i>تعديل بيانات الفئة
                </h5>
                <span class="badge bg-{{ $category->is_active ? 'success' : 'secondary' }} rounded-pill">
                    {{ $category->is_active ? 'نشط' : 'معطل' }}
                </span>
            </div>
            <div class="card-body p-4">
                <form method="POST" action="{{ route('admin.expense_categories.update', $category) }}" novalidate>
                    @method('PUT')
                    @include('admin.expense_categories._form')
                </form>
            </div>
        </div>

        {{-- Danger Zone --}}
        @can('expense_categories.delete')
        <div class="card border-danger mt-3">
            <div class="card-header bg-white border-bottom-0">
                <h6 class="mb-0 text-danger"><i class="ti ti-alert-triangle me-2"></i>منطقة الخطر</h6>
            </div>
            <div class="card-body d-flex flex-wrap justify-content-between align-items-center gap-3">
                <div>
                    <div class="fw-semibold">حذف هذه الفئة</div>
                    <small class="text-muted">لا يمكن حذف الفئة إذا كانت تحتوي على مصروفات مرتبطة بها.</small>
                </div>
                <form action="{{ route('admin.expense_categories.destroy', $category) }}" method="POST"
                      onsubmit="return confirm('هل أنت متأكد من حذف الفئة؟ لا يمكن التراجع عن هذا الإجراء.');">
                    @csrf @method('DELETE')
                    <button type="submit" class="btn btn-outline-danger btn-sm">
                        <i class="ti ti-trash me-1"></i>حذف الفئة
                    </button>
                </form>
            </div>
        </div>
        @endcan

    </div>
</div>
@endsection

@stack('scripts')