@extends('layouts.master')
@section('title') @lang('translation.deposit-requests') @endsection

@section('breadcrumb')
@component('components.breadcrumb')
@slot('title')
@lang('translation.deposit-requests')
@endslot
@endcomponent
@endsection

@section('content')
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table id="buttons-datatables" class="display table table-bordered text-center align-middle" style="width:100%;">
                        <thead>
                            <tr>
                                <th class="text-center align-middle">ID</th>
                                <th class="text-center align-middle">Name</th>
                                <th class="text-center align-middle">Transaction ID</th>
                                <th class="text-center align-middle">Payment Method</th>
                                <th class="text-center align-middle">Amount</th>
                                <th class="text-center align-middle">Request Date</th>
                                <th class="text-center align-middle">Status</th>
                                <th class="text-center align-middle">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $count = 1; @endphp
                            @foreach($deposits as $deposit)
                            <tr>
                                <td class="text-center">{{ $count++ }}</td>
                                <td class="text-center">{{ $deposit->user->full_name ?? 'N/A' }}</td>
                                <td class="text-center">{{ $deposit->transaction_id }}</td>
                                <td class="text-center">{{ $deposit->payment_method }}</td>
                                <td class="text-center">${{ number_format($deposit->amount_usd, 5) }}</td>
                                <td class="text-center">{{ $deposit->created_at->format('d/F/Y') }}</td>
                                <td class="text-center">
                                    <span class="badge text-uppercase
            {{ $deposit->status === 'Verified' ? 'bg-success-subtle text-success' :
               ($deposit->status === 'Rejected' ? 'bg-danger-subtle text-danger' : 'bg-warning-subtle text-warning') }}"
                                        id="status-badge-{{ $deposit->id }}">
                                        {{ ucfirst($deposit->status) }}
                                    </span>
                                </td>
                                <td class="text-center">
                                    <button class="btn btn-success btn-sm edit-deposit-request" 
                                        data-id="{{ $deposit->id }}" data-bs-toggle="modal"
                                        data-bs-target="#showModal">
                                        Edit
                                    </button>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>

                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!--end row-->

<!-- EDIT MODAL -->
<div class="modal fade" id="showModal" tabindex="-1" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog modal-fullscreen-xxl-down">
        <div class="modal-content">
            <div class="modal-header bg-light p-3">
                <h5 class="modal-title" id="exampleModalLabel"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
            </div>
            <div class="row bg-body-tertiary mb-5 px-3">
                <div class="col-sm-4 pe-3">
                    <div class="card shadow-none p-3">
                        <div class="card-body">
                            <div class="live-preview">
                                <h5>Deposit Request</h5>
                                <div class="row">
                                    <div class="col-6">
                                        <p class="fw-bold">Request Date</p>
                                    </div>
                                    <div class="col-6 text-end mb-4">
                                        <p id="withdrawalDate">--</p>
                                    </div>

                                    <div class="col-6">
                                        <p class="fw-bold">Payment Method</p>
                                    </div>
                                    <div class="col-6 text-end">
                                        <p id="paymentMethod">--</p>
                                    </div>

                                    <div class="col-6">
                                        <p class="fw-bold">Deposit Amount</p>
                                    </div>
                                    <div class="col-6 text-end">
                                    <p id="depositAmount">0.00 (--)</p>
                                    </div>

                                    <div class="col-6">
                                        <p class="fw-bold">Equivalent Amount in (USD)</p>
                                    </div>
                                    <div class="col-6 text-end">
                                        <p id="equivalentAmount">$0.00</p>
                                    </div>

                                    <div class="col-6">
                                        <p class="fw-bold">Conversion Rate</p>
                                    </div>
                                    <div class="col-6 text-end">
                                        <p id="conversionRate">$0.00</p>
                                    </div>

                                    <div class="col-12 border-bottom border-dark mb-4"></div>
                                    <div class="col-12">
                                        <h5 class="fw-bold">Payment Proof</h5>
                                        <p id="paymentProof"></p>
                                    </div>

                                </div>
                                <!--end row-->
                                <form action="javascript:void(0);" class="mt-3">
                                    <div class="row">
                                        <div class="col-6 text-end">
                                            <button type="button" class="btn btn-danger w-100 mt-3 display-1" id="rejectTransaction">Reject</button>
                                        </div>
                                        <div class="col-6 text-end">
                                            <button type="button" class="btn btn-success w-100 mt-3 display-1" id="approveTransaction">Approve</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-8 border-start border-2 ps-3 pe-4">
                    <div class="card shadow-none p-3">
                        <div class="card-body">
                            <div class="live-preview">
                                <div class="row">
                                    <div class="col-6 mb-5">
                                        <h5>Member Details</h5>
                                    </div>
                                    <div class="col-6 text-end">
                                        <h5 id="userStatusHeading" class="mb-0">
                                            Status: <span id="userStatus" class=""></span>
                                        </h5>
                                    </div>

                                    <div class="col-6">
                                        <div class="mb-3">
                                            <div id="profile-initials-placeholder"
                                                class="profile-initials w-25 d-flex align-items-center justify-content-center border rounded-3 bg-light text-dark fs-3 fw-bold"
                                                style="height: 80px;">
                                                <!-- Initial will be injected here -->
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-6 text-end">
                                        <h5>Attachments</h5>
                                        <div id="idAttachmentContainer">
                                            <!-- JS will populate with file download links -->
                                        </div>
                                    </div>

                                    <div class="col-6">
                                        <div class="mb-3">
                                            <label for="first_name" class="form-label">First Name</label>
                                            <input type="text" readonly class="form-control first_name" id="first_name" name="first_name">
                                        </div>
                                    </div>

                                    <div class="col-6">
                                        <div class="mb-3">
                                            <label for="lastNameinput" class="form-label">Last Name</label>
                                            <input type="text" class="form-control" readonly id="lastNameinput">
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="mb-3">
                                            <label for="phonenumberInput" class="form-label">Phone Number</label>
                                            <input type="tel" class="form-control" readonly id="phonenumberInput">
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="mb-3">
                                            <label for="emailidInput" class="form-label">Email Address</label>
                                            <input type="email" class="form-control" readonly id="emailidInput">
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="mb-3">
                                            <label for="nationality" class="form-label">Nationality</label>
                                            <input type="text" class="form-control" id="nationality" name="nationality" readonly>
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="mb-3">
                                            <label for="paymentmethod" class="form-label">Payment Methods</label>
                                            <input type="text" class="form-control" id="paymentmethod" name="paymentmethod" readonly>
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="mb-3">
                                            <label for="referred" class="form-label">Referred By</label>
                                            <input type="text" class="form-control" readonly id="referred">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection