@extends('User.layout')
<style>
    .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>
  <style>

* {
  --hibiscus-love: #fc465c;
  --fine-ii: #f9b198;
  --afl: #f9b198;
  --mexican-sky: #cfdddd;
  --brasillia-peach: #0A1F44 ;
  --free: #ffd700;
  --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;
}

.btn-submit {
  cursor: pointer;
  background: #ffd700 !important;
  font-size: 16px;
  color: black !important;
  padding: 0.618em 1.2em;
  border-radius: 0.4em;

}

.btn-submit {
  outline: 0;
  background-color: #ffd700;
}
 .card {
        background-color: #0A1F44 !important;
        color: White !important;
    }

    .form-label {
        color: White !important;
    }
       .news-marquee {
    width: 100%;
    overflow: hidden;
    background: #111;
    color: #fff;
    padding: 10px 0;
    position: relative;
    border-radius: 6px;
}

/* Track */
.marquee-track {
    display: flex;
    width: max-content;
    animation: scrollLeft 20s linear infinite;
}

/* Each item */
.marquee-item {
    margin-right: 50px;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.3s ease;
}

/* Hover effect */
.marquee-item:hover {
    color: #ffc107;
}

/* Pause on hover */
.news-marquee:hover .marquee-track {
    animation-play-state: paused;
}

/* Animation */
@keyframes scrollLeft {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%);
    }
}

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



    </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="{{ url()->previous() }}">
            <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="card shadow-sm border-0">

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


        <form action="{{ route('wallet_transfer_form') }}" method="POST" id="transferForm">
            @csrf

            <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') }}">

                    <small id="userError" class="text-danger d-none">User ID not found</small>
                </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="Enter User Name" readonly>
                </div>

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


                <div class="col-lg-6 mb-3">
                    <label class="form-label">Remark</label>
                    <textarea type="text" name="remark" id="remark" class="form-control" placeholder="Enter Remark" rows="3">{{ old('remark') }}</textarea>
                    @error('remark')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
                </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">
                        Submit
                    </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 Transfer Confirmation
            </h6>

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

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

                    <!-- Network -->
                    <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>

                    <!-- Wallet -->
                    <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>

                    <!-- 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_amount">1000</span>
                        </div>
                    </div>

                    <!-- Hash -->
                    <div class="col-md-8">
                        <div class="reg-row">
                            <span class="reg-label">Remark</span>
                            <span class="reg-colon">:</span>
                            <span class="reg-value text-break" id="m_remark">ABCD</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 (enteredId === '') {
            $('#user_name').val('');
            return;
        }

        if (user) {
            $('#user_name')
                .val(user.name)
                .removeClass('text-danger');
        } else {
            $('#user_name')
                .val('User not found')
                .addClass('text-danger');
        }
    });
</script>
<script>
    let validating = false;

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

        e.preventDefault();

        let btn = $(this);

        if (validating || btn.prop('disabled')) return;

        validating = true;
        btn.prop('disabled', true).text('Checking...');

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

        $.ajax({
            url: "{{ route('wallet_transfer_form') }}",
            type: "POST",
            data: $('#transferForm').serialize() + '&validate_only=1',

            success: function() {

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

                $('#m_user_id').text($('#user_id').val());
                $('#m_user_name').text($('#user_name').val());
                $('#m_amount').text($('[name="amount"]').val());
                $('#m_remark').text($('#remark').val());
                $('#confirmModal').modal('show');
            },

            error: function(xhr) {
                validating = false;
                btn.prop('disabled', false).text('Submit');
                if (xhr.status === 422) {
                    let errors = xhr.responseJSON.errors;
                    $.each(errors, function(key, val) {
                        $('[name="' + key + '"]').after(
                            '<small class="text-danger">' + val[0] + '</small>'
                        );
                    });
                }
            }
        });
    });


    let submitting = false;
    $('#finalSubmit').click(function() {
        if (submitting) return;
        submitting = true;
        $(this).prop('disabled', true).text('Processing...');
        $('#transferForm')[0].submit();
    });


    $('#transferForm').on('input', 'input, textarea', function() {
        $(this).next('.text-danger').remove();
    });
</script>
@endsection