{{-- manual --}}
@extends('user.layouts.app')
@php
    $activeAttachmentsForJs = collect($method->activeAttachments ?? [])
        ->map(function ($attachment) {
            $options = $attachment->options;
            if ($options instanceof \Illuminate\Support\Collection) {
                $options = $options->values()->toArray();
            } elseif (is_string($options)) {
                $decoded = json_decode($options, true);
                if (json_last_error() === JSON_ERROR_NONE) {
                    $options = $decoded;
                }
            }

            return [
                'id' => $attachment->id,
                'name' => $attachment->name,
                'input_type' => $attachment->input_type,
                'is_required' => (bool) $attachment->is_required,
                'options' => $options,
                'min' => $attachment->min,
                'max' => $attachment->max,
                'placeholder' => $attachment->placeholder,
                'input_dom_id' => 'attachment_' . $attachment->id,
            ];
        })
        ->values();
@endphp
@section('css')
    <link rel="stylesheet" href="{{ vasset('assest/front2/css/pages/common-request-balance.css') }}">
    <style>
        .required-asterisk {
            color: #dc3545;
            font-weight: bold;
            margin-left: 5px;
        }

        .form-row {
            margin-bottom: 1rem;
        }

        .form-row .input-group {
            flex: 1;
        }

        .form-row .input-group:not(:last-child) {
            margin-right: 1rem;
        }

        .form-row .input-group select {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }

        .form-row .input-group select:focus {
            outline: none;
            border-color: #007bff;
        }
    </style>
@endsection
@section('content')
    <div class="content-wrapper">

        <div class="page-header">
            <x-lucide-hand-coins width="24" height="24" />
            <div class="page-header--title">
                <h1>طلب رصيد</h1>
                <span class="page-header--splitter ">|</span>
                <p>{{ $method->name }}</p>
                <small>| يدوي</small>
            </div>
        </div>
        <div class="form-container max-w-md mx-auto" x-data="balanceRequestForm">
            <div class="form-header">
                @if ($method->rotating_title)
                    <div class="rotating-title-banner"
                        style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 12px 20px; border-radius: 8px; margin-bottom: 15px; text-align: center; font-weight: bold; font-size: 16px; box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);">
                        <x-lucide-megaphone class="me-2" width="20" height="20" />
                        {{ $method->rotating_title }}
                    </div>
                @endif
                {!! $method->note !!}
                {{-- add class  form-header--important --}}
                <!--<br>-->
                <!--<p>  القيمة الفعليه : @{{ amount2 }}   </p>-->
            </div>
            <!--<div class="card-header adawecardheadtwo" style="text-align: center;">-->
            <!--    @{{ amount2 }}-->
            <!--</div>-->

            <form id="requestbalance">
                @csrf <input x-model="form.finalAmount" name="amount" type="hidden" class="form-control">
                <input name="method_id" value="{{ $method->id }}" type="hidden" class="form-control">

                <div class="form-row">
                    <div class="input-group prefix">
                        <label for="amount-paied" x-text="`القيمة المدفوعة (${methodConfig.min} - ${methodConfig.max})`">
                            القيمة
                            المدفوعة </label>
                        <div class="input-wrapper">
                            <span class="input-prefix"> {{ Auth()->user()->currency->name ?? '$' }}
                            </span>
                            <input :min="methodConfig.min" :max="methodConfig.max" x-model.number="form.paidAmount"
                                id="amount-paied" @input="calculateFinalAmount" required type="number">

                        </div>
                    </div>
                    <div class="input-group prefix">
                        <label for="final-amount"> المبلغ النهائي </label>
                        <div class="input-wrapper">
                            <span class="input-prefix"> {{ Auth()->user()->currency->name ?? '$' }}
                            </span>
                            <input x-model="form.displayAmount" id="final-amount" readonly type="text">
                        </div>
                    </div>
                </div>

                {{-- Operation Number Field (conditional) --}}
                <div class="form-row" x-show="methodConfig.hasOperationNumber">
                    <div class="input-group">
                        <label for="operation-number">
                            رقم العملية
                            <span class="required-asterisk">*</span>
                        </label>
                        <div class="input-wrapper">
                            <input x-model="form.operationNumber" name="operation_number" id="operation-number"
                                type="text" placeholder="أدخل رقم العملية" :required="methodConfig.hasOperationNumber">
                        </div>
                    </div>
                </div>

                {{-- Dynamic attachment fields --}}
                @if ($method->activeAttachments && $method->activeAttachments->count() > 0)
                    @foreach ($method->activeAttachments as $attachment)
                        @php
                            $fieldName = $attachment->name;
                            $fieldKey = json_encode($fieldName, JSON_UNESCAPED_UNICODE);
                            $inputId = 'attachment_' . $attachment->id;
                            $displayLabel = $attachment->placeholder ?: $attachment->name;
                        @endphp
                        <div class="form-row">
                            @if ($attachment->input_type === 'text')
                                <div class="input-group">
                                    <label for="{{ $inputId }}">
                                        {{ $displayLabel }}
                                        @if ($attachment->is_required)
                                            <span class="required-asterisk">*</span>
                                        @endif
                                    </label>
                                    <div class="input-wrapper">
                                        <input x-model='form.attachments[{{ $fieldKey }}]' name="{{ $fieldName }}"
                                            id="{{ $inputId }}" type="text"
                                            placeholder="{{ $attachment->placeholder }}"
                                            @if ($attachment->is_required) required @endif>
                                    </div>
                                </div>
                            @elseif($attachment->input_type === 'number')
                                <div class="input-group">
                                    <label for="{{ $inputId }}">
                                        {{ $displayLabel }}
                                        @if ($attachment->min !== null || $attachment->max !== null)
                                            <span style="color: #666; font-size: 0.9em;">
                                                ({{ $attachment->min ?? 0 }} - {{ $attachment->max ?? '∞' }})
                                            </span>
                                        @endif
                                        @if ($attachment->is_required)
                                            <span class="required-asterisk">*</span>
                                        @endif
                                    </label>
                                    <div class="input-wrapper">
                                        <input x-model='form.attachments[{{ $fieldKey }}]' name="{{ $fieldName }}"
                                            id="{{ $inputId }}" type="number"
                                            placeholder="{{ $attachment->placeholder }}"
                                            @if ($attachment->min !== null) min="{{ $attachment->min }}" @endif
                                            @if ($attachment->max !== null) max="{{ $attachment->max }}" @endif
                                            @if ($attachment->is_required) required @endif>
                                    </div>
                                </div>
                            @elseif($attachment->input_type === 'select')
                                <div class="input-group">
                                    <label for="{{ $inputId }}">
                                        {{ $displayLabel }}
                                        @if ($attachment->is_required)
                                            <span class="required-asterisk">*</span>
                                        @endif
                                    </label>
                                    <div class="input-wrapper">
                                        <select x-model='form.attachments[{{ $fieldKey }}]' name="{{ $fieldName }}"
                                            id="{{ $inputId }}" @if ($attachment->is_required) required @endif>
                                            <option value="">{{ $attachment->placeholder ?: 'اختر خيار' }}</option>
                                            @if ($attachment->options)
                                                @foreach ($attachment->options as $option)
                                                    <option value="{{ $option }}">{{ $option }}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                            @elseif($attachment->input_type === 'file')
                                <div class="input-group file-upload">
                                    <label class="input-wrapper" for="{{ $inputId }}">
                                        <input name="{{ $fieldName }}" type="file" id="{{ $inputId }}"
                                            class="file-input"
                                            @change='handleAttachmentFileChange($event, {{ $fieldKey }})'
                                            @if ($attachment->is_required) required @endif>
                                        <span for="{{ $inputId }}" class="file-prefix">
                                            <svg viewBox="0 0 24 24">
                                                <path d="M12 2L6 8h4v4h4V8h4l-6-6zm-6 16v2h12v-2H6z" />
                                            </svg>
                                            <span>{{ $displayLabel }}</span>
                                        </span>
                                        <span class="file-name" for="{{ $inputId }}"
                                            x-text='attachmentFiles[{{ $fieldKey }}] || @json($attachment->placeholder ?: 'لم يتم اختيار ملف')'
                                            :class='{
                                                "valid-file": attachmentFiles[{{ $fieldKey }}] &&
                                                    attachmentFiles[{{ $fieldKey }}] !== "لم يتم اختيار ملف"
                                            }'>
                                        </span>
                                    </label>
                                </div>
                            @endif
                        </div>
                    @endforeach
                @endif

                <button type="button" @click="submitBalanceRequest" class="submit-btn " :disabled="uiState.isSubmitting"
                    :class="{ 'btn-loading': uiState.isSubmitting }">
                    <span>إرسال</span>
                </button>
            </form>
        </div>
    </div>
@endsection
@section('js')
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('balanceRequestForm', () => ({ // Method Configuration
                methodConfig: {
                    id: {{ $method->id }},
                    min: {{ $method->min ?? 0 }},
                    max: {{ $method->max ?? 0 }},
                    type: "{{ $method->type ?? 'none' }}",
                    percentage: {{ $method->percent ?? 0 }},
                    hasOperationNumber: {{ $method->hasOperationNumber ? 'true' : 'false' }}
                },

                // Active Attachments Configuration
                activeAttachments: @json($activeAttachmentsForJs->toArray()),

                // Form Data
                form: {
                    paidAmount: 0,
                    finalAmount: 0,
                    displayAmount: '',
                    operationNumber: '',
                    attachments: {}
                },

                // Attachment files
                attachmentFiles: {},

                // UI State
                uiState: {
                    isSubmitting: false,
                    canSubmit: true
                },

                // Validation
                validation: {
                    errors: [],
                    hasErrors: false
                },


                // Initialize component
                init() {
                    // Initialize attachment files display
                    this.activeAttachments.forEach(attachment => {
                        if (attachment.input_type === 'file') {
                            this.attachmentFiles[attachment.name] = attachment.placeholder ||
                                'لم يتم اختيار ملف';
                        }
                    });
                },

                // Calculate final amount with tax/percentage
                calculateFinalAmount() {
                    let calculatedAmount = this.form.paidAmount;

                    if (this.methodConfig.type == "discount") {
                        // Subtract percentage (discount)
                        let discount = (parseFloat(this.methodConfig.percentage) / 100) * Number(
                            calculatedAmount);
                        calculatedAmount = calculatedAmount - discount;
                    } else if (this.methodConfig.type == "tax") {
                        // Add percentage (fee)
                        let fee = (parseFloat(this.methodConfig.percentage) / 100) * Number(
                            calculatedAmount);
                        calculatedAmount = calculatedAmount + fee;
                    }

                    this.form.finalAmount =
                        calculatedAmount; // Format display amount using helper function
                    if (typeof formatAmount === 'function') {
                        this.form.displayAmount = formatAmount(calculatedAmount,
                            @json(Auth()->user()->currency ?? null));
                    } else {
                        this.form.displayAmount = calculatedAmount.toLocaleString('en-US', {
                            minimumFractionDigits: 4,
                            maximumFractionDigits: 4
                        });
                    }
                },

                // Handle attachment file upload change
                handleAttachmentFileChange(event, attachmentName) {
                    const file = event.target.files[0];

                    if (file) {
                        // Update display name
                        this.attachmentFiles[attachmentName] = file.name;
                        // Store file reference for validation
                        this.form.attachments[attachmentName] = file;
                    } else {
                        const attachmentConfig = this.activeAttachments.find(item => item.name ===
                            attachmentName);
                        const placeholderText = attachmentConfig && attachmentConfig.placeholder ?
                            attachmentConfig.placeholder : 'لم يتم اختيار ملف';
                        this.attachmentFiles[attachmentName] = placeholderText;
                        delete this.form.attachments[attachmentName];
                    }
                }, // Validate form field
                validateField(value, errorMessage) {
                    if (!value || value === '') {
                        this.validation.errors.push({
                            message: errorMessage
                        });
                        showWarningAlert(errorMessage);
                        return false;
                    }
                    return true;
                },

                // Validate that amounts are valid numbers
                validateAmounts() {
                    // Check if paidAmount is a valid number and greater than 0
                    if (!this.form.paidAmount || isNaN(this.form.paidAmount) || this.form.paidAmount <=
                        0) {
                        showWarningAlert('يرجى إدخال مبلغ مدفوع صحيح أكبر من صفر');
                        return false;
                    }

                    // Check if finalAmount is a valid number and greater than 0
                    if (!this.form.finalAmount || isNaN(this.form.finalAmount) || this.form
                        .finalAmount <= 0) {
                        showWarningAlert('المبلغ النهائي غير صحيح، يرجى التحقق من الحسابات');
                        return false;
                    }

                    return true;
                },

                // Validate final amount calculation
                validateCalculation() {
                    let expectedFinalAmount = this.form.paidAmount;

                    // Recalculate to verify the calculation is correct
                    if (this.methodConfig.type === "discount") {
                        // Subtract percentage (discount)
                        let discount = (parseFloat(this.methodConfig.percentage) / 100) * Number(
                            expectedFinalAmount);
                        expectedFinalAmount = expectedFinalAmount - discount;
                    } else if (this.methodConfig.type === "tax") {
                        // Add percentage (fee)
                        let fee = (parseFloat(this.methodConfig.percentage) / 100) * Number(
                            expectedFinalAmount);
                        expectedFinalAmount = expectedFinalAmount + fee;
                    }

                    // Check if calculated amount matches the stored final amount (with small tolerance for floating point)
                    const tolerance = 0.001;
                    if (Math.abs(this.form.finalAmount - expectedFinalAmount) > tolerance) {
                        showWarningAlert(
                            'هناك خطأ في حساب المبلغ النهائي، يرجى إعادة إدخال المبلغ المدفوع');
                        return false;
                    }

                    return true;
                },

                // Validate amount range
                validateAmountRange() {
                    if (this.form.paidAmount < this.methodConfig.min) {
                        showWarningAlert("يرجى اضافة مبلغ ضمن القيم المسموحة");
                        return false;
                    }
                    if (this.form.paidAmount > this.methodConfig.max) {
                        showWarningAlert("يرجى اضافة مبلغ ضمن القيم المسموحة");
                        return false;
                    }
                    return true;
                },

                // Validate attachment fields
                validateAttachments() {
                    // Check each active attachment from the method configuration
                    for (let attachment of this.activeAttachments) {
                        const field = document.getElementById(attachment.input_dom_id);

                        // Check if required field exists in DOM
                        if (attachment.is_required && !field) {
                            showWarningAlert(
                                `الحقل "${attachment.name}" مطلوب ولكنه غير موجود في النموذج`);
                            return false;
                        }

                        // If field exists, validate it
                        if (field) {
                            const value = field.type === 'file' ? field.files[0] : field.value;

                            // Check if required field has value
                            if (attachment.is_required && (!value || (typeof value === 'string' && value
                                    .trim() === ''))) {
                                showWarningAlert(`الحقل "${attachment.name}" مطلوب`);
                                return false;
                            }

                            // Validate number fields
                            if (attachment.input_type === 'number' && value) {
                                const numValue = parseFloat(value);
                                if (isNaN(numValue)) {
                                    showWarningAlert(
                                        `الحقل "${attachment.name}" يجب أن يكون رقماً صحيحاً`);
                                    return false;
                                }

                                if (attachment.min !== null && numValue < parseFloat(attachment.min)) {
                                    showWarningAlert(
                                        `الحقل "${attachment.name}" يجب أن يكون أكبر من ${attachment.min}`
                                    );
                                    return false;
                                }

                                if (attachment.max !== null && numValue > parseFloat(attachment.max)) {
                                    showWarningAlert(
                                        `الحقل "${attachment.name}" يجب أن يكون أصغر من ${attachment.max}`
                                    );
                                    return false;
                                }
                            }

                            // Validate select fields
                            if (attachment.input_type === 'select' && value) {
                                const selectOptions = Array.isArray(attachment.options) ? attachment
                                    .options : [];
                                if (!selectOptions.includes(value)) {
                                    showWarningAlert(`قيمة غير صحيحة للحقل "${attachment.name}"`);
                                    return false;
                                }
                            }

                            // Validate file fields
                            if (attachment.input_type === 'file' && attachment.is_required) {
                                if (!value) {
                                    showWarningAlert(`يرجى اختيار ملف للحقل "${attachment.name}"`);
                                    return false;
                                }

                                // Additional file validation (size, type, etc.) can be added here
                                const maxSize = 10 * 1024 * 1024; // 10MB
                                if (value.size > maxSize) {
                                    showWarningAlert(
                                        `حجم الملف "${attachment.name}" كبير جداً. الحد الأقصى المسموح: 10MB`
                                    );
                                    return false;
                                }
                            }
                        }
                    }
                    return true;
                },

                // Validate operation number if required
                validateOperationNumber() {
                    if (this.methodConfig.hasOperationNumber) {
                        if (!this.form.operationNumber || this.form.operationNumber.trim() === '') {
                            showWarningAlert('رقم العملية مطلوب');
                            return false;
                        }
                    }
                    return true;
                },



                // Prevent duplicate submissions
                async submitBalanceRequest(event) {
                    event.preventDefault();

                    // Reset validation
                    this.validation.errors = [];
                    this.validation.hasErrors = false;

                    // Validate amounts are valid numbers
                    if (!this.validateAmounts()) {
                        return false;
                    }

                    // Validate amount range
                    if (!this.validateAmountRange()) {
                        return false;
                    }

                    // Validate calculation is correct
                    if (!this.validateCalculation()) {
                        return false;
                    }

                    // Validate operation number if required
                    if (!this.validateOperationNumber()) {
                        return false;
                    }

                    // Validate attachment fields
                    if (!this.validateAttachments()) {
                        return false;
                    }

                    // Show loading
                    this.uiState.isSubmitting = true;
                    this.uiState.canSubmit = false;

                    // Get form data from the actual form element
                    const form = document.getElementById('requestbalance');
                    const formData = new FormData(form);

                    // Override form data with Alpine.js validated values
                    formData.set('method_id', this.methodConfig.id);
                    formData.set('amount', this.form.paidAmount);
                    formData.set('final_amount', this.form.finalAmount);

                    // Add operation number if required
                    if (this.methodConfig.hasOperationNumber && this.form.operationNumber) {
                        formData.set('operation_number', this.form.operationNumber);
                    }

                    // Manually ensure all attachment values are included
                    this.activeAttachments.forEach(attachment => {
                        const field = document.getElementById(attachment.input_dom_id);

                        if (field && field.type !== 'file') {
                            // Text, number, select fields - ensure they're in FormData
                            formData.set(attachment.name, field.value);
                        }
                    });

                    try {
                        const response = await axios.post("{{ route('charge.store') }}",
                            formData, {
                                headers: {
                                    'Content-Type': 'multipart/form-data'
                                }
                            });

                        if (response.data.error === true) {
                            showWarningAlert(response.data.message);
                        } else {
                            showSuccessAlert(response.data.message);
                            // Reset form on success
                            this.resetForm();
                        }
                    } catch (error) {
                        // Handle validation errors from server
                        if (error.response && error.response.status === 422) {
                            // Try to extract specific error message
                            let errorMessage = 'يرجى التحقق من البيانات المدخلة';

                            if (error.response.data) {
                                if (error.response.data.message) {
                                    errorMessage = error.response.data.message;
                                } else if (error.response.data.errors) {
                                    // Handle Laravel validation errors
                                    const errors = error.response.data.errors;
                                    const firstError = Object.values(errors)[0];
                                    if (firstError && firstError.length > 0) {
                                        errorMessage = firstError[0];
                                    }
                                }
                            }

                            showErrorAlert(errorMessage);
                        } else {
                            showErrorAlert(error?.response?.data?.message ||
                                'حدث خطأ أثناء إرسال الطلب. يرجى المحاولة مرة أخرى.');
                        }
                    } finally {
                        this.uiState.isSubmitting = false;
                    }
                },

                // Reset form to initial state
                resetForm() {
                    this.form = {
                        paidAmount: 0,
                        finalAmount: 0,
                        displayAmount: '',
                        operationNumber: '',
                        attachments: {}
                    };

                    // Reset attachment files display
                    this.activeAttachments.forEach(attachment => {
                        if (attachment.input_type === 'file') {
                            this.attachmentFiles[attachment.name] = attachment.placeholder ||
                                'لم يتم اختيار ملف';
                            // Clear file input
                            const fileInput = document.getElementById(attachment.input_dom_id);
                            if (fileInput) {
                                fileInput.value = '';
                            }
                        }
                    });

                    this.uiState.submitCounter = 0;
                    this.uiState.canSubmit = true;
                }
            }))
        });
    </script>
@endsection