@extends('layouts.admin')

@section('title', 'Profit & Loss Report - ' . $event->name)

@section('styles')
<style>
/* Enhanced Profit Loss Show Page Styles */
.profit-loss-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

.profit-loss-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    pointer-events: none;
}

.profit-loss-header h1 {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    position: relative;
    z-index: 1;
}

.profit-loss-header .subtitle {
    font-size: 14px;
    opacity: 0.9;
    margin-top: 8px;
    position: relative;
    z-index: 1;
}

.header-actions {
    position: relative;
    z-index: 1;
}

.btn-export {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.btn-export:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.kpi-card {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid #e8eef5;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.kpi-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}

.kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--border-color);
    transition: all 0.3s ease;
}

.kpi-card.success::before { background: #1cc88a; }
.kpi-card.danger::before { background: #e74a3b; }
.kpi-card.info::before { background: #36b9cc; }
.kpi-card.warning::before { background: #f6c23e; }
.kpi-card.primary::before { background: #4e73df; }

.kpi-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 8px;
    opacity: 0.7;
}

.kpi-value {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 1.2;
}

.kpi-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 32px;
    opacity: 0.15;
}

.chart-container {
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid #e8eef5;
    overflow: hidden;
    margin-bottom: 30px;
}

.chart-header {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 20px 25px;
    border-bottom: 2px solid #e2e8f0;
    position: relative;
}

.chart-header::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

.chart-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: #2d3748;
    display: flex;
    align-items: center;
}

.chart-title i {
    margin-right: 10px;
    color: #667eea;
}

.chart-body {
    padding: 30px 25px;
    min-height: 400px;
    position: relative;
}

.canvas-container {
    position: relative;
    height: 350px;
    width: 100%;
}

.chart-fallback {
    display: none;
    text-align: center;
    padding: 60px 20px;
    color: #858796;
}

.chart-fallback.active {
    display: block;
}

.chart-fallback i {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.3;
}

.details-table {
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid #e8eef5;
    overflow: hidden;
}

.table-header {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 20px 25px;
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.table-header::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

.table-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: #2d3748;
    display: flex;
    align-items: center;
}

.table-title i {
    margin-right: 10px;
    color: #667eea;
}

.table-badge {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.modern-table {
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.modern-table thead th {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border: none;
    font-weight: 700;
    color: #2d3748;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 18px 20px;
    text-align: left;
}

.modern-table tbody td {
    padding: 16px 20px;
    vertical-align: middle;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    background: white;
}

.modern-table tbody tr:hover {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.modern-table tbody tr:hover td {
    background: transparent;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #858796;
}

.empty-state i {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.3;
}

.empty-state h4 {
    color: #5a5c69;
    margin-bottom: 10px;
}

.summary-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid #e8eef5;
    padding: 25px;
}

.performance-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}

.performance-item:last-child {
    border-bottom: none;
}

.performance-label {
    font-weight: 600;
    color: #4a5568;
}

.performance-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.performance-badge.success {
    background: #1cc88a;
    color: white;
}

.performance-badge.danger {
    background: #e74a3b;
    color: white;
}

.performance-badge.info {
    background: #36b9cc;
    color: white;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .profit-loss-header {
        padding: 20px;
        text-align: center;
    }
    
    .profit-loss-header h1 {
        font-size: 24px;
    }
    
    .header-actions {
        margin-top: 15px;
    }
    
    .kpi-card {
        margin-bottom: 20px;
    }
    
    .chart-body {
        padding: 20px 15px;
        min-height: 300px;
    }
    
    .canvas-container {
        height: 250px;
    }
}
</style>
@endsection

@section('content')
<div class="container-fluid px-4">
    <!-- Enhanced Page Header -->
    <div class="profit-loss-header">
        <div class="d-flex justify-content-between align-items-start flex-wrap">
            <div>
                <nav aria-label="breadcrumb" class="mb-3">
                    <ol class="breadcrumb" style="background: transparent; padding: 0; margin: 0;">
                        <li class="breadcrumb-item">
                            <a href="{{ route('events.profit-loss.index') }}" style="color: rgba(255,255,255,0.8);">
                                <i class="fas fa-chart-line me-1"></i>P&L Reports
                            </a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page" style="color: white;">
                            {{ Str::limit($event->name, 30) }}
                        </li>
                    </ol>
                </nav>
                <h1>
                    <i class="fas fa-file-chart-line me-3"></i>{{ $event->name }}
                </h1>
                <div class="subtitle">
                    <i class="fas fa-calendar me-2"></i>Event Date: {{ $event->date ? $event->date->format('F d, Y') : 'Not Set' }}
                    @if($event->venue)
                        <span class="ms-3"><i class="fas fa-map-marker-alt me-2"></i>{{ $event->venue }}</span>
                    @endif
                </div>
            </div>
            <div class="header-actions">
                <button class="btn btn-export me-2" onclick="exportToPDF()">
                    <i class="fas fa-file-pdf me-2"></i>Export PDF
                </button>
                <button class="btn btn-export" onclick="exportToExcel()">
                    <i class="fas fa-file-excel me-2"></i>Export Excel
                </button>
            </div>
        </div>
    </div>

    <!-- Key Performance Indicators -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <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">Total Revenue</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">KSh {{ number_format($income, 2) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <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-info text-uppercase mb-1">Total Expenses</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">KSh {{ number_format($expenses, 2) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-credit-card fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-{{ $profit >= 0 ? 'success' : 'danger' }} shadow h-100 py-2">
                <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-{{ $profit >= 0 ? 'success' : 'danger' }} text-uppercase mb-1">Net Profit/Loss</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">KSh {{ number_format($profit, 2) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-{{ $profit >= 0 ? 'chart-line' : 'chart-line-down' }} fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <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">Profit Margin</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($profitMargin, 1) }}%</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-percentage fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Additional Metrics -->
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card shadow h-100">
                <div class="card-body text-center">
                    <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Return on Investment</div>
                    <div class="h4 mb-0 font-weight-bold text-{{ $roi >= 0 ? 'success' : 'danger' }}">
                        {{ number_format($roi, 1) }}%
                    </div>
                    <small class="text-muted">ROI = (Profit ÷ Expenses) × 100</small>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card shadow h-100">
                <div class="card-body text-center">
                    <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Expense Ratio</div>
                    <div class="h4 mb-0 font-weight-bold text-info">
                        {{ $income > 0 ? number_format(($expenses / $income) * 100, 1) : 0 }}%
                    </div>
                    <small class="text-muted">Expenses as % of Revenue</small>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card shadow h-100">
                <div class="card-body text-center">
                    <div class="text-xs font-weight-bold text-secondary text-uppercase mb-1">Break-even Point</div>
                    <div class="h4 mb-0 font-weight-bold text-secondary">
                        KSh {{ number_format($expenses, 2) }}
                    </div>
                    <small class="text-muted">Minimum revenue needed</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Section -->
    <div class="row mb-4">
        <div class="col-lg-8">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Financial Breakdown</h6>
                </div>
                <div class="card-body">
                    <canvas id="financialChart" width="400" height="200"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Revenue vs Expenses</h6>
                </div>
                <div class="card-body">
                    <canvas id="pieChart" width="400" height="400"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Detailed Breakdown -->
    <div class="row">
        <div class="col-lg-6">
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">Revenue Details</h6>
                    <span class="badge badge-success">KSh {{ number_format($income, 2) }}</span>
                </div>
                <div class="card-body">
                    @if($invoices->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead class="table-light">
                                    <tr>
                                        <th>Invoice #</th>
                                        <th>Amount</th>
                                        <th>Date</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($invoices as $invoice)
                                        <tr>
                                            <td>{{ $invoice->invoice_number }}</td>
                                            <td class="text-success font-weight-bold">
                                                KSh {{ number_format($invoice->total_amount, 2) }}
                                            </td>
                                            <td>{{ $invoice->created_at->format('M d, Y') }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                                <tfoot class="table-light">
                                    <tr>
                                        <th>Total Revenue</th>
                                        <th class="text-success font-weight-bold">
                                            KSh {{ number_format($income, 2) }}
                                        </th>
                                        <th></th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-inbox fa-3x text-gray-300 mb-3"></i>
                            <p class="text-muted">No invoices found for this event</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">Expense Details</h6>
                    <span class="badge badge-danger">KSh {{ number_format($expenses, 2) }}</span>
                </div>
                <div class="card-body">
                    @if($expenseDetails->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead class="table-light">
                                    <tr>
                                        <th>Description</th>
                                        <th>Amount</th>
                                        <th>Date</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($expenseDetails as $expense)
                                        <tr>
                                            <td>{{ $expense->description }}</td>
                                            <td class="text-danger font-weight-bold">
                                                KSh {{ number_format($expense->amount, 2) }}
                                            </td>
                                            <td>{{ $expense->created_at->format('M d, Y') }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                                <tfoot class="table-light">
                                    <tr>
                                        <th>Total Expenses</th>
                                        <th class="text-danger font-weight-bold">
                                            KSh {{ number_format($expenses, 2) }}
                                        </th>
                                        <th></th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-inbox fa-3x text-gray-300 mb-3"></i>
                            <p class="text-muted">No expenses found for this event</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Financial Summary -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Financial Summary</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <h6 class="text-muted">Performance Analysis</h6>
                                <div class="list-group list-group-flush">
                                    <div class="list-group-item d-flex justify-content-between align-items-center">
                                        <span class="font-weight-bold">Revenue Generated</span>
                                        <span class="badge" style="background-color: #1cc88a; color: white; font-size: 14px; padding: 8px 12px;">KSh {{ number_format($income, 2) }}</span>
                                    </div>
                                    <div class="list-group-item d-flex justify-content-between align-items-center">
                                        <span class="font-weight-bold">Total Expenses</span>
                                        <span class="badge" style="background-color: #e74a3b; color: white; font-size: 14px; padding: 8px 12px;">KSh {{ number_format($expenses, 2) }}</span>
                                    </div>
                                    <div class="list-group-item d-flex justify-content-between align-items-center">
                                        <span class="font-weight-bold">Net Profit/Loss</span>
                                        <span class="badge" style="background-color: {{ $profit >= 0 ? '#1cc88a' : '#e74a3b' }}; color: white; font-size: 14px; padding: 8px 12px;">
                                            KSh {{ number_format($profit, 2) }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <h6 class="text-muted">Key Ratios</h6>
                                <div class="list-group list-group-flush">
                                    <div class="list-group-item d-flex justify-content-between align-items-center">
                                        <span class="font-weight-bold">Profit Margin</span>
                                        <span class="badge" style="background-color: {{ $profitMargin >= 0 ? '#1cc88a' : '#e74a3b' }}; color: white; font-size: 14px; padding: 8px 12px;">
                                            {{ number_format($profitMargin, 1) }}%
                                        </span>
                                    </div>
                                    <div class="list-group-item d-flex justify-content-between align-items-center">
                                        <span class="font-weight-bold">Return on Investment</span>
                                        <span class="badge" style="background-color: {{ $roi >= 0 ? '#1cc88a' : '#e74a3b' }}; color: white; font-size: 14px; padding: 8px 12px;">
                                            {{ number_format($roi, 1) }}%
                                        </span>
                                    </div>
                                    <div class="list-group-item d-flex justify-content-between align-items-center">
                                        <span class="font-weight-bold">Expense Ratio</span>
                                        <span class="badge" style="background-color: #36b9cc; color: white; font-size: 14px; padding: 8px 12px;">
                                            {{ $income > 0 ? number_format(($expenses / $income) * 100, 1) : 0 }}%
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Simple data assignment to avoid Blade syntax issues
    var income = parseFloat('{{ $income ?? 0 }}');
    var expenses = parseFloat('{{ $expenses ?? 0 }}');
    var profit = parseFloat('{{ $profit ?? 0 }}');
    var profitMargin = parseFloat('{{ $profitMargin ?? 0 }}');
    var roi = parseFloat('{{ $roi ?? 0 }}');

    // Chart initialization
    setTimeout(function() {
        if (typeof Chart !== 'undefined') {
            // Financial Bar Chart
            var financialCtx = document.getElementById('financialChart');
            if (financialCtx) {
                new Chart(financialCtx.getContext('2d'), {
                    type: 'bar',
                    data: {
                        labels: ['Revenue', 'Expenses', 'Net Profit/Loss'],
                        datasets: [{
                            label: 'Amount (KSh)',
                            data: [income, expenses, profit],
                            backgroundColor: [
                                '#1cc88a',
                                '#e74a3b',
                                profit >= 0 ? '#1cc88a' : '#e74a3b'
                            ],
                            borderColor: [
                                '#17a673',
                                '#c0392b',
                                profit >= 0 ? '#17a673' : '#c0392b'
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            title: {
                                display: true,
                                text: 'Financial Performance Breakdown'
                            },
                            legend: {
                                display: false
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    callback: function(value) {
                                        return 'KSh ' + value.toLocaleString();
                                    }
                                }
                            }
                        }
                    }
                });
            }

            // Pie Chart
            var pieCtx = document.getElementById('pieChart');
            if (pieCtx) {
                new Chart(pieCtx.getContext('2d'), {
                    type: 'doughnut',
                    data: {
                        labels: ['Revenue', 'Expenses'],
                        datasets: [{
                            data: [income, expenses],
                            backgroundColor: [
                                '#1cc88a',
                                '#e74a3b'
                            ],
                            hoverBackgroundColor: [
                                '#17a673',
                                '#c0392b'
                            ],
                            borderWidth: 2
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            title: {
                                display: true,
                                text: 'Revenue vs Expenses'
                            },
                            legend: {
                                position: 'bottom'
                            }
                        }
                    }
                });
            }
        } else {
            console.log('Chart.js not loaded');
        }
    }, 1000);
});

// Export functions
function exportToPDF() {
    window.print();
}

function exportToExcel() {
    var csvRows = [
        ['Event Name', '{{ $event->name ?? "Event" }}'],
        ['Event Date', '{{ $event->date ? $event->date->format("F d, Y") : "N/A" }}'],
        [''],
        ['Financial Summary'],
        ['Total Revenue', 'KSh {{ number_format($income ?? 0, 2) }}'],
        ['Total Expenses', 'KSh {{ number_format($expenses ?? 0, 2) }}'],
        ['Net Profit/Loss', 'KSh {{ number_format($profit ?? 0, 2) }}'],
        ['Profit Margin', '{{ number_format($profitMargin ?? 0, 1) }}%'],
        ['Return on Investment', '{{ number_format($roi ?? 0, 1) }}%']
    ];
    
    var csvContent = "data:text/csv;charset=utf-8," + 
        csvRows.map(function(row) { return row.join(","); }).join("\n");
    
    var encodedUri = encodeURI(csvContent);
    var link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", "{{ str_replace(' ', '_', $event->name ?? 'Event') }}_profit_loss_report.csv");
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    
    alert('Report exported successfully!');
}
</script>
@endsection