@extends('layouts.app')

@section('content')
<div class="container">
    <x-header title="تعديل : {{ $staffTransaction->type_text }} {{ $staffTransaction->title }}" />
    
    @if(session('success'))
        <div class="alert alert-success text-center alert-dismissible fade show">{{ session('success') }}</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    @endif
   
    @if(session('status'))
        <div class="alert alert-danger text-center alert-dismissible fade show">
            {{ session('status') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif


    {{-- عرض بيانات المستفيد (للقراءة فقط) --}}
    <div class="card bg-light mb-4 border-0">
        <div class="card-body d-flex align-items-center">
            <div class="flex-shrink-0">
                <i class="fa-solid fa-user-tie fa-3x text-secondary"></i>
            </div>
            <div class="flex-grow-1 me-3">
                <h5 class="mb-0 fw-bold">{{ $staffTransaction->transactionable->name ?? 'مستفيد غير معروف' }}</h5>
                <span class="badge bg-secondary">
                    {{ $staffTransaction->transactionable_type === 'App\Models\User' ? 'موظف' : 'مدرس' }}
                </span>
            </div>
        </div>
    </div>

    <form action="{{ route('staff_transactions.update', $staffTransaction->id) }}" method="POST" class="row g-3 needs-validation" novalidate>
        @csrf
        @method('PUT')
        {{-- قائمة الموظفين و المدرسين --}}

        <div class="row g-2 align-items-center mb-3" dir="rtl">
    
            <div class="col-12 col-md-3">
                <div class="d-flex gap-2 justify-content-center border p-2 rounded" style="height: 58px; background-color: #f8f9fa;">
                    <input type="radio" class="btn-check" name="type" value="bonus" id="success-outlined" autocomplete="off" checked {{ old('type', $staffTransaction->type) == 'bonus' ? 'checked' : '' }}>
                    <label class="btn btn-outline-success flex-grow-1 d-flex align-items-center justify-content-center" for="success-outlined">مكافأة</label>

                    <input type="radio" class="btn-check" name="type" value="deduction" id="danger-outlined" autocomplete="off" {{ old('type', $staffTransaction->type) == 'deduction' ? 'checked' : '' }}>
                    <label class="btn btn-outline-danger flex-grow-1 d-flex align-items-center justify-content-center" for="danger-outlined">خصم</label>
                </div>
            </div>

            <div class="col-6 col-md-3">
                <div class="form-floating">
                    <input type="number" 
                        class="form-control @error('amount') is-invalid @enderror 
              @if(old('amount', $staffTransaction->amount) && !$errors->has('amount')) is-valid @endif" 
                        id="amount" 
                        placeholder="المبلغ" 
                        name="amount"
                        value="{{ old('amount', $staffTransaction->amount) }}">
                    <label for="amount">المبلغ</label>
                    @error('amount')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <div class="col-6 col-md-3">
                <div class="form-floating">
                    <input type="text" 
                        class="form-control @error('description') is-invalid @enderror 
              @if(old('description', $staffTransaction->description) && !$errors->has('description')) is-valid @endif" 
                        id="description" 
                        placeholder="البند" 
                        name="description"
                        value="{{ old('description', $staffTransaction->description) }}">
                    <label for="description">البند</label>
                    @error('description')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <div class="col-6 col-md-3">
                <div class="form-floating">
                    <input type="date" 
                        class="form-control @error('transaction_date') is-invalid @enderror 
              @if(old('transaction_date', $staffTransaction->transaction_date) && !$errors->has('transaction_date')) is-valid @endif" 
                        id="transaction_date" 
                        placeholder="تاريخ العملية" 
                        name="transaction_date"
                        {{-- القيمة الافتراضية هي اليوم --}}
                        value="{{ old('transaction_date', $staffTransaction->transaction_date) }}"
                        {{-- آخر يوم في الشهر الحالي --}}
                        max="{{ date('Y-m-t') }}"
                        {{-- أول يوم في الشهر الحالي --}}
                        min="{{ date('Y-m-01') }}">
                    
                    <label for="transaction_date">تاريخ العملية</label>
                    
                    @error('transaction_date')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>

        <!-- زر الإضافة -->
        <div class="text-center my-3">
            <button type="submit" class="btn btn-success">إضافة</button>
        </div>
    </form>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const searchInput = document.getElementById('staffSearch');
        const selectElement = document.getElementById('staffSelect');
        
        // 1. حفظ نسخة من الـ optgroups فقط (لأن الموظفين والمدرسين جواها)
        const originalGroups = Array.from(selectElement.querySelectorAll('optgroup'));
        // 2. حفظ خيار "إختر الشخص" الافتراضي
        const defaultOption = selectElement.querySelector('option[disabled]');

        searchInput.addEventListener('input', function () {
            const filter = searchInput.value.toLowerCase();
            
            // مسح القائمة الحالية
            selectElement.innerHTML = '';
            
            // إضافة الخيار الافتراضي دايماً
            if (defaultOption) {
                selectElement.appendChild(defaultOption.cloneNode(true));
            }

            originalGroups.forEach(group => {
                // فلترة الـ options اللي جوه الجروب ده بالذات
                const matchedOptions = Array.from(group.querySelectorAll('option')).filter(opt => 
                    opt.text.toLowerCase().includes(filter)
                );

                // لو لقينا نتايج في الجروب ده، ننشئه ونضيف النتايج جواه
                if (matchedOptions.length > 0) {
                    const newGroup = document.createElement('optgroup');
                    newGroup.label = group.label;
                    
                    matchedOptions.forEach(opt => {
                        newGroup.appendChild(opt.cloneNode(true));
                    });
                    
                    selectElement.appendChild(newGroup);
                }
            });
        });
    });
</script>

@endsection