@extends('layouts.app')

@section('content')
<div class="container">
    <h2 class="mb-4">سجل التحويلات</h2>
    <!-- فلاتر البحث والفرز -->
    <form method="GET" action="{{ route('transfers.index') }}" class="form-row align-items-end mb-4">
        <div class="col-md-3">
            <label for="from_wallet_no" class="sr-only">رقم المحفظة المرسلة</label>
            <input type="number" id="from_wallet_no" name="from_wallet_no"
                   class="form-control" placeholder="رقم المحفظة المرسلة" value="{{ request('from_wallet_no') }}">
        </div>

        <!-- إضافة حقل تاريخ التحويل -->
        <div class="col-md-3">
            <label for="created_at" class="sr-only">تاريخ التحويل</label>
            <input type="date" id="created_at" name="created_at" class="form-control"
                   value="{{ request('created_at') }}">
        </div>
        <div class="col-md-2">
            <label for="status" class="sr-only">الحالة</label>
            <select id="status" name="status" class="form-control">
                <option value="">الحالة</option>
                <option value="paid"     {{ request('status')=='paid'     ? 'selected' : '' }}>مكتملة</option>
                <option value="transfer" {{ request('status')=='transfer' ? 'selected' : '' }}>معلقة</option>
                <option value="refund"   {{ request('status')=='refund'   ? 'selected' : '' }}>مرفوضة</option>
            </select>
        </div>
        <div class="col-md-2">
            <label for="to_wallet_no" class="sr-only">رقم المحفظة المستلمة</label>
            <input type="number" id="to_wallet_no" name="to_wallet_no"
                   class="form-control" placeholder="رقم المحفظة المستلمة" value="{{ request('to_wallet_no') }}">
        </div>
        <div class="col-md-2">
            <button type="submit" class="btn btn-primary btn-block">تطبيق</button>
        </div>
        <div class="col-md-2 mt-2">
            <a href="{{ request()->fullUrlWithQuery(['order'=>(request('order')==='desc'?'asc':'desc')]) }}"
               class="btn btn-secondary btn-block">
                {{ request('order')==='desc' ? 'الأقدم أولاً ⬇️' : 'الأحدث أولاً ⬆️' }}
            </a>
        </div>
    </form>

    <!-- جدول التحويلات -->
    <div class="table-responsive">
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>#</th>
                    <th>رقم المحفظة المرسلة</th>
                    <th>اسم المالك (من)</th>
                    <th>رقم المحفظة المستلمة</th>
                    <th>اسم المالك (إلى)</th>
                    <th>حالة العملية</th>
                    <th>الخصم</th>
                    <th>الرسوم</th>
                    <th>تاريخ التحويل</th>
                    <th>التعديل</th>
                </tr>
            </thead>
            <tbody>
                @foreach($transfers as $transfer)
                <tr id="row-{{ $transfer->id }}">
                    <td>{{ $transfer->id }}</td>
                    <td>{{ optional($transfer->withdrawTransaction->wallet)->id ?? 'غير متوفر' }}</td>

                    <!-- اسم المالك (من) - غير قابل للتعديل -->
                    <td>
                        <span id="from_owner-{{ $transfer->id }}">{{ optional($transfer->from_owner)->full_name ?? 'غير متوفر' }}</span>
                        <input type="text" id="from_owner-input-{{ $transfer->id }}" class="form-control"
                               value="{{ optional($transfer->from_owner)->full_name ?? '' }}" style="display: none;" readonly>
                    </td>

                    <td>{{ optional($transfer->depositTransaction->wallet)->id ?? 'غير متوفر' }}</td>

                    <!-- اسم المالك (إلى) - غير قابل للتعديل -->
                    <td>
                        <span id="to_owner-{{ $transfer->id }}">{{ optional($transfer->to_owner)->full_name ?? 'غير متوفر' }}</span>
                        <input type="text" id="to_owner-input-{{ $transfer->id }}" class="form-control"
                               value="{{ optional($transfer->to_owner)->full_name ?? '' }}" style="display: none;" readonly>
                    </td>

                    <!-- حالة العملية - قابل للتعديل -->
                    <td>
                        @php
                            $statusText = [
                                'paid' => 'مكتملة',
                                'transfer' => 'معلقة',
                                'refund' => 'مرفوضة'
                            ];
                        @endphp
                        <span id="status-{{ $transfer->id }}">{{ $statusText[$transfer->status] ?? $transfer->status }}</span>
                        <select id="status-input-{{ $transfer->id }}" class="form-control" style="display: none;">
                            <option value="paid" {{ $transfer->status === 'paid' ? 'selected' : '' }}>مكتملة</option>
                            <option value="transfer" {{ $transfer->status === 'transfer' ? 'selected' : '' }}>معلقة</option>
                            <option value="refund" {{ $transfer->status === 'refund' ? 'selected' : '' }}>مرفوضة</option>
                        </select>
                    </td>

                    <!-- الخصم - قابل للتعديل -->
                    <td>
                        <span id="discount-{{ $transfer->id }}">{{ number_format($transfer->discount, 2) }}</span>
                        <input type="number" step="0.01" id="discount-input-{{ $transfer->id }}" class="form-control"
                               value="{{ $transfer->discount }}" style="display: none;">
                    </td>

                    <!-- الرسوم - قابل للتعديل -->
                    <td>
                        <span id="fee-{{ $transfer->id }}">{{ number_format($transfer->fee, 2) }}</span>
                        <input type="number" step="0.01" id="fee-input-{{ $transfer->id }}" class="form-control"
                               value="{{ $transfer->fee }}" style="display: none;">
                    </td>

                    <td>{{ \Carbon\Carbon::parse($transfer->created_at)->format('d-m-Y H:i:s') }}</td>

                    <td style="display: flex; align-items: center; gap: 10px;">
                        <button class="btn btn-warning btn-sm" onclick="toggleEdit({{ $transfer->id }})">تعديل</button>
                        <button class="btn btn-success btn-sm" id="save-{{ $transfer->id }}" onclick="saveChanges({{ $transfer->id }})" style="display:none">حفظ</button>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- روابط التصفح -->
<div class="d-flex justify-content-center mt-4">
    {{ $transfers->links() }}
</div>


<script>
function toggleEdit(transferId) {
    ['status','discount','fee'].forEach(field => {
        const fieldElement = document.getElementById(field + '-' + transferId);
        const inputElement = document.getElementById(field + '-input-' + transferId);

        if (fieldElement && inputElement) {
            fieldElement.style.display = 'none';
            inputElement.style.display = 'block';
        }
    });

    const editButton = document.querySelector(`#row-${transferId} .btn-warning`);
    const saveButton = document.getElementById(`save-${transferId}`);

    if (editButton && saveButton) {
        editButton.style.display = 'none';
        saveButton.style.display = 'inline-block';
    }
}

function saveChanges(transferId) {
    const data = {};
    ['status','discount','fee'].forEach(field => {
        data[field] = document.getElementById(field + '-input-' + transferId).value;
    });

    fetch(`{{ url('transfers') }}/${transferId}`, {
        method: 'PATCH',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify(data)
    })
    .then(res => res.json())
    .then(json => {
        if (json.success) {
            window.location.reload();
        } else {
            alert('حدث خطأ أثناء الحفظ');
        }
    })
    .catch(() => alert('حدث خطأ أثناء الحفظ'));
}
</script>

@endsection