<?php $__env->startSection('page-title', 'Profit & Loss Report'); ?>

<?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-income:  #11998e;
        --color-expense: #eb3349;
        --color-primary: #667eea;
    }

    /* =============================================
       PAGE WRAPPER
    ============================================= */
    .pl-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;
        line-height: 1.2;
    }

    .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-primary:hover { color: #fff; }

    .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-w-full { width: 100%; }

    /* =============================================
       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: 1fr 1fr auto;
        gap: 12px;
        align-items: end;
        margin-bottom: 12px;
    }

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

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

    .filter-actions {
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
    }

    /* =============================================
       SUMMARY CARDS
    ============================================= */
    .summary-row {
        display: grid;
        grid-template-columns: repeat(3, 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.income  { background: linear-gradient(135deg, #11998e, #38ef7d); }
    .summary-card.expense { background: linear-gradient(135deg, #eb3349, #f45c43); }
    .summary-card.profit  { background: linear-gradient(135deg, #11998e, #38ef7d); }
    .summary-card.loss    { background: linear-gradient(135deg, #eb3349, #f45c43); }

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

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

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

    /* Net P/L label */
    .summary-card .net-label {
        font-size: 0.7rem;
        opacity: 0.8;
        margin-top: 4px;
        display: block;
    }

    /* =============================================
       BREAKDOWN SECTION
    ============================================= */
    .breakdown-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    /* =============================================
       BREAKDOWN CARD
    ============================================= */
    .breakdown-card {
        background: #fff;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        border: none;
        overflow: hidden;
        transition: var(--transition);
    }

    .breakdown-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

    .breakdown-card-header {
        padding: 14px 18px;
        border-bottom: 1px solid #f1f5f9;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .breakdown-card-header .header-icon {
        width: 36px; height: 36px;
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        flex-shrink: 0;
    }

    .breakdown-card-header .header-icon.expense-icon {
        background: rgba(235,51,73,0.1);
        color: var(--color-expense);
    }

    .breakdown-card-header .header-icon.segment-icon {
        background: rgba(102,126,234,0.1);
        color: var(--color-primary);
    }

    .breakdown-card-header h5 {
        font-size: 0.95rem;
        font-weight: 700;
        color: #1a1a2e;
        margin: 0;
    }

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

    /* =============================================
       BREAKDOWN TABLES
    ============================================= */
    .breakdown-table { width: 100%; border-collapse: collapse; }

    .breakdown-table thead th {
        background: #f8fafc;
        padding: 11px 16px;
        font-size: 0.71rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #64748b;
        border-bottom: 2px solid #e2e8f0;
        white-space: nowrap;
    }

    .breakdown-table tbody td {
        padding: 11px 16px;
        font-size: 0.87rem;
        font-weight: 500;
        color: #334155;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
    }

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

    .breakdown-table .amount-cell {
        font-weight: 700;
        text-align: right;
        white-space: nowrap;
        color: var(--color-expense);
    }

    .breakdown-table .amount-cell.segment {
        color: var(--color-primary);
    }

    /* Progress bar showing proportional share */
    .share-bar-wrap {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .share-bar-bg {
        flex: 1;
        height: 6px;
        background: #f1f5f9;
        border-radius: 3px;
        overflow: hidden;
        min-width: 40px;
    }

    .share-bar-fill {
        height: 100%;
        border-radius: 3px;
        background: linear-gradient(90deg, #eb3349, #f45c43);
        transition: width 0.6s ease;
    }

    .share-bar-fill.segment { background: linear-gradient(90deg, #667eea, #764ba2); }

    .share-pct {
        font-size: 0.72rem;
        font-weight: 700;
        color: #94a3b8;
        white-space: nowrap;
        min-width: 36px;
        text-align: right;
    }

    /* Totals row */
    .breakdown-table tfoot td {
        padding: 11px 16px;
        font-size: 0.87rem;
        font-weight: 800;
        color: #1a1a2e;
        background: #f8fafc;
        border-top: 2px solid #e2e8f0;
    }

    .breakdown-table tfoot .amount-cell { color: var(--color-expense); }
    .breakdown-table tfoot .amount-cell.segment { color: var(--color-primary); }

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

    .empty-state i { display: block; margin-bottom: 12px; opacity: 0.4; }
    .empty-state p { font-size: 0.88rem; margin: 0; }

    /* =============================================
       PERIOD BADGE
    ============================================= */
    .period-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: rgba(102,126,234,0.1);
        color: var(--color-primary);
        border-radius: 20px;
        padding: 4px 12px;
        font-size: 0.8rem;
        font-weight: 700;
    }

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

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

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

        /* Filter: stack 1 col */
        .filter-grid {
            grid-template-columns: 1fr;
            gap: 10px;
            margin-bottom: 10px;
        }

        .filter-actions { flex-direction: column; }
        .filter-actions .btn { width: 100%; }

        .filter-card .card-body { padding: 14px; }

        /* Summary: 1 col */
        .summary-row {
            grid-template-columns: 1fr;
            gap: 10px;
        }

        .summary-card { padding: 14px 16px; }
        .summary-card h3 { font-size: 1.25rem; }
        .summary-icon { font-size: 1.6rem; }

        /* Breakdown: 1 col */
        .breakdown-row { grid-template-columns: 1fr; gap: 14px; }

        /* Share bars: hide on very small */
        .share-bar-wrap { flex-direction: column; align-items: flex-start; gap: 4px; }
        .share-bar-bg { width: 100%; min-width: unset; }
    }

    /* ---- SMALL 480–575px ---- */
    @media (min-width: 480px) and (max-width: 575px) {
        /* Filter: 2 col */
        .filter-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
        .filter-grid .form-group:last-child { grid-column: 1 / -1; }

        .filter-actions .btn { flex: 1 1 auto; }

        /* Summary: 1 col */
        .summary-row { grid-template-columns: 1fr; gap: 10px; }

        /* Breakdown: 1 col */
        .breakdown-row { grid-template-columns: 1fr; }
    }

    /* ---- MEDIUM 576–767px ---- */
    @media (min-width: 576px) and (max-width: 767px) {
        /* Filter: 2 col + button */
        .filter-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
        .filter-grid .form-group:last-child { grid-column: 1 / -1; }

        /* Summary: 3-col stays but smaller fonts */
        .summary-card h3 { font-size: 1.2rem; }
        .summary-card { padding: 14px 16px; }

        /* Breakdown: 1 col (too tight for 2 col) */
        .breakdown-row { grid-template-columns: 1fr; }
    }

    /* ---- TABLET 768–991px ---- */
    @media (min-width: 768px) and (max-width: 991px) {
        .filter-grid { grid-template-columns: 1fr 1fr auto; }

        /* Summary: 3 col */
        .summary-card h3 { font-size: 1.4rem; }

        /* Breakdown: 1 col (still a bit tight) */
        .breakdown-row { grid-template-columns: 1fr; }
    }

    /* ---- DESKTOP 992px+ ---- */
    @media (min-width: 992px) {
        .filter-grid { grid-template-columns: 1fr 1fr auto; }
        .breakdown-row { grid-template-columns: 1fr 1fr; }
    }

    /* ---- WIDE 1400px+ ---- */
    @media (min-width: 1400px) {
        .summary-card h3 { font-size: 2rem; }
    }

    /* =============================================
       TOUCH OPTIMISATIONS
    ============================================= */
    @media (hover: none) and (pointer: coarse) {
        .btn:hover              { transform: none; }
        .summary-card:hover     { transform: none; }
        .breakdown-card:hover   { transform: none; box-shadow: var(--shadow-sm); }
        .breakdown-table tbody tr:hover { background: transparent; }
        .btn { padding: 11px 18px; }
        .breakdown-table tbody td { padding: 14px 16px; }
    }

    /* =============================================
       ACCESSIBILITY
    ============================================= */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            transition-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
        }
        .share-bar-fill { transition: none !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: repeat(3, 1fr); gap: 10px; }
        .summary-card { padding: 12px 14px; }
        .summary-card h3 { font-size: 1.1rem; }
        .breakdown-row { grid-template-columns: 1fr 1fr; }
    }

    /* =============================================
       PRINT
    ============================================= */
    @media print {
        .filter-card { display: none !important; }
        .pl-page { padding: 0 !important; }

        .summary-row { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
        .summary-card {
            box-shadow: none !important;
            border: 1px solid #ccc !important;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }

        .breakdown-row { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
        .breakdown-card { box-shadow: none !important; border: 1px solid #ccc !important; page-break-inside: avoid; }
        .breakdown-table tbody td,
        .breakdown-table thead th { padding: 7px 10px !important; font-size: 0.77rem !important; }
        .share-bar-wrap { display: none !important; }
        .breakdown-table .amount-cell { display: table-cell !important; }
    }
</style>
<?php $__env->stopPush(); ?>

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

    
    <div class="page-header">
        <h2>Profit &amp; Loss Report</h2>
        <span class="period-badge">
            <i class="fas fa-calendar-alt" style="font-size:0.75rem;"></i>
            <?php echo e(Carbon\Carbon::create()->month($month)->format('F')); ?> <?php echo e($year); ?>

        </span>
    </div>

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

                    <div class="form-group">
                        <label for="year" class="form-label">Year</label>
                        <select class="form-select" id="year" name="year">
                            <?php for($y = now()->year; $y >= now()->year - 5; $y--): ?>
                                <option value="<?php echo e($y); ?>" <?php echo e($year == $y ? 'selected' : ''); ?>><?php echo e($y); ?></option>
                            <?php endfor; ?>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="month" class="form-label">Month</label>
                        <select class="form-select" id="month" name="month">
                            <?php for($m = 1; $m <= 12; $m++): ?>
                                <option value="<?php echo e($m); ?>" <?php echo e($month == $m ? 'selected' : ''); ?>>
                                    <?php echo e(Carbon\Carbon::create()->month($m)->format('F')); ?>

                                </option>
                            <?php endfor; ?>
                        </select>
                    </div>

                    <div class="form-group">
                        <button type="submit" class="btn btn-primary btn-w-full">
                            <i class="fas fa-chart-bar"></i> Generate
                        </button>
                    </div>

                </div>

                
                <div class="filter-actions">
                    <a href="<?php echo e(url('reports/profit-loss/print?year=' . $year . '&month=' . $month)); ?>"
                       target="_blank"
                       class="btn btn-secondary">
                        <i class="fas fa-print"></i> Print Report
                    </a>
                </div>

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

    
    <?php
        $netPositive = $netProfit >= 0;
    ?>

    <div class="summary-row">
        <div class="summary-card income">
            <h5>Total Income</h5>
            <h3>৳<?php echo e(number_format($income, 2)); ?></h3>
            <i class="fas fa-arrow-up summary-icon"></i>
        </div>
        <div class="summary-card expense">
            <h5>Total Expenses</h5>
            <h3>৳<?php echo e(number_format($expenses, 2)); ?></h3>
            <i class="fas fa-arrow-down summary-icon"></i>
        </div>
        <div class="summary-card <?php echo e($netPositive ? 'profit' : 'loss'); ?>">
            <h5>Net <?php echo e($netPositive ? 'Profit' : 'Loss'); ?></h5>
            <h3>৳<?php echo e(number_format(abs($netProfit), 2)); ?></h3>
            <span class="net-label">
                <?php if($income > 0): ?>
                    <?php echo e(number_format(abs($netProfit / $income) * 100, 1)); ?>% <?php echo e($netPositive ? 'margin' : 'loss ratio'); ?>

                <?php endif; ?>
            </span>
            <i class="fas fa-<?php echo e($netPositive ? 'chart-line' : 'chart-line'); ?> summary-icon"></i>
        </div>
    </div>

    
    <?php
        $expenseTotal  = $expenseBreakdown->sum('total');
        $segmentTotal  = $segmentExpenses->sum('total');
    ?>

    <div class="breakdown-row">

        
        <div class="breakdown-card">
            <div class="breakdown-card-header">
                <div class="header-icon expense-icon">
                    <i class="fas fa-tags"></i>
                </div>
                <h5>Expense Breakdown by Type</h5>
            </div>
            <div class="card-body">
                <?php if($expenseBreakdown->count() > 0): ?>
                    <table class="breakdown-table">
                        <thead>
                            <tr>
                                <th>Type</th>
                                <th style="text-align:right;">Amount</th>
                                <th style="min-width:100px;">Share</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php $__currentLoopData = $expenseBreakdown; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <?php
                                    $pct = $expenseTotal > 0
                                        ? round(($item->total / $expenseTotal) * 100, 1)
                                        : 0;
                                ?>
                                <tr>
                                    <td><?php echo e($item->expenseType->name ?? 'Unknown'); ?></td>
                                    <td class="amount-cell">৳<?php echo e(number_format($item->total, 2)); ?></td>
                                    <td>
                                        <div class="share-bar-wrap">
                                            <div class="share-bar-bg">
                                                <div class="share-bar-fill"
                                                     style="width:<?php echo e($pct); ?>%"></div>
                                            </div>
                                            <span class="share-pct"><?php echo e($pct); ?>%</span>
                                        </div>
                                    </td>
                                </tr>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td><strong>Total</strong></td>
                                <td class="amount-cell"><strong>৳<?php echo e(number_format($expenseTotal, 2)); ?></strong></td>
                                <td><span class="share-pct" style="color:#334155;">100%</span></td>
                            </tr>
                        </tfoot>
                    </table>
                <?php else: ?>
                    <div class="empty-state">
                        <i class="fas fa-tags fa-2x"></i>
                        <p>No expenses recorded for this period.</p>
                    </div>
                <?php endif; ?>
            </div>
        </div>

        
        <div class="breakdown-card">
            <div class="breakdown-card-header">
                <div class="header-icon segment-icon">
                    <i class="fas fa-layer-group"></i>
                </div>
                <h5>Segment-wise Expenses</h5>
            </div>
            <div class="card-body">
                <?php if($segmentExpenses->count() > 0): ?>
                    <table class="breakdown-table">
                        <thead>
                            <tr>
                                <th>Segment</th>
                                <th style="text-align:right;">Amount</th>
                                <th style="min-width:100px;">Share</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php $__currentLoopData = $segmentExpenses; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <?php
                                    $pct = $segmentTotal > 0
                                        ? round(($item->total / $segmentTotal) * 100, 1)
                                        : 0;
                                ?>
                                <tr>
                                    <td><?php echo e($item->segment->name ?? 'Unknown'); ?></td>
                                    <td class="amount-cell segment">৳<?php echo e(number_format($item->total, 2)); ?></td>
                                    <td>
                                        <div class="share-bar-wrap">
                                            <div class="share-bar-bg">
                                                <div class="share-bar-fill segment"
                                                     style="width:<?php echo e($pct); ?>%"></div>
                                            </div>
                                            <span class="share-pct"><?php echo e($pct); ?>%</span>
                                        </div>
                                    </td>
                                </tr>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td><strong>Total</strong></td>
                                <td class="amount-cell segment"><strong>৳<?php echo e(number_format($segmentTotal, 2)); ?></strong></td>
                                <td><span class="share-pct" style="color:#334155;">100%</span></td>
                            </tr>
                        </tfoot>
                    </table>
                <?php else: ?>
                    <div class="empty-state">
                        <i class="fas fa-layer-group fa-2x"></i>
                        <p>No segment expenses recorded for this period.</p>
                    </div>
                <?php endif; ?>
            </div>
        </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/reports/profit-loss.blade.php ENDPATH**/ ?>