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

    #wallet_modal_section,
    #bank_modal_section,
    #wallet_title,
    #bank_title {
        display: none;
    }
</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>
    New Registration
</h5>
<div class="container shadow-sm">
    <div class="card-body p-2">


        <div class="mb-3">

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

                <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"
                            name="ref_id" id="ref_id" value="{{ old('ref_id', $user->user_id) }}">
                        @error('ref_id')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </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" name="ref_name" id="ref_name" value="{{ old('ref_name', $user->name) }}" readonly>

                        @error('ref_name')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </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')}}">
                        @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')}}"
                            oninput="this.value = this.value.replace(/[^0-9.]/g, '');" maxlength="10">
                        @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')}}">
                        @error('email')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <div class="col-md-3">
                        <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') }}">
                        @error('address')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <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') }}"
                            oninput="this.value = this.value.replace(/[^0-9.]/g, '');" maxlength="6">
                        @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')=='Tamil Nadu'?'selected':'' }}>Tamil Nadu</option>
                            <option value="Kerala" {{ old('state')=='Kerala'?'selected':'' }}>Kerala</option>
                            <option value="Karnataka" {{ old('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">
                            Country <span class="text-danger">*</span>
                        </label>
                        <select class="form-select" name="country">
                            <option value="">Select</option>
                            <option value="India" {{ old('country')=='India'?'selected':'' }}>India</option>
                            <option value="USA" {{ old('country')=='USA'?'selected':'' }}>USA</option>
                            <option value="UAE" {{ old('country')=='UAE'?'selected':'' }}>UAE</option>
                        </select>

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

                    <div class="col-md-6">
                        <label class="form-label  mb-1">
                            <b>User Type</b> <span class="text-danger">*</span>
                        </label>
                        <select class="form-select " name="user_type" id="user_type">
                            <option value="">Select</option>
                            <option value="super_promoter" {{ old('user_type')=='super_promoter'?'selected':'' }}> Super Promoter</option>
                            <!-- <option value="promoter" {{ old('type')=='promoter'?'selected':'' }}>Promoter</option>
                            <option value="sub_promoter" {{ old('type')=='sub_promoter'?'selected':'' }}> Sub Promoter</option> -->
                            <option value="member" {{ old('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">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') }}">
                        @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') }}">
                        @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') }}"
                            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" value="{{ old('nominee_address') }}"
                            rows="2" placeholder="Enter 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') }}"
                            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') }}"
                            placeholder="Enter Pan Number" maxlength="10">
                        @error('pan_number')
                        <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" name="payment_method" id="payment_method">
                        <!-- <option value="">Select</option> -->
                        <!-- <option value="Wallet" {{ old('payment_method')=='Wallet'?'selected':'' }}>Wallet</option> -->
                        <option value="Bank" {{ old('payment_method')=='Bank'?'selected':'' }}>Bank</option>
                    </select>

                    <!-- @error('payment_method')
                    <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-4">
                            <label class="form-label small mb-1">
                                Network <span class="text-danger">*</span>
                            </label>
                            <select class="form-select" name="network">
                                <option value="">Select</option>
                                <option value="TRC20" {{ old('network')=='TRC20'?'selected':'' }}>TRC20</option>
                                <option value="ERC20" {{ old('network')=='ERC20'?'selected':'' }}>ERC20</option>
                                <option value="BEP20" {{ old('network')=='BEP20'?'selected':'' }}>BEP20</option>
                            </select>

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

                        <div class="col-md-4">
                            <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') }}">
                            @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') }}">
                            @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') }}"
                                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') }}">
                            @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') }}">
                            @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') }}">
                            @error('ifsc')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                    </div>
                </div>

                <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">Create</button>
                </div>

            </form>
        </div>

    </div>
</div>
<div class="modal fade" id="welcomeModal" tabindex="-1">
    <div class="modal-dialog modal-md modal-dialog-centered">
        <div class="modal-content shadow border-0 rounded-3 p-4">

            <div class="coin-header text-center rounded-3 py-2 mb-3">
                <h2 class="fw-light m-0 text-white">COIN</h2>
            </div>

            <h4 class="text-center fw-bold mb-3 text-dark">
                Welcome to Coin
            </h4>

            <div class="card border rounded-3 p-3 mb-3">
                <p class="mb-2 fw-semibold text-muted small">
                    Login Credentials for Coin
                </p>

                <p class="mb-0 small text-muted">
                    <b>Your login credentials</b> will be sent to your registered email ID shortly.
                    <br>
                    Please check your inbox (and spam folder, if necessary).
                </p>
            </div>

            <button type="button" class="btn btn-outline-danger w-100 py-2 coin-close-btn"
                data-bs-dismiss="modal">
                Close
            </button>

        </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');
            } else {
                $('#wallet_section, #bank_section').addClass('d-none');
            }
        }

        $('#payment_method').on('change', function() {
            togglePayoutFields();
        });

        togglePayoutFields();

    });
</script>
<script>
    $(document).ready(function() {

        $('#ref_id').on('keyup change', function() {

            let refId = $(this).val();

            if (refId.length < 2) {
                $('#ref_name').val('');
                return;
            }

            $.ajax({
                url: "{{ route('ref_user') }}",
                type: "GET",
                data: {
                    ref_id: refId
                },

                success: function(response) {
                    if (response.status) {
                        $('#ref_name')
                            .val(response.name)
                            .removeClass('text-danger')
                    } else {
                        $('#ref_name')
                            .val('User not found')
                            .addClass('text-danger');
                    }
                }
            });
        });


        $('#adminRegisterForm').on('submit', function() {
            $('#submit_btn')
                .prop('disabled', true)
                .text('Processing...');
        });

    });
</script>
@if(session('success'))
<script>
    $(document).ready(function() {
        $('#welcomeModal').modal('show');
    });
</script>
@endif
@endsection