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

<?php $__env->startPush('styles'); ?>
<style>
    /* =============================================
       REUSE DESIGN TOKENS FROM PREVIOUS REPORTS
    ============================================= */
    :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-primary: #667eea;
        --color-success: #11998e;
        --color-danger: #eb3349;
        --color-info: #4299e1;
        --color-warning: #fbbf24;
        --color-dark: #1a1a2e;
    }

    /* =============================================
       PAGE WRAPPER
    ============================================= */
    .sd-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 (reuse)
    ============================================= */
    .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-danger {
        background: linear-gradient(135deg, #eb3349, #f45c43);
        color: #fff;
        box-shadow: 0 4px 12px rgba(235,51,73,0.35);
    }
    .btn-danger:hover { color: #fff; }

    .btn-sm {
        padding: 5px 12px;
        font-size: 0.78rem;
        gap: 4px;
    }

    /* =============================================
       ALERT STYLING
    ============================================= */
    .alert {
        border-radius: var(--radius-md);
        padding: 12px 18px;
        margin-bottom: 20px;
        font-size: 0.88rem;
        font-weight: 500;
        border: none;
        background: #f0fdf4;
        color: #0f766e;
        border-left: 4px solid var(--color-success);
    }
    .alert-success {
        background: #f0fdf4;
        color: #0f766e;
        border-left-color: var(--color-success);
    }

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

    .main-card .card-header {
        padding: 14px 18px;
        background: linear-gradient(135deg, rgba(102,126,234,0.08), rgba(118,75,162,0.04));
        border-bottom: 2px solid rgba(102,126,234,0.2);
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .main-card .card-header .header-icon {
        width: 34px; height: 34px;
        border-radius: var(--radius-sm);
        background: linear-gradient(135deg, #667eea, #764ba2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.88rem;
        color: #fff;
    }

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

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

    /* =============================================
       SALES TABLE
    ============================================= */
    .sd-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.85rem;
    }

    .sd-table th {
        text-align: left;
        padding: 12px 10px;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: #64748b;
        background: #f8fafc;
        border-bottom: 2px solid #e2e8f0;
        white-space: nowrap;
    }

    .sd-table td {
        padding: 10px 10px;
        font-weight: 500;
        color: #334155;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
    }

    .sd-table tbody tr:hover td {
        background: rgba(102,126,234,0.03);
    }

    /* Right-aligned numeric columns */
    .sd-table .amt {
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    /* Footer total row */
    .sd-table tfoot tr {
        background: #f1f5f9;
        font-weight: 700;
    }
    .sd-table tfoot td {
        padding: 12px 10px;
        border-top: 2px solid #e2e8f0;
        font-size: 0.85rem;
    }

    /* Actions cell (buttons) */
    .actions-cell {
        white-space: nowrap;
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
    }

    /* =============================================
       SUMMARY CARDS (for segment/day wise)
    ============================================= */
    .summary-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-top: 20px;
    }

    .summary-card {
        background: #fff;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }

    .summary-card .summary-header {
        padding: 12px 16px;
        background: linear-gradient(135deg, rgba(102,126,234,0.06), rgba(118,75,162,0.02));
        border-bottom: 2px solid rgba(102,126,234,0.15);
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .summary-card .summary-header .summary-icon {
        width: 28px; height: 28px;
        border-radius: var(--radius-sm);
        background: linear-gradient(135deg, #667eea, #764ba2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        color: #fff;
    }

    .summary-card .summary-header h6 {
        font-size: 0.9rem;
        font-weight: 700;
        margin: 0;
        color: #1a1a2e;
    }

    .summary-card .table-responsive {
        padding: 0;
    }

    .summary-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.82rem;
    }

    .summary-table th {
        text-align: left;
        padding: 10px 16px;
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        color: #64748b;
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
    }

    .summary-table td {
        padding: 8px 16px;
        border-bottom: 1px solid #f1f5f9;
        color: #334155;
    }

    .summary-table tr:last-child td {
        border-bottom: none;
    }

    .summary-table .amt {
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    /* =============================================
       EMPTY STATE
    ============================================= */
    .empty-row td {
        text-align: center;
        color: #94a3b8;
        font-size: 0.83rem;
        padding: 24px 18px;
        font-style: italic;
    }

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

    /* Extra small < 480px */
    @media (max-width: 479px) {
        .sd-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%; }

        .sd-table th,
        .sd-table td {
            padding: 8px 6px;
            font-size: 0.7rem;
        }

        .summary-grid {
            grid-template-columns: 1fr;
            gap: 12px;
        }
    }

    /* Small 480–575px */
    @media (min-width: 480px) and (max-width: 575px) {
        .sd-table th,
        .sd-table td {
            padding: 8px 6px;
            font-size: 0.7rem;
        }

        .summary-grid {
            grid-template-columns: 1fr;
            gap: 12px;
        }
    }

    /* Medium 576–767px */
    @media (min-width: 576px) and (max-width: 767px) {
        .sd-table th,
        .sd-table td {
            padding: 8px 8px;
        }

        .summary-grid {
            grid-template-columns: 1fr;
            gap: 14px;
        }
    }

    /* Tablet 768–991px */
    @media (min-width: 768px) and (max-width: 991px) {
        .sd-table th,
        .sd-table td {
            padding: 8px 10px;
            font-size: 0.8rem;
        }

        .summary-grid {
            grid-template-columns: 1fr 1fr;
            gap: 14px;
        }
    }

    /* Desktop 992px+ */
    @media (min-width: 992px) {
        .sd-table th,
        .sd-table td {
            padding: 10px 12px;
        }
    }

    /* Touch optimizations */
    @media (hover: none) and (pointer: coarse) {
        .btn:hover { transform: none; }
        .sd-table tbody tr:hover td { background: transparent; }
        .btn { padding: 11px 18px; }
        .btn-sm { padding: 7px 14px; }
    }

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

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

    /* Print */
    @media print {
        .btn { display: none !important; }
        .sd-page { padding: 0; }

        .main-card {
            box-shadow: none !important;
            border: 1px solid #ccc;
        }

        .summary-card {
            box-shadow: none !important;
            border: 1px solid #ccc;
        }

        .sd-table td { padding: 4px 6px !important; }
    }
</style>
<?php $__env->stopPush(); ?>

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

    
    <div class="page-header">
        <h2>Sales Dashboard</h2>
        <a href="<?php echo e(route('sales-dashboard.create')); ?>" class="btn btn-primary">
            <i class="fas fa-plus"></i> Add New Record
        </a>
    </div>

    
    <?php if(session('success')): ?>
        <div class="alert alert-success">
            <i class="fas fa-check-circle" style="margin-right:8px;"></i>
            <?php echo e(session('success')); ?>

        </div>
    <?php endif; ?>

    
    <div class="main-card">
        <div class="card-header">
            <div class="header-icon">
                <i class="fas fa-chart-line"></i>
            </div>
            <h5>Sales Records</h5>
        </div>
        <div class="card-body">
            <div style="overflow-x: auto;">
                <table class="sd-table">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Product/Service</th>
                            <th>QTY</th>
                            <th>Sales</th>
                            <th>Particulars</th>
                            <th>Payment</th>
                            <th>Due</th>
                            <th>COGS</th>
                            <th>Gross Profit</th>
                            <th>%</th>
                            <th>Invoice #</th>
                            <th>Segment</th>
                            <th>Amount</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php
                            $totalSales = $salesDashboards->sum('sales');
                            $totalPayment = $salesDashboards->sum('payment');
                            $totalDue = $salesDashboards->sum('due');
                            $totalCogs = $salesDashboards->sum('cogs');
                            $totalGross = $salesDashboards->sum('gross_profit');
                            $totalAmount = $salesDashboards->sum('amount');
                        ?>

                        <?php $__empty_1 = true; $__currentLoopData = $salesDashboards; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $record): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                            <tr>
                                <td><?php echo e($record->date ? $record->date->format('Y-m-d') : '-'); ?></td>
                                <td>
                                    <?php if($record->product): ?>
                                        <?php echo e($record->product); ?>

                                    <?php elseif($record->service): ?>
                                        <?php echo e($record->service->name ?? 'Service'); ?> (Service)
                                    <?php else: ?>
                                        -
                                    <?php endif; ?>
                                </td>
                                <td class="amt"><?php echo e($record->qty ?? '-'); ?></td>
                                <td class="amt"><?php echo e($record->sales ? number_format($record->sales, 2) : '-'); ?></td>
                                <td><?php echo e($record->particulars ?? '-'); ?></td>
                                <td class="amt"><?php echo e($record->payment ? number_format($record->payment, 2) : '-'); ?></td>
                                <td class="amt"><?php echo e($record->due ? number_format($record->due, 2) : '-'); ?></td>
                                <td class="amt"><?php echo e($record->cogs ? number_format($record->cogs, 2) : '-'); ?></td>
                                <td class="amt"><?php echo e($record->gross_profit ? number_format($record->gross_profit, 2) : '-'); ?></td>
                                <td class="amt"><?php echo e($record->percentage ? number_format($record->percentage, 2) : '-'); ?></td>
                                <td><?php echo e($record->invoice_id ? \App\Models\Invoice::find($record->invoice_id)?->invoice_no ?? '-' : '-'); ?></td>
                                <td><?php echo e($record->segment ?? '-'); ?></td>
                                <td class="amt"><?php echo e($record->amount ? number_format($record->amount, 2) : '-'); ?></td>
                                <td class="actions-cell">
                                    <a href="<?php echo e(route('sales-dashboard.edit', $record->id)); ?>" class="btn btn-sm btn-primary">Edit</a>
                                    <form action="<?php echo e(route('sales-dashboard.destroy', $record->id)); ?>" method="POST" style="display:inline;">
                                        <?php echo csrf_field(); ?>
                                        <?php echo method_field('DELETE'); ?>
                                        <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure?')">Delete</button>
                                    </form>
                                </td>
                            </tr>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                            <tr class="empty-row">
                                <td colspan="14">No records found.</td>
                            </tr>
                        <?php endif; ?>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="3"><strong>Total</strong></td>
                            <td class="amt"><strong><?php echo e(number_format($totalSales, 2)); ?></strong></td>
                            <td></td>
                            <td class="amt"><strong><?php echo e(number_format($totalPayment, 2)); ?></strong></td>
                            <td class="amt"><strong><?php echo e(number_format($totalDue, 2)); ?></strong></td>
                            <td class="amt"><strong><?php echo e(number_format($totalCogs, 2)); ?></strong></td>
                            <td class="amt"><strong><?php echo e(number_format($totalGross, 2)); ?></strong></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td class="amt"><strong><?php echo e(number_format($totalAmount, 2)); ?></strong></td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>

    
    <?php
        $segments = $salesDashboards->groupBy(function($r){ return $r->segment ?? 'Unspecified'; });
        $dayGroups = $salesDashboards->groupBy(function($r){ return $r->date ? $r->date->format('Y-m-d') : 'No Date'; });
    ?>

    <div class="summary-grid">
        
        <div class="summary-card">
            <div class="summary-header">
                <div class="summary-icon">
                    <i class="fas fa-tags"></i>
                </div>
                <h6>Segment Wise Sales</h6>
            </div>
            <div class="table-responsive">
                <table class="summary-table">
                    <thead>
                        <tr>
                            <th>Segment</th>
                            <th class="amt">QTY</th>
                            <th class="amt">Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php $__currentLoopData = $segments; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $segment => $rows): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <tr>
                                <td><?php echo e($segment); ?></td>
                                <td class="amt"><?php echo e($rows->sum('qty')); ?></td>
                                <td class="amt">৳<?php echo e(number_format($rows->sum('amount'), 2)); ?></td>
                            </tr>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </tbody>
                </table>
            </div>
        </div>

        
        <div class="summary-card">
            <div class="summary-header">
                <div class="summary-icon">
                    <i class="fas fa-calendar-day"></i>
                </div>
                <h6>Day Wise Sales</h6>
            </div>
            <div class="table-responsive">
                <table class="summary-table">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th class="amt">Qty</th>
                            <th class="amt">Amount</th>
                            <th class="amt">COGS</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php $__currentLoopData = $dayGroups; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $day => $rows): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <tr>
                                <td><?php echo e($day); ?></td>
                                <td class="amt"><?php echo e($rows->sum('qty')); ?></td>
                                <td class="amt">৳<?php echo e(number_format($rows->sum('sales'), 2)); ?></td>
                                <td class="amt">৳<?php echo e(number_format($rows->sum('cogs'), 2)); ?></td>
                            </tr>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </tbody>
                </table>
            </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/sales-dashboard/index.blade.php ENDPATH**/ ?>