@extends('layouts.app')
@section('content')
<div class="container-fluid">
    <!-- Header with Date Filter -->
 <div class="d-flex align-items-center justify-content-between mb-3 flex-wrap">
    <h2 class="mb-0">Dashboard</h2>
    <form action="{{ route('dashboard') }}" method="GET" class="form-inline d-flex align-items-center">
        <div class="form-group mr-2 mb-0 d-flex align-items-center">
            <label for="date_from" class="mr-2 mb-0">From:</label>
            <input type="date" name="date_from" id="date_from" class="form-control" value="{{ $dateFrom }}">
        </div>
        <div class="form-group mr-2 mb-0 d-flex align-items-center">
            <label for="date_to" class="mr-2 mb-0">To:</label>
            <input type="date" name="date_to" id="date_to" class="form-control" value="{{ $dateTo }}">
        </div>
        <button type="submit" class="btn btn-primary">
            <i class="fas fa-filter"></i> Apply
        </button>
    </form>
</div>

    <!-- Pending Approvals Alert -->
    @if($pendingApprovals['total'] > 0)
    <div class="row mb-3">
        <div class="col-12">
            <div class="alert alert-warning alert-dismissible fade show text-center" role="alert">
                <i class="fas fa-exclamation-triangle"></i>
                <strong>Attention!</strong> You have <strong>{{ $pendingApprovals['total'] }}</strong> transactions pending approval.
                <a href="{{ route('approvals.index') }}" class="btn btn-sm btn-warning ml-3">
                    <i class="fas fa-clock"></i> View Pending Approvals
                </a>
            </div>
        </div>
    </div>
    @endif

    <!-- Main Metrics Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card border-left-primary shadow h-100">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Total Sales</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                {{ number_format($metrics['total_sales'], 2) }}
                            </div>
                            @if($comparisons['sales_change'] != 0)
                                <div class="mt-2">
                                    <span class="badge bg-{{ $comparisons['sales_change'] > 0 ? 'success' : 'danger' }}">
                                        <i class="fas fa-arrow-{{ $comparisons['sales_change'] > 0 ? 'up' : 'down' }}"></i>
                                        {{ number_format(abs($comparisons['sales_change']), 1) }}%
                                    </span>
                                    <small class="text-muted">vs previous period</small>
                                </div>
                            @endif
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-shopping-cart fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card border-left-success shadow h-100">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Net Profit</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                {{ number_format($metrics['current_profit'], 2) }}
                            </div>
                            @if($comparisons['profit_change'] != 0)
                                <div class="mt-2">
                                    <span class="badge bg-{{ $comparisons['profit_change'] > 0 ? 'success' : 'danger' }}">
                                        <i class="fas fa-arrow-{{ $comparisons['profit_change'] > 0 ? 'up' : 'down' }}"></i>
                                        {{ number_format(abs($comparisons['profit_change']), 1) }}%
                                    </span>
                                    <small class="text-muted">vs previous period</small>
                                </div>
                            @endif
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-chart-line fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card border-left-danger shadow h-100">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">Total Expenses</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                {{ number_format($metrics['total_expenses'], 2) }}
                            </div>
                            <div class="mt-2">
                                <small class="text-muted">
                                    {{ $metrics['total_sales'] > 0 ? number_format(($metrics['total_expenses'] / $metrics['total_sales']) * 100, 1) : 0 }}% of sales
                                </small>
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-money-bill-wave fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card border-left-warning shadow h-100">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Pending Approvals</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                {{ $pendingApprovals['total'] }}
                            </div>
                            <div class="mt-2">
                                <small class="text-muted">
                                    {{ $pendingApprovals['disbursements'] }} Disb. | {{ $pendingApprovals['recoveries'] }} Recov.
                                </small>
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-clock fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Cash Flow & Outstanding Balances -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card shadow">
                <div class="card-header bg-info text-white">
                    <h6 class="m-0 font-weight-bold"><i class="fas fa-exchange-alt"></i> Cash Flow Analysis</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-6 text-center border-right">
                            <h6 class="text-success">Inflows</h6>
                            <h4 class="text-success">{{ number_format($cashFlow['total_inflows'], 2) }}</h4>
                            <small class="text-muted">
                                Cash: {{ number_format($cashFlow['cash_sales'], 2) }}<br>
                                Recoveries: {{ number_format($cashFlow['recoveries'], 2) }}
                            </small>
                        </div>
                        <div class="col-6 text-center">
                            <h6 class="text-danger">Outflows</h6>
                            <h4 class="text-danger">{{ number_format($cashFlow['total_outflows'], 2) }}</h4>
                            <small class="text-muted">
                                Expenses: {{ number_format($cashFlow['expenses'], 2) }}<br>
                                Disbursements: {{ number_format($cashFlow['disbursements'], 2) }}
                            </small>
                        </div>
                    </div>
                    <hr>
                    <div class="text-center">
                        <h6>Net Cash Flow</h6>
                        <h3 class="font-weight-bold {{ $cashFlow['net_cash_flow'] >= 0 ? 'text-success' : 'text-danger' }}">
                            {{ number_format($cashFlow['net_cash_flow'], 2) }}
                        </h3>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card shadow">
                <div class="card-header bg-warning text-dark">
                    <h6 class="m-0 font-weight-bold"><i class="fas fa-balance-scale"></i> Outstanding Balances</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-6 text-center border-right">
                            <h6 class="text-primary">Customer Balances</h6>
                            <h4 class="text-primary">{{ number_format($outstandingBalances['customers']['total'], 2) }}</h4>
                            <small class="text-muted">
                                {{ $outstandingBalances['customers']['count'] }} customers<br>
                                Avg: {{ number_format($outstandingBalances['customers']['average'], 2) }}
                            </small>
                        </div>
                        <div class="col-6 text-center">
                            <h6 class="text-danger">Supplier Balances</h6>
                            <h4 class="text-danger">{{ number_format($outstandingBalances['suppliers']['total'], 2) }}</h4>
                            <small class="text-muted">
                                {{ $outstandingBalances['suppliers']['count'] }} suppliers<br>
                                Avg: {{ number_format($outstandingBalances['suppliers']['average'], 2) }}
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Section -->
    <div class="row mb-4">
        <div class="col-md-8">
            <div class="card shadow">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-chart-area"></i> Sales & Profit Trend (Last 12 Months)
                    </h6>
                </div>
                <div class="card-body">
                    <canvas id="salesTrendChart" height="100"></canvas>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card shadow">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-chart-pie"></i> Branch Performance
                    </h6>
                </div>
                <div class="card-body">
                    <canvas id="branchPerformanceChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Top Customers & Suppliers -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card shadow">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-users"></i> Top 10 Customers by Balance
                    </h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm table-hover">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Customer</th>
                                    <th class="text-right">Balance</th>
                                    <th class="text-right">Period Recoveries</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($topCustomers as $index => $customer)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $customer->name }}</td>
                                    <td class="text-right">{{ number_format($customer->balance, 2) }}</td>
                                    <td class="text-right text-success">{{ number_format($customer->period_recoveries ?? 0, 2) }}</td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="4" class="text-center text-muted">No data available</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card shadow">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-truck"></i> Top 10 Suppliers by Balance
                    </h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm table-hover">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Supplier</th>
                                    <th class="text-right">Balance</th>
                                    <th class="text-right">Period Disbursements</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($topSuppliers as $index => $supplier)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $supplier->name }}</td>
                                    <td class="text-right">{{ number_format($supplier->balance, 2) }}</td>
                                    <td class="text-right text-danger">{{ number_format($supplier->period_disbursements ?? 0, 2) }}</td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="4" class="text-center text-muted">No data available</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Projections Section -->
    <div class="row mb-4">
        <div class="col-md-12">
            <div class="card shadow border-left-success">
                <div class="card-header bg-gradient-success text-white">
                    <h6 class="m-0 font-weight-bold">
                        <i class="fas fa-chart-line"></i> Business Projections & Forecasts
                    </h6>
                </div>
                <div class="card-body">
                    <!-- Growth Indicators -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="card bg-light">
                                <div class="card-body">
                                    <h6 class="text-muted mb-3">Growth Rates</h6>
                                    <div class="row">
                                        <div class="col-6 text-center">
                                            <div class="mb-2">Month over Month</div>
                                            <h3 class="font-weight-bold {{ $growthRates['month_over_month'] >= 0 ? 'text-success' : 'text-danger' }}">
                                                {{ $growthRates['month_over_month'] >= 0 ? '+' : '' }}{{ number_format($growthRates['month_over_month'], 1) }}%
                                            </h3>
                                        </div>
                                        <div class="col-6 text-center border-left">
                                            <div class="mb-2">Year over Year</div>
                                            <h3 class="font-weight-bold {{ $growthRates['year_over_year'] >= 0 ? 'text-success' : 'text-danger' }}">
                                                {{ $growthRates['year_over_year'] >= 0 ? '+' : '' }}{{ number_format($growthRates['year_over_year'], 1) }}%
                                            </h3>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card bg-light">
                                <div class="card-body">
                                    <h6 class="text-muted mb-3">Projection Confidence</h6>
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div>
                                            <i class="fas fa-chart-line fa-2x text-success"></i>
                                        </div>
                                        <div class="text-right">
                                            <div class="text-uppercase text-success font-weight-bold">
                                                {{ $salesProjections['confidence'] }}
                                            </div>
                                            <small class="text-muted">
                                                Based on {{ $salesProjections['method'] == 'linear_trend' ? '6+ months' : 'limited' }} historical data
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Sales Projections -->
                    @if(count($salesProjections['projections']) > 0)
                    <div class="row mb-4">
                        <div class="col-12">
                            <h6 class="font-weight-bold mb-3">
                                <i class="fas fa-shopping-cart"></i> Sales Projections (Next 3 Months)
                                <span class="badge badge-success ml-2">{{ $salesProjections['growth_rate'] >= 0 ? '+' : '' }}{{ $salesProjections['growth_rate'] }}% trend</span>
                            </h6>
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead class="thead-light">
                                        <tr>
                                            <th>Month</th>
                                            <th class="text-right">Conservative Estimate</th>
                                            <th class="text-right">Projected Sales</th>
                                            <th class="text-right">Optimistic Estimate</th>
                                            <th class="text-center">Range</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($salesProjections['projections'] as $projection)
                                        <tr>
                                            <td><strong>{{ $projection['month'] }}</strong></td>
                                            <td class="text-right text-warning">{{ number_format($projection['conservative'], 2) }}</td>
                                            <td class="text-right"><strong>{{ number_format($projection['projected_sales'], 2) }}</strong></td>
                                            <td class="text-right text-success">{{ number_format($projection['optimistic'], 2) }}</td>
                                            <td class="text-center">
                                                <div class="progress" style="height: 20px;">
                                                    <div class="progress-bar bg-success" style="width: 33.33%"></div>
                                                    <div class="progress-bar bg-primary" style="width: 33.33%"></div>
                                                    <div class="progress-bar bg-warning" style="width: 33.34%"></div>
                                                </div>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    @endif

                    <!-- Profit Projections -->
                    @if(count($profitProjections['projections']) > 0)
                    <div class="row mb-4">
                        <div class="col-12">
                            <h6 class="font-weight-bold mb-3">
                                <i class="fas fa-chart-line"></i> Profit Projections (Next 3 Months)
                                <span class="badge badge-info ml-2">Avg Margin: {{ $profitProjections['average_margin'] }}%</span>
                            </h6>
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead class="thead-light">
                                        <tr>
                                            <th>Month</th>
                                            <th class="text-right">Projected Profit</th>
                                            <th class="text-right">Target (10% Above)</th>
                                            <th class="text-center">Progress to Target</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($profitProjections['projections'] as $projection)
                                        <tr>
                                            <td><strong>{{ $projection['month'] }}</strong></td>
                                            <td class="text-right"><strong>{{ number_format($projection['projected_profit'], 2) }}</strong></td>
                                            <td class="text-right text-success">{{ number_format($projection['target'], 2) }}</td>
                                            <td>
                                                <div class="progress" style="height: 20px;">
                                                    <div class="progress-bar bg-success progress-bar-striped progress-bar-animated" 
                                                         style="width: 90%">
                                                        90%
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    @endif

                    <!-- Cash Flow Projections -->
                    <div class="row">
                        <div class="col-12">
                            <h6 class="font-weight-bold mb-3">
                                <i class="fas fa-money-bill-wave"></i> Cash Flow Projections
                                <span class="badge badge-secondary ml-2">
                                    Daily Avg: In {{ number_format($cashFlowProjections['daily_avg_inflow'], 2) }} | 
                                    Out {{ number_format($cashFlowProjections['daily_avg_outflow'], 2) }}
                                </span>
                            </h6>
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead class="thead-light">
                                        <tr>
                                            <th>Period</th>
                                            <th class="text-right">Projected Inflow</th>
                                            <th class="text-right">Projected Outflow</th>
                                            <th class="text-right">Net Cash Flow</th>
                                            <th class="text-center">Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($cashFlowProjections['projections'] as $projection)
                                        <tr>
                                            <td><strong>Next {{ $projection['days'] }} days</strong></td>
                                            <td class="text-right text-success">{{ number_format($projection['projected_inflow'], 2) }}</td>
                                            <td class="text-right text-danger">{{ number_format($projection['projected_outflow'], 2) }}</td>
                                            <td class="text-right">
                                                <strong class="{{ $projection['projected_net'] >= 0 ? 'text-success' : 'text-danger' }}">
                                                    {{ number_format($projection['projected_net'], 2) }}
                                                </strong>
                                            </td>
                                            <td class="text-center">
                                                @if($projection['projected_net'] >= 0)
                                                    <span class="badge badge-success">
                                                        <i class="fas fa-check"></i> Positive
                                                    </span>
                                                @else
                                                    <span class="badge badge-danger">
                                                        <i class="fas fa-exclamation-triangle"></i> Negative
                                                    </span>
                                                @endif
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- Projection Notes -->
                    <div class="alert alert-info mt-3 mb-0">
                        <i class="fas fa-info-circle"></i> <strong>Note:</strong> 
                        Projections are based on historical trends and patterns. Actual results may vary due to market conditions, 
                        seasonal factors, and business decisions. Use these projections as guidance for planning and decision-making.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('customjs')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Sales & Profit Trend Chart
    const salesCtx = document.getElementById('salesTrendChart').getContext('2d');
    new Chart(salesCtx, {
        type: 'line',
        data: {
            labels: {!! json_encode($salesTrend->pluck('month')) !!},
            datasets: [
                {
                    label: 'Sales',
                    data: {!! json_encode($salesTrend->pluck('total')) !!},
                    borderColor: '#4e73df',
                    backgroundColor: 'rgba(78, 115, 223, 0.1)',
                    fill: true,
                    tension: 0.4,
                    yAxisID: 'y'
                },
                {
                    label: 'Profit',
                    data: {!! json_encode($salesTrend->pluck('profit')) !!},
                    borderColor: '#1cc88a',
                    backgroundColor: 'rgba(28, 200, 138, 0.1)',
                    fill: true,
                    tension: 0.4,
                    yAxisID: 'y'
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            interaction: {
                mode: 'index',
                intersect: false,
            },
            plugins: {
                legend: {
                    position: 'top',
                    labels: {
                        usePointStyle: true,
                        padding: 15
                    }
                },
                tooltip: {
                    mode: 'index',
                    intersect: false,
                    callbacks: {
                        label: function(context) {
                            let label = context.dataset.label || '';
                            if (label) {
                                label += ': ';
                            }
                            label += new Intl.NumberFormat('en-US', {
                                minimumFractionDigits: 2,
                                maximumFractionDigits: 2
                            }).format(context.parsed.y);
                            return label;
                        }
                    }
                }
            },
            scales: {
                y: {
                    type: 'linear',
                    display: true,
                    position: 'left',
                    ticks: {
                        callback: function(value) {
                            return new Intl.NumberFormat('en-US', {
                                notation: 'compact',
                                compactDisplay: 'short'
                            }).format(value);
                        }
                    }
                }
            }
        }
    });

    // Branch Performance Chart
    const branchCtx = document.getElementById('branchPerformanceChart').getContext('2d');
    new Chart(branchCtx, {
        type: 'doughnut',
        data: {
            labels: {!! json_encode($branchPerformance->pluck('name')) !!},
            datasets: [{
                data: {!! json_encode($branchPerformance->pluck('total_sales')) !!},
                backgroundColor: [
                    '#4e73df',
                    '#1cc88a',
                    '#36b9cc',
                    '#f6c23e',
                    '#e74a3b',
                    '#858796'
                ],
                hoverOffset: 20,
                borderWidth: 2,
                borderColor: '#fff'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: {
                        boxWidth: 12,
                        padding: 15,
                        font: {
                            size: 11
                        }
                    }
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            let label = context.label || '';
                            if (label) {
                                label += ': ';
                            }
                            label += new Intl.NumberFormat('en-US', {
                                minimumFractionDigits: 2,
                                maximumFractionDigits: 2
                            }).format(context.parsed);
                            
                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
                            const percentage = ((context.parsed / total) * 100).toFixed(1);
                            label += ' (' + percentage + '%)';
                            
                            return label;
                        }
                    }
                }
            }
        }
    });
});
</script>

<style>
.border-left-primary {
    border-left: 4px solid #4e73df !important;
}

.border-left-success {
    border-left: 4px solid #1cc88a !important;
}

.border-left-danger {
    border-left: 4px solid #e74a3b !important;
}

.border-left-warning {
    border-left: 4px solid #f6c23e !important;
}

.text-gray-300 {
    color: #dddfeb !important;
}

.text-gray-800 {
    color: #5a5c69 !important;
}

.text-xs {
    font-size: 0.7rem;
}

.shadow {
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15) !important;
}

.bg-gradient-success {
    background: linear-gradient(135deg, #1cc88a 0%, #13855c 100%);
}

.card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.badge {
    font-weight: 600;
    padding: 0.35rem 0.65rem;
}

.progress {
    height: 0.5rem;
}

.fa-2x {
    font-size: 2em;
}

hr {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.table-hover tbody tr:hover {
    background-color: rgba(78, 115, 223, 0.05);
    cursor: pointer;
}

.card-header {
    background-color: #f8f9fc;
    border-bottom: 1px solid #e3e6f0;
}

@media (max-width: 768px) {
    .col-md-3, .col-md-6 {
        margin-bottom: 1rem;
    }
    
    .form-inline .form-group {
        margin-bottom: 0.5rem;
    }
}
</style>
@endsection