@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;
        /* max-height: 300px !important; */

    }

    .form {
        padding: 30px 40px;
    }

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

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

    }

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

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

    }

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


    }

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

    .bg-bliss.success input {
        border-color: var(--success-color);
    }

    .bg-bliss.error input {
        border-color: var(--error-color);
    }

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

    .bg-bliss.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;
    }

    .condition {
        color: #ffc107;
        /* max-height: 376px !important; */
        overflow: auto !important;
        text-align: justify !important;

        /* Hide scrollbar - Firefox */
        scrollbar-width: none;

        /* Hide scrollbar - IE & Edge (old) */
        -ms-overflow-style: none;
    }

    /* Hide scrollbar - Chrome, Safari, Edge (modern) */
    .condition::-webkit-scrollbar {
        display: none;
    }
</style>
<style>
    .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%);
        }
    }
</style>
@section('content')
<div class="row align-items-center justify-content-between">
    <div class="col-auto">
        <h5>
            <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="{{ route('initial_payment_history') }}"> <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>
            Initial Payment
        </h5>
    </div>
    <!-- <div class="col-auto">
                                                                                                    <a href="{{ route('sell_history') }}"><button class="btn btn-primary">Loan Report</button> </a>
                                                                                                </div> -->

</div>
<div class="row d-flex justify-content-center align-items-center">
    <div class="col-lg-6">
        <div class="container p-4 mt-0">

            <form action="{{route('initial_loan_form')}}" method="post" id="loanForm">
                @csrf
                <div class="row">
                    <div class="col-lg-12 mb-3">
                        <label class="form-label">User ID</label>
                        <input type="text" class="form-control bg-bliss" name="user_id" id="user_id"
                            value="{{old('user_id')}}" placeholder="Enter User ID">
                    </div>
                    @error('user_id')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
                    <div class="col-lg-12 mb-3">
                        <label class="form-label">User Name</label>
                        <input type="text" id="user_name" class="form-control bg-bliss" readonly>
                    </div>
                    <div class="col-lg-12">
                        <label class="form-label">Amount</label>
                        <input type="text" name="amount" value="{{50000,old('amount')}}" class="form-control bg-bliss"
                            placeholder="Enter Amount">
                    </div>
                    @error('amount')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
                    <span class="text-danger fw-bold text-center mt-0 mb-3">Note: Only 9 Carat units can be
                        purchased.</span>

                </div>
                <div class="d-flex justify-content-center mt-2">
                    <button type="button" class="btn btn-submit" data-bs-toggle="modal"
                        data-bs-target="#submitModal">Submit</button>
                </div>
            </form>
        </div>
    </div>

</div>
<div class="modal fade" id="submitModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">
            <h5 class="fw-bold mb-2">Are you sure!!</h5>
            <p class="text-muted">Are you confirm to submit?</p>

            <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">
                    Cancel
                </button>
                <button type="button" id="submit_btn" class="btn btn-success p-3 ms-2 fw-semibold">
                    Yes, Sure
                </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) {
            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>
    document.getElementById('submit_btn').addEventListener('click', function(e) {
        e.preventDefault();
        let btn           = this;
            btn.disabled  = true;
            btn.innerText = 'Processing...';
        document.getElementById('loanForm').submit();
    });
</script>
@endsection