@extends('layouts.customer')
@section('title','Individual Donation')
@section('page-title','Individual Donation')

@section('styles')
<style>
.form-wrap{max-width:600px;margin:0 auto}
.form-card{background:#fff;border-radius:18px;padding:30px;box-shadow:0 4px 20px rgba(0,0,0,.07)}
.form-group{margin-bottom:18px}
label{display:block;margin-bottom:7px;color:#333;font-weight:600;font-size:14px}
.req{color:#e24b4a}
.opt-lbl{color:#aaa;font-weight:400;font-size:12px}
input[type=text],input[type=tel],input[type=email],input[type=number]{width:100%;padding:12px 14px;border:2px solid #e0e0e0;border-radius:10px;font-size:14px;outline:none;transition:.3s}
input:focus{border-color:#f7941d}
input.field-error{border-color:#e24b4a !important}
.err-msg{font-size:12px;color:#e24b4a;margin-top:5px;display:none}
.amount-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.amt-chip{padding:12px;border:2px solid #e0e0e0;border-radius:10px;text-align:center;cursor:pointer;font-size:15px;font-weight:700;color:#333;transition:all .25s}
.amt-chip.selected{border-color:#f7941d;background:#fff4eb;color:#f7941d}
.anon-box{border:2px solid #e0e0e0;border-radius:14px;padding:16px 18px;cursor:pointer;transition:all .25s}
.anon-box.active{border-color:#e8820a;background:#fff4eb}
.anon-row{display:flex;align-items:flex-start;gap:14px}
.radio-custom{width:20px;height:20px;border-radius:50%;border:2px solid #ddd;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.anon-box.active .radio-custom{border-color:#e8820a;background:#e8820a}
.radio-dot{width:8px;height:8px;border-radius:50%;background:#fff;display:none}
.anon-box.active .radio-dot{display:block}
.anon-text h4{font-size:15px;font-weight:700;color:#2d2d2d;margin-bottom:3px}
.anon-text p{font-size:13px;color:#888;margin:0}
.btn-submit{width:100%;padding:14px;background:linear-gradient(135deg,#f7941d,#e8820a);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;margin-top:6px}

/* Menu Style Buttons from Front Website */
.btn-menu-style {
    color: #fff !important;
    font-weight: 700;
    text-align: center;
    padding: 15px 0;
    border-radius: 8px;
    letter-spacing: .6px;
    font-size: 15px;
    display: inline-block;
    width: 100%;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .25s ease;
    border: none;
    cursor: pointer;
}
.btn-menu-style:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}
.c-home { background: #07b8a3 !important; border-bottom: 4px solid #089a89 !important; }
.c-about { background: #81c66b !important; border-bottom: 4px solid #67a055 !important; }
.c-services { background: #ff7528 !important; border-bottom: 4px solid #d9a810 !important; }
.c-gallery { background: #11A2D9 !important; border-bottom: 4px solid #0c8bbb !important; }
.c-contact { background: #de2779 !important; border-bottom: 4px solid #af1b5d !important; }

/* Logout Button Styling in Sidebar */
.sidebar a[href*="logout"],
.sidebar form[action*="logout"] button,
.sidebar .logout-btn,
.sidebar .btn-logout,
.main-sidebar a[href*="logout"],
.main-sidebar form[action*="logout"] button,
.sidebar-wrapper a[href*="logout"] {
    color: #fff !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    letter-spacing: .6px !important;
    font-size: 14px !important;
    display: block !important;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .25s ease !important;
    border: none !important;
    cursor: pointer !important;
    background: #de2779 !important;
    width: 100% !important;
    margin-top: 10px !important;
}
.sidebar a[href*="logout"]:hover,
.sidebar form[action*="logout"] button:hover,
.sidebar .logout-btn:hover,
.sidebar .btn-logout:hover,
.main-sidebar a[href*="logout"]:hover,
.main-sidebar form[action*="logout"] button:hover,
.sidebar-wrapper a[href*="logout"]:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15) !important;
    color: #fff !important;
    background: #de2779 !important;
}

/* Top Navbar Profile Color */
.navbar .nav-link, .navbar .dropdown-toggle, .navbar .user-name, header .user-name, .navbar .profile-text {
    color: #f7941d !important;
}

/* Sidebar Logo Image */
.logo-text, .sidebar .logo-text, .main-sidebar .logo-text {
    color: transparent !important;
    text-indent: -9999px !important;
    background-image: url('{{ asset("images/logo.png") }}') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 100% !important;
    height: 65px !important;
    display: block !important;
    margin: 10px 0 !important;
    overflow: hidden !important;
}

/* Sidebar Theme override */
.main-sidebar, .sidebar, aside, .sidebar-wrapper {
    background: #1d1d1d !important;
}
.sidebar .nav-link, .sidebar a {
    color: #fff !important;
}
.sidebar .nav-link:hover, .sidebar a:hover {
    background: rgba(255,255,255,0.1) !important;
    color: #07b8a3 !important;
}
.sidebar .nav-item .nav-link.active, .sidebar .active > a {
    background: linear-gradient(90deg, #81c66b 0%, #07b8a3 25%, #ff7528 70%, #de2779 100%) !important;
    color: #fff !important;
    border-radius: 6px;
}</style>
@endsection

@section('content')
<div class="form-wrap">
<div class="form-card">

    @if(session('error'))
        <div style="background:#f8d7da;color:#721c24;padding:12px;border-radius:8px;margin-bottom:16px;font-size:13px">❌ {{ session('error') }}</div>
    @endif

    <form method="POST" action="{{ route('customer.panel.donate.individual.submit') }}"
          id="donForm" onsubmit="return validateForm()">
        @csrf

        <div class="form-group" id="nameField">
            <!-- <label>Full Name <span class="req">*</span></label> -->
            <label>Full Name <span class="req" id="nameReq">*</span> <span id="nameOpt" style="display:none;color:#aaa;font-weight:400;font-size:12px">(optional)</span></label>

            <input type="text" id="fullName" name="full_name"
                   placeholder="Enter your full name" value="{{ old('full_name') }}">
            <div class="err-msg" id="errName">Please enter your full name.</div>
        </div>

        <div class="form-group">
            <label>Contact Number <span class="opt-lbl">(optional)</span></label>
            <input type="tel" name="contact" placeholder="+61 400 000 000" value="{{ old('contact') }}">
        </div>

        <div class="form-group">
            <label>Email Address <span class="opt-lbl">(optional)</span></label>
            <input type="email" name="email" placeholder="name@example.com" value="{{ old('email') }}">
        </div>

        <div class="form-group">
            <label>Donation Amount <span class="req">*</span></label>
            <div class="amount-grid">
                <div class="amt-chip" onclick="selectAmt(this,5)">$5</div>
                <div class="amt-chip" onclick="selectAmt(this,10)">$10</div>
                <div class="amt-chip" onclick="selectAmt(this,25)">$25</div>
                <div class="amt-chip" onclick="selectAmt(this,50)">$50</div>
            </div>
           <!--  <input type="number" id="donationAmount" name="amount"
                   placeholder="Or enter custom amount (min. $2)" min="2" step="1"
                   value="{{ old('amount') }}" style="-moz-appearance:textfield"> -->

                   <input type="text" id="donationAmount" name="amount"
                   placeholder="Or enter custom amount (min. $2)" step="1"
                   value="{{ old('amount') }}"
                   oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1').slice(0,10)"
                   style="-moz-appearance:textfield">



            <div style="font-size:12px;color:#aaa;margin-top:5px">💡 Minimum donation amount is $2</div>
            <div class="err-msg" id="errAmount">Minimum donation amount is $2.</div>
        </div>

        <div class="form-group">
            <label>Anonymous Donation</label>
            <div class="anon-box" id="anonBox" onclick="toggleAnon()">
                <div class="anon-row">
                    <div class="radio-custom"><div class="radio-dot"></div></div>
                    <div class="anon-text">
                        <h4>Donate Anonymously</h4>
                        <p>Your name will remain hidden from public donor listings.</p>
                    </div>
                </div>
            </div>
            <input type="hidden" name="anonymous" id="anonInput" value="0">
        </div>

        <button type="submit" class="btn-menu-style c-services">🤲 Proceed to Donate</button>
    </form>
    <div style="text-align:center;margin-top:14px">
        <a href="{{ route('customer.panel.donate') }}" style="color:#f7941d;text-decoration:none;font-size:14px">← Back</a>
    </div>
</div>
</div>
@endsection

@section('scripts')
<script>
let isAnon = false;
// function toggleAnon() {
//     isAnon = !isAnon;
//     document.getElementById('anonBox').classList.toggle('active', isAnon);
//     document.getElementById('anonInput').value = isAnon ? '1' : '0';
//     const f = document.getElementById('nameField');
//     const i = document.getElementById('fullName');
//     if (isAnon) {
//         f.style.maxHeight='0';f.style.overflow='hidden';f.style.opacity='0';f.style.marginBottom='0';
//         i.value='';i.classList.remove('field-error');
//         document.getElementById('errName').style.display='none';
//     } else {
//         f.style.maxHeight='120px';f.style.overflow='visible';f.style.opacity='1';f.style.marginBottom='18px';
//     }
// }



// function toggleAnon() {
//     isAnon = !isAnon;
//     document.getElementById('anonBox').classList.toggle('active', isAnon);
//     document.getElementById('anonInput').value = isAnon ? '1' : '0';
//     // Name field stays visible always — just becomes optional
//     document.getElementById('errName').style.display = 'none';
//     document.getElementById('fullName').classList.remove('field-error');
// }


function toggleAnon() {
    isAnon = !isAnon;
    document.getElementById('anonBox').classList.toggle('active', isAnon);
    document.getElementById('anonInput').value = isAnon ? '1' : '0';
    document.getElementById('errName').style.display = 'none';
    document.getElementById('fullName').classList.remove('field-error');
    // Toggle * mark
    document.getElementById('nameReq').style.display = isAnon ? 'none' : 'inline';
    document.getElementById('nameOpt').style.display = isAnon ? 'inline' : 'none';
}


function selectAmt(el,val) {
    document.querySelectorAll('.amt-chip').forEach(c=>c.classList.remove('selected'));
    el.classList.add('selected');
    document.getElementById('donationAmount').value=val;
    document.getElementById('errAmount').style.display='none';
    document.getElementById('donationAmount').classList.remove('field-error');
}
document.getElementById('donationAmount').addEventListener('input',function(){
    document.querySelectorAll('.amt-chip').forEach(c=>c.classList.remove('selected'));
    this.classList.remove('field-error');
    document.getElementById('errAmount').style.display='none';
});
function validateForm() {
    let valid=true;
    const amt=parseFloat(document.getElementById('donationAmount').value);
    if(!amt||amt<2){document.getElementById('errAmount').style.display='block';document.getElementById('donationAmount').classList.add('field-error');valid=false;}
    if(!isAnon){const name=document.getElementById('fullName').value.trim();if(!name){document.getElementById('errName').style.display='block';document.getElementById('fullName').classList.add('field-error');valid=false;}}
    return valid;
}
</script>
@endsection