@extends('layouts.banking')

@section('title', 'إضافة وكيل جديد')

@section('content')
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">إضافة وكيل جديد</h5>
                </div>
                <div class="card-body">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('agents.store') }}" method="POST">
                        @csrf
                        
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="name" class="form-label">اسم الوكيل <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" value="{{ old('name') }}" required>
                                    @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="contact_person" class="form-label">الشخص المسؤول</label>
                                    <input type="text" class="form-control @error('contact_person') is-invalid @enderror" id="contact_person" name="contact_person" value="{{ old('contact_person') }}">
                                    @error('contact_person')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="country" class="form-label">البلد <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('country') is-invalid @enderror" id="country" name="country" value="{{ old('country') }}" required>
                                    @error('country')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="city" class="form-label">المدينة <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('city') is-invalid @enderror" id="city" name="city" value="{{ old('city') }}" required>
                                    @error('city')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="address" class="form-label">العنوان</label>
                            <input type="text" class="form-control @error('address') is-invalid @enderror" id="address" name="address" value="{{ old('address') }}">
                            @error('address')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="phone" class="form-label">رقم الهاتف <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('phone') is-invalid @enderror" id="phone" name="phone" value="{{ old('phone') }}" required>
                                    @error('phone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="email" class="form-label">البريد الإلكتروني</label>
                                    <input type="email" class="form-control @error('email') is-invalid @enderror" id="email" name="email" value="{{ old('email') }}">
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="currency_id" class="form-label">العملة <span class="text-danger">*</span></label>
                                    <select class="form-select @error('currency_id') is-invalid @enderror" id="currency_id" name="currency_id" required>
                                        <option value="">-- اختر العملة --</option>
                                        @foreach($currencies as $currency)
                                            <option value="{{ $currency->id }}" {{ old('currency_id') == $currency->id ? 'selected' : '' }}>
                                                {{ $currency->name }} ({{ $currency->code }})
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('currency_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="status" class="form-label">الحالة <span class="text-danger">*</span></label>
                                    <select class="form-select @error('status') is-invalid @enderror" id="status" name="status" required>
                                        <option value="active" {{ old('status') == 'active' ? 'selected' : '' }}>نشط</option>
                                        <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>غير نشط</option>
                                        <option value="suspended" {{ old('status') == 'suspended' ? 'selected' : '' }}>معلق</option>
                                    </select>
                                    @error('status')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        <div class="card mb-4">
                            <div class="card-header">
                                <h6 class="mb-0">إعدادات العمولة</h6>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label for="commission_type" class="form-label">نوع العمولة <span class="text-danger">*</span></label>
                                    <select class="form-select @error('commission_type') is-invalid @enderror" id="commission_type" name="commission_type" required>
                                        <option value="percentage" {{ old('commission_type') == 'percentage' ? 'selected' : '' }}>نسبة مئوية</option>
                                        <option value="fixed" {{ old('commission_type') == 'fixed' ? 'selected' : '' }}>مبلغ ثابت</option>
                                        <option value="tiered" {{ old('commission_type') == 'tiered' ? 'selected' : '' }}>متدرجة</option>
                                        <option value="custom" {{ old('commission_type') == 'custom' ? 'selected' : '' }}>مخصصة</option>
                                    </select>
                                    @error('commission_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                
                                <div id="simple_commission" class="mb-3">
                                    <label for="commission_value" class="form-label">قيمة العمولة</label>
                                    <div class="input-group">
                                        <input type="number" step="0.01" min="0" class="form-control @error('commission_value') is-invalid @enderror" id="commission_value" name="commission_value" value="{{ old('commission_value') }}">
                                        <span class="input-group-text" id="commission_unit">%</span>
                                    </div>
                                    @error('commission_value')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                
                                <div id="tiered_commission" class="d-none">
                                    <div class="mb-3">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <h6 class="mb-0">شرائح العمولة</h6>
                                            <button type="button" class="btn btn-sm btn-primary" id="add_tier">
                                                <i class="fas fa-plus-circle me-1"></i> إضافة شريحة
                                            </button>
                                        </div>
                                        
                                        <div class="table-responsive">
                                            <table class="table table-bordered" id="tiers_table">
                                                <thead>
                                                    <tr>
                                                        <th>من</th>
                                                        <th>إلى</th>
                                                        <th>نوع العمولة</th>
                                                        <th>القيمة</th>
                                                        <th>الإجراءات</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <!-- سيتم إضافة الصفوف ديناميكيًا -->
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="notes" class="form-label">ملاحظات</label>
                            <textarea class="form-control @error('notes') is-invalid @enderror" id="notes" name="notes" rows="3">{{ old('notes') }}</textarea>
                            @error('notes')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="mb-3">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i> حفظ
                            </button>
                            <a href="{{ route('agents.index') }}" class="btn btn-secondary">
                                <i class="fas fa-times me-1"></i> إلغاء
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // تغيير نوع العمولة
        const commissionTypeSelect = document.getElementById('commission_type');
        const simpleCommissionDiv = document.getElementById('simple_commission');
        const tieredCommissionDiv = document.getElementById('tiered_commission');
        const commissionValueInput = document.getElementById('commission_value');
        const commissionUnitSpan = document.getElementById('commission_unit');
        
        commissionTypeSelect.addEventListener('change', function() {
            updateCommissionFields();
        });
        
        function updateCommissionFields() {
            const commissionType = commissionTypeSelect.value;
            
            if (commissionType === 'percentage' || commissionType === 'fixed') {
                simpleCommissionDiv.classList.remove('d-none');
                tieredCommissionDiv.classList.add('d-none');
                
                if (commissionType === 'percentage') {
                    commissionUnitSpan.textContent = '%';
                } else {
                    commissionUnitSpan.textContent = '';
                }
            } else if (commissionType === 'tiered') {
                simpleCommissionDiv.classList.add('d-none');
                tieredCommissionDiv.classList.remove('d-none');
            } else {
                simpleCommissionDiv.classList.add('d-none');
                tieredCommissionDiv.classList.add('d-none');
            }
        }
        
        // إضافة شريحة جديدة
        const addTierButton = document.getElementById('add_tier');
        const tiersTableBody = document.querySelector('#tiers_table tbody');
        let tierIndex = 0;
        
        addTierButton.addEventListener('click', function() {
            addTierRow();
        });
        
        function addTierRow(min = '', max = '', type = 'percentage', value = '') {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>
                    <input type="number" step="0.01" min="0" class="form-control" name="tier_min[${tierIndex}]" value="${min}" required>
                </td>
                <td>
                    <input type="number" step="0.01" min="0" class="form-control" name="tier_max[${tierIndex}]" value="${max}" required>
                </td>
                <td>
                    <select class="form-select" name="tier_type[${tierIndex}]" required>
                        <option value="percentage" ${type === 'percentage' ? 'selected' : ''}>نسبة مئوية</option>
                        <option value="fixed" ${type === 'fixed' ? 'selected' : ''}>مبلغ ثابت</option>
                    </select>
                </td>
                <td>
                    <input type="number" step="0.01" min="0" class="form-control" name="tier_value[${tierIndex}]" value="${value}" required>
                </td>
                <td>
                    <button type="button" class="btn btn-sm btn-danger remove-tier">
                        <i class="fas fa-trash"></i>
                    </button>
                </td>
            `;
            
            tiersTableBody.appendChild(row);
            
            // إضافة حدث لزر الحذف
            row.querySelector('.remove-tier').addEventListener('click', function() {
                row.remove();
            });
            
            tierIndex++;
        }
        
        // تهيئة الحالة الأولية
        updateCommissionFields();
        
        // إضافة الشرائح المحفوظة مسبقًا (إذا كانت موجودة)
        @if(old('tier_min'))
            @foreach(old('tier_min') as $index => $min)
                addTierRow(
                    '{{ $min }}',
                    '{{ old("tier_max.$index") }}',
                    '{{ old("tier_type.$index") }}',
                    '{{ old("tier_value.$index") }}'
                );
            @endforeach
        @endif
    });
</script>
@endsection