@extends('layouts.admin')
@section('title','Manage Customer Credits')
@section('page-title','💰 Manage Customer Credits')

@section('styles')
<style>

    /* Pagination Fix */
.cust-pagination{display:flex;justify-content:center;margin-top:20px}
.cust-pagination nav{display:flex;justify-content:center}
.cust-pagination ul,
.cust-pagination .pagination{
    display:flex !important;
    list-style:none !important;
    gap:6px !important;
    padding:0 !important;
    margin:0 !important;
    align-items:center;
    flex-wrap:wrap;
}
.cust-pagination li{list-style:none !important}
.cust-pagination p{display:none !important}
.cust-pagination li a,
.cust-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:10px;
    color:#555;
    text-decoration:none !important;
    font-size:13px;
    font-weight:600;
    background:#fff;
    transition:.2s;
}
.cust-pagination li a:hover{
    background:linear-gradient(135deg,#1e3c72,#2a5298);
    color:#fff;
    border-color:#1e3c72;
}
.cust-pagination li.active span,
.cust-pagination li[aria-current=page] span{
    background:linear-gradient(135deg,#1e3c72,#2a5298);
    color:#fff;
    border-color:#1e3c72;
}
.cust-pagination li.disabled span,
.cust-pagination li.disabled a{
    color:#ccc;
    background:#f8f9fa;
    cursor:not-allowed;
}
.cust-pagination .pagination > div{display:flex !important;gap:6px;align-items:center;justify-content:center;width:100%}


.credit-info{background:#e8f0fe;padding:20px;border-radius:12px;margin-bottom:20px;text-align:center;display:none}
.credit-info h3{color:#1e3c72;margin-bottom:8px;font-size:15px}
.credit-amount{font-size:36px;font-weight:800;color:#1e3c72}
.adjust-box{background:#fff;border-radius:14px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,.07);margin-bottom:20px}
.adjust-box h4{font-size:16px;color:#1e3c72;margin-bottom:16px;font-weight:700}
.amount-row{display:flex;gap:10px;margin-bottom:12px}
.amount-row input{flex:1;padding:12px;border:2px solid #e0e0e0;border-radius:10px;font-size:15px;outline:none}
.amount-row input:focus{border-color:#1e3c72}
.add-btn{padding:12px 22px;background:#22c55e;color:#fff;border:none;border-radius:10px;cursor:pointer;font-size:14px;font-weight:700}
.deduct-btn{padding:12px 22px;background:#ef4444;color:#fff;border:none;border-radius:10px;cursor:pointer;font-size:14px;font-weight:700}
.note-area{width:100%;padding:10px 14px;border:2px solid #e0e0e0;border-radius:10px;font-size:13px;resize:vertical;outline:none;margin-bottom:14px}
.note-area:focus{border-color:#1e3c72}
.customer-select{width:100%;padding:13px;border:2px solid #e0e0e0;border-radius:10px;margin-bottom:18px;font-size:14px;outline:none;background:#fff}
.customer-select:focus{border-color:#1e3c72}

/* History section */
.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.history-header h3{font-size:17px;font-weight:700;color:#1e3c72}
.record-badge{background:#e8f0fe;color:#1e3c72;padding:5px 14px;border-radius:20px;font-size:13px;font-weight:700}

/* Filter bar */
.filter-bar{background:#f8f9fa;border-radius:12px;padding:15px 18px;margin-bottom:16px;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.filter-group{display:flex;flex-direction:column;gap:4px;min-width:120px}
.filter-group label{font-size:12px;font-weight:600;color:#555}
.filter-select,.filter-input{padding:9px 12px;border:2px solid #e0e0e0;border-radius:8px;font-size:13px;background:#fff;outline:none}
.filter-select:focus,.filter-input:focus{border-color:#1e3c72}
.reset-btn{background:#e0e0e0;color:#333;border:none;padding:9px 16px;border-radius:8px;cursor:pointer;font-size:13px;align-self:flex-end;font-weight:600}
.reset-btn:hover{background:#ccc}
.apply-btn{background:#1e3c72;color:#fff;border:none;padding:9px 16px;border-radius:8px;cursor:pointer;font-size:13px;align-self:flex-end;font-weight:600}

/* Table */
.type-added{color:#22c55e;font-weight:700;display:flex;align-items:center;gap:6px}
.type-deducted{color:#ef4444;font-weight:700;display:flex;align-items:center;gap:6px}
.amount-added{color:#22c55e;font-weight:700;font-size:15px}
.amount-deducted{color:#ef4444;font-weight:700;font-size:15px}

/* ---------- THEME BUTTONS ---------- */
.add-btn, .btn-save, .quick-link, .btn-pay {
    color: #fff !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 13px 24px !important;
    border-radius: 8px !important;
    letter-spacing: .6px !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .25s ease !important;
    border: none !important;
    cursor: pointer !important;
    background: #07b8a3 !important;
    border-bottom: 4px solid #089a89 !important;
}
.add-btn:hover, .btn-save:hover, .quick-link:hover, .btn-pay:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15) !important;
}
.quick-links .quick-link:nth-child(2) { background: #81c66b !important; border-bottom-color: #67a055 !important; }
.quick-links .quick-link:nth-child(3) { background: #ff7528 !important; border-bottom-color: #d9a810 !important; }
.quick-links .quick-link:nth-child(4) { background: #de2779 !important; border-bottom-color: #af1b5d !important; }
.quick-links .quick-link:nth-child(5) { background: #11A2D9 !important; border-bottom-color: #0c8bbb !important; }

.action-btn { 
    border-radius: 6px !important; 
    border: none !important;
    border-bottom: 3px solid rgba(0,0,0,0.2) !important; 
    padding: 6px 12px !important; 
    font-weight: 600 !important; 
    color: #fff !important;
    transition: transform .18s ease !important;
}
.action-btn:hover { transform: translateY(-2px) !important; }
.edit-btn { background: #11A2D9 !important; }
.credits-btn, .btn-approve, .btn-success { background: #81c66b !important; }
.delete-btn, .btn-reject, .btn-danger { background: #de2779 !important; }
.btn-cancel { background: #ff7528 !important; color: #fff !important; border-bottom: 4px solid #d9a810 !important; }

.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;
}

@media (max-width: 768px) {
    .logo-text, .sidebar .logo-text, .main-sidebar .logo-text {
        height: 45px !important;
        margin: 5px 0 !important;
    }
}

.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;
    background: #de2779 !important;
}

.navbar .nav-link, .navbar .dropdown-toggle, .navbar .user-name, header .user-name, .navbar .profile-text {
    color: #f7941d !important;
}

.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;
}
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.responsive-layout { display: grid; grid-template-columns: 320px 1fr; gap: 22px; align-items: start; }
.responsive-layout > div { min-width: 0; }
@media (max-width: 768px) {
    .responsive-layout { grid-template-columns: 1fr !important; }
    .card, .adjust-box { padding: 16px !important; }
    .filter-bar { flex-direction: column; align-items: stretch !important; }
    .filter-group, .filter-select, .filter-input { width: 100% !important; }
}
</style>
@endsection

@section('content')
<div class="responsive-layout">

    {{-- LEFT: Adjust Panel --}}
    <div>
        <div class="adjust-box">
            <h4>💰 Adjust Customer Credit</h4>

            <select id="customerSelect" class="customer-select" onchange="loadCustomer(this.value)">
                <option value="">-- Select Customer --</option>
                @foreach($customers as $c)
                    <option value="{{ $c->id }}" data-balance="{{ $c->credit_balance }}" data-name="{{ $c->name }}"
                        {{ request('customer_id')==$c->id ? 'selected' : '' }}>
                        {{ $c->name }} ({{ $c->email }})
                    </option>
                @endforeach
            </select>

            <div class="credit-info" id="creditInfo">
                <h3>Current Credit Balance</h3>
                <div class="credit-amount" id="creditAmount">$0.00</div>
                <div style="font-size:13px;color:#666;margin-top:4px" id="customerNameDisplay"></div>
            </div>

            <form method="POST" action="{{ route('admin.credits.adjust') }}" id="adjustForm">
                @csrf
                <input type="hidden" name="user_id" id="userId" value="{{ request('customer_id') }}">
                <div class="amount-row">
                    <input type="number" name="amount" id="amountInput" placeholder="Enter amount ($)" min="0.01" step="0.01" required>
                </div>
                <textarea name="note" class="note-area" rows="2" required 
                    placeholder="Add reason/note (e.g. 'Customer compensation', 'Promotional bonus', 'Booking cancellation')"></textarea>
                <input type="hidden" name="type" id="typeInput" value="credit">
                <div style="display:flex;gap:10px;flex-wrap:wrap">
                    <button type="submit" class="add-btn" onclick="document.getElementById('typeInput').value='credit'">
                        ➕ Add Credit
                    </button>
                    <button type="submit" class="deduct-btn" onclick="document.getElementById('typeInput').value='debit'">
                        ➖ Deduct Credit
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- RIGHT: History --}}
    <div class="card" style="padding:22px">
        <div class="history-header">
            <h3>🧾 All Credit History</h3>
            <span class="record-badge">{{ $transactions->total() }} records</span>
        </div>

        {{-- Filters --}}
        <form method="GET" class="filter-bar">
            @if(request('customer_id'))
                <input type="hidden" name="customer_id" value="{{ request('customer_id') }}">
            @endif
            <div class="filter-group">
                <label>Customer</label>
                <select name="filter_customer" class="filter-select">
                    <option value="">All Customers</option>
                    @foreach($customers as $c)
                        <option value="{{ $c->id }}" {{ request('filter_customer')==$c->id ? 'selected' : '' }}>
                            {{ $c->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="filter-group">
                <label>Type</label>
                <select name="filter_type" class="filter-select">
                    <option value="">All Types</option>
                    <option value="credit" {{ request('filter_type')=='credit' ? 'selected' : '' }}>Added</option>
                    <option value="debit"  {{ request('filter_type')=='debit'  ? 'selected' : '' }}>Deducted</option>
                </select>
            </div>
            <div class="filter-group">
                <label>From Date</label>
                <input type="date" name="from_date" class="filter-input" value="{{ request('from_date') }}">
            </div>
            <div class="filter-group">
                <label>To Date</label>
                <input type="date" name="to_date" class="filter-input" value="{{ request('to_date') }}">
            </div>
            <div class="filter-group">
                <label>Min Amount ($)</label>
                <input type="number" name="min_amount" class="filter-input" placeholder="0" min="0" step="0.01" value="{{ request('min_amount') }}" style="width:100px">
            </div>
            <div class="filter-group">
                <label>Max Amount ($)</label>
                <input type="number" name="max_amount" class="filter-input" placeholder="Any" min="0" step="0.01" value="{{ request('max_amount') }}" style="width:100px">
            </div>
            <button type="submit" class="apply-btn">Apply</button>
            <a href="{{ route('admin.credits') }}" class="reset-btn" style="text-decoration:none">Reset</a>
        </form>

        <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Date &amp; Time</th>
                    <th>Customer</th>
                    <th>Type</th>
                    <th>Amount</th>
                    <th>Admin Note / Reason</th>
                    <th>Admin</th>
                </tr>
            </thead>
            <tbody>
            @forelse($transactions as $tx)
            <tr>
                <td>{{ $tx->created_at->format('Y-m-d H:i:s') }}</td>
                <td>
                    <a href="{{ route('admin.customers.edit', $tx->user_id) }}" style="color:#1e3c72;text-decoration:none;font-weight:600">
                        👤 {{ $tx->user->name ?? '—' }}
                    </a>
                </td>
                <td>
                    @if($tx->type === 'credit')
                        <span class="type-added">➕ Added</span>
                    @else
                        <span class="type-deducted">— Deducted</span>
                    @endif
                </td>
                <td>
                    @if($tx->type === 'credit')
                        <span class="amount-added">+${{ number_format($tx->amount,2) }}</span>
                    @else
                        <span class="amount-deducted">-${{ number_format($tx->amount,2) }}</span>
                    @endif
                </td>
                <td style="color:#666;font-size:13px">{{ $tx->note ?: '—' }}</td>
                <td>{{ $tx->source === 'admin-adjustment' ? 'Admin' : 'System' }}</td>
            </tr>
            @empty
            <tr><td colspan="6" style="text-align:center;padding:40px;color:#aaa">No credit history found</td></tr>
            @endforelse
            </tbody>
        </table>
        </div>
      
        <div class="cust-pagination">{{ $transactions->withQueryString()->links() }}</div>
    </div>

</div>
@endsection

@section('scripts')
<script>
// Pre-load if customer selected
const sel = document.getElementById('customerSelect');
if (sel.value) loadCustomer(sel.value);

function loadCustomer(id) {
    document.getElementById('userId').value = id;
    const opt = sel.querySelector(`option[value="${id}"]`);
    if (opt) {
        const bal = parseFloat(opt.dataset.balance || 0);
        document.getElementById('creditAmount').textContent = '$' + bal.toFixed(2);
        document.getElementById('customerNameDisplay').textContent = opt.dataset.name;
        document.getElementById('creditInfo').style.display = 'block';
    } else {
        document.getElementById('creditInfo').style.display = 'none';
    }
}
</script>
@endsection