@extends('user.layout')

@section('content')

<style>
    .depositcard.shadow-sm.p-4 {
        max-width: 500px;
        height: auto;
        background: #fff;
        border-radius: 10px;
    }

    .wallet.card {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 80%;
        background: #000B58;
        border-radius: 10px;
        color: #fff;
    }

    .wallet.fw-regular {
        font-family: Poppins, sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: 0.5px;
        text-align: center;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
    }
</style>

<div class="row mb-3">
    <div class="col d-flex justify-content-between">
        <h4 class="page-top-heading">Withdraw </h4>
        <a href="{{ route('user.withdraw_history') }}" class="btn btn-primary py-2 px-4 ">History</a>
    </div>
</div>

<div class="row d-flex justify-content-center">
    <div class="depositcard shadow-sm p-4">

        <!-- Wallet Information Section -->
        <div class="row d-flex justify-content-center">
            <div class="wallet card p-2">
                <div class="col-12 text-center">
                    <p class="wallet fw-regular">Withdraw Balance</p>
                    <p class="text-white">50.00 USDT</p>
                </div>
            </div>
        </div>

        <label for="selectWallet" class="form-label fw-bold mt-4">Select Wallet Address</label>
        <select id="selectWallet" class="form-select">
            <option value="wallet1">Select Wallet</option>
        </select>

        <div class="my-4">
            <label for="withdrawUsdt" class="form-label fw-bold">Withdraw USDT</label>
            <input
                type="text"
                id="withdrawUsdt"
                class="form-control"
                placeholder="Enter Withdraw USDT" />
        </div>

        <button class="btn btn-primary w-100 p-3" data-bs-toggle="modal" data-bs-target="#confirmationModal">Submit</button>

    </div>
</div>

<!-- Confirmation Modal -->
<div class="modal fade" id="confirmationModal" tabindex="-1" aria-labelledby="confirmationModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body text-center p-5">
                <h4 class="mb-3 fw-bold">Are you sure</h4>
                <hr>
                <h6 class="mb-4 fw-regular mt-3">Are you sure you want to Withdraw?</h6>
                <div class="d-flex justify-content-center gap-3 mt-4">
                    <button type="button" class="btn btn-outline-primary py-3 w-50" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary py-3 w-50">Yes, Proceed</button>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection