@extends('Admin.layout')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">

<style>
    * {
        --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;
    }

    .section-title {
        position: relative;
        margin: 25px 0 15px;
        text-align: center;
    }

    .section-title span {
        background-color: white !important;
        padding: 6px 20px;
        font-weight: 600;
        color: var(--text-color);
        letter-spacing: 1px;
        border-radius: 30px;
        border: 1px solid var(--quadrary-color);
        font-size: 14px;
        z-index: 1;
        position: relative;
    }

    .section-title::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 1px;
        background: var(--quadrary-color);
        z-index: 0;
    }
</style>

@section('content')

<div class="row align-items-center justify-content-between mb-3 mt-3">
    <div class="col-auto">
        <h5>

            <i class="ti tabler-refresh me-1 text-primary"></i> Deposit
        </h5>
    </div>
    <div class="col-auto">
        <a href="{{ route('admin.load_history') }}"><button class="btn btn-primary">
                Deposit History
            </button></a>
    </div>
</div>

<div class="card p-3">

    <h6><i class="ti tabler-refresh me-1 text-primary"></i> Deposit</h6>

    <form action="{{ route('admin.deposit_form') }}" method="POST" id="depositForm">
        @csrf

        <div class="row g-2">

            <div class="section-title mt-1">
                <span><i class="ti tabler-user-circle me-1"></i> Personal Details</span>
            </div>

            <div class="col-lg-6 mb-2">
                <label class="form-label">
                    <i class="ti tabler-id me-1"></i>User ID
                </label>
                <input type="text" class="form-control" placeholder="Enter User ID" name="user_id" id="user_id"
                    value="{{ old('user_id') }}">
                @error('user_id')
                <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>

            <div class="col-lg-6 mb-2">
                <label class="form-label">
                    <i class="ti tabler-user me-1"></i>User Name
                </label>
                <input type="text" class="form-control"
                    name="user_name" id="user_name" readonly>
            </div>

            <div class="section-title mt-3">
                <span><i class="ti tabler-user-circle me-1"></i> Deposit Details</span>
            </div>
            <div class="col-lg-3 mb-2">
                <label class="form-label">
                    <i class="ti tabler-credit-card me-1"></i>Payment Mode
                </label>
                <select class="form-select" name="pay_mode">
                    <option value="">Select</option>
                    <option value="Bank Transfer"
                        {{ old('pay_mode') == 'Bank Transfer' ? 'selected' : '' }}>
                        Bank Transfer
                    </option>

                    <option value="UPI"
                        {{ old('pay_mode') == 'UPI' ? 'selected' : '' }}>
                        UPI
                    </option>

                    <option value="Cash"
                        {{ old('pay_mode') == 'Cash' ? 'selected' : '' }}>
                        Cash
                    </option>
                </select>
                @error('pay_mode')
                <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>

            <div class="col-lg-3 mb-2">
                <label class="form-label">
                    <i class="ti tabler-package me-1"></i>Package
                </label>
                <select class="form-select" name="package">
                    <option value="">Select</option>
                    <option value="silver"
                        {{ old('package') == 'silver' ? 'selected' : '' }}>
                        Silver
                    </option>

                    <option value="gold"
                        {{ old('package') == 'gold' ? 'selected' : '' }}>
                        Gold
                    </option>
                    <!-- <option value="gold_plus">Gold plus</option> -->
                    <option value="diamond"
                        {{ old('package') == 'diamond' ? 'selected' : '' }}>
                        Diamond
                    </option>
                </select>
                @error('package')
                <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>

            <div class="col-lg-3 mb-2">
                <label class="form-label">
                    <i class="ti tabler-currency-rupee me-1"></i>Amount
                </label>
                <input type="text" class="form-control" name="wallet_value"
                    placeholder="Enter Amount" value="{{ old('wallet_value') }}">
                @error('wallet_value')
                <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>

            <div class="col-lg-3 mb-2">
                <label class="form-label">
                    <i class="ti tabler-percentage me-1"></i>ROI (%)
                </label>
                <input type="text" class="form-control" name="roi_percentage"
                    placeholder="Enter ROI" value="{{ old('roi_percentage') }}">
                @error('roi_percentage')
                <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>

            <div class="col-lg-3 mb-2">
                <label class="form-label">
                    <i class="ti tabler-calendar-time me-1"></i>Days
                </label>
                <input type="text" class="form-control" name="days"
                    placeholder="Enter Days" value="{{ old('days') }}">
                @error('days')
                <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>


            <div class="col-lg-3 mb-2">
                <label class="form-label">
                    <i class="ti tabler-star me-1"></i>Give Spot Level
                </label>
                <select class="form-select" name="give_spot">
                    <option value="yes"
                        {{ old('give_spot') == 'yes' ? 'selected' : '' }}>
                        Yes
                    </option>

                    <option value="no"
                        {{ old('give_spot') == 'no' ? 'selected' : '' }}>
                        No
                    </option>

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

            <div class="col-lg-3 mb-2">
                <label class="form-label">
                    <i class="ti tabler-receipt-2 me-1"></i>Transaction ID
                </label>
                <input type="text" class="form-control" name="utr"
                    placeholder="Enter Transaction ID" value="{{ old('utr') }}">
                @error('utr')
                <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>



            <div class="col-lg-3 mb-2">
                <label class="form-label">
                    <i class="ti tabler-user-dollar me-1"></i>Deposited By
                </label>
                <select class="form-select" name="deposited_by">
                    <!--<option selected value = "">Select</option>-->
                    <option value="User"
                        {{ old('deposited_by') == 'User' ? 'selected' : '' }}>
                        User
                    </option>

                    <option value="Admin"
                        {{ old('deposited_by') == 'Admin' ? 'selected' : '' }}>
                        Admin
                    </option>
                </select>
                @error('deposited_by')
                <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>

            <div class="form-action d-flex justify-content-center mt-3">

                <button class="btn btn-primary" id="submit_btn">
                    <i class="ti tabler-device-floppy me-1"></i>Submit
                </button>
            </div>

        </div>
    </form>

</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');
        }
    });
</script>
<script>
    document.getElementById('depositForm').addEventListener('submit', function() {
        const btn = document.getElementById('submit_btn');
        btn.disabled = true;
        btn.innerText = 'Processing...';
    });
</script>
@endsection