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

@section('styles')
<style>
/* Menu Style Buttons from Front Website */
.btn-menu-style {
    color: #fff !important;
    font-weight: 700;
    text-align: center;
    padding: 12px 24px;
    border-radius: 8px;
    letter-spacing: .6px;
    font-size: 14px;
    display: inline-block;
    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 style="max-width:480px;margin:0 auto">
<div style="background:#fff;border-radius:20px;padding:36px;box-shadow:0 4px 20px rgba(0,0,0,.08)">
    <div style="width:66px;height:66px;border-radius:50%;background:linear-gradient(135deg,#f7941d,#e8820a);display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 16px">🤲</div>
    <h1 style="text-align:center;font-size:22px;color:#2d2d2d;margin-bottom:6px">Make a Donation</h1>
    <p style="text-align:center;font-size:14px;color:#888;margin-bottom:28px">Choose how you'd like to donate</p>

    <a href="{{ route('customer.panel.donate.individual') }}"
       style="display:flex;align-items:center;gap:16px;padding:18px 20px;border:2px solid #e0e0e0;border-radius:14px;cursor:pointer;transition:all .25s;margin-bottom:14px;text-decoration:none;color:#2d2d2d">
        <div style="width:46px;height:46px;border-radius:12px;background:#fff4eb;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0">👤</div>
        <div>
            <div style="font-size:16px;font-weight:700;margin-bottom:3px">Individual Donation</div>
            <div style="font-size:13px;color:#888">Donate as a private individual</div>
        </div>
        <span style="margin-left:auto;font-size:18px;color:#aaa">›</span>
    </a>

    <a href="{{ route('customer.panel.donate.business') }}"
       style="display:flex;align-items:center;gap:16px;padding:18px 20px;border:2px solid #e0e0e0;border-radius:14px;cursor:pointer;transition:all .25s;text-decoration:none;color:#2d2d2d">
        <div style="width:46px;height:46px;border-radius:12px;background:#f0f9f4;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0">🏢</div>
        <div>
            <div style="font-size:16px;font-weight:700;margin-bottom:3px">Business Donation</div>
            <div style="font-size:13px;color:#888">Donate on behalf of your company</div>
        </div>
        <span style="margin-left:auto;font-size:18px;color:#aaa">›</span>
    </a>
</div>
</div>
@endsection