@extends('User.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.dashboard') }}">
            <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>
    Profile
</h5>

<div class="container shadow-sm">
    <div class="card-body">
        <div class="mb-3">

            <form action="#">
                @csrf

                <div class="row g-3">
                    @if($user->user_type !== 'super_promoter')
                    <div class="fw-semibold small mb-2 text-white">Referral Details</div>

                    <div class="col-md-6">
                        <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"
                            value="{{ $user->ref_id }}" readonly>
                    </div>

                    <div class="col-md-6">
                        <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="referral_name"
                            value="{{ $referral ? ucfirst($referral->name) : '-' }}" readonly>
                    </div>
                    @endif
                    <div class="fw-semibold small mb-2 text-white">Personal Details</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', ucfirst($user->name)) }}" readonly>
                    </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"
                            value="{{ old('phone_number', $user->phone_number) }}" readonly>
                    </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', $user->email) }}" readonly>
                    </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', $user->address) }}" readonly>
                    </div>

                    <div class="col-md-4">
                        <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', $user->pincode) }}" readonly>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label small mb-1">
                            State <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control" name="state" value="{{ old('state', $user->state) }}"
                            readonly>
                    </div>



                    <div class="col-md-4">
                        <label class="form-label small mb-1">
                            Country <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control" name="country"
                            value="{{ old('country', $user->country) }}" readonly>
                    </div>
                </div>

                <div class="col-md-12 mt-4">
                    <label class="form-label mb-1" style="font-size:16px;">
                        <b>Payout Method</b>
                    </label>

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

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



                <!-- Wallet Details -->
                <div class="mt-4 d-none" id="wallet_section">
                    <div class="fw-semibold small mb-2 text-white">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>
                            <input type="text" class="form-control" name="network"
                                value="{{ old('network', $user->network ?? '') }}" readonly>
                        </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" name="wallet_address"
                                value="{{ old('wallet_address', $user->wallet_address ?? '') }}" readonly>
                        </div>

                    </div>
                </div>

                <div class="mt-4 d-none" id="bank_section">
                    <div class="fw-semibold small mb-2 text-white">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 form-control-sm"
                                value="{{ old('account_holder', $user->account_holder ?? '') }}" readonly>

                        </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 form-control-sm"
                                value="{{ old('account_number', $user->account_number ?? '') }}" readonly>

                        </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 form-control-sm"
                                value="{{ old('bank_name', $user->bank_name ?? '') }}" readonly>

                        </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 form-control-sm"
                                value="{{ old('branch_name', $user->branch_name ?? '') }}" readonly>

                        </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 form-control-sm"
                                value="{{ old('ifsc', $user->ifsc ?? '') }}" readonly>
                        </div>
                    </div>
                </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().trim();

            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>
@endsection