@extends('layouts.app')

@section('content')
<div class="container">
    <x-header 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

    <form action="{{ route('staff_transactions.store') }}" method="POST" class="row g-3 needs-validation" novalidate>
        @csrf
        {{-- قائمة الموظفين و المدرسين --}}
        <div class="financial-action-box mb-3">
            <div class="input-group mb-2">
                <span class="input-group-text"><i class="fa fa-search"></i></span>
                <input type="text" id="staffSearch" class="form-control" placeholder="إبحث بالاسم...">
            </div>

            <select name="target_id" id="staffSelect" class="form-select tom-select" size="5">
                @if($staffMembers->count() > 0)
                    <optgroup label="الموظفين">
                        @foreach($staffMembers as $member)
                            <option value="User_{{ $member->id }}">{{ $loop->iteration .' - ' . $member->name }}</option>
                        @endforeach
                    </optgroup>
                @endif

                @if($teachers->count() > 0)
                    <optgroup label="المدرسين">
                        @foreach($teachers as $teacher)
                            <option value="Teacher_{{ $teacher->id }}">{{ $loop->iteration .' - ' .  $teacher->name }}</option>
                        @endforeach
                    </optgroup>
                @endif
            </select>
        </div>

        <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') == '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') == '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', 0) && !$errors->has('amount')) is-valid @endif" 
                        id="amount" 
                        placeholder="المبلغ" 
                        name="amount"
                        value="{{ old('amount', 0) }}">
                    <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') && !$errors->has('description')) is-valid @endif" 
                        id="description" 
                        placeholder="البند" 
                        name="description"
                        value="{{ old('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', date('Y-m-d')) && !$errors->has('transaction_date')) is-valid @endif" 
                        id="transaction_date" 
                        placeholder="تاريخ العملية" 
                        name="transaction_date"
                        {{-- القيمة الافتراضية هي اليوم --}}
                        value="{{ old('transaction_date', date('Y-m-d')) }}"
                        {{-- آخر يوم في الشهر الحالي --}}
                        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