@extends('layouts.app')

@section('content')
<style>
/* Enhanced UI Styles */
.btn-group .btn {
    border-radius: 0.375rem !important;
    margin-right: 3px;
}
.btn-group-vertical .btn {
    border-radius: 0.375rem !important;
    margin-bottom: 3px;
}

/* Modern Card Styles */
.card {
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
    border-radius: 15px;
    transition: all 0.3s ease;
    margin-bottom: 2rem;
}

.card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 15px 15px 0 0 !important;
    padding: 1.2rem 1.5rem;
    color: white;
}

.card-header h5, .card-header h4 {
    margin: 0;
    font-weight: 600;
    font-size: 1.1rem;
}

.card-body {
    padding: 1.5rem;
}

/* Status Badges */
.badge {
    font-size: 0.75rem;
    padding: 0.5em 0.75em;
    border-radius: 20px;
    font-weight: 500;
}

/* Improved Table Styles */
.table th {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: none;
    font-weight: 600;
    color: #495057;
    padding: 1rem 0.75rem;
}

.table td {
    padding: 1rem 0.75rem;
    border-color: #f1f3f4;
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background-color: rgba(0, 123, 255, 0.05);
}

/* Enhanced Buttons */
.btn {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
}

.btn-success {
    background: linear-gradient(135deg, #48b448 0%, #28a745 100%);
}

.btn-danger {
    background: linear-gradient(135deg, #f85032 0%, #dc3545 100%);
}

.btn-warning {
    background: linear-gradient(135deg, #ffa726 0%, #ff9800 100%);
}

.btn-info {
    background: linear-gradient(135deg, #42a5f5 0%, #2196f3 100%);
}

/* Page Header */
.page-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem 0;
    margin-bottom: 2rem;
    border-radius: 0 0 20px 20px;
}

.page-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

/* Info Cards */
.info-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-left: 4px solid #667eea;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.info-label {
    font-weight: 600;
    color: #495057;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.info-value {
    color: #212529;
    font-size: 1rem;
}

/* Workflow Description */
.workflow-description {
    background: linear-gradient(135deg, #e8f5e8 0%, #f0f8f0 100%);
    border-left: 4px solid #28a745;
    padding: 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #155724;
}

/* Attachment Styling */
.attachment-item {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 0.5rem;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.attachment-item:hover {
    background: #e9ecef;
    transform: translateX(5px);
}

/* Select Styles */
select option[value=""] {
    color: #6c757d !important;
    font-style: italic;
}

select option[value=""]:disabled {
    color: #6c757d !important;
    background-color: #f8f9fa !important;
}

select:invalid {
    color: #6c757d;
}

select:valid {
    color: #212529;
}

.btn-sm {
    font-size: 0.775rem;
    min-width: 70px;
}

/* Alert Styles */
.alert {
    border: none;
    border-radius: 12px;
    padding: 1rem 1.25rem;
}

.alert-info {
    background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
    color: #0c5460;
}

.alert-warning {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    color: #856404;
}

/* Progress Indicators */
.status-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
}

.status-pending { background-color: #ffc107; }
.status-approved { background-color: #28a745; }
.status-rejected { background-color: #dc3545; }
.status-escalated { background-color: #17a2b8; }

/* Modern Container */
.main-container {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    padding: 2rem 0;
}

.content-wrapper {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    margin: 0 auto;
    max-width: 1200px;
}
</style>
<div class="main-container">
    <div class="content-wrapper">
        <div class="page-header text-center">
            <h1 class="page-title">
                <i class="fas fa-file-alt mr-3"></i>
                 <span class="text-white">Request Details</span>
        </h1>
            <p class="mb-0" style="opacity: 0.9;">Request #{{ $request->id }} - {{ $request->title }}</p>
        </div>

        {{-- Quick Info Cards --}}
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="info-card">
                    <div class="info-label">
                        <i class="fas fa-user mr-2"></i>Current Approver
                    </div>
                    <div class="info-value">
                        @php
                            $approver = $request->currentApprover ?? null;
                            if (!$approver && !empty($request->current_approver_id)) {
                                $approver = \App\Models\User::find($request->current_approver_id);
                            }
                        @endphp
                        @if($approver)
                            {{ $approver->name }}
                            <br><small class="text-muted">{{ $approver->designation ?? $approver->role ?? '' }}</small>
                        @else
                            <span class="text-muted">None assigned</span>
                        @endif
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="info-card">
                    <div class="info-label">
                        <i class="fas fa-flag mr-2"></i>Current Status
                    </div>
                    <div class="info-value">
                        @if($request->status == 'pending')
                            <span class="status-indicator status-pending"></span>
                            <span class="badge badge-warning">Pending Review</span>
                        @elseif($request->status == 'approved')
                            <span class="status-indicator status-approved"></span>
                            <span class="badge badge-success">Approved</span>
                        @elseif($request->status == 'completed')
                            <span class="status-indicator status-approved"></span>
                            <span class="badge badge-success">Completed</span>
                        @elseif($request->status == 'rejected')
                            <span class="status-indicator status-rejected"></span>
                            <span class="badge badge-danger">Rejected</span>
                        @elseif($request->status == 'rejected_resubmit')
                            <span class="status-indicator status-pending"></span>
                            <span class="badge badge-warning">Pending Resubmission</span>
                        @elseif($request->status == 'resubmitted')
                            <span class="status-indicator status-pending"></span>
                            <span class="badge badge-info">Resubmitted - Pending Review</span>
                        @elseif($request->status == 'escalated')
                            <span class="status-indicator status-escalated"></span>
                            <span class="badge badge-info">Approve & Escalated</span>
                        @else
                            <span class="badge badge-secondary">{{ ucfirst($request->status) }}</span>
                        @endif
                        
                        <!-- PDF Download Buttons for Approved/Completed Requests -->
                        @if(in_array($request->status, ['approved', 'completed']))
                            <div class="mt-2">
                                <a href="{{ route('request2s.pdf.download', $request->id) }}" class="btn btn-primary btn-sm">
                                    <i class="fas fa-download"></i> PDF
                                </a>
                                <a href="{{ route('request2s.pdf.view', $request->id) }}" class="btn btn-outline-primary btn-sm" target="_blank">
                                    <i class="fas fa-eye"></i> View
                                </a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="info-card">
                    <div class="info-label">
                        <i class="fas fa-clock mr-2"></i>Created
                    </div>
                    <div class="info-value">
                        @if($request->created_at)
                            {{ $request->created_at->setTimezone('Asia/Kuala_Lumpur')->format('d/m/Y H:i') }}
                            <br><small class="text-muted">{{ $request->created_at->setTimezone('Asia/Kuala_Lumpur')->diffForHumans() }}</small>
                        @else
                            <span class="text-muted">Unknown</span>
                        @endif
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="info-card">
                    <div class="info-label">
                        <i class="fas fa-user-edit mr-2"></i>Submitted By
                    </div>
                    <div class="info-value">
                        {{ $request->submitter ? $request->submitter->name : 'Unknown' }}
                        @if($request->submitter && $request->submitter->designation)
                            <br><small class="text-muted">{{ $request->submitter->designation }}</small>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        

            <div class="card shadow-sm mb-4">
                <div class="card-body">
                    <div class="row mb-2">
                        <div class="col-md-6">
                            <h5 class="card-title">{{ $request->title }}</h5>
                            <p><strong>Created By:</strong> {{ $request->submitter ? $request->submitter->name : '-' }}</p>
                            <p><strong>Created At:</strong> 
                                @if($request->created_at)
                                    {{ $request->created_at->setTimezone('Asia/Kuala_Lumpur')->format('d/m/Y H:i') }} 
                                    <small class="text-muted">({{ $request->created_at->setTimezone('Asia/Kuala_Lumpur')->diffForHumans() }})</small>
                                @else
                                    -
                                @endif
                            </p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>Status:</strong>
                                @if($request->status == 'rejected')
                                    <span class="badge badge-danger">Rejected</span>
                                @elseif($request->status == 'completed')
                                    <span class="badge badge-success">Completed</span>
                                @elseif($request->status == 'escalated')
                                    <span class="badge badge-success">Approved & Escalated</span>
                                @elseif($request->status == 'approved')
                                    <span class="badge badge-success">Approved</span>
                                @else
                                    <span class="badge badge-info">{{ ucfirst($request->status) }}</span>
                                @endif
                            </p>
                        </div>
                    </div>
                    <hr>
                    <div class="row mb-2">
                        <div class="col-md-4">
                            <p><strong>Category:</strong> {{ $request->category }}</p>
                            @if($request->category == 'Other' && !empty($request->other_category))
                                <p><strong>Other Category:</strong> {{ $request->other_category }}</p>
                            @endif
                            <p><strong>Purchase Request Type:</strong> {{ $request->request_type }}</p>
                            @if(!empty($request->project_name))
                                <p><strong>Project Name:</strong> {{ $request->project_name }}</p>
                            @endif
                            @if($request->request_type)
                                <p><strong>Approval Workflow:</strong></p>
                                <div class="small text-muted border rounded p-2 bg-light">
                                    {{ $request->getWorkflowDescription() }}
                                </div>
                            @endif
                        </div>
                        <div class="col-md-4">
                            <p><strong>Branch:</strong> {{ ucfirst($request->branch) }}</p>
                            @if(!empty($request->unit))
                                <p><strong>Unit:</strong> {{ $request->unit }}</p>
                            @endif
                            <p><strong>Urgency:</strong>
                                @if($request->urgency == 'High')
                                    <span class="badge" style="background:#dc3545;color:#fff;">High</span>
                                @elseif($request->urgency == 'Medium')
                                    <span class="badge" style="background:#fd7e14;color:#fff;">Medium</span>
                                @elseif($request->urgency == 'Low')
                                    <span class="badge" style="background:#28a745;color:#fff;">Low</span>
                                @else
                                    <strong>{{ $request->urgency }}</strong>
                                @endif
                            </p>
                        </div>
                        <div class="col-md-4">
                            <p><strong>Description / Justification:</strong></p>
                            <div class="border rounded p-2 bg-light">{{ $request->description }}</div>
                        </div>
                    </div>
                </div>
            </div>

            @if(!empty($request->attachments))
            <div class="card mb-4">
                <div class="card-header bg-primary text-white"><i class="fas fa-paperclip"></i> General Attachments</div>
                <ul class="list-group list-group-flush">
                    @php
                        $attachments = [];
                        if (!empty($request->attachments)) {
                            if (is_array($request->attachments)) {
                                $attachments = $request->attachments;
                            } elseif (is_string($request->attachments)) {
                                $decoded = json_decode($request->attachments, true);
                                $attachments = is_array($decoded) ? $decoded : [];
                            }
                        }
                    @endphp
                    @forelse($attachments as $file)
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <span>{{ $file['original'] ?? 'Attachment' }}</span>
                        <div class="btn-group" role="group">
                            <a href="{{ route('request2s.previewAttachment', basename($file['stored'] ?? $file)) }}" class="btn btn-outline-primary btn-sm" target="_blank">
                                <i class="fas fa-eye"></i> Preview
                            </a>
                            <a href="{{ route('request2s.downloadAttachment', basename($file['stored'] ?? $file)) }}" class="btn btn-outline-secondary btn-sm">
                                <i class="fas fa-download"></i> Download
                            </a>
                        </div>
                    </li>
                    @empty
                    <li class="list-group-item text-center text-muted">
                        <i class="fas fa-info-circle"></i> No attachments available
                    </li>
                    @endforelse
                </ul>
            </div>
            @endif
            <!-- Enhanced Approval Workflow Table -->
        <div class="card shadow-lg mb-4">
            <div class="card-header">
                <h4 class="mb-0 text-white">
                    <i class="fas fa-route mr-2"></i>Approval Workflow & History
                </h4>
                <small style="opacity: 0.9;">Complete timeline of all actions taken on this request</small>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead>
                            <tr>
                                <th style="width: 20%;">
                                    <i class="fas fa-user mr-1"></i>User Details
                                </th>
                                <th style="width: 18%;">
                                    <i class="fas fa-shield-alt mr-1"></i>Role & Permission
                                </th>
                                <th style="width: 15%;">
                                    <i class="fas fa-tasks mr-1"></i>Action Taken
                                </th>
                                <th style="width: 27%;">
                                    <i class="fas fa-comment-alt mr-1"></i>Comments
                                </th>
                                <th style="width: 20%;">
                                    <i class="fas fa-clock mr-1"></i>Date & Time
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Initial Submission -->
                            <tr style="background: linear-gradient(135deg, #e8f5e8 0%, #f0f8f0 100%);">
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="rounded-circle bg-primary d-flex align-items-center justify-content-center mr-3" style="width: 40px; height: 40px;">
                                            <i class="fas fa-user text-white"></i>
                                        </div>
                                        <div>
                                            <strong>{{ $request->submitter->name ?? 'Unknown' }}</strong>
                                            <br><small class="text-muted">{{ $request->submitter->email ?? '' }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <span class="badge badge-primary">{{ $request->submitter->designation ?? $request->submitter->role ?? 'Submitter' }}</span>
                                    <br><small class="text-muted mt-1">Request Originator</small>
                                </td>
                                <td>
                                    <span class="badge badge-info" style="padding: 8px 12px;">
                                        <i class="fas fa-paper-plane mr-1"></i> Submitted
                                    </span>
                                </td>
                                <td>
                                    <em class="text-muted">Initial request submission</em>
                                </td>
                                <td>
                                    <strong>{{ $request->created_at->setTimezone('Asia/Kuala_Lumpur')->format('d/m/Y H:i') }}</strong>
                                    <br><small class="text-muted">{{ $request->created_at->setTimezone('Asia/Kuala_Lumpur')->diffForHumans() }}</small>
                                </td>
                            </tr>

                            <!-- Approval History -->
                            @foreach($request->approvals()->orderBy('created_at', 'asc')->get() as $approval)
                            <tr style="@if($approval->decision == 'approved') background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%); @elseif($approval->decision == 'rejected') background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%); @elseif($approval->decision == 'escalated') background: linear-gradient(135deg, #d1ecf1 0%, #b8daff 100%); @else background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%); @endif">
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="rounded-circle d-flex align-items-center justify-content-center mr-3" style="width: 40px; height: 40px; 
                                            @if($approval->decision == 'approved') background: #28a745; 
                                            @elseif($approval->decision == 'rejected') background: #dc3545; 
                                            @elseif($approval->decision == 'escalated') background: #17a2b8; 
                                            @else background: #ffc107; @endif">
                                            @if($approval->decision == 'approved')
                                                <i class="fas fa-check text-white"></i>
                                            @elseif($approval->decision == 'rejected')
                                                <i class="fas fa-times text-white"></i>
                                            @elseif($approval->decision == 'escalated')
                                                <i class="fas fa-arrow-up text-white"></i>
                                            @else
                                                <i class="fas fa-edit text-white"></i>
                                            @endif
                                        </div>
                                        <div>
                                            <strong>{{ $approval->approver->name ?? 'Unknown' }}</strong>
                                            <br><small class="text-muted">{{ $approval->approver->email ?? '' }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <span class="badge 
                                        @if(stripos($approval->approver->designation ?? '', 'ceo') !== false || stripos($approval->approver->designation ?? '', 'coo') !== false) badge-danger
                                        @elseif(stripos($approval->approver->designation ?? '', 'head') !== false || stripos($approval->approver->designation ?? '', 'hod') !== false) badge-warning
                                        @elseif(stripos($approval->approver->designation ?? '', 'manager') !== false) badge-info
                                        @elseif($approval->approver->is_approver) badge-success
                                        @else badge-secondary
                                        @endif" style="padding: 6px 10px;">
                                        {{ $approval->approver->designation ?? $approval->approver->role ?? 'User' }}
                                    </span>
                                    @if($approval->approver->is_approver)
                                        <br><small class="badge badge-success mt-1" style="font-size: 0.7rem;">
                                            <i class="fas fa-certificate mr-1"></i>Authorized Approver
                                        </small>
                                    @endif
                                </td>
                                <td>
                                    @if($approval->decision == 'approved')
                                        <span class="badge badge-success" style="padding: 8px 12px;">
                                            <i class="fas fa-check mr-1"></i> Approved
                                        </span>
                                    @elseif($approval->decision == 'escalated')
                                        <span class="badge badge-info" style="padding: 8px 12px;">
                                            <i class="fas fa-arrow-up mr-1"></i> Escalated
                                        </span>
                                    @elseif($approval->decision == 'rejected')
                                        <span class="badge badge-danger" style="padding: 8px 12px;">
                                            <i class="fas fa-times mr-1"></i> Rejected
                                        </span>
                                    @elseif($approval->decision == 'rejected_resubmit')
                                        <span class="badge badge-warning" style="padding: 8px 12px;">
                                            <i class="fas fa-redo mr-1"></i> Resubmission Required
                                        </span>
                                    @else
                                        <span class="badge badge-secondary" style="padding: 8px 12px;">
                                            {{ ucfirst($approval->decision) }}
                                        </span>
                                    @endif
                                </td>
                                <td>
                                    @if($approval->comments)
                                        <div class="comment-box" style="background: rgba(255,255,255,0.7); padding: 8px; border-radius: 6px;">
                                            {{ $approval->comments }}
                                        </div>
                                    @else
                                        <em class="text-muted">No comment provided</em>
                                    @endif
                                </td>
                                <td>
                                    <strong>{{ $approval->created_at->setTimezone('Asia/Kuala_Lumpur')->format('d/m/Y H:i') }}</strong>
                                    <br><small class="text-muted">{{ $approval->created_at->setTimezone('Asia/Kuala_Lumpur')->diffForHumans() }}</small>
                                </td>
                            </tr>
                            @endforeach

                                <!-- Current Pending Approver -->
                                @if(in_array($request->status, ['pending', 'escalated']) && $request->currentApprover)
                                <tr class="table-warning">
                                    <td>
                                        <strong>{{ $request->currentApprover->name }}</strong>
                                        <br><small class="text-muted">{{ $request->currentApprover->email ?? '' }}</small>
                                    </td>
                                    <td>
                                        <span class="badge 
                                            @if(stripos($request->currentApprover->designation ?? '', 'ceo') !== false || stripos($request->currentApprover->designation ?? '', 'coo') !== false) badge-danger
                                            @elseif(stripos($request->currentApprover->designation ?? '', 'head') !== false || stripos($request->currentApprover->designation ?? '', 'hod') !== false) badge-warning
                                            @elseif(stripos($request->currentApprover->designation ?? '', 'manager') !== false) badge-info
                                            @elseif($request->currentApprover->is_approver) badge-success
                                            @else badge-secondary
                                            @endif">
                                            {{ $request->currentApprover->designation ?? $request->currentApprover->role ?? 'User' }}
                                        </span>
                                        @if($request->currentApprover->is_approver)
                                            <br><small class="badge badge-outline-success mt-1">Authorized Approver</small>
                                        @endif
                                    </td>
                                    <td>
                                        <span class="badge badge-warning">
                                            <i class="fas fa-clock"></i> Pending Review
                                        </span>
                                    </td>
                                    <td>
                                        <em class="text-muted">Awaiting action...</em>
                                    </td>
                                    <td>
                                        <span class="text-muted">-</span>
                                    </td>
                                </tr>
                                @endif

                                <!-- Show message if no approvals yet -->
                                @if($request->approvals->count() == 0 && !in_array($request->status, ['pending', 'escalated']))
                                <tr>
                                    <td colspan="5" class="text-center text-muted py-4">
                                        <i class="fas fa-info-circle"></i> No approval actions recorded yet.
                                    </td>
                                </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer bg-light">
                    <div class="row">
                        <div class="col-md-6">
                            <small class="text-muted">
                                <i class="fas fa-info-circle"></i> 
                                <strong>Current Status:</strong> {{ ucfirst($request->status) }}
                            </small>
                        </div>
                        <div class="col-md-6 text-right">
                            <small class="text-muted">
                                <i class="fas fa-users"></i> 
                                <strong>Total Actions:</strong> {{ $request->approvals->count() + 1 }} 
                                (including submission)
                            </small>
                        </div>
                    </div>
                    @if($request->currentApprover && in_array($request->status, ['pending', 'escalated']))
                        <div class="mt-2">
                            <div class="alert alert-info mb-0 py-2">
                                <i class="fas fa-user-clock"></i> 
                                <strong>Next Action Required:</strong> {{ $request->currentApprover->name }} 
                                ({{ $request->currentApprover->designation ?? $request->currentApprover->role ?? 'User' }})
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Assets Section -->
            @if($request->inventories && $request->inventories->count() > 0)
            <div class="card shadow-lg border-0 mb-4">
                <div class="card-header" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none;">
                    <h4 class="card-title mb-0 text-white">
                        <i class="fas fa-boxes mr-2"></i>Requested Assets
                    </h4>
                </div>
                <div class="card-body" style="background: #f8fafc;">
                    <div class="row">
                        @foreach($request->inventories as $inventory)
                        <div class="col-md-6 col-lg-4 mb-4">
                            <div class="asset-card" style="
                                background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
                                border: 1px solid #e3e6f0;
                                border-radius: 12px;
                                padding: 20px;
                                box-shadow: 0 2px 8px rgba(0,0,0,0.08);
                                transition: all 0.3s ease;
                            " onmouseover="this.style.transform='translateY(-3px)'; this.style.boxShadow='0 4px 15px rgba(0,0,0,0.15)'" 
                               onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 8px rgba(0,0,0,0.08)'">
                                
                                @if($inventory->image)
                                    <div class="asset-image mb-3 text-center">
                                        <img src="{{ Storage::url($inventory->image) }}" 
                                             alt="{{ $inventory->item_name }}"
                                             class="img-fluid"
                                             style="max-height: 120px; border-radius: 8px; object-fit: cover;">
                                    </div>
                                @else
                                    <div class="asset-placeholder mb-3 text-center" style="
                                        height: 120px;
                                        background: linear-gradient(135deg, #e3e6f0 0%, #d1d9e6 100%);
                                        border-radius: 8px;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                    ">
                                        <i class="fas fa-image text-muted" style="font-size: 2rem;"></i>
                                    </div>
                                @endif

                                <div class="asset-info">
                                    <h6 class="asset-name mb-2" style="color: #2c3e50; font-weight: 600;">
                                        {{ $inventory->item_name }}
                                    </h6>
                                    
                                    <div class="asset-details">
                                        <div class="detail-item mb-2">
                                            <span class="detail-label" style="color: #6c757d; font-size: 0.85rem;">Model:</span>
                                            <span class="detail-value" style="color: #2c3e50; font-weight: 500;">
                                                {{ $inventory->model ?? 'N/A' }}
                                            </span>
                                        </div>
                                        
                                        <div class="detail-item mb-2">
                                            <span class="detail-label" style="color: #6c757d; font-size: 0.85rem;">Serial:</span>
                                            <span class="detail-value" style="color: #2c3e50; font-weight: 500;">
                                                {{ $inventory->serial_number ?? 'N/A' }}
                                            </span>
                                        </div>
                                        
                                        <div class="detail-item mb-2">
                                            <span class="detail-label" style="color: #6c757d; font-size: 0.85rem;">Category:</span>
                                            <span class="badge badge-outline-primary" style="
                                                background: rgba(102, 126, 234, 0.1);
                                                color: #667eea;
                                                border: 1px solid #667eea;
                                                padding: 4px 8px;
                                                font-size: 0.8rem;
                                            ">
                                                {{ $inventory->category->name ?? 'N/A' }}
                                            </span>
                                        </div>
                                        
                                        @if($inventory->location)
                                        <div class="detail-item">
                                            <span class="detail-label" style="color: #6c757d; font-size: 0.85rem;">Location:</span>
                                            <span class="detail-value" style="color: #2c3e50; font-weight: 500;">
                                                <i class="fas fa-map-marker-alt text-danger mr-1"></i>
                                                {{ $inventory->location->name }}
                                            </span>
                                        </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif

            <div class="card shadow-lg mb-4">
                <div class="card-header" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); border: none;">
                    <h4 class="mb-0 text-white">
                        <i class="fas fa-list mr-2"></i>Itemized List
                    </h4>
                    <small class="text-white" style="opacity: 0.9;">Complete breakdown of requested items with pricing</small>
                </div>
                @php
                    $items = is_array($request->items) ? $request->items : (is_string($request->items) ? json_decode($request->items, true) : []);
                @endphp
                <div class="table-responsive">
                    <table class="table table-hover mb-0" style="background: white;">
                        <thead style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);">
                            <tr>
                                <th style="border: none; font-weight: 600; color: #2c3e50;">
                                    <i class="fas fa-tag mr-1"></i>Item Name
                                </th>
                                <th style="border: none; font-weight: 600; color: #2c3e50;" class="text-center">
                                    <i class="fas fa-sort-numeric-up mr-1"></i>Qty
                                </th>
                                <th style="border: none; font-weight: 600; color: #2c3e50;" class="text-right">
                                    <i class="fas fa-money-bill-wave mr-1"></i>Unit Cost (MYR)
                                </th>
                                <th style="border: none; font-weight: 600; color: #2c3e50;" class="text-center">
                                    <i class="fas fa-percentage mr-1"></i>Tax Rate (%)
                                </th>
                                <th style="border: none; font-weight: 600; color: #2c3e50;" class="text-right">
                                    <i class="fas fa-calculator mr-1"></i>Tax Amount (MYR)
                                </th>
                                <th style="border: none; font-weight: 600; color: #2c3e50;" class="text-right">
                                    <i class="fas fa-truck mr-1"></i>Delivery (MYR)
                                </th>
                                <th style="border: none; font-weight: 600; color: #2c3e50;" class="text-right">
                                    <i class="fas fa-coins mr-1"></i>Total Cost (MYR)
                                </th>
                                <th style="border: none; font-weight: 600; color: #2c3e50;" class="text-center">
                                    <i class="fas fa-paperclip mr-1"></i>Attachment
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($items as $index => $item)
                            @php
                                $qty = (float)($item['quantity'] ?? 0);
                                $unitCost = (float)($item['unit_cost'] ?? 0);
                                $taxRate = (float)($item['tax_rate'] ?? 6);
                                $deliveryCharge = (float)($item['delivery_charge'] ?? 0);
                                $subtotal = $qty * $unitCost;
                                $taxAmount = $subtotal * ($taxRate / 100);
                                $calculatedTotal = $subtotal + $taxAmount + $deliveryCharge;
                            @endphp
                            <tr style="@if($index % 2 == 0) background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 50%); @else background: #ffffff; @endif border-bottom: 1px solid #e9ecef;">
                                <td style="border: none; padding: 15px;">
                                    <div style="font-weight: 600; color: #2c3e50; margin-bottom: 5px;">
                                        {{ $item['name'] ?? '' }}
                                    </div>
                                    @if(!empty($item['description']))
                                        <small class="text-muted">{{ $item['description'] }}</small>
                                    @endif
                                </td>
                                <td class="text-center" style="border: none; padding: 15px;">
                                    <span class="badge badge-primary" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); padding: 8px 12px;">
                                        {{ $qty }}
                                    </span>
                                </td>
                                <td class="text-right" style="border: none; padding: 15px; font-weight: 500; color: #2c3e50;">
                                    {{ number_format($unitCost, 2) }}
                                </td>
                                <td class="text-center" style="border: none; padding: 15px;">
                                    <span class="badge badge-info" style="padding: 6px 10px;">
                                        {{ number_format($taxRate, 2) }}%
                                    </span>
                                </td>
                                <td class="text-right" style="border: none; padding: 15px; font-weight: 500; color: #28a745;">
                                    {{ number_format($taxAmount, 2) }}
                                </td>
                                <td class="text-right" style="border: none; padding: 15px; font-weight: 500; color: #fd7e14;">
                                    {{ $deliveryCharge > 0 ? number_format($deliveryCharge, 2) : '-' }}
                                </td>
                                <td class="text-right" style="border: none; padding: 15px;">
                                    <strong style="color: #dc3545; font-size: 1.1rem;">
                                        {{ number_format($calculatedTotal, 2) }}
                                    </strong>
                                </td>
                                <td class="text-center" style="border: none; padding: 15px;">
                                    @if(!empty($item['attachment']))
                                        <div class="btn-group-vertical" role="group">
                                            <a href="{{ route('request2s.previewAttachment', basename($item['attachment'])) }}" 
                                               class="btn btn-outline-primary btn-sm mb-1" 
                                               target="_blank" 
                                               title="Preview"
                                               style="padding: 6px 10px; border-radius: 6px;">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a href="{{ route('request2s.downloadAttachment', basename($item['attachment'])) }}" 
                                               class="btn btn-outline-secondary btn-sm" 
                                               title="Download"
                                               style="padding: 6px 10px; border-radius: 6px;">
                                                <i class="fas fa-download"></i>
                                            </a>
                                        </div>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="8" class="text-center text-muted" style="padding: 30px;">
                                    <i class="fas fa-box-open fa-2x mb-2"></i><br>
                                    No items found for this request.
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="card-footer" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border: none;">
                    @php
                        $grandSubtotal = 0;
                        $grandTaxAmount = 0;
                        $grandDeliveryAmount = 0;
                        $grandTotal = 0;
                        
                        foreach($items as $item) {
                            $qty = (float)($item['quantity'] ?? 0);
                            $unitCost = (float)($item['unit_cost'] ?? 0);
                            $taxRate = (float)($item['tax_rate'] ?? 6);
                            $deliveryCharge = (float)($item['delivery_charge'] ?? 0);
                            
                            $itemSubtotal = $qty * $unitCost;
                            $itemTax = $itemSubtotal * ($taxRate / 100);
                            
                            $grandSubtotal += $itemSubtotal;
                            $grandTaxAmount += $itemTax;
                            $grandDeliveryAmount += $deliveryCharge;
                            $grandTotal += $itemSubtotal + $itemTax + $deliveryCharge;
                        }
                    @endphp
                    <div class="row">
                        <div class="col-md-8">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-info-circle text-primary mr-2"></i>
                                <small class="text-muted">Total items: <strong>{{ count($items) }}</strong></small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="summary-card" style="
                                background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
                                border: 1px solid #dee2e6;
                                border-radius: 10px;
                                padding: 20px;
                                box-shadow: 0 2px 8px rgba(0,0,0,0.08);
                            ">
                                <table class="table table-sm mb-0" style="background: transparent;">
                                    <tr>
                                        <td style="border: none; padding: 8px 0; color: #6c757d;">
                                            <i class="fas fa-calculator mr-2"></i><strong>Subtotal:</strong>
                                        </td>
                                        <td style="border: none; padding: 8px 0; text-align: right; color: #2c3e50; font-weight: 500;">
                                            MYR {{ number_format($grandSubtotal, 2) }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="border: none; padding: 8px 0; color: #6c757d;">
                                            <i class="fas fa-percentage mr-2"></i><strong>Total Tax:</strong>
                                        </td>
                                        <td style="border: none; padding: 8px 0; text-align: right; color: #28a745; font-weight: 500;">
                                            MYR {{ number_format($grandTaxAmount, 2) }}
                                        </td>
                                    </tr>
                                    @if($grandDeliveryAmount > 0)
                                    <tr>
                                        <td style="border: none; padding: 8px 0; color: #6c757d;">
                                            <i class="fas fa-truck mr-2"></i><strong>Total Delivery:</strong>
                                        </td>
                                        <td style="border: none; padding: 8px 0; text-align: right; color: #fd7e14; font-weight: 500;">
                                            MYR {{ number_format($grandDeliveryAmount, 2) }}
                                        </td>
                                    </tr>
                                    @endif
                                    <tr style="border-top: 2px solid #4facfe;">
                                        <td style="border: none; padding: 12px 0 8px 0;">
                                            <strong style="color: #2c3e50; font-size: 1.1rem;">
                                                <i class="fas fa-coins mr-2"></i>Grand Total:
                                            </strong>
                                        </td>
                                        <td style="border: none; padding: 12px 0 8px 0; text-align: right;">
                                            <strong style="color: #dc3545; font-size: 1.2rem;">
                                                MYR {{ number_format($grandTotal, 2) }}
                                            </strong>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- PDF Section - Always show if PDF exists -->
            @if(!empty($request->pdf_path) || \Storage::exists('request_pdfs/request_' . str_pad($request->id, 3, '0', STR_PAD_LEFT) . '.pdf'))
            <div class="card mb-4">
                <div class="card-header bg-primary text-white"><i class="fas fa-file-pdf"></i> Request PDF</div>
                <div class="card-body">
                    <p class="mb-3">
                        <i class="fas fa-info-circle text-info"></i>
                        The PDF is updated automatically with the latest approval history and status.
                    </p>
                    <a href="{{ route('request2s.pdf.download', $request->id) }}" class="btn btn-primary btn-sm">
                        <i class="fas fa-download"></i> Download PDF
                    </a>
                    <a href="{{ route('request2s.pdf.view', $request->id) }}" class="btn btn-outline-primary btn-sm" target="_blank">
                        <i class="fas fa-eye"></i> View PDF
                    </a>
                    <small class="text-muted d-block mt-2">
                        <i class="fas fa-clock"></i> Last updated: {{ $request->updated_at->format('d/m/Y H:i') }}
                    </small>
                </div>
            </div>
            @endif

            @if((auth()->user()->id == $request->current_approver_id && in_array($request->status, ['pending', 'escalated'])) || 
                (auth()->user()->canManageAllRequests() && in_array($request->status, ['pending', 'escalated'])) ||
                (auth()->user()->is_approver && auth()->user()->id == $request->current_approver_id && in_array($request->status, ['pending', 'escalated'])))
            <div class="text-center mb-4">
                <button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#takeActionModal">
                    <i class="fas fa-check mr-2"></i>Take Action
                </button>
                <p class="text-muted mt-2">
                    <i class="fas fa-info-circle"></i> You are authorized to approve, reject, or escalate this request
                </p>
            </div>
            @endif

            {{-- Edit Request Section for Resubmission --}}
            @if($request->status == 'rejected_resubmit' && auth()->user()->id == $request->user_id)
            <div class="card mb-4 border-warning">
                <div class="card-header bg-warning text-dark">
                    <h5 class="mb-0"><i class="fas fa-edit"></i> Request Resubmission Required</h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-warning">
                        <h6><i class="fas fa-exclamation-triangle"></i> Action Required</h6>
                        <p class="mb-2">Your request has been reviewed and requires modifications before it can be approved. Please review the feedback below and make the necessary changes.</p>
                        
                        {{-- Show the rejection comment --}}
                        @php
                            $rejectionApproval = $request->approvals()
                                ->where('decision', 'rejected_resubmit')
                                ->latest()
                                ->first();
                        @endphp
                        
                        @if($rejectionApproval)
                            <div class="mt-3 p-3 bg-light border-left border-warning">
                                <strong>Feedback from {{ $rejectionApproval->approver->name ?? 'Reviewer' }}:</strong>
                                <p class="mb-1 mt-2">{{ $rejectionApproval->comments }}</p>
                                <small class="text-muted">
                                    <i class="fas fa-clock"></i> 
                                    {{ $rejectionApproval->created_at->setTimezone('Asia/Kuala_Lumpur')->format('d/m/Y H:i') }}
                                </small>
                            </div>
                        @endif
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <a href="{{ route('request2s.edit', $request->id) }}" class="btn btn-warning btn-lg">
                                <i class="fas fa-edit"></i> Edit & Resubmit Request
                            </a>
                        </div>
                        <div class="col-md-6 text-right">
                            <small class="text-muted">
                                <i class="fas fa-info-circle"></i> 
                                After editing, your request will return to the approval workflow starting from the reviewer who requested changes.
                            </small>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            {{-- Information for other users when request is pending resubmission --}}
            @if($request->status == 'rejected_resubmit' && auth()->user()->id != $request->user_id)
            <div class="card mb-4 border-info">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0"><i class="fas fa-hourglass-half"></i> Awaiting Resubmission</h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <p class="mb-0">
                            <i class="fas fa-info-circle"></i> 
                            This request has been sent back to <strong>{{ $request->submitter->name ?? 'the requester' }}</strong> for modifications. 
                            The request will return to the approval workflow once the changes have been made and resubmitted.
                        </p>
                    </div>
                    
                    @php
                        $rejectionApproval = $request->approvals()
                            ->where('decision', 'rejected_resubmit')
                            ->latest()
                            ->first();
                    @endphp
                    
                    @if($rejectionApproval && $rejectionApproval->comments)
                        <div class="mt-3">
                            <h6>Feedback Provided:</h6>
                            <div class="p-3 bg-light border-left border-info">
                                <p class="mb-1">{{ $rejectionApproval->comments }}</p>
                                <small class="text-muted">
                                    <strong>By:</strong> {{ $rejectionApproval->approver->name ?? 'Reviewer' }} - 
                                    {{ $rejectionApproval->created_at->setTimezone('Asia/Kuala_Lumpur')->format('d/m/Y H:i') }}
                                </small>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
            @endif
        </div>
    </div>
</div>

{{-- Take Action Modal --}}
@if((auth()->user()->id == $request->current_approver_id && in_array($request->status, ['pending', 'escalated'])) || 
    (auth()->user()->canManageAllRequests() && in_array($request->status, ['pending', 'escalated'])) ||
    (auth()->user()->is_approver && auth()->user()->id == $request->current_approver_id && in_array($request->status, ['pending', 'escalated'])))
<div class="modal fade" id="takeActionModal" tabindex="-1" role="dialog" aria-labelledby="takeActionModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="takeActionModalLabel">
                    <i class="fas fa-check mr-2"></i>Take Action on Request #{{ $request->id }}
                </h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="POST" action="{{ route('request2s.decision', $request->id) }}" id="takeActionForm">
                @csrf
                <div class="modal-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="modal_decision" class="form-label">Decision</label>
                            <select class="form-control" id="modal_decision" name="decision" required onchange="toggleModalEscalate(this.value)">
                                <option value="" disabled selected>Select Decision</option>
                                @php $allowedActions = $request->getAllowedActions(auth()->user()); @endphp
                                @if(in_array('approve', $allowedActions))
                                    <option value="approved">Approve</option>
                                @endif
                                @if(in_array('reject', $allowedActions))
                                    <option value="rejected">Reject</option>
                                @endif
                                @if(in_array('reject_resubmit', $allowedActions) || in_array('reject', $allowedActions))
                                    <option value="rejected_resubmit">Reject & Request Resubmission</option>
                                @endif
                                @if(auth()->user()->hasFullAdminControl() || auth()->user()->is_pmo)
                                    <option value="escalated">Approve & Escalate</option>
                                @endif
                            </select>
                            @if(empty($allowedActions))
                                <small class="text-danger mt-1">
                                    <i class="fas fa-exclamation-triangle"></i> 
                                    No actions available. Please contact your administrator.
                                </small>
                            @endif
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="modal_comments" class="form-label">Comments <span id="modal_comments-required" style="display:none;" class="text-danger">*</span></label>
                        <textarea class="form-control" id="modal_comments" name="comments" rows="4" placeholder="Enter your feedback or reason for decision..."></textarea>
                        <small id="modal_comments-help" class="form-text text-muted">Comments are optional for approvals but recommended for rejections and escalations.</small>
                    </div>
                    
                    {{-- Quick Action Buttons --}}
                    <div class="row">
                        <div class="col-12">
                            <h6 class="text-muted mb-3"><i class="fas fa-bolt mr-1"></i> Quick Actions:</h6>
                            <div class="btn-group-toggle d-flex flex-wrap gap-2" data-toggle="buttons">
                                @if(in_array('approve', $allowedActions))
                                    <button type="button" class="btn btn-outline-success btn-sm me-2 mb-2" onclick="quickModalAction('approved')">
                                        <i class="fas fa-check mr-1"></i> Quick Approve
                                    </button>
                                @endif
                                @if(in_array('reject', $allowedActions))
                                    <button type="button" class="btn btn-outline-danger btn-sm me-2 mb-2" onclick="quickModalAction('rejected')">
                                        <i class="fas fa-times mr-1"></i> Quick Reject
                                    </button>
                                @endif
                                @if(in_array('reject_resubmit', $allowedActions) || in_array('reject', $allowedActions))
                                    <button type="button" class="btn btn-outline-warning btn-sm me-2 mb-2" onclick="quickModalAction('rejected_resubmit')">
                                        <i class="fas fa-redo mr-1"></i> Request Changes
                                    </button>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="fas fa-times mr-1"></i> Cancel
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-paper-plane mr-1"></i> Submit Decision
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function toggleModalEscalate(val) {
    const commentsField = document.getElementById('modal_comments');
    const commentsRequired = document.getElementById('modal_comments-required');
    const commentsHelp = document.getElementById('modal_comments-help');
    
    // Reset states
    commentsField.required = false;
    commentsRequired.style.display = 'none';
    
    if (val === 'rejected_resubmit') {
        commentsField.required = true;
        commentsRequired.style.display = 'inline';
        commentsHelp.textContent = 'REQUIRED: Please explain what changes are needed for resubmission. Be specific about what needs to be corrected or improved.';
        commentsHelp.className = 'form-text text-warning';
    } else if (val === 'rejected') {
        commentsField.required = true;
        commentsRequired.style.display = 'inline';
        commentsHelp.textContent = 'REQUIRED: Please explain the reason for rejection.';
        commentsHelp.className = 'form-text text-danger';
    } else if (val === 'approved') {
        commentsHelp.textContent = 'Comments are optional for approvals but recommended for transparency.';
        commentsHelp.className = 'form-text text-muted';
    } else {
        commentsHelp.textContent = 'Comments are optional for approvals but recommended for rejections and escalations.';
        commentsHelp.className = 'form-text text-muted';
    }
}

// Quick action function for modal
function quickModalAction(decision) {
    const decisionSelect = document.getElementById('modal_decision');
    const commentsField = document.getElementById('modal_comments');
    
    // Set the decision
    decisionSelect.value = decision;
    
    // Trigger the change event to update form state
    toggleModalEscalate(decision);
    
    // Focus on comments field
    setTimeout(() => {
        commentsField.focus();
        
        // Pre-fill comment templates for different actions
        switch(decision) {
            case 'approved':
                commentsField.placeholder = 'Optional: Add any approval notes or conditions...';
                break;
            case 'rejected':
                commentsField.placeholder = 'Required: Please explain the reason for permanent rejection...';
                break;
            case 'rejected_resubmit':
                commentsField.placeholder = 'Required: Specify what changes are needed for resubmission...';
                break;
            case 'escalated':
                commentsField.placeholder = 'Required: Explain why this request needs higher authority approval...';
                break;
        }
    }, 100);
}

// Form validation for modal
document.getElementById('takeActionForm').addEventListener('submit', function(e) {
    const decision = document.getElementById('modal_decision').value;
    const comments = document.getElementById('modal_comments').value.trim();
    
    if ((decision === 'rejected_resubmit' || decision === 'rejected') && !comments) {
        e.preventDefault();
        alert('Comments are required for rejections. Please explain your decision.');
        document.getElementById('modal_comments').focus();
        return false;
    }
    
    if (decision === 'escalated') {
        const nextApprover = document.getElementById('modal_next_approver_id').value;
        if (!nextApprover) {
            e.preventDefault();
            alert('Please select the next approver for escalation.');
            document.getElementById('modal_next_approver_id').focus();
            return false;
        }
    }
});
</script>
@endif

@endsection