@extends('User.layout')
<link href="https://unpkg.com/@tabler/icons-webfont@latest/tabler-icons.min.css" rel="stylesheet">
<style>
    .copy-btn {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        border: none;
        background: transparent;
        color: #222;
        cursor: pointer;
        padding: 0;
    }

    .upload-box {
        border: var(--quadrary-color) solid 2px !important;
        border-radius: 10px;
        height: 95px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        cursor: pointer;
        transition: 0.2s;
    }


    .upload-box i {
        font-size: 22px;
        margin-bottom: 5px;
        color: #000;
    }

    .upload-text {
        font-size: 12px;
        color: #777;
        margin: 0;
    }

    .reg-confirm-modal {
        border-radius: 10px;
        border: 1px solid #660066;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    }


    .reg-box {
        border: 2px solid #a24ccf;
        border-radius: 4px;
        padding: 14px 14px 12px 14px;
        position: relative;
    }

    .reg-box-title {
        position: absolute;
        top: -9px;
        left: 12px;
        background: white;
        padding: 0 6px;
        font-size: 11px;
        font-weight: 600;
    }

    .reg-text {
        font-size: 11px;
        line-height: 1.5;
    }

    .reg-label {
        font-weight: 600;
    }

    .reg-value {
        font-weight: 600;
    }

    .coin-header {
        background: linear-gradient(90deg, #4b1c82, #9b2c88, #0d4d7a);
    }

    .coin-close-btn {
        border: 1px solid #a24ccf !important;
    }

    .card-details {
        display: flex;
        justify-content: space-between;
        gap: 15px;
    }
</style>
<style>
    input:-webkit-autofill,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:hover,
    textarea:-webkit-autofill,
    select:-webkit-autofill {
        -webkit-text-fill-color: #ffc107 !important;
        transition: background-color 5000s ease-in-out 0s;
    }

    .playbtn {
        position: relative;
        display: inline-block;
        padding: 15px;
        /* margin: 40px 0; */
        color: #ffffff;
        text-decoration: none;
        text-transform: uppercase;
        transition: 0.5s;
        font-weight: 600;
        letter-spacing: 4px;
        overflow: hidden;
    }

    .playbtn:hover {
        background: #ffffff;
        color: #000000;
        box-shadow: 0 0 5px #fff, 0 0 25px #fff, 0 0 50px #fff, 0 0 200px #fff;
        -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
    }

    .playbtn span {
        position: absolute;
        display: block;
    }

    .playbtn span:nth-child(1) {
        top: 0;
        left: 0;
        width: 100%;
        height: 10px;
        background: linear-gradient(90deg, transparent, #fff);
        animation: animate1 1s linear infinite;
    }

    @keyframes animate1 {
        0% {
            left: -100%;
        }

        50%,
        100% {
            left: 100%;
        }
    }

    .playbtn span:nth-child(2) {
        top: -100%;
        right: 0;
        width: 10px;
        height: 100%;
        background: linear-gradient(180deg, transparent, #fff);
        animation: animate2 1s linear infinite;
        animation-delay: 0.25s;
    }

    @keyframes animate2 {
        0% {
            top: -100%;
        }

        50%,
        100% {
            top: 100%;
        }
    }

    .playbtn span:nth-child(3) {
        bottom: 0;
        right: 0;
        width: 100%;
        height: 10px;
        background: linear-gradient(270deg, transparent, #fff);
        animation: animate3 1s linear infinite;
        animation-delay: 0.5s;
    }

    @keyframes animate3 {
        0% {
            right: -100%;
        }

        50%,
        100% {
            right: 100%;
        }
    }

    .playbtn span:nth-child(4) {
        bottom: -100%;
        left: 0;
        width: 10px;
        height: 100%;
        background: linear-gradient(360deg, transparent, #fff);
        animation: animate4 1s linear infinite;
        animation-delay: 0.75s;
    }

    @keyframes animate4 {
        0% {
            bottom: -100%;
        }

        50%,
        100% {
            bottom: 100%;
        }
    }

    .card {
        background-color: #0A1F44 !important;
        color: White !important;
    }

    .form-label {
        color: White !important;
    }
</style>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Lora&family=Yeseva+One&display=swap');

    * {
        --hibiscus-love: #fc465c;
        --fine-ii: #f9b198;
        --afl: #f9b198;
        --mexican-sky: #cfdddd;
        --brasillia-peach: #0A1F44;
        --free: #ffc107;
        --captured: #2b2120;

        --form-bg: var(--brasillia-peach);
        --secondary-color: var(--hibiscus-love);
        --tertiary-color: var(--fine-ii);
        --quadrary-color: var(--afl);
        --bg-color: var(--mexican-sky);
        --text-color: var(--free);
        --header-color: var(--captured);
        --error-color: var(--hibiscus-love);
        --success-color: #73d12e;

        box-sizing: border-box;
    }


    .container {
        width: 400px;
        border-radius: 0.6em;
        padding: 20px;
        background-color: var(--form-bg) !important;
        margin: 20px auto;
    }

    .form {
        padding: 30px 40px;
    }

    .form h2 {
        text-align: center;
        margin: 0 0 20px;
    }

    .form-control {
        margin-bottom: 10px;
        padding-bottom: 20px;
        position: relative;
        color: var(--text-color) !important;

    }

    .form-label {
        color: White !important;
        display: block;
        margin-bottom: 5px;
    }

    .form-control {
        border-radius: 6px;
        background: var(--form-bg) !important;
        border: var(--quadrary-color) solid 2px !important;
        display: block;
        width: 100%;
        color: var(--text-color) !important;

    }

    .form-select {
        border-radius: 6px;
        background: var(--form-bg) !important;
        border: var(--quadrary-color) solid 2px !important;
        color: var(--text-color) !important;


    }

    .form-control input:focus {
        outline: 0;
        border-color: var(--tertiary-color);
    }

    .form-control.success input {
        border-color: var(--success-color);
    }

    .form-control.error input {
        border-color: var(--error-color);
    }

    .form-control small {
        color: var(--error-color);
        position: absolute;
        bottom: 0;
        left: 0;
        visibility: hidden;
    }

    .form-control.error small {
        visibility: visible;
    }
</style>

<style>
    .scroll-wrapper {
        position: relative;
        overflow: hidden;
        padding: 20px 40px;
    }

    .scrolling-cards {
        display: flex;
        gap: 20px;
        overflow-x: auto;
        scroll-behavior: smooth;

        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .scrolling-cards::-webkit-scrollbar {
        display: none;
    }

    .bank-card {
        min-width: 260px;
        scroll-snap-align: center;
        flex-shrink: 0;

        height: 160px;
        border-radius: 18px;
        padding: 18px;
        color: #fff;
        cursor: pointer;

        background: linear-gradient(135deg, #0a1f44, #163b7a);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);

        transition: all 0.3s ease;
    }

    .bank-card.active {
        transform: scale(1.05);
        border: 2px solid #ffd700;
    }

    .bank-card.blur {
        filter: blur(3px);
        opacity: 0.6;
    }

    .nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;

        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: none;

        background: #0a1f44;
        color: #fff;

        display: flex;
        align-items: center;
        justify-content: center;

        cursor: pointer;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }

    .nav-btn.left {
        left: 5px;
    }

    .nav-btn.right {
        right: 5px;
    }

    .nav-btn:hover {
        background: #163b7a;
    }

    .scroll-wrapper {
        overflow: hidden;
        position: relative;
        width: 100%;
        padding: 20px 0;
    }

    .scrolling-cards {
        display: flex;
        gap: 20px;
    }

    .scrolling-cards.paused {
        animation-play-state: paused;
    }

    .bank-card {
        min-width: 260px;
        height: 160px;
        border-radius: 18px;
        padding: 18px;
        color: #fff;
        cursor: pointer;
        position: relative;

        background: linear-gradient(135deg, #0a1f44, #163b7a);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);

        transition: all 0.4s ease;
    }

    .bank-card:hover {
        transform: translateY(-5px);
    }

    .bank-card.active {
        transform: scale(1.05);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
        border: 2px solid #ffd700;
    }

    .bank-card.blur {
        filter: blur(3px);
        opacity: 0.6;
    }

    .card-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 600;
    }

    .card-top i {
        font-size: 22px;
    }

    .card-number {
        margin: 20px 0;
        letter-spacing: 2px;
        font-size: 18px;
    }

    .card-details {
        display: flex;
        justify-content: space-between;
    }

    .card-details small {
        font-size: 10px;
        opacity: 0.7;
    }

    .card-details p {
        margin: 0;
        font-size: 13px;
        font-weight: 500;
    }
</style>
@section('content')
<h5>
    <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
        <a href="{{ route('user.wallet_request') }}">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000"
                stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler">
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <path d="M15 6l-6 6l6 6" />
            </svg>
        </a>
    </button>
    Wallet Fund
</h5>

<div class="card shadow-sm border-0 p-4">

    <div class="card-body p-4">

        <form id="WalltetRequestForm" action="{{ route('user.wallet_request_submit') }}" method="POST"
            enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="confirmed" id="confirmed" value="0">
            <input type="hidden" id="payout_mode" value="{{ $user->payment_method }}">
            <input type="hidden" name="bank_id" id="bank_id">
            <div class="row">

                <!-- <div class="col-lg-3 mb-3 ">
                        <label class="form-label">Payment Mode</label>
                        <input type="text" class="form-control" value="{{ $user->payment_method }}" readonly>
                    </div>

                    @if($user->payment_method === 'Bank')
                        <div class="col-lg-3 mb-3">
                            <label class="form-label">Account Number</label>
                            <input type="text" class="form-control" placeholder="" name="account_number" id="account_number"
                                value="{{ old('account_number', $adminBank?->account_number ?? '') }}" readonly>
                        </div>

                        <div class="col-lg-3 mb-3">
                            <label class="form-label">Bank Name</label>
                            <input type="text" class="form-control" placeholder="" name="bank_name" id="bank_name"
                                value="{{ old('bank_name', $adminBank?->bank_name ?? '') }}"
                                oninput="this.value = this.value.replace(/[^0-9.]/g, '');" readonly>

                        </div>

                        <div class="col-lg-3 mb-3">
                            <label class="form-label">IFSC code</label>
                            <input type="text" class="form-control" name="ifsc" id="ifsc"
                                value="{{ old('ifsc', $adminBank?->ifsc ?? '') }}" placeholder="" readonly>

                        </div>
                    @endif

                    @if($user->payment_method === 'Wallet')
                        <div class="col-lg-6 mb-3">
                            <label class="form-label">Select Network</label>
                            <select class="form-select" name="network" id="network" readonly>
                                <option value="">Select</option>
                                <option value="TRC20" {{ old('network') === 'TRC20' ? 'selected' : '' }}>TRC20</option>
                                <option value="ERC20" {{ old('network') === 'ERC20' ? 'selected' : '' }}>ERC20</option>
                                <option value="BEP20" {{ old('network') === 'BEP20' ? 'selected' : '' }}>BEP20</option>
                            </select>
                            @error('network')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="col-lg-6 mb-3">
                            <label class="form-label">Wallet Address</label>

                            <div class="position-relative">
                                <input type="text" name="wallet_address" class="form-control wallet-input" id="walletAddress"
                                    value="{{ old('wallet_address', $adminWallet?->wallet_address ?? '') }}" readonly>

                                <button type="button" class="copy-btn" onclick="copyWallet()">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <rect x="9" y="9" width="13" height="13" rx="2"></rect>
                                        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    @endif -->
                <div class="p-3 mb-3 rounded text-center" style="background:#163b7a; color:#fff;">
                    <h6 class="text-warning mb-0">
                        Please select an admin bank account below and upload your payment receipt to complete your request.
                    </h6>
                </div>

                <div class="scroll-wrapper">
                    <h6 class="text-white m-0">Admin Banks</h6>
                    <div class=" d-flex justify-content-center">
                        <div>
                            <button class="nav-btn left" id="prevBtn" type="button">
                                <i class="ti tabler-chevron-left"></i>
                            </button>


                            <div class="scrolling-cards p-5 d-flex justify-content-center" id="cardContainer">
                                @foreach($adminbanks as $bank)
                                <div class="bank-card" data-id="{{ $bank->id }}"
                                    data-account="{{ $bank->account_number }}"
                                    data-name="{{ $bank->bank_name }}"
                                    data-ifsc="{{ $bank->ifsc }}"
                                         data-ifsc="{{ $bank->branch_name }}">


                                    <div class="card-top">
                                       <div> <i class="ti tabler-building-bank"></i>
                                        <span>{{ $bank->bank_name }}</span></div>
                                        <div>
                                        <span>{{ $bank->branch_name }}</span></div>
                                    </div>

                                    <div class="card-number text-center">  {{ $bank->account_number}}</div>

                                    <div class="card-details">
                                        <div>
                                            <small>Holder</small>
                                            <p>{{ $bank->account_holder }}</p>
                                        </div>
                                        <div>
                                            <small>IFSC</small>
                                            <p>{{ $bank->ifsc }}</p>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                                <!-- <div class="bank-card">
                                    <div class="card-top">
                                        <i class="ti tabler-building-bank"></i>
                                        <span>HDFC Bank</span>
                                    </div>

                                    <div class="card-number">XXXX XXXX 7821</div>

                                    <div class="card-details">
                                        <div>
                                            <small>Holder</small>
                                            <p>Alex Roy</p>
                                        </div>
                                        <div>
                                            <small>IFSC</small>
                                            <p>HDFC0005678</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="bank-card">
                                    <div class="card-top">
                                        <i class="ti tabler-building-bank"></i>
                                        <span>ICICI Bank</span>
                                    </div>

                                    <div class="card-number">XXXX XXXX 9912</div>

                                    <div class="card-details">
                                        <div>
                                            <small>Holder</small>
                                            <p>Michael</p>
                                        </div>
                                        <div>
                                            <small>IFSC</small>
                                            <p>ICIC0003344</p>
                                        </div>
                                    </div>
                                </div> -->


                            </div>

                            <button class="nav-btn right" id="nextBtn" type="button">
                                <i class="ti tabler-chevron-right"></i>
                            </button>
                        </div>
                    </div>

                </div>


                <div class="col-lg-4 mb-3">
                    <label class="form-label">Amount</label>
                    <input type="text" class="form-control" placeholder="0.00" name="usdt" id="usdt"
                        value="{{old('usdt')}}" oninput="this.value = this.value.replace(/[^0-9.]/g, '');">
                    @error('usdt')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>


                <div class="col-lg-4 mb-3">
                    <label class="form-label">Enter Transaction Id</label>
                    <input type="text" class="form-control" name="transaction_hash" id="transaction_hash"
                        value="{{old('transaction_hash')}}" placeholder="Enter Transaction ID">
                    @error('transaction_hash')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>

                <div class="col-lg-4 mb-3">
                    <label class="form-label">Upload Your Advance Receipt</label>

                    <label class="upload-box w-100 position-relative">

                        <input type="file" class="d-none" name="receipt" id="receipt" accept="image/*,.pdf"
                            onchange="previewReceipt(event)">

                        <div id="uploadPlaceholder" class="text-center">
                            <i class="ti tabler-upload"></i>
                            <p class="upload-text">Upload</p>
                        </div>

                        <img id="preview" class="img-fluid" style="max-height:80px; display:none;">

                    </label>

                    <div id="receipt-error">
                        @error('receipt')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                </div>

                <div class="d-flex justify-content-center gap-3 mt-4">
                    <a class="playbtn" href="#" id="openConfirm">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        Submit </a>


                </div>

            </div>

        </form>
    </div>

</div>
<div class="modal fade" id="confirmModal" tabindex="-1">
    <div class="modal-dialog modal-md modal-dialog-centered">
        <div class="modal-content reg-confirm-modal p-4">

            <h6 class="text-center fw-semibold mb-4 reg-title">
                Wallet Deposit Confirmation
            </h6>

            <h6>Wallet Deposit</h6>
            <div class="reg-box mb-3">

                <div class="row g-3 reg-text">

                    <!-- Network -->

                    <div class="col-md-4 wallet_section">
                        <div class="reg-row">
                            <span class="reg-label">Network</span>
                            <span class="reg-colon">:</span>
                            <span class="reg-value" id="m_network"></span>
                        </div>
                    </div>

                    <!-- Wallet -->
                    <div class="col-md-8 wallet_section">
                        <div class="reg-row">
                            <span class="reg-label">Wallet Address</span>
                            <span class="reg-colon">:</span>
                            <span class="reg-value text-break" id="m_wallet">

                            </span>
                        </div>
                    </div>

                    <div class="col-md-4 bank_section">
                        <div class="reg-row">
                            <span class="reg-label">A/C</span>
                            <span class="reg-colon">:</span>
                            <span class="reg-value" id="m_account_number"></span>
                        </div>
                    </div>

                    <div class="col-md-4 bank_section">
                        <div class="reg-row">
                            <span class="reg-label">Bank Name</span>
                            <span class="reg-colon">:</span>
                            <span class="reg-value text-break" id="m_bank_name">
                            </span>
                        </div>
                    </div>

                    <div class="col-md-4 bank_section">
                        <div class="reg-row">
                            <span class="reg-label">IFSC code</span>
                            <span class="reg-colon">:</span>
                            <span class="reg-value text-break" id="m_ifsc">
                            </span>
                        </div>
                    </div>

                    <!-- Amount -->
                    <div class="col-md-4">
                        <div class="reg-row">
                            <span class="reg-label">Amount</span>
                            <span class="reg-colon">:</span>
                            <span class="reg-value" id="m_usdt"></span>
                        </div>
                    </div>

                    <div class="col-md-8">
                        <div class="reg-row">
                            <span class="reg-label">Transaction Hash</span>
                            <span class="reg-colon">:</span>
                            <span class="reg-value text-break" id="m_hash">-</span>
                        </div>
                    </div>




                </div>
            </div>

            <div class="d-flex justify-content-center gap-3">
                <button type="button" class="btn btn-label-secondary px-5" data-bs-dismiss="modal">
                    Cancel
                </button>

                <button type="button" id="finalSubmit" class="btn btn-primary px-5">
                    Confirm
                </button>
            </div>

        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


<script>
    const container = document.getElementById('cardContainer');
    const cards = document.querySelectorAll('.bank-card');
    const nextBtn = document.getElementById('nextBtn');
    const prevBtn = document.getElementById('prevBtn');

    const scrollAmount = 280; // card width + gap

    nextBtn.addEventListener('click', () => {
        container.scrollBy({
            left: scrollAmount,
            behavior: 'smooth'
        });
    });

    prevBtn.addEventListener('click', () => {
        container.scrollBy({
            left: -scrollAmount,
            behavior: 'smooth'
        });
    });

    cards.forEach(card => {
        card.addEventListener('click', () => {

            cards.forEach(c => {
                c.classList.remove('active');
                c.classList.add('blur');
            });

            card.classList.add('active');
            card.classList.remove('blur');

            // store bank_id
            let bankId = card.getAttribute('data-id');
            $('#bank_id').val(bankId);

            // show in modal
            $('#m_account_number').text(card.getAttribute('data-account'));
            $('#m_bank_name').text(card.getAttribute('data-name'));
            $('#m_ifsc').text(card.getAttribute('data-ifsc'));
        });
    });
</script>
<script>
    $(document).ready(function() {

        let validating = false;

        $('#openConfirm').on('click', function(e) {

            e.preventDefault();
            let currentWallet = $('#walletAddress').val();
            if (validating) return;
            validating = true;

            $('small.text-danger').remove();

            let btn = $(this);
            btn.prop('disabled', true).text('Checking...');

            let form = $('#WalltetRequestForm');
            let formData = new FormData(form[0]);

            formData.append('confirmed', 0);

            $.ajax({
                url: "{{ route('user.wallet_request_submit') }}",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,

                success: function(response) {

                    validating = false;
                    btn.prop('disabled', false).text('Submit');

                    if (response.status) {

                        let payoutMode = $('#payout_mode').val();

                        if (payoutMode === 'Bank') {
                            $('.bank_section').show();
                            $('.wallet_section').hide();
                        } else {
                            $('.wallet_section').show();
                            $('.bank_section').hide();
                        }

                        $('#m_network').text($('#network option:selected').text());
                        $('#m_wallet').text($('#walletAddress').val());
                        $('#m_usdt').text($('#usdt').val());
                        $('#m_hash').text($('#transaction_hash').val());
                        $('#m_account_number').text($('#account_number').val());
                        $('#m_bank_name').text($('#bank_name').val());
                        $('#m_ifsc').text($('#ifsc').val());

                        $('#confirmModal').modal('show');
                    }
                },

                error: function(xhr) {

                    validating = false;
                    btn.prop('disabled', false).text('Submit');
                    $('#walletAddress').val(currentWallet);


                    if (xhr.status === 422) {

                        let errors = xhr.responseJSON.errors;

                        $.each(errors, function(key, value) {

                            if (key === 'receipt') {
                                $('#receipt-error').html(
                                    '<small class="text-danger">' + value[0] + '</small>'
                                );
                            } else {
                                $('[name="' + key + '"]').after(
                                    '<small class="text-danger">' + value[0] + '</small>'
                                );
                            }
                        });
                    }
                }
            });
        });


        let submitting = false;

        $('#finalSubmit').on('click', function() {

            if (submitting) return;

            submitting = true;

            $('#confirmed').val(1);
            $(this).prop('disabled', true).text('Processing...');

            $('#WalltetRequestForm').submit();
        });

    });

    $(document).ready(function() {

        $('#WalltetRequestForm').on('input change', 'input, select', function() {
            $(this).next('small.text-danger').remove();
        });

        $('#receipt').on('change', function() {
            $(this).closest('.col-lg-4').find('small.text-danger').remove();
        });

    });
</script>



<script>
    function copyWallet() {
        let copyText = document.getElementById("walletAddress");
        copyText.select();
        copyText.setSelectionRange(0, 99999);
        navigator.clipboard.writeText(copyText.value);
    }

    function previewReceipt(event) {
        const file = event.target.files[0];
        const preview = document.getElementById('preview');
        const placeholder = document.getElementById('uploadPlaceholder');

        if (!file) return;

        if (file.type.startsWith('image/')) {

            const reader = new FileReader();

            reader.onload = function(e) {
                preview.src = e.target.result;
                preview.style.display = 'block';
                placeholder.style.display = 'none';
            };

            reader.readAsDataURL(file);

        } else {
            preview.style.display = 'none';

            placeholder.innerHTML =
                '<i class="ti tabler-file"></i>' +
                '<p class="upload-text">' + file.name + '</p>';
        }
    }
</script>
<script>
    $('#network').on('change', function() {

        let network = $(this).val();

        $('#walletAddress').val('Loading...');

        $.ajax({
            url: "{{ route('fetch_admin_wallet') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                network: network
            },

            success: function(response) {

                if (response.status) {
                    $('#walletAddress').val(response.wallet_address);
                } else {
                    $('#walletAddress').val('');
                }
            },

            error: function() {
                $('#walletAddress').val('');
            }
        });
    });
</script>
@endsection