@extends('layouts.customer')
@section('title','Add Credit')
@section('page-title','Add Credit')

@section('styles')
<style>
body{background:#f5f5f5; min-height:100vh}
.wrap{max-width:600px;margin:0 auto}
.card2{background:#fff;border-radius:20px;padding:38px;box-shadow:0 20px 40px rgba(0,0,0,.2);margin-bottom:22px}
h1{color:#333;margin-bottom:8px;text-align:center;font-size:24px}
.subtitle{color:#888;text-align:center;margin-bottom:24px;font-size:14px}
.note-box{background:#e8f0fe;padding:12px 16px;border-radius:10px;font-size:13px;color:#444;margin-bottom:22px;text-align:center}
.amount-options{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}
.amount-option{padding:16px;border:2px solid #e0e0e0;border-radius:12px;text-align:center;cursor:pointer;transition:all .3s}
.amount-option:hover{border-color:#f7941d}
.amount-option.selected{border-color:#f7941d;background:#fff4eb}
.amount{font-size:22px;font-weight:700;color:#333}
.custom-input{width:100%;padding:14px;border:2px solid #e0e0e0;border-radius:12px;font-size:15px;outline:none;transition:.3s;margin-bottom:22px}
.custom-input:focus{border-color:#f7941d}
.summary{background:#f8f9fa;padding:18px;border-radius:12px;margin-bottom:20px}
.summary-row{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px;color:#555}
.total-row{font-size:20px;font-weight:700;color:#f7941d;border-top:2px solid #e0e0e0;padding-top:10px;margin-top:8px}
.validity{background:#fff3cd;padding:12px;border-radius:10px;margin-bottom:22px;font-size:13px;color:#856404}
.btn-pay{width:100%;padding:15px;background:linear-gradient(135deg,#f7941d,#e8820a);color:#fff;border:none;border-radius:12px;font-size:17px;font-weight:700;cursor:pointer;transition:transform .2s}
.btn-pay:hover{transform:translateY(-2px)}
.btn-donate-alt{width:100%;padding:14px;background:#fff;color:#e8820a;border:2px solid #e8820a;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s;margin-bottom:12px;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:8px}
.btn-donate-alt:hover{background:linear-gradient(135deg,#f7941d,#e8820a);color:#fff;border-color:transparent}
.back-link{text-align:center;margin-top:18px}
.back-link a{color:#f7941d;text-decoration:none;font-size:14px}

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

/* Donation Popup */
.popup-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;align-items:center;justify-content:center}
.popup-overlay.show{display:flex}
.popup-card{background:#fff;border-radius:20px;padding:36px 30px 28px;max-width:420px;width:90%;position:relative;font-family:'Segoe UI',sans-serif}
.popup-close{position:absolute;top:14px;right:16px;background:none;border:none;font-size:22px;color:#888;cursor:pointer}
.popup-icon{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#f7941d,#e8820a);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:26px}
.popup-card h2{text-align:center;font-size:20px;color:#2d2d2d;margin-bottom:6px}
.popup-card p{text-align:center;font-size:13px;color:#888;margin-bottom:22px}
.don-option{display:flex;align-items:center;gap:14px;padding:16px 18px;border:2px solid #e0e0e0;border-radius:14px;cursor:pointer;transition:all .25s;margin-bottom:12px}
.don-option.selected{border-color:#e8820a;background:#fff4eb}
.don-opt-icon{width:44px;height:44px;border-radius:12px;background:#fff4eb;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.don-opt-icon.biz{background:#f0f9f4}
.don-opt-body h3{font-size:15px;font-weight:700;color:#2d2d2d;margin-bottom:3px}
.don-opt-body p{font-size:13px;color:#888;margin:0}
.check{margin-left:auto;width:22px;height:22px;border-radius:50%;border:2px solid #ddd;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.check.checked{background:#e8820a;border-color:#e8820a;color:#fff;font-size:13px}
.btn-continue{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:18px}
.btn-continue:disabled{opacity:.45;cursor:not-allowed}
.btn-cancel-popup{display:block;width:100%;text-align:center;margin-top:12px;font-size:13px;color:#aaa;cursor:pointer;background:none;border:none}

@media(max-width:500px){.amount-options{grid-template-columns:repeat(3,1fr)}.card2{padding:24px} .amount-option {padding:12px} .amount{font-size:18px} .custom-input{padding:12px;font-size:14px} .summary{padding:14px} .summary-row{font-size:13px} .total-row{font-size:18px} .validity{font-size:12px} .btn-pay{padding:12px;font-size:16px}}
</style>
@endsection

@section('content')
<div class="wrap">
<div class="card2" id="mainCard">
    <h1>💰 Add Credit to Account</h1>
    <p class="subtitle">Pre-pay amount and use it for future bookings</p>

    <div class="note-box">
        💡 <strong>Note:</strong> Discount will be applied at the time of booking, not while adding credit.
    </div>

    <form method="POST" action="{{ route('customer.add-credit.process') }}" id="creditForm">
        @csrf
        <div class="amount-options">
            <div class="amount-option" data-amount="100"><div class="amount">$100</div></div>
            <div class="amount-option" data-amount="200"><div class="amount">$200</div></div>
            <div class="amount-option" data-amount="500"><div class="amount">$500</div></div>
        </div>

        <input type="number" id="customAmount" name="amount" class="custom-input"
               placeholder="Or enter custom amount ($100 minimum)" min="100"
               style="-moz-appearance:textfield" oninput="updateSummary(this.value || 0)">

        <div class="summary">
            <div class="summary-row"><span>You Pay:</span><span>$<span id="youPay">0</span> AUD</span></div>
            <div class="summary-row total-row"><span>Credit Added:</span><span>$<span id="totalCredit">0</span></span></div>
        </div>

        <div class="validity">
            ⏰ Credit validity: <strong>No expiry</strong><br>
            💳 Refund policy: Full refund to original payment method on cancellation request
        </div>

        <!-- <a href="{{ route('customer.donate') }}" class="btn-donate-alt">🤲 Make a Donation</a> -->

        
        <button type="submit" class="btn-menu-style c-contact">Proceed to Payment →</button>
    </form>

    <div class="back-link"><a href="{{ route('customer.dashboard') }}">← Back to Dashboard</a></div>
</div>
</div>
@endsection

@section('scripts')
<script>
let selectedAmt = 100;

function updateSummary(a){
    a = Math.max(100, parseInt(a)||100);
    document.getElementById('youPay').textContent = a;
    document.getElementById('totalCredit').textContent = a;
}

document.querySelectorAll('.amount-option').forEach(opt => {
    opt.addEventListener('click', function(){
        document.querySelectorAll('.amount-option').forEach(o => o.classList.remove('selected'));
        this.classList.add('selected');
        const a = parseInt(this.dataset.amount);
        selectedAmt = a;
        const inp = document.getElementById('customAmount');
        inp.value = a;
        updateSummary(a);
    });
});

document.getElementById('customAmount').addEventListener('input', function(){
    document.querySelectorAll('.amount-option').forEach(o => o.classList.remove('selected'));
    updateSummary(this.value);
});

// Default select $100
document.querySelector('.amount-option[data-amount="100"]').click();
</script>
@endsection