<?php $__env->startSection('page-title', 'Expenses'); ?>

<?php $__env->startPush('styles'); ?>
<style>
    /* =============================================
       CSS CUSTOM PROPERTIES
    ============================================= */
    :root {
        --radius-xl: 20px;
        --radius-lg: 16px;
        --radius-md: 12px;
        --radius-sm: 8px;
        --shadow-sm: 0 2px 12px rgba(0,0,0,0.06);
        --shadow-md: 0 8px 32px rgba(0,0,0,0.10);
        --shadow-hover: 0 16px 48px rgba(0,0,0,0.13);
        --transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        --color-expense: #eb3349;
        --color-warning: #f59e0b;
        --color-paid:    #11998e;
        --color-partial: #f59e0b;
        --color-unpaid:  #eb3349;
        --color-primary: #667eea;
    }

    /* =============================================
       PAGE WRAPPER
    ============================================= */
    .expenses-page { padding: 4px 0 28px; }

    /* =============================================
       PAGE HEADER
    ============================================= */
    .page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 20px;
    }

    .page-header h2 {
        font-size: clamp(1.2rem, 3vw, 1.65rem);
        font-weight: 700;
        color: #1a1a2e;
        margin: 0;
    }

    /* =============================================
       BUTTONS
    ============================================= */
    .btn {
        border-radius: var(--radius-md);
        padding: 9px 18px;
        font-weight: 600;
        font-size: 0.88rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        border: none;
        text-decoration: none;
        transition: var(--transition);
        cursor: pointer;
        white-space: nowrap;
    }

    .btn:hover { transform: translateY(-2px); }

    .btn-primary {
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: #fff;
        box-shadow: 0 4px 12px rgba(102,126,234,0.35);
    }

    .btn-secondary {
        background: #f1f5f9;
        color: #475569;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }

    .btn-secondary:hover { background: #e2e8f0; color: #334155; }

    .btn-sm {
        padding: 6px 12px;
        font-size: 0.8rem;
        border-radius: var(--radius-sm);
    }

    .btn-w-full { width: 100%; }

    /* =============================================
       SUMMARY CARDS
    ============================================= */
    .summary-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 20px;
    }

    .summary-card {
        border-radius: var(--radius-lg);
        padding: 20px 22px;
        color: #fff;
        box-shadow: var(--shadow-md);
        transition: var(--transition);
        position: relative;
        overflow: hidden;
        border: none;
    }

    .summary-card::after {
        content: '';
        position: absolute;
        top: -30%; right: -10%;
        width: 120px; height: 120px;
        border-radius: 50%;
        background: rgba(255,255,255,0.1);
        pointer-events: none;
    }

    .summary-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }

    .summary-card.danger  { background: linear-gradient(135deg, #eb3349, #f45c43); }
    .summary-card.warning { background: linear-gradient(135deg, #f59e0b, #fbbf24); color: #1a1a2e; }

    .summary-card h5 {
        font-size: 0.82rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        opacity: 0.85;
        margin-bottom: 8px;
    }

    .summary-card h3 {
        font-size: clamp(1.25rem, 3.5vw, 1.9rem);
        font-weight: 800;
        margin: 0;
        word-break: break-all;
    }

    .summary-card .summary-icon {
        position: absolute;
        bottom: 12px; right: 18px;
        font-size: 2.2rem;
        opacity: 0.18;
    }

    /* =============================================
       FILTER CARD
    ============================================= */
    .filter-card {
        background: #fff;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        border: none;
        margin-bottom: 20px;
        overflow: hidden;
    }

    .filter-card .card-body { padding: 18px 20px; }

    .filter-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr) auto;
        gap: 12px;
        align-items: end;
    }

    .form-group { display: flex; flex-direction: column; gap: 6px; }

    .form-label {
        font-size: 0.78rem;
        font-weight: 700;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        margin: 0;
    }

    .form-control,
    .form-select {
        border-radius: var(--radius-md);
        border: 2px solid #e2e8f0;
        padding: 9px 13px;
        font-size: 0.88rem;
        font-weight: 500;
        color: #334155;
        background: #fff;
        transition: var(--transition);
        width: 100%;
        appearance: none;
        -webkit-appearance: none;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 4px rgba(102,126,234,0.15);
        outline: none;
    }

    .form-select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        padding-right: 32px;
    }

    .filter-actions-row { display: contents; }

    /* =============================================
       TABLE CARD
    ============================================= */
    .table-card {
        background: #fff;
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-sm);
        border: none;
        overflow: hidden;
    }

    .table-card .card-body { padding: 0; }

    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table { width: 100%; border-collapse: collapse; }

    thead th {
        background: #f8fafc;
        padding: 13px 14px;
        font-size: 0.73rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #64748b;
        border-bottom: 2px solid #e2e8f0;
        white-space: nowrap;
    }

    tbody td {
        padding: 13px 14px;
        font-size: 0.87rem;
        font-weight: 500;
        color: #334155;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
    }

    tbody tr { transition: var(--transition); }
    tbody tr:hover { background: rgba(102,126,234,0.04); }
    tbody tr:last-child td { border-bottom: none; }

    /* =============================================
       BADGES
    ============================================= */
    .badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 11px;
        border-radius: 20px;
        font-size: 0.73rem;
        font-weight: 700;
        white-space: nowrap;
    }

    .badge-paid    { background: rgba(17,153,142,0.12);  color: var(--color-paid); }
    .badge-partial { background: rgba(245,158,11,0.15);  color: #92400e; }
    .badge-unpaid  { background: rgba(235,51,73,0.12);   color: var(--color-unpaid); }

    /* =============================================
       AMOUNT / DUE CELLS
    ============================================= */
    .amount-cell { font-weight: 700; color: #334155; }
    .due-positive { color: var(--color-expense); font-weight: 700; }
    .due-zero     { color: #94a3b8; }

    /* =============================================
       TYPE / SEGMENT PILLS
    ============================================= */
    .type-pill {
        display: inline-flex;
        align-items: center;
        padding: 3px 10px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        background: rgba(102,126,234,0.08);
        color: #4c51bf;
        white-space: nowrap;
    }

    .segment-pill {
        display: inline-flex;
        align-items: center;
        padding: 3px 10px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        background: rgba(6,182,212,0.08);
        color: #0e7490;
        white-space: nowrap;
    }

    /* =============================================
       METHOD PILL
    ============================================= */
    .method-pill {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 3px 10px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        background: #f1f5f9;
        color: #475569;
        white-space: nowrap;
    }

    /* =============================================
       DESCRIPTION CELL
    ============================================= */
    .desc-cell {
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #64748b;
        font-size: 0.82rem;
    }

    /* =============================================
       EMPTY STATE
    ============================================= */
    .empty-state {
        text-align: center;
        padding: 56px 20px;
        color: #94a3b8;
    }

    .empty-state i { display: block; margin-bottom: 14px; opacity: 0.4; }
    .empty-state p { font-size: 0.9rem; margin-bottom: 18px; }

    /* =============================================
       PAGINATION
    ============================================= */
    .pagination-wrapper {
        padding: 16px 20px;
        border-top: 1px solid #f1f5f9;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
    }

    /* =============================================
       MOBILE CARD LIST  (< 576px)
    ============================================= */
    .exp-card-list { display: none; padding: 12px; }

    .exp-card {
        background: #fafafa;
        border: 1px solid #f1f5f9;
        border-left: 4px solid var(--color-expense);
        border-radius: var(--radius-md);
        padding: 14px 16px;
        margin-bottom: 10px;
        transition: var(--transition);
    }

    .exp-card:hover { background: #f1f5f9; }

    /* top row: type + amount */
    .exp-card-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 10px;
    }

    .exp-card-left { min-width: 0; flex: 1; }

    .exp-card-date {
        font-size: 0.73rem;
        color: #94a3b8;
        font-weight: 500;
        margin-bottom: 3px;
    }

    .exp-card-type {
        font-size: 0.9rem;
        font-weight: 700;
        color: #1a1a2e;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 3px;
    }

    .exp-card-desc {
        font-size: 0.8rem;
        color: #64748b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .exp-card-amount {
        text-align: right;
        flex-shrink: 0;
    }

    .exp-card-amount .main-amount {
        font-size: 1.1rem;
        font-weight: 800;
        color: var(--color-expense);
        display: block;
        white-space: nowrap;
    }

    .exp-card-amount .due-amount {
        font-size: 0.75rem;
        color: #f59e0b;
        font-weight: 600;
        display: block;
        white-space: nowrap;
    }

    /* bottom row: pills + badge */
    .exp-card-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        flex-wrap: wrap;
    }

    .exp-card-meta {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
    }

    /* =============================================
       ============================================
       RESPONSIVE BREAKPOINTS
       ============================================
    ============================================= */

    /* ---- EXTRA SMALL < 480px ---- */
    @media (max-width: 479px) {
        .expenses-page { padding: 0 0 16px; }

        .page-header { flex-direction: column; align-items: stretch; }
        .page-header h2 { font-size: 1.2rem; }
        .page-header .btn { width: 100%; }

        .summary-row { gap: 10px; }
        .summary-card { padding: 14px 16px; }
        .summary-card h3 { font-size: 1.15rem; }
        .summary-card .summary-icon { font-size: 1.6rem; }

        /* Filter: 1 col */
        .filter-grid { grid-template-columns: 1fr; gap: 10px; }
        .filter-actions-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        .filter-card .card-body { padding: 14px; }

        /* Hide table, show cards */
        .table-responsive { display: none; }
        .exp-card-list { display: block; }

        .pagination-wrapper { padding: 12px; }
    }

    /* ---- SMALL 480–575px ---- */
    @media (min-width: 480px) and (max-width: 575px) {
        .page-header { flex-direction: column; align-items: stretch; }
        .page-header .btn { width: 100%; }

        .filter-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
        .filter-actions-row {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        /* Hide table, show cards */
        .table-responsive { display: none; }
        .exp-card-list { display: block; }
    }

    /* ---- MEDIUM 576–767px ---- */
    @media (min-width: 576px) and (max-width: 767px) {
        .filter-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
        .filter-actions-row {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        thead th, tbody td { padding: 11px 10px; font-size: 0.8rem; }
        .desc-cell { max-width: 90px; }

        /* Hide less important cols on small tables */
        .col-segment, .col-description { display: none; }
    }

    /* ---- TABLET 768–991px ---- */
    @media (min-width: 768px) and (max-width: 991px) {
        .filter-grid { grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
        .filter-actions-row {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }
        .desc-cell { max-width: 110px; }
    }

    /* ---- DESKTOP 992px+ ---- */
    @media (min-width: 992px) {
        .filter-grid { grid-template-columns: repeat(3, 1fr) auto; }
        .filter-actions-row { display: contents; }
    }

    /* ---- WIDE 1400px+ ---- */
    @media (min-width: 1400px) {
        .desc-cell { max-width: 240px; }
    }

    /* =============================================
       TOUCH OPTIMISATIONS
    ============================================= */
    @media (hover: none) and (pointer: coarse) {
        .btn:hover          { transform: none; }
        .summary-card:hover { transform: none; }
        tbody tr:hover      { background: transparent; }
        .exp-card:hover     { background: #fafafa; }
        .btn { padding: 11px 18px; }
        thead th, tbody td  { padding: 14px 12px; }
    }

    /* =============================================
       ACCESSIBILITY
    ============================================= */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            transition-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
        }
    }

    :focus-visible {
        outline: 3px solid #667eea;
        outline-offset: 2px;
        border-radius: 4px;
    }

    /* =============================================
       LANDSCAPE PHONES
    ============================================= */
    @media (max-height: 500px) and (orientation: landscape) {
        .summary-row { grid-template-columns: 1fr 1fr; gap: 10px; }
        .summary-card { padding: 12px 16px; }
        .summary-card h3 { font-size: 1.1rem; }
    }

    /* =============================================
       PRINT
    ============================================= */
    @media print {
        .page-header .btn,
        .filter-card,
        .exp-card-list { display: none !important; }

        .table-responsive { display: block !important; overflow: visible !important; }
        .table-card { box-shadow: none !important; border: 1px solid #ccc !important; }
        thead th, tbody td { padding: 7px 10px !important; font-size: 0.78rem !important; }
        .col-segment, .col-description { display: table-cell !important; }
        .summary-card { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    }
</style>
<?php $__env->stopPush(); ?>

<?php $__env->startSection('content'); ?>
<div class="expenses-page">

    
    <div class="page-header">
        <h2>Expenses</h2>
        <a href="<?php echo e(route('expenses.create')); ?>" class="btn btn-primary">
            <i class="fas fa-plus"></i> Add Expense
        </a>
    </div>

    
    <div class="summary-row">
        <div class="summary-card danger">
            <h5>Total Expenses</h5>
            <h3>৳<?php echo e(number_format($totalAmount, 2)); ?></h3>
            <i class="fas fa-receipt summary-icon"></i>
        </div>
        <div class="summary-card warning">
            <h5>Accounts Payable (Due)</h5>
            <h3>৳<?php echo e(number_format($expenses->sum('due'), 2)); ?></h3>
            <i class="fas fa-clock summary-icon"></i>
        </div>
    </div>

    
    <div class="filter-card">
        <div class="card-body">
            <form method="GET" action="<?php echo e(route('expenses.index')); ?>">
                <div class="filter-grid">

                    <div class="form-group">
                        <label for="from_date" class="form-label">From Date</label>
                        <input type="date" class="form-control" id="from_date" name="from_date"
                               value="<?php echo e(request('from_date')); ?>">
                    </div>

                    <div class="form-group">
                        <label for="to_date" class="form-label">To Date</label>
                        <input type="date" class="form-control" id="to_date" name="to_date"
                               value="<?php echo e(request('to_date')); ?>">
                    </div>

                    <div class="form-group">
                        <label for="expense_type_id" class="form-label">Expense Type</label>
                        <select class="form-select" id="expense_type_id" name="expense_type_id">
                            <option value="">All Types</option>
                            <?php $__currentLoopData = $expenseTypes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $type): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <option value="<?php echo e($type->id); ?>"
                                    <?php echo e(request('expense_type_id') == $type->id ? 'selected' : ''); ?>>
                                    <?php echo e($type->name); ?>

                                </option>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </select>
                    </div>

                    <div class="filter-actions-row">
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary btn-w-full">
                                <i class="fas fa-filter"></i> Filter
                            </button>
                        </div>
                        <div class="form-group">
                            <a href="<?php echo e(route('expenses.index')); ?>" class="btn btn-secondary btn-w-full">
                                <i class="fas fa-redo"></i> Reset
                            </a>
                        </div>
                    </div>

                </div>
            </form>
        </div>
    </div>

    
    <div class="table-card">
        <div class="card-body">

            
            <div class="table-responsive">
                <table>
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Type</th>
                            <th class="col-segment">Segment</th>
                            <th>Amount</th>
                            <th>Due</th>
                            <th>Status</th>
                            <th>Method</th>
                            <th class="col-description">Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php $__empty_1 = true; $__currentLoopData = $expenses; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $expense): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                            <tr>
                                <td style="white-space:nowrap;">
                                    <?php echo e($expense->date->format('M d, Y')); ?>

                                </td>
                                <td>
                                    <?php if($expense->expenseType): ?>
                                        <span class="type-pill"><?php echo e($expense->expenseType->name); ?></span>
                                    <?php else: ?>
                                        <span class="due-zero">—</span>
                                    <?php endif; ?>
                                </td>
                                <td class="col-segment">
                                    <?php if($expense->segment): ?>
                                        <span class="segment-pill"><?php echo e($expense->segment->name); ?></span>
                                    <?php else: ?>
                                        <span class="due-zero">—</span>
                                    <?php endif; ?>
                                </td>
                                <td class="amount-cell" style="white-space:nowrap;">
                                    ৳<?php echo e(number_format($expense->amount, 2)); ?>

                                </td>
                                <td style="white-space:nowrap;">
                                    <?php if($expense->due > 0): ?>
                                        <span class="due-positive">৳<?php echo e(number_format($expense->due, 2)); ?></span>
                                    <?php else: ?>
                                        <span class="due-zero">৳0.00</span>
                                    <?php endif; ?>
                                </td>
                                <td>
                                    <?php if($expense->payment_status == 'paid'): ?>
                                        <span class="badge badge-paid">
                                            <i class="fas fa-check" style="font-size:0.6rem;"></i> Paid
                                        </span>
                                    <?php elseif($expense->payment_status == 'partial'): ?>
                                        <span class="badge badge-partial">
                                            <i class="fas fa-adjust" style="font-size:0.6rem;"></i> Partial
                                        </span>
                                    <?php else: ?>
                                        <span class="badge badge-unpaid">
                                            <i class="fas fa-times" style="font-size:0.6rem;"></i> Unpaid
                                        </span>
                                    <?php endif; ?>
                                </td>
                                <td>
                                    <span class="method-pill">
                                        <?php if($expense->payment_method == 'cash'): ?>
                                            <i class="fas fa-money-bill-wave" style="font-size:0.68rem;"></i>
                                        <?php elseif($expense->payment_method == 'bank'): ?>
                                            <i class="fas fa-university" style="font-size:0.68rem;"></i>
                                        <?php else: ?>
                                            <i class="fas fa-mobile-alt" style="font-size:0.68rem;"></i>
                                        <?php endif; ?>
                                        <?php echo e(ucfirst($expense->payment_method)); ?>

                                    </span>
                                </td>
                                <td class="col-description">
                                    <span class="desc-cell" title="<?php echo e($expense->description); ?>">
                                        <?php echo e($expense->description ?? '—'); ?>

                                    </span>
                                </td>
                            </tr>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                            <tr>
                                <td colspan="8">
                                    <div class="empty-state">
                                        <i class="fas fa-receipt fa-3x"></i>
                                        <p>No expenses recorded.</p>
                                        <a href="<?php echo e(route('expenses.create')); ?>" class="btn btn-primary btn-sm">
                                            + Add Expense
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>

            
            <div class="exp-card-list">
                <?php $__empty_1 = true; $__currentLoopData = $expenses; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $expense): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                    <div class="exp-card">
                        <div class="exp-card-top">
                            <div class="exp-card-left">
                                <div class="exp-card-date">
                                    <?php echo e($expense->date->format('M d, Y')); ?>

                                </div>
                                <div class="exp-card-type">
                                    <?php echo e($expense->expenseType->name ?? '—'); ?>

                                </div>
                                <div class="exp-card-desc" title="<?php echo e($expense->description); ?>">
                                    <?php echo e($expense->description ?? ($expense->segment->name ?? '—')); ?>

                                </div>
                            </div>
                            <div class="exp-card-amount">
                                <span class="main-amount">৳<?php echo e(number_format($expense->amount, 2)); ?></span>
                                <?php if($expense->due > 0): ?>
                                    <span class="due-amount">Due: ৳<?php echo e(number_format($expense->due, 2)); ?></span>
                                <?php endif; ?>
                            </div>
                        </div>
                        <div class="exp-card-bottom">
                            <div class="exp-card-meta">
                                
                                <?php if($expense->payment_status == 'paid'): ?>
                                    <span class="badge badge-paid">
                                        <i class="fas fa-check" style="font-size:0.6rem;"></i> Paid
                                    </span>
                                <?php elseif($expense->payment_status == 'partial'): ?>
                                    <span class="badge badge-partial">
                                        <i class="fas fa-adjust" style="font-size:0.6rem;"></i> Partial
                                    </span>
                                <?php else: ?>
                                    <span class="badge badge-unpaid">
                                        <i class="fas fa-times" style="font-size:0.6rem;"></i> Unpaid
                                    </span>
                                <?php endif; ?>
                                
                                <span class="method-pill">
                                    <?php if($expense->payment_method == 'cash'): ?>
                                        <i class="fas fa-money-bill-wave" style="font-size:0.65rem;"></i>
                                    <?php elseif($expense->payment_method == 'bank'): ?>
                                        <i class="fas fa-university" style="font-size:0.65rem;"></i>
                                    <?php else: ?>
                                        <i class="fas fa-mobile-alt" style="font-size:0.65rem;"></i>
                                    <?php endif; ?>
                                    <?php echo e(ucfirst($expense->payment_method)); ?>

                                </span>
                            </div>
                            <?php if($expense->segment): ?>
                                <span class="segment-pill" style="font-size:0.7rem;">
                                    <?php echo e($expense->segment->name); ?>

                                </span>
                            <?php endif; ?>
                        </div>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                    <div class="empty-state">
                        <i class="fas fa-receipt fa-2x"></i>
                        <p>No expenses recorded.</p>
                        <a href="<?php echo e(route('expenses.create')); ?>" class="btn btn-primary btn-sm">
                            + Add Expense
                        </a>
                    </div>
                <?php endif; ?>
            </div>

            
            <?php if($expenses->hasPages()): ?>
                <div class="pagination-wrapper">
                    <?php echo e($expenses->links()); ?>

                </div>
            <?php endif; ?>

        </div>
    </div>

</div>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\Users\startup sabbir\Desktop\jannat\sarvice-accounts\accounting-system\resources\views/expenses/index.blade.php ENDPATH**/ ?>