@extends('Admin.layout')

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

    @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: #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;
    }

    h1,
    h2,
    h3,
    h4,
    h5 {
        font-family: 'Yeseva One', Georgia, cursive;
        color: var(--header-color);
    }

    body {
        font-family: 'Lora', 'Times New Roman', serif;
        background-color: var(--bg-color);
        color: var(--free);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: column nowrap;
        min-height: 100vh;
    }

    .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;
        box-shadow: 4px 4px 8px #c19c66, -4px -4px 8px #fffaa4;
        border: 1px solid #ec263c66;
        font-size: 16px;
        color: black !important;
        padding: 0.618em 1.2em;
        border-radius: 0.4em;

    }

    .btn-submit {
        outline: 0;
        background-color: #ffd700;
    }
</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_table') }}">
            <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>
    View User
</h5>

<div class="row align-items-center justify-content-between mb-0">
    <div class="col m-2">
        <p><b>User ID : {{ $users->user_id ?? '—' }}</b></p>
        <p>
            <b>User Password :</b>
            <span id="passwordText">••••••••••••</span>

            <input type="hidden" id="realPassword" value="{{ $users->pwd_hint ?? '' }}">
            <span class="ms-2" style="cursor:pointer;" onclick="togglePassword()">
                <i id="eyeIcon" class="ti tabler-eye"></i>
            </span>
        </p>
        <p><b>User Pin : {{ $users->pin_hint ?? '—' }}</b></p>

    </div>

    <div class="col-auto mb-4">
        <a href="{{ route('user.login') }}" target="_blank"><button class="btn btn-primary">User Login</button> </a>
    </div>
</div>
<div class="container mt-0 shadow-sm">
    <div class="card-body">



        <div class="row align-items-center justify-content-between mb-3">
            <div class="col-auto">
                <h6 class="fw-semibold text-white mb-3">Edit User</h6>
            </div>
            <div class="col-auto">
                <a href="{{ route('user_profile_edit_history', $users->id) }}"><button class="btn btn-submit">History</button> </a>
            </div>
        </div>
        <div class="mb-3">

            <form action="{{ route('update_user_profile') }}" id="updateUser" method="post">
                @csrf
                <input type="hidden" name="id" value="{{ $users->id }}">
                <div class="row g-3">

                    <div class="col-md-3">
                        <label class="form-label small mb-1">
                            Referral ID <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control" placeholder="Enter Referral ID"
                            id="ref_id" value="{{ old('ref_id', $users->ref_id ?? '') }}" readonly>

                    </div>

                    <div class="col-md-3">
                        <label class="form-label small mb-1">
                            Referral Name <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control" placeholder="Enter Referral Name"
                            id="ref_name" value="{{ old('ref_name', $users->refUser->name ?? '-') }}" readonly>

                    </div>

                    <div class="col-md-3">
                        <label class="form-label small mb-1">
                            Name <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control" placeholder="Enter Name" name="name"
                            value="{{ old('name', $users->name ?? '') }}">
                        @error('name')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <div class="col-md-3">
                        <label class="form-label small mb-1">
                            Phone Number <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control" placeholder="Enter Phone Number" name="phone_number"
                            value="{{ old('phone_number', $users->phone_number ?? '') }}">
                        @error('phone_number')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <div class="col-md-3">
                        <label class="form-label small mb-1">
                            Email <span class="text-danger">*</span>
                        </label>
                        <input type="email" class="form-control" placeholder="Enter Email" name="email"
                            value="{{ old('email', $users->email ?? '') }}">
                        @error('email')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                   

                    <!-- Row 4 -->
                    <div class="col-md-3">
                        <label class="form-label small mb-1">
                            Pincode <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control" placeholder="Enter Pincode" name="pincode"
                            value="{{ old('pincode', $users->pincode ?? '') }}">
                        @error('pincode')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <div class="col-md-3">
                        <label class="form-label small mb-1">
                            State <span class="text-danger">*</span>
                        </label>
                        <select class="form-select " name="state">
                            <option value="">Select</option>

                            <option value="Tamil Nadu"
                                {{ old('state', $users->state) == 'Tamil Nadu' ? 'selected' : '' }}>
                                Tamil Nadu
                            </option>

                            <option value="Kerala" {{ old('state', $users->state) == 'Kerala' ? 'selected' : '' }}>
                                Kerala
                            </option>

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

                    <!-- <div class="col-md-6">
                        <label class="form-label small mb-1">
                            Password <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control" placeholder="Enter password" name="password"
                            value="{{ old('password', $users->pwd_hint ?? '') }}">
                        @error('password')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <div class="col-md-6">
                        <label class="form-label small mb-1">
                            Pin <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control" placeholder="Enter pin" name="pin"
                            value="{{ old('pin', $users->pin_hint ?? '') }}">
                        @error('pin')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div> -->


                    <div class="col-md-3">
                        <label class="form-label small mb-1">
                            Country <span class="text-danger">*</span>
                        </label>
                        <select class="form-select " name="country">
                            <option value="">Select</option>

                            <option value="India" {{ old('country', $users->country) == 'India' ? 'selected' : '' }}>
                                India
                            </option>

                            <option value="USA" {{ old('country', $users->country) == 'USA' ? 'selected' : '' }}>
                                USA
                            </option>

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

                     <!-- <div class="col-md-12">
                        <label class="form-label small mb-1">
                            Address <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control" placeholder="Enter Address" name="address"
                            value="{{ old('address', $users->address ?? '') }}">
                        @error('address')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div> -->

                       <div class="col-md-12">
                        <label class="form-label"> Address<span class="text-danger">*</span></label>
                        <textarea type="text" class="form-control"
                            name="address"
                            rows="2" placeholder="Enter Address">{{ old('address', $users->address ?? '') }}</textarea>
                        @error('address')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <!-- </div>

                          <div class="col-md-12 mt-4">
                        <label class="form-label  mb-1"  style="font-size:16px;">
                            <b>Payout Method</b> <span class="text-danger">*</span>
                        </label>
                        <select class="form-select form-select-sm" name="payout_method" id="payout_method">
                            <option value="">Select</option>
                            <option value="Wallet" {{ old('payout_method', $users->payout_method) == 'Wallet' ? 'selected' : '' }}>Wallet</option>
                            <option value="Bank" {{ old('payout_method', $users->payout_method) == 'Bank' ? 'selected' : '' }}>Bank</option>
                        </select>

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


                    <div class="col-md-4">
                        <label class="form-label  mb-1">
                            <b>Type</b> <span class="text-danger">*</span>
                        </label>
                        <select class="form-select " name="user_type" id="user_type">
                            <option value="">Select</option>
                            <!-- <option value="promoter" {{ old('type', $users->type) == 'promoter' ? 'selected' : '' }}>Promoter
                            </option> -->
                            <option value="super_promoter" {{ old('user_type', $users->user_type) == 'super_promoter' ? 'selected' : '' }}>
                                Super Promoter</option>
                            <option value="member" {{ old('user_type', $users->user_type) == 'member' ? 'selected' : '' }}>Member</option>

                        </select>

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

                    <div class="col-md-4">
                        <label class="form-label  mb-1">
                            <b>Register From</b> <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control" placeholder="Enter Wallet Address"
                            name="register_from" value="{{ old('register_from', $users->register_from ?? '') }}"
                            readonly>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label mb-1">
                            <b>Payout Method</b>
                        </label>

                        <input type="text" class="form-control" value="{{ $users->payment_method }}" readonly>

                        <input type="hidden" id="payment_method" name="payment_method"
                            value="{{ $users->payment_method }}">
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Nominee Name<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="nominee_name" id="nominee_name"
                            placeholder="Enter Nominee Name" value="{{ old('nominee_name', $users->userDetail->nominee_name ?? '') }}">
                        @error('nominee_name')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Nominee Relation<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="nominee_relation" placeholder="Enter Nominee Relation"
                            value="{{ old('nominee_relation', $users->userDetail->nominee_relation ?? '') }}">
                        @error('nominee_relation')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Nominee Mobile Number<span class="text-danger">*</span></label>
                        <input type="text" class="form-control"
                            name="nominee_phone_number" value="{{ old('nominee_phone_number', $users->userDetail->nominee_phone_number ?? '') }}"
                            oninput="this.value = this.value.replace(/[^0-9.]/g, '');"
                            placeholder="Enter Nominee Mobile Number" maxlength="10">
                        @error('nominee_phone_number')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                    <div class="col-md-12">
                        <label class="form-label">Nominee Address<span class="text-danger">*</span></label>
                        <textarea type="text" class="form-control"
                            name="nominee_address"
                            rows="2" placeholder="Enter Nominee Address">{{ old('nominee_address', $users->userDetail->nominee_address ?? '') }}</textarea>
                        @error('nominee_address')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Aadhar Number<span class="text-danger">*</span></label>
                        <input type="text" class="form-control"
                            name="aadhar_number" value="{{ old('aadhar_number', $users->userDetail->aadhar_number ?? '') }}"
                            oninput="this.value = this.value.replace(/[^0-9.]/g, '');"
                            placeholder="Enter Aadhar Number" maxlength="12">
                        @error('aadhar_number')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Pan Number<span class="text-danger">*</span></label>
                        <input type="text" class="form-control"
                            name="pan_number" value="{{ old('pan_number', $users->userDetail->pan_number ?? '') }}"
                            oninput="this.value = this.value.replace(/[^0-9.]/g, '');"
                            placeholder="Enter Pan Number" maxlength="10">
                        @error('pan_number')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <div class="mt-4 d-none" id="wallet_section">
                        <div class="fw-semibold small mb-2">Wallet Details</div>

                        <div class="row g-3">

                            <div class="col-md-6">
                                <label class="form-label small mb-1">
                                    Network <span class="text-danger">*</span>
                                </label>
                                <select class="form-select form-select-sm" name="network">
                                    <option value="">Select</option>

                                    <option value="TRC20"
                                        {{ old('network', $users->network) == 'TRC20' ? 'selected' : '' }}>
                                        TRC20
                                    </option>

                                    <option value="ERC20"
                                        {{ old('network', $users->network) == 'ERC20' ? 'selected' : '' }}>
                                        ERC20
                                    </option>

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

                            <div class="col-md-6">
                                <label class="form-label small mb-1">
                                    Wallet Address <span class="text-danger">*</span>
                                </label>
                                <input type="text" class="form-control" placeholder="Enter Wallet Address"
                                    name="wallet_address"
                                    value="{{ old('wallet_address', $users->wallet_address ?? '') }}">
                                @error('wallet_address')
                                <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                        </div>
                    </div>

                    <div class="mt-4 d-none" id="bank_section">
                        <div class="fw-semibold small mb-2">Bank Details</div>

                        <div class="row g-3">

                            <div class="col-md-6">
                                <label class="form-label small mb-1">
                                    Account Holder Name <span class="text-danger">*</span>
                                </label>
                                <input type="text" class="form-control"
                                    placeholder="Account Holder Name" name="account_holder"
                                    value="{{ old('account_holder', $users->account_holder ?? '') }}">
                                @error('account_holder')
                                <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label small mb-1">
                                    Account Number <span class="text-danger">*</span>
                                </label>
                                <input type="text" class="form-control"
                                    placeholder="Enter Account Number" name="account_number"
                                    value="{{ old('account_number', $users->account_number ?? '') }}"
                                    oninput="this.value = this.value.replace(/[^0-9.]/g, '');">
                                @error('account_number')
                                <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label small mb-1">
                                    Bank Name<span class="text-danger">*</span>
                                </label>
                                <input type="text" class="form-control" placeholder="Enter Bank Name"
                                    name="bank_name" value="{{ old('bank_name', $users->bank_name ?? '') }}">
                                @error('bank_name')
                                <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="col-md-4">
                                <label class="form-label small mb-1">
                                    Branch Name <span class="text-danger">*</span>
                                </label>
                                <input type="text" class="form-control"
                                    placeholder="Enter Branch Name" name="branch_name"
                                    value="{{ old('branch_name', $users->branch_name ?? '') }}">
                                @error('branch_name')
                                <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label small mb-1">
                                    IFSC Code <span class="text-danger">*</span>
                                </label>
                                <input type="text" class="form-control" placeholder="Enter IFSC Code"
                                    name="ifsc" value="{{ old('ifsc', $users->ifsc ?? '') }}">
                                @error('ifsc')
                                <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Buttons -->
                    <div class="d-flex justify-content-center gap-3 mt-4">
                        <!-- <button type="reset" class="btn btn-label-secondary px-5 btn-sm">Discard</button> -->
                        <button type="submit" id="submit_btn" class="btn btn-submit px-5 btn-sm">Update</button>
                    </div>

            </form>

        </div>

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

<script>
    $(document).ready(function() {

        function togglePayoutFields() {
            let method = $('#payment_method').val();

            if (method === 'Wallet') {
                $('#wallet_section').removeClass('d-none');
                $('#bank_section').addClass('d-none');
            } else if (method === 'Bank') {
                $('#bank_section').removeClass('d-none');
                $('#wallet_section').addClass('d-none');
            }
        }
        togglePayoutFields();

    });
</script>
<script>
    let isShown = false;

    function togglePassword() {

        const passwordText = document.getElementById("passwordText");
        const realPassword = document.getElementById("realPassword").value;
        const eyeIcon = document.getElementById("eyeIcon");

        if (isShown) {
            passwordText.innerText = "••••••";
            eyeIcon.className = "ti tabler-eye";
            isShown = false;

        } else {
            passwordText.innerText = realPassword || "—";
            eyeIcon.className = "ti tabler-eye-off";
            isShown = true;
        }
    }

    document.getElementById('updateUser').addEventListener('submit', function() {
        const btn = document.getElementById('submit_btn');
        btn.disabled = true;
        btn.innerText = 'Processing...';
    });
</script>
@endsection