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

@section('styles')
<style>

/* Pagination Styles */
.payment-pagination nav { display:flex; justify-content:center; margin-top:20px; flex-wrap:wrap; gap: 5px;}
.payment-pagination ul,
.payment-pagination .pagination {
    display: flex !important;
    list-style: none !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.payment-pagination li { list-style: none !important }
.payment-pagination p { display:none !important }
.payment-pagination li a,
.payment-pagination li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    color: #555;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
    background: #fff;
    transition: all .2s ease;
}
.payment-pagination li a:hover {
    background: #f7941d;
    color: #fff;
    border-color: #f7941d;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(247, 148, 29, 0.2);
}
.payment-pagination li.active span,
.payment-pagination li[aria-current=page] span {
    background: #f7941d;
    color: #fff;
    border-color: #f7941d;
    box-shadow: 0 4px 10px rgba(247, 148, 29, 0.2);
}
.payment-pagination li.disabled span,
.payment-pagination li.disabled a {
    color: #ccc;
    background: #f8f9fa;
    border-color: #e0e0e0;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
.payment-pagination .pagination > div { display:flex !important; gap:6px; align-items:center; flex-wrap:wrap; justify-content:center; }

@media (max-width: 576px) {
    .payment-pagination li a,
    .payment-pagination li span {
        min-width: 32px;
        height: 32px;
        padding: 0 8px;
        font-size: 12px;
    }
    .payment-pagination ul,
    .payment-pagination .pagination {
        gap: 4px !important;
    }
}



.tabs-wrap{display:flex;gap:0;border-bottom:2px solid #e0e0e0;margin-bottom:0}
.tab-btn{padding:13px 26px;background:none;border:none;font-size:14px;font-weight:600;color:#888;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:.2s}
.tab-btn.active{color:#f7941d;border-bottom-color:#f7941d}
.tab-content{display:none;padding-top:20px}
.tab-content.active{display:block}
.filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px;align-items:flex-end}
.filter-group{display:flex;flex-direction:column;gap:4px}
.filter-group label{font-size:12px;font-weight:600;color:#666}
.filter-group input,.filter-group select{padding:9px 12px;border:1.5px solid #ddd;border-radius:8px;font-size:13px;outline:none;background:#fff}
.filter-group input:focus,.filter-group select:focus{border-color:#f7941d}
.filter-btn{padding:9px 18px;background:#f7941d;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;align-self:flex-end}
.export-btn{padding:9px 16px;background:#16a34a;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px;align-self:flex-end}
.export-btn:hover{background:#15803d;color:#fff}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{background:#f8f9fa;padding:12px;text-align:left;font-weight:600;color:#555;border-bottom:2px solid #e0e0e0;white-space:nowrap}
td{padding:12px;border-bottom:1px solid #f0f0f0;color:#333;vertical-align:middle}
tr:hover td{background:#fafcff}
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600}
.badge-ind{background:#e8f0fe;color:#1a73e8}
.badge-biz{background:#e6f4ea;color:#1e8e3e}
/* Toggle switch */
.toggle-switch{position:relative;display:inline-block;width:44px;height:24px}
.toggle-switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:default;inset:0;background:#ccc;border-radius:34px;transition:.3s}
.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s}
input:checked + .slider{background:#22c55e}
input:checked + .slider:before{transform:translateX(20px)}
.toggle-label{font-size:12px;font-weight:600;color:#555;margin-left:8px}
.toggle-wrap{display:flex;align-items:center}
.view-btn{background:#16a34a;color:#fff;border:none;padding:6px 14px;border-radius:6px;font-size:12px;cursor:pointer;text-decoration:none;display:inline-block}
.empty{text-align:center;padding:50px;color:#aaa}

/* Menu Style Buttons from Front Website */
.btn-menu-style {
    color: #fff !important;
    font-weight: 700;
    text-align: center;
    padding: 9px 18px;
    border-radius: 8px;
    letter-spacing: .6px;
    font-size: 13px;
    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 class="card" style="padding:0;overflow:hidden">
    <div style="padding:20px 22px 0">
        <h2 style="font-size:20px;color:#333;margin-bottom:4px">💰 Payment History</h2>
    </div>

    <div class="tabs-wrap">
        <button class="tab-btn active" onclick="switchTab('donation',this)">🎁 Donation</button>
        <button class="tab-btn" onclick="switchTab('prepayment',this)">💳 Prepayment</button>
    </div>

    <div style="padding:0 22px 22px">

    {{-- DONATION TAB --}}
    <div class="tab-content active" id="tab-donation">
        <form method="GET" class="filter-bar">
            <input type="hidden" name="tab" value="donation">
            <div class="filter-group">
                <label>Search</label>
                <input type="text" name="don_search" placeholder="ID, Name, Email…" value="{{ request('don_search') }}" style="min-width:180px">
            </div>
            <div class="filter-group">
                <label>Type</label>
                <select name="don_type">
                    <option value="">All Types</option>
                    <option value="individual" {{ request('don_type')=='individual'?'selected':'' }}>Individual</option>
                    <option value="business"   {{ request('don_type')=='business'?'selected':'' }}>Business</option>
                </select>
            </div>
            <div class="filter-group">
                <label>From Date</label>
                <input type="date" name="don_from" value="{{ request('don_from') }}">
            </div>
            <div class="filter-group">
                <label>To Date</label>
                <input type="date" name="don_to" value="{{ request('don_to') }}">
            </div>
            <button type="submit" class="btn-menu-style c-home" style="align-self:flex-end">🔍 Filter</button>
            <a href="{{ route('customer.payment-history.donations.export') }}{{ request()->has('don_search') ? '?'.http_build_query(request()->only('don_search','don_type','don_from','don_to')) : '' }}" class="btn-menu-style c-about" style="align-self:flex-end">
                📤 Export CSV
            </a>
        </form>

        <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Transaction ID</th>
                    <th>Date</th>
                    <th>Customer</th>
                    <th>Amount</th>
                    <th>Email / Phone</th>
                    <th>Type</th>
                    <th>Anonymous</th>
                </tr>
            </thead>
            <tbody>
            @forelse($donations as $d)
                <tr>
                    <td><strong>{{ $d->donation_id }}</strong></td>
                    <td>{{ $d->created_at->format('Y-m-d') }}</td>
                    <td>
                        @if($d->anonymous)
                            <span style="color:#aaa;font-style:italic">Anonymous</span>
                        @else
                            {{ $d->donor_name ?? $d->business_name ?? '—' }}
                        @endif
                    </td>
                    <td><strong>${{ number_format($d->amount,2) }}</strong></td>
                    <td>
                        @if($d->anonymous) <span style="color:#aaa">—</span>
                        @else {{ $d->email ?: ($d->contact ?: '—') }}
                        @endif
                    </td>
                    <td><span class="badge {{ $d->type=='individual'?'badge-ind':'badge-biz' }}">{{ ucfirst($d->type) }}</span></td>
                    <td>
                        <div class="toggle-wrap">
                            <label class="toggle-switch">
                                <input type="checkbox" {{ $d->anonymous ? '' : 'checked' }} disabled>
                                <span class="slider"></span>
                            </label>
                            <span class="toggle-label">{{ $d->anonymous ? 'Hidden' : 'Shown' }}</span>
                        </div>
                    </td>
                </tr>
            @empty
                <tr><td colspan="7" class="empty">No donations found</td></tr>
            @endforelse
            </tbody>
        </table>
        </div>
      
        <div class="payment-pagination" style="margin-top:20px">{{ $donations->appends(request()->except('pre_page'))->links() }}</div>
    </div>

    {{-- PREPAYMENT TAB --}}
    <div class="tab-content" id="tab-prepayment">
        <form method="GET" class="filter-bar">
            <input type="hidden" name="tab" value="prepayment">
            <div class="filter-group">
                <label>Search</label>
                <input type="text" name="pre_search" placeholder="Invoice # or name…" value="{{ request('pre_search') }}" style="min-width:180px">
            </div>
            <div class="filter-group">
                <label>From Date</label>
                <input type="date" name="pre_from" value="{{ request('pre_from') }}">
            </div>
            <div class="filter-group">
                <label>To Date</label>
                <input type="date" name="pre_to" value="{{ request('pre_to') }}">
            </div>
            <button type="submit" class="btn-menu-style c-home" style="align-self:flex-end">🔍 Filter</button>
            <a href="{{ route('customer.payment-history.prepayments.export') }}" class="btn-menu-style c-about" style="align-self:flex-end">📤 Export CSV</a>
        </form>

        <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Invoice #</th>
                    <th>Date</th>
                    <th>Customer</th>
                    <th>Amount (ex GST)</th>
                    <th>GST (10%)</th>
                    <th>Total (inc GST)</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
            @forelse($prepayments as $p)
                <tr>
                    <td><strong>{{ $p->invoice_no }}</strong></td>
                    <td>{{ $p->created_at->format('Y-m-d') }}</td>
                    <td>{{ $p->customer_name }}</td>
                    <td>${{ number_format($p->amount_ex_gst,2) }}</td>
                    <td>${{ number_format($p->gst,2) }}</td>
                    <td><strong>${{ number_format($p->amount,2) }}</strong></td>
                    <td><a href="{{ route('customer.invoice.show', $p->id) }}" class="btn-menu-style c-gallery" style="padding:6px 14px;font-size:12px">📄 View</a></td>
                </tr>
            @empty
                <tr><td colspan="7" class="empty">No prepayments found</td></tr>
            @endforelse
            </tbody>
        </table>
        </div>
       <div class="payment-pagination" style="margin-top:20px">{{ $prepayments->appends(request()->except('don_page'))->links() }}</div>
    </div>

    </div>
</div>
@endsection

@section('scripts')
<script>
function switchTab(name, btn) {
    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
    document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
    btn.classList.add('active');
    document.getElementById('tab-' + name).classList.add('active');
}
const urlTab = new URLSearchParams(window.location.search).get('tab');
if (urlTab) {
    const btn = document.querySelector(`.tab-btn[onclick*="${urlTab}"]`);
    if (btn) switchTab(urlTab, btn);
}
</script>
@endsection