@extends('Admin.layout')
<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;
    }

    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;
    }

    .btn-submit {
        background-color: #ffc107 !important;
        color: black !important;
    }
</style>
<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: 2px solid #e3e6ef; */
        border-radius: 10px;
        height: 95px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        cursor: pointer;
        /* background: #fff; */
        transition: 0.2s;
    }

    /* .upload-box:hover {
        background: #f8f9ff;
    } */

    .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;
        /* color: #444; */
    }

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

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

    .coin-close-btn {
        border: 1px solid #a24ccf !important;
        /* color: #4b1c82 !important; */
    }
</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('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 Transfer
</h5>

<div class="container shadow-sm border-0">

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

        <!-- <h6 class="fw-semibold mb-4">
                Wallet Transfer
            </h6> -->
        <form id="WalltetRequestForm" action="{{ route('wallet_transfer_submit') }}" method="POST"
            enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="confirmed" id="confirmed" value="0">


            <div class="row">

                <div class="col-lg-6 mb-3">
                    <label class="form-label">User ID</label>
                    <input type="text" class="form-control" placeholder="Enter User ID" name="user_id" id="user_id"
                        value="{{ old('user_id') }}">

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

                <div class="col-lg-6 mb-3">
                    <label class="form-label">User Name</label>
                    <input type="text" id="user_name" class="form-control" placeholder="" readonly>
                </div>

                <div class="col-lg-6 mb-3">
                    <label class="form-label">Payment Mode</label>
                    <select class="form-select" name="payment_method" id="payment_method" readonly>
                        <option value="">Select</option>
                        <option value="Cash">Cash</option>
                        <option value="Bank">Bank</option>
                        <option value="Wallet">Wallet</option>
                    </select>
                    @error('payment_method')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>

                <div class="col-lg-6 mb-3">
                    <label class="form-label">USDT</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-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">TRC20</option>
                        <option value="ERC20">ERC20</option>
                        <option value="BEP20">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="{{ $adminWallet?->wallet_address ?? '' }}" readonly>

                        <button type="button" class="copy-btn text-white" 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>

                <div class="col-lg-4 mb-3">
                    <label class="form-label">Enter Transaction Hash</label>
                    <input type="text" class="form-control" name="transaction_hash" id="transaction_hash"
                        value="{{old('transaction_hash')}}" placeholder="Enter Transaction Hash">
                    @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">
                    <!-- <button type="reset" class="btn btn-label-secondary">Discard</button> -->
                    <button type="button" id="openConfirm" class="btn btn-submit">
                        Transfer
                    </button>
                </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">


                    <!-- user Id -->
                    <div class="col-md-4">
                        <div class="reg-row">
                            <span class="reg-label">User ID</span>
                            <span class="reg-colon">:</span>
                            <span class="reg-value" id="m_user_id">OM00123</span>
                        </div>
                    </div>

                    <!-- User Name -->
                    <div class="col-md-8">
                        <div class="reg-row">
                            <span class="reg-label">User Name</span>
                            <span class="reg-colon">:</span>
                            <span class="reg-value text-break" id="m_user_name">
                                Name
                            </span>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="reg-row">
                            <span class="reg-label">Payment_method</span>
                            <span class="reg-colon">:</span>
                            <span class="reg-value" id="m_payment_method"></span>
                        </div>
                    </div>

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

                    <!-- Wallet -->
                    <!-- <div class="col-md-8">
                        <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">
                                0x859AA4525c19829034CbbFD916F46c0
                            </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">1000</span>
                        </div>
                    </div>

                    <!-- Hash -->
                    <!-- <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 users = @json($users);

    // $('#user_id').on('input', function () {

    //     let enteredId = $(this).val().trim().toLowerCase();

    //     let user = users.find(u =>
    //         u.user_id.toLowerCase() === enteredId
    //     );

    //     if (user) {
    //         $('#user_name')
    //             .val(user.name)
    //             .removeClass('text-danger');
    //     } else {
    //         $('#user_name')
    //             .val('User not found')
    //             .addClass('text-danger');
    //     }
    // });

    const users = @json($users);

    $('#user_id').on('input', function() {

        let enteredId = $(this).val().trim().toLowerCase();

        let user = users.find(u => u.user_id.toLowerCase() === enteredId);

        if (user) {
            if (parseInt(user.is_active) === 1) {
                $('#user_name')
                    .val(user.name)
                    .removeClass('text-danger');
            } else {
                $('#user_name')
                    .val('User is inactive')
                    .addClass('text-danger');
            }
        } else {
            $('#user_name')
                .val('User not found')
                .addClass('text-danger');
        }
    });
</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>
    $(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('wallet_transfer_submit') }}",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,

                success: function(response) {

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

                    if (response.status) {

                        $('#m_user_id').text($('#user_id').val());
                        $('#m_user_name').text($('#user_name').val());
                        $('#m_payment_method').text($('#payment_method option:selected').text());
                        // $('#m_wallet').text($('#walletAddress').val());
                        $('#m_usdt').text($('#usdt').val());
                        // $('#m_hash').text($('#transaction_hash').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>
    $('#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