@extends('layouts.app')

@section('title', 'إنشاء حوالة جديدة - نظام إدارة الحوالات الخارجية')

@section('page-title', 'إنشاء حوالة جديدة')

@section('page-actions')
<a href="{{ route('transfers.index') }}" class="btn btn-secondary">
    <i class="bi bi-arrow-right"></i> العودة إلى الحوالات
</a>
@endsection

@section('content')
<form action="{{ route('transfers.store') }}" method="POST" enctype="multipart/form-data">
    @csrf
    
    <div class="row">
        <div class="col-md-8">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">معلومات الحوالة</h5>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="company_id" class="form-label">الشركة المحولة <span class="text-danger">*</span></label>
                            <select id="company_id" name="company_id" class="form-select @error('company_id') is-invalid @enderror" required>
                                <option value="">-- اختر الشركة --</option>
                                @foreach($companies as $company)
                                    <option value="{{ $company->id }}" {{ old('company_id') == $company->id ? 'selected' : '' }}>{{ $company->name }}</option>
                                @endforeach
                            </select>
                            @error('company_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-6">
                            <label for="bank_id" class="form-label">المصرف <span class="text-danger">*</span></label>
                            <select id="bank_id" name="bank_id" class="form-select @error('bank_id') is-invalid @enderror" required>
                                <option value="">-- اختر المصرف --</option>
                                @foreach($banks as $bank)
                                    <option value="{{ $bank->id }}" {{ old('bank_id') == $bank->id ? 'selected' : '' }}>{{ $bank->name }}</option>
                                @endforeach
                            </select>
                            @error('bank_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="bank_account_id" class="form-label">رقم الحساب <span class="text-danger">*</span></label>
                            <select id="bank_account_id" name="bank_account_id" class="form-select @error('bank_account_id') is-invalid @enderror" required>
                              
                                <option value="">-- اختر رقم الحساب --</option>
                    
                      @foreach($BankAccounts as $BankAccount)
                      <option value="{{ $BankAccount->account_number }}" {{ old('bank_id') == $bank->id ? 'selected' : '' }}>{{ $BankAccount->account_number }}</option>
                           @endforeach
                            </select>
                            @error('bank_account_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-6">
                            <label for="beneficiary_id" class="form-label">المستفيد <span class="text-danger">*</span></label>
                            <select id="beneficiary_id" name="beneficiary_id" class="form-select @error('beneficiary_id') is-invalid @enderror" required>
                                <option value="">-- اختر المستفيد --</option>
                                @foreach($beneficiaries as $beneficiary)
                                    <option value="{{ $beneficiary->id }}" {{ old('beneficiary_id') == $beneficiary->id ? 'selected' : '' }}>{{ $beneficiary->name }}</option>
                                @endforeach
                            </select>
                            @error('beneficiary_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="amount" class="form-label">المبلغ <span class="text-danger">*</span></label>
                            <input type="number" step="0.01" id="amount" name="amount" class="form-control @error('amount') is-invalid @enderror" value="{{ old('amount') }}" required>
                            @error('amount')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-6">
                            <label for="currency" class="form-label">العملة <span class="text-danger">*</span></label>
                            <select id="currency" name="currency" class="form-select @error('currency') is-invalid @enderror" required>
                                <option value="">-- اختر العملة --</option>
                                <option value="USD" {{ old('currency') == 'USD' ? 'selected' : '' }}>دولار أمريكي (USD)</option>
                                <option value="EUR" {{ old('currency') == 'EUR' ? 'selected' : '' }}>يورو (EUR)</option>
                                <option value="GBP" {{ old('currency') == 'GBP' ? 'selected' : '' }}>جنيه إسترليني (GBP)</option>
                            </select>
                            @error('currency')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="amount_in_words" class="form-label">المبلغ كتابة (بالعربية) <span class="text-danger">*</span></label>
                            <input type="text" id="amount_in_words" name="amount_in_words" class="form-control @error('amount_in_words') is-invalid @enderror" value="{{ old('amount_in_words') }}" required>
                            @error('amount_in_words')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-6">
                            <label for="amount_in_words_en" class="form-label">المبلغ كتابة (بالإنجليزية) <span class="text-danger">*</span></label>
                            <input type="text" id="amount_in_words_en" name="amount_in_words_en" class="form-control @error('amount_in_words_en') is-invalid @enderror" value="{{ old('amount_in_words_en') }}" required>
                            @error('amount_in_words_en')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="purpose" class="form-label">الغرض من التحويل (بالعربية) <span class="text-danger">*</span></label>
                            <input type="text" id="purpose" name="purpose" class="form-control @error('purpose') is-invalid @enderror" value="{{ old('purpose') }}" required>
                            @error('purpose')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-6">
                            <label for="purpose_en" class="form-label">الغرض من التحويل (بالإنجليزية) <span class="text-danger">*</span></label>
                            <input type="text" id="purpose_en" name="purpose_en" class="form-control @error('purpose_en') is-invalid @enderror" value="{{ old('purpose_en') }}" required>
                            @error('purpose_en')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="invoice_number" class="form-label">رقم الفاتورة <span class="text-danger">*</span></label>
                            <input type="text" id="invoice_number" name="invoice_number" class="form-control @error('invoice_number') is-invalid @enderror" value="{{ old('invoice_number') }}" required>
                            @error('invoice_number')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-6">
                            <label for="invoice_date" class="form-label">تاريخ الفاتورة <span class="text-danger">*</span></label>
                            <input type="date" id="invoice_date" name="invoice_date" class="form-control @error('invoice_date') is-invalid @enderror" value="{{ old('invoice_date', date('Y-m-d')) }}" required>
                            @error('invoice_date')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="note" class="form-label">ملاحظات</label>
                        <textarea id="note" name="note" class="form-control @error('note') is-invalid @enderror" rows="3">{{ old('note') }}</textarea>
                        @error('note')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>
            
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">المرفقات</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="attachments" class="form-label">إرفاق ملفات</label>
                        <input type="file" id="attachments" name="attachments[]" class="form-control @error('attachments.*') is-invalid @enderror" multiple>
                        <div class="form-text">يمكنك إرفاق الفواتير، إجازة الاستيراد، وأي مستندات أخرى ذات صلة</div>
                        @error('attachments.*')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div id="attachment-types-container"></div>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">معلومات المستفيد</h5>
                </div>
                <div class="card-body">
                    <div id="beneficiary-info">
                        <p class="text-muted text-center">يرجى اختيار المستفيد لعرض المعلومات</p>
                    </div>
                </div>
            </div>
            
            <div class="card">
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="bi bi-save"></i> حفظ الحوالة
                        </button>
                        <a href="{{ route('transfers.index') }}" class="btn btn-outline-secondary">
                            <i class="bi bi-x-circle"></i> إلغاء
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        // Load bank accounts when company and bank are selected
        function loadBankAccounts() {
            const companyId = $('#company_id').val();
            const bankId = $('#bank_id').val();
            
            if (companyId && bankId) {
                $.ajax({
                    url: `/api/company/${companyId}/bank/${bankId}/accounts`,
                    method: 'GET',
                    success: function(data) {
                        const $accountSelect = $('#bank_account_id');
                        $accountSelect.empty();
                        $accountSelect.append('<option value="">-- اختر رقم الحساب --</option>');
                        
                        $.each(data, function(index, account) {
                            $accountSelect.append(`<option value="${account.id}">${account.account_number} (${account.currency})</option>`);
                        });
                    },
                    error: function() {
                        alert('حدث خطأ أثناء تحميل الحسابات.');
                    }
                });
            }
        }
        
        // Load beneficiary information
        function loadBeneficiaryInfo() {
            const beneficiaryId = $('#beneficiary_id').val();
            
            if (beneficiaryId) {
                $.ajax({
                    url: "{{ route('get.beneficiary', '') }}/" + beneficiaryId,
                    method: 'GET',
                    success: function(data) {
                        const beneficiary = data.beneficiary;
                        
                        let html = `
                            <div class="mb-3">
                                <h6>معلومات المستفيد</h6>
                                <p><strong>الاسم:</strong> ${beneficiary.name}</p>
                                <p><strong>العنوان:</strong> ${beneficiary.address}</p>
                                <p><strong>الدولة:</strong> ${beneficiary.country} - ${beneficiary.city}</p>
                            </div>
                            <div class="mb-3">
                                <h6>معلومات البنك المستفيد</h6>
                                <p><strong>البنك:</strong> ${beneficiary.bank_name}</p>
                                <p><strong>العنوان:</strong> ${beneficiary.bank_address}</p>
                                <p><strong>سويفت كود:</strong> ${beneficiary.swift_code}</p>
                                <p><strong>رقم الحساب:</strong> ${beneficiary.account_number}</p>
                            </div>
                        `;
                        
                        $('#beneficiary-info').html(html);
                    },
                    error: function() {
                        $('#beneficiary-info').html('<p class="text-danger text-center">حدث خطأ أثناء تحميل معلومات المستفيد.</p>');
                    }
                });
            } else {
                $('#beneficiary-info').html('<p class="text-muted text-center">يرجى اختيار المستفيد لعرض المعلومات</p>');
            }
        }
        
        // Convert amount to words
        $('#amount').on('change', function() {
            const amount = $(this).val();
            const currency = $('#currency').val();
            
            if (amount && currency) {
                // Simple Arabic amount to words
                let arabicWords = convertToArabicWords(amount) + ' ' + getCurrencyNameArabic(currency);
                $('#amount_in_words').val(arabicWords);
                
                // Simple English amount to words
                let englishWords = convertToEnglishWords(amount) + ' ' + getCurrencyNameEnglish(currency);
                $('#amount_in_words_en').val(englishWords);
            }
        });
        
        $('#currency').on('change', function() {
            $('#amount').trigger('change');
        });
        
        // Handle file input changes
        $('#attachments').change(function() {
            const files = this.files;
            $('#attachment-types-container').empty();
            
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                
                const html = `
                    <div class="mb-2">
                        <div class="d-flex align-items-center">
                            <i class="bi bi-file-earmark me-2"></i>
                            <strong>${file.name}</strong>
                            <select name="attachment_types[${i}]" class="form-select form-select-sm ms-2">
                                <option value="invoice">فاتورة</option>
                                <option value="import_license">إجازة استيراد</option>
                                <option value="shipping_document">مستند شحن</option>
                                <option value="other">مستند آخر</option>
                            </select>
                        </div>
                    </div>
                `;
                
                $('#attachment-types-container').append(html);
            }
        });
        
        // Helper functions for amount to words
        function convertToArabicWords(amount) {
            // This is a very simplified version - in production, use a proper library
            const units = ['', 'واحد', 'اثنان', 'ثلاثة', 'أربعة', 'خمسة', 'ستة', 'سبعة', 'ثمانية', 'تسعة'];
            const teens = ['عشرة', 'أحد عشر', 'اثنا عشر', 'ثلاثة عشر', 'أربعة عشر', 'خمسة عشر', 'ستة عشر', 'سبعة عشر', 'ثمانية عشر', 'تسعة عشر'];
            const tens = ['', 'عشرة', 'عشرون', 'ثلاثون', 'أربعون', 'خمسون', 'ستون', 'سبعون', 'ثمانون', 'تسعون'];
            
            // Basic implementation for demo
            if (amount < 10) return units[amount];
            if (amount < 20) return teens[amount - 10];
            return 'فقط ' + amount + ' لا غير';
        }
        
        function convertToEnglishWords(amount) {
            // This is a very simplified version - in production, use a proper library
            const units = ['', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
            const teens = ['ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen'];
            const tens = ['', 'ten', 'twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety'];
            
            // Basic implementation for demo
            if (amount < 10) return units[amount];
            if (amount < 20) return teens[amount - 10];
            return 'only ' + amount + ' dollars';
        }
        
        function getCurrencyNameArabic(currency) {
            switch(currency) {
                case 'USD': return 'دولار أمريكي';
                case 'EUR': return 'يورو';
                case 'GBP': return 'جنيه إسترليني';
                default: return '';
            }
        }
        
        function getCurrencyNameEnglish(currency) {
            switch(currency) {
                case 'USD': return 'US dollars';
                case 'EUR': return 'euros';
                case 'GBP': return 'British pounds';
                default: return '';
            }
        }
        
        // Event listeners
        $('#company_id, #bank_id').change(loadBankAccounts);
        $('#beneficiary_id').change(loadBeneficiaryInfo);
    });
</script>
@endsection