@extends('layouts.app')
@section('content')
<div class="content px-3 mt-4 mb-5">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="font-weight-bold mb-0">
            <i class="fas fa-file-invoice-dollar text-primary mr-2"></i> إصدار سندات القبض والصرف
        </h4>
        <a href="{{ route('wallets.index') }}" class="btn btn-light border shadow-sm rounded-lg">
            <i class="fas fa-wallet mr-1"></i> إدارة المحافظ
        </a>
    </div>
    @if(session('success'))
        <div class="alert alert-success shadow-sm rounded-lg mb-4" role="alert">
            <i class="fas fa-check-circle mr-1"></i> {{ session('success') }}
        </div>
    @endif
    @if($errors->any())
        <div class="alert alert-danger shadow-sm rounded-lg mb-4" role="alert">
            <h6 class="font-weight-bold mb-2"><i class="fas fa-exclamation-circle mr-1"></i> يرجى تصحيح الأخطاء التالية:</h6>
            <ul class="mb-0 pl-3">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <div class="row justify-content-center">
        <!-- Transaction Form Section -->
        <div class="col-lg-10">
            <div class="card form-card h-100">
                <div class="card-body p-4 p-md-5">
                    <h5 class="font-weight-bold mb-4 text-dark border-bottom pb-3">تفاصيل السند المالي</h5>
                    <form action="{{ route('deposit.withdraw.process') }}" method="POST" onsubmit="return confirmTransaction()">
                        @csrf
                        <!-- Wallet Selection -->
                        <div class="form-group mb-4">
                            <label for="wallet_id" class="font-weight-bold text-dark mb-2">المحفظة المستهدفة <span class="text-danger">*</span></label>
                            <select name="wallet_id" id="wallet_id" class="form-control select2" style="width: 100%;" required>
                                <option value="" disabled {{ empty($selectedWalletId) ? 'selected' : '' }}>-- يرجى اختيار المحفظة --</option>
                                @foreach($wallets as $wallet)
                                    <option value="{{ $wallet->id }}" {{ $selectedWalletId == $wallet->id ? 'selected' : '' }}>
                                        محفظة #{{ $wallet->id }} | {{ $wallet->holder->full_name ?? 'غير معروف' }} | الرصيد: {{ number_format($wallet->balanceFloat, 2) }} د.ل
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="row">
                            <!-- Transaction Type -->
                            <div class="col-md-6 form-group mb-4">
                                <label for="type" class="font-weight-bold text-dark mb-2">نوع السند <span class="text-danger">*</span></label>
                                <select name="type" id="type" class="form-control form-select" required>
                                    <option value="deposit" {{ old('type') == 'deposit' ? 'selected' : '' }}>سند قبض (إيداع رصيد)</option>
                                    <option value="withdraw" {{ old('type') == 'withdraw' ? 'selected' : '' }}>سند صرف (سحب رصيد)</option>
                                </select>
                            </div>
                            <!-- Amount -->
                            <div class="col-md-6 form-group mb-4">
                                <label for="amount" class="font-weight-bold text-dark mb-2">القيمة <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">د.ل</span>
                                    </div>
                                    <input type="number" name="amount" id="amount" class="form-control" min="0.01" step="0.01" value="{{ old('amount') }}" placeholder="0.00" required>
                                </div>
                            </div>
                        </div>
                        <!-- Allowed Withdrawal Alert -->
                        <div id="allowed-withdraw-container" class="alert alert-info shadow-sm rounded-lg mb-4" style="display: none; border-left: 4px solid #17a2b8;">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-info-circle fa-lg mr-2 text-info"></i>
                                <div>
                                    <strong class="d-block mb-1">الرصيد المتاح للسحب</strong>
                                    <span class="font-weight-bold text-dark" style="font-size: 1.1rem;" id="allowed-withdraw-amount"></span> <small class="text-muted">د.ل</small>
                                </div>
                            </div>
                        </div>
                        <!-- Note -->
                        <div class="form-group mb-4">
                            <label for="note" class="font-weight-bold text-dark mb-2">البيان / الملاحظات <span class="text-danger">*</span></label>
                            <textarea name="note" id="note" class="form-control" rows="3" maxlength="255" placeholder="اكتب سبب العملية (مثال: تسديد دفعة مقدمة)..." required>{{ old('note') }}</textarea>
                            <small class="form-text text-muted mt-2"><i class="fas fa-info-circle mr-1"></i> سيتم طباعة هذا البيان في السند المالي بشكل رسمي.</small>
                        </div>
                        <!-- Submit Button -->
                        <div class="mt-5 text-right">
                            <button type="submit" class="btn btn-primary btn-lg shadow-sm px-5">
                                <i class="fas fa-check mr-2"></i> اعتماد وإصدار السند
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('page_scripts')
<script>
$(document).ready(function() {
    // Initialize Select2
    $('.select2').select2({
        theme: 'bootstrap4',
        placeholder: '-- يرجى اختيار المحفظة --',
        allowClear: true
    });
    const walletSelect = $('#wallet_id');
    const container = $('#allowed-withdraw-container');
    const amountSpan = $('#allowed-withdraw-amount');
    const amountInput = $('#amount');
    const typeSelect = $('#type');
    async function updateAllowedAmount() {
        const walletId = walletSelect.val();
        const transactionType = typeSelect.val();
        if(walletId && transactionType === 'withdraw') {
            try {
                const response = await fetch(`/get-allowed-withdrawal?wallet_id=${walletId}`);
                const data = await response.json();
                const allowedAmount = parseFloat(data.allowed_amount);
                container.fadeIn();
                amountSpan.text(allowedAmount.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}));
                amountInput.attr('max', allowedAmount);
                if(parseFloat(amountInput.val()) > allowedAmount) {
                    amountInput.val(allowedAmount);
                }
            } catch (err) {
                console.error("خطأ في جلب المبلغ المسموح بالسحب:", err);
                hideAllowedAmount();
            }
        } else {
            hideAllowedAmount();
        }
    }
    function hideAllowedAmount() {
        container.fadeOut();
        amountSpan.text('');
        amountInput.removeAttr('max');
    }
    walletSelect.on('change', updateAllowedAmount);
    typeSelect.on('change', updateAllowedAmount);
    if(walletSelect.val()) {
        updateAllowedAmount();
    }
});
function confirmTransaction() {
    const typeSelect = $('#type');
    const amountInput = $('#amount');
    const walletSelect = $('#wallet_id');
    const selectedOption = walletSelect.find('option:selected');
    if(!walletSelect.val() || selectedOption.length === 0) {
        alert("الرجاء اختيار المحفظة أولاً");
        return false;
    }
    const walletText = selectedOption.text().trim().split('|')[0] + ' | ' + selectedOption.text().trim().split('|')[1];
    const amount = parseFloat(amountInput.val()).toLocaleString(undefined, {minimumFractionDigits: 2});
    const type = typeSelect.val() === 'deposit' ? 'إيداع (سند قبض)' : 'سحب (سند صرف)';
    return confirm(`هل أنت متأكد من اعتماد العملية المالية؟\n\nنوع السند: ${type}\nالقيمة: ${amount} د.ل\nالمحفظة المستهدفة: ${walletText}`);
}
</script>
@endpush