@extends('layouts.dashboard.superadminapp')

@section('title', 'Sales RFQ Details')

@section('styles')
<style>
    /* Modern Purple Theme Variables */
    :root {
        --purple-primary: #8b5cf6;
        --purple-dark: #7c3aed;
        --purple-light: #a78bfa;
        --teal-primary: #06b6d4;
        --teal-dark: #0891b2;
        --success: #10b981;
        --success-dark: #059669;
        --danger: #ef4444;
        --danger-dark: #dc2626;
        --warning: #f59e0b;
        --info: #06b6d4;
        --gray-50: #f8fafc;
        --gray-100: #f1f5f9;
        --gray-200: #e2e8f0;
        --gray-300: #cbd5e1;
        --gray-600: #475569;
        --gray-700: #334155;
        --gray-800: #1e293b;
        --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
        --radius: 0.5rem;
        --radius-md: 0.75rem;
        --radius-lg: 1rem;
    }

    /* Modern Page Header */
    .modern-page-header {
        background: linear-gradient(135deg, #fff 0%, var(--gray-50) 100%);
        border-radius: var(--radius-lg);
        padding: 1.25rem 1.5rem;
        margin-bottom: 1.5rem;
        box-shadow: var(--shadow-md);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .header-left {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .icon-wrapper {
        width: 3rem;
        height: 3rem;
        background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%);
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
    }

    .icon-wrapper i {
        font-size: 1.5rem;
        color: #fff;
    }

    .header-title {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .header-title h1 {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--gray-800);
        margin: 0;
        line-height: 1.2;
    }

    .header-subtitle {
        font-size: 0.875rem;
        color: var(--gray-600);
        font-weight: 500;
    }

    /* DateTime Display */
    .datetime-display {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .date-box, .time-box {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background: var(--gray-50);
        padding: 0.5rem 1rem;
        border-radius: var(--radius);
        border: 1px solid var(--gray-200);
        font-size: 0.875rem;
        color: var(--gray-700);
        font-weight: 500;
    }

    .date-box i {
        color: var(--purple-primary);
        font-size: 0.9rem;
    }

    .time-box {
        background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%);
        color: #fff;
        border: none;
        min-width: 95px;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(139, 92, 246, 0.25);
    }

    .time-box i {
        color: rgba(255, 255, 255, 0.9);
    }

    .time-box .display-time {
        font-family: 'SF Mono', 'Courier New', monospace;
        font-weight: 600;
        letter-spacing: 0.5px;
    }

    /* RFQ Header Card */
    .rfq-header-card {
        background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%);
        color: #fff;
        padding: 1.5rem;
        border-radius: var(--radius-lg);
        margin-bottom: 1.5rem;
        box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3);
    }

    .rfq-header-card h2 {
        font-size: 1.75rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .rfq-company {
        font-size: 1rem;
        opacity: 0.95;
        margin-bottom: 1rem;
    }

    .rfq-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: center;
    }

    .meta-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: rgba(255, 255, 255, 0.2);
        padding: 0.5rem 1rem;
        border-radius: var(--radius);
        font-size: 0.875rem;
        font-weight: 500;
        backdrop-filter: blur(10px);
    }

    .meta-badge i {
        opacity: 0.9;
    }

    /* Quick Info Cards */
    .quick-info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .quick-info-card {
        background: #fff;
        border-radius: var(--radius-lg);
        padding: 1.25rem;
        box-shadow: var(--shadow-md);
        display: flex;
        align-items: center;
        gap: 1rem;
        transition: all 0.2s;
    }

    .quick-info-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

    .quick-info-icon {
        width: 3rem;
        height: 3rem;
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        flex-shrink: 0;
    }

    .quick-info-icon.purple {
        background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%);
        color: #fff;
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
    }

    .quick-info-icon.cyan {
        background: linear-gradient(135deg, var(--teal-primary) 0%, var(--teal-dark) 100%);
        color: #fff;
        box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
    }

    .quick-info-icon.orange {
        background: linear-gradient(135deg, var(--warning) 0%, #d97706 100%);
        color: #fff;
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
    }

    .quick-info-icon.green {
        background: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%);
        color: #fff;
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    }

    .quick-info-content {
        flex: 1;
    }

    .quick-info-label {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--gray-600);
        margin-bottom: 0.25rem;
        font-weight: 600;
    }

    .quick-info-value {
        font-size: 1rem;
        font-weight: 700;
        color: var(--gray-800);
        line-height: 1.3;
    }

    /* Detail Cards */
    .detail-card {
        border: none;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-md);
        overflow: hidden;
        margin-bottom: 1.5rem;
        transition: all 0.2s;
    }

    .detail-card:hover {
        box-shadow: var(--shadow-lg);
    }

    .detail-header {
        background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%);
        color: #fff;
        padding: 1rem 1.5rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .detail-header h3 {
        font-size: 1rem;
        font-weight: 600;
        margin: 0;
        letter-spacing: 0.3px;
    }

    .detail-header i {
        font-size: 1.1rem;
        opacity: 0.9;
    }

    .detail-header.info {
        background: linear-gradient(135deg, var(--teal-primary) 0%, var(--teal-dark) 100%);
    }

    .detail-header.success {
        background: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%);
    }

    .detail-header.warning {
        background: linear-gradient(135deg, var(--warning) 0%, #d97706 100%);
    }

    .detail-header.secondary {
        background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    }

    .detail-body {
        padding: 1.5rem;
        background: #fff;
    }

    /* Detail Grid */
    .detail-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    .detail-item {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
    }

    .detail-item.full-width {
        grid-column: 1 / -1;
    }

    .detail-label {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--gray-600);
        font-weight: 600;
    }

    .detail-value {
        font-size: 0.9375rem;
        color: var(--gray-800);
        font-weight: 500;
    }

    .detail-value strong {
        font-weight: 700;
        color: var(--purple-primary);
    }

    /* Status Badges */
    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        border-radius: var(--radius);
        font-size: 0.875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .status-badge.approved {
        background: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%);
        color: #fff;
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    }

    .status-badge.rejected {
        background: linear-gradient(135deg, var(--danger) 0%, var(--danger-dark) 100%);
        color: #fff;
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
    }

    .status-badge.pending {
        background: linear-gradient(135deg, var(--warning) 0%, #d97706 100%);
        color: #fff;
        box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
    }

    /* Material Badges */
    .materials-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .material-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.625rem 1rem;
        background: linear-gradient(135deg, var(--gray-50) 0%, #fff 100%);
        border: 2px solid var(--gray-200);
        border-radius: var(--radius);
        color: var(--gray-800);
        font-size: 0.875rem;
        font-weight: 500;
        transition: all 0.2s;
    }

    .material-badge:hover {
        border-color: var(--success);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
    }

    .material-badge i {
        color: var(--success);
        font-size: 0.9rem;
    }

    /* Notes Section */
    .note-box {
        background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
        border-left: 4px solid var(--warning);
        padding: 1rem 1.25rem;
        border-radius: var(--radius);
        font-size: 0.9375rem;
        color: var(--gray-700);
        line-height: 1.6;
    }

    /* File Section */
    .files-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1rem;
    }

    .file-group h4 {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--gray-600);
        font-weight: 600;
        margin-bottom: 0.75rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .file-link {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.625rem 1rem;
        background: linear-gradient(135deg, var(--gray-50) 0%, #fff 100%);
        border: 2px solid var(--gray-200);
        border-radius: var(--radius);
        color: var(--purple-primary);
        text-decoration: none;
        font-size: 0.875rem;
        font-weight: 500;
        transition: all 0.2s;
        margin-bottom: 0.5rem;
    }

    .file-link:hover {
        background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%);
        color: #fff;
        border-color: var(--purple-primary);
        transform: translateX(4px);
        text-decoration: none;
    }

    .file-link i {
        font-size: 0.9rem;
    }

    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 2rem;
        color: var(--gray-600);
        font-size: 0.9375rem;
    }

    .empty-state i {
        font-size: 2rem;
        color: var(--gray-300);
        margin-bottom: 0.75rem;
    }

    /* Action Buttons */
    .action-buttons {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 1.5rem 0;
    }

    .btn {
        font-size: 0.9375rem;
        font-weight: 600;
        padding: 0.625rem 1.25rem;
        border-radius: var(--radius);
        transition: all 0.2s;
        border: none;
        box-shadow: var(--shadow-sm);
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    .btn:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow);
    }

    .btn-primary {
        background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%);
        color: #fff;
    }

    .btn-primary:hover {
        background: linear-gradient(135deg, var(--purple-dark) 0%, #6d28d9 100%);
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
        color: #fff;
    }

    .btn-secondary {
        background: linear-gradient(135deg, #6c757d 0%, #545b62 100%);
        color: #fff;
    }

    .btn-secondary:hover {
        background: linear-gradient(135deg, #545b62 0%, #3d4349 100%);
        box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
        color: #fff;
    }

    .btn i {
        font-size: 0.875rem;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .modern-page-header {
            flex-direction: column;
            align-items: flex-start;
        }

        .datetime-display {
            width: 100%;
            justify-content: flex-start;
        }

        .detail-grid {
            grid-template-columns: 1fr;
        }

        .rfq-header-card {
            padding: 1.25rem;
        }

        .action-buttons {
            flex-direction: column;
            align-items: stretch;
        }

        .action-buttons .btn {
            width: 100%;
            justify-content: center;
        }
    }
</style>
@endsection

@section('content')
<div class="container-fluid">

    <!-- Modern Page Header -->
    <div class="modern-page-header">
        <div class="header-left">
            <div class="icon-wrapper">
                <i class="fas fa-file-alt"></i>
            </div>
            <div class="header-title">
                <h1>Sales RFQ Details</h1>
                <div class="header-subtitle">Request for Quotation Information</div>
            </div>
        </div>
        <div class="datetime-display">
            <div class="date-box">
                <i class="far fa-calendar-alt"></i>
                <span id="day">{{ now()->format('l') }}</span>,
                <span id="daynum">{{ now()->format('d') }}</span>
                <span id="month">{{ now()->format('F') }}</span>
                <span id="year">{{ now()->format('Y') }}</span>
            </div>
            <div class="time-box">
                <i class="far fa-clock"></i>
                <span class="display-time"></span>
            </div>
        </div>
    </div>

    <!-- RFQ Header Card -->
    <div class="rfq-header-card">
        <h2>{{ $rfq->rfq_no }}</h2>
        <div class="rfq-company">{{ $rfq->customerInfo->company ?? 'N/A' }}</div>
        <div class="rfq-meta">
            @if ($rfq->status == 'approved')
                <span class="meta-badge">
                    <i class="fas fa-check-circle"></i> Approved
                </span>
            @elseif ($rfq->status == 'rejected')
                <span class="meta-badge">
                    <i class="fas fa-times-circle"></i> Rejected
                </span>
            @else
                <span class="meta-badge">
                    <i class="fas fa-clock"></i> Pending
                </span>
            @endif
            <span class="meta-badge">
                <i class="fas fa-calendar"></i> {{ \Carbon\Carbon::parse($rfq->rfq_date)->format('d M Y') }}
            </span>
        </div>
    </div>

    <!-- Quick Info Grid -->
    <div class="quick-info-grid">
        <div class="quick-info-card">
            <div class="quick-info-icon purple">
                <i class="fas fa-box"></i>
            </div>
            <div class="quick-info-content">
                <div class="quick-info-label">RFQ Type</div>
                <div class="quick-info-value">{{ $rfq->rfq_type ?: '-' }}</div>
            </div>
        </div>
        <div class="quick-info-card">
            <div class="quick-info-icon cyan">
                <i class="fas fa-cube"></i>
            </div>
            <div class="quick-info-content">
                <div class="quick-info-label">Product Type</div>
                <div class="quick-info-value">{{ $rfq->product_type ?: '-' }}</div>
            </div>
        </div>
        <div class="quick-info-card">
            <div class="quick-info-icon orange">
                <i class="fas fa-hashtag"></i>
            </div>
            <div class="quick-info-content">
                <div class="quick-info-label">Part No</div>
                <div class="quick-info-value">{{ $rfq->part_no ?: '-' }}</div>
            </div>
        </div>
        <div class="quick-info-card">
            <div class="quick-info-icon green">
                <i class="fas fa-layer-group"></i>
            </div>
            <div class="quick-info-content">
                <div class="quick-info-label">Quantity</div>
                <div class="quick-info-value">{{ $rfq->quantity }} {{ $rfq->uom }}</div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- RFQ Information Card -->
        <div class="col-lg-6">
            <div class="detail-card">
                <div class="detail-header">
                    <i class="fas fa-info-circle"></i>
                    <h3>RFQ Information</h3>
                </div>
                <div class="detail-body">
                    <div class="detail-grid">
                        <div class="detail-item">
                            <span class="detail-label">RFQ Number</span>
                            <span class="detail-value"><strong>{{ $rfq->rfq_no }}</strong></span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">RFQ Date</span>
                            <span class="detail-value">{{ \Carbon\Carbon::parse($rfq->rfq_date)->format('d-m-Y') }}</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">Customer</span>
                            <span class="detail-value">{{ $rfq->customerInfo->company ?? '-' }}</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">Customer Ref No</span>
                            <span class="detail-value">{{ $rfq->cus_ref_no ?: '-' }}</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">RFQ Type</span>
                            <span class="detail-value">{{ $rfq->rfq_type ?: '-' }}</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">Product Type</span>
                            <span class="detail-value">{{ $rfq->product_type ?: '-' }}</span>
                        </div>
                        <div class="detail-item full-width">
                            <span class="detail-label">Status</span>
                            <div>
                                @if ($rfq->status == 'approved')
                                    <span class="status-badge approved">
                                        <i class="fas fa-check-circle"></i> Approved
                                    </span>
                                @elseif ($rfq->status == 'rejected')
                                    <span class="status-badge rejected">
                                        <i class="fas fa-times-circle"></i> Rejected
                                    </span>
                                @else
                                    <span class="status-badge pending">
                                        <i class="fas fa-clock"></i> Pending
                                    </span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Product Details Card -->
        <div class="col-lg-6">
            <div class="detail-card">
                <div class="detail-header info">
                    <i class="fas fa-cube"></i>
                    <h3>Product Details</h3>
                </div>
                <div class="detail-body">
                    <div class="detail-grid">
                        <div class="detail-item">
                            <span class="detail-label">Part Number</span>
                            <span class="detail-value">{{ $rfq->part_no ?: '-' }}</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">Project/Material No</span>
                            <span class="detail-value">{{ $rfq->project_material_no ?: '-' }}</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">Drawing Number</span>
                            <span class="detail-value">{{ $rfq->drawing_no ?: '-' }}</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">Drawing Revision</span>
                            <span class="detail-value">{{ $rfq->drawing_rev ?: '-' }}</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">Quantity</span>
                            <span class="detail-value"><strong>{{ $rfq->quantity }}</strong> {{ $rfq->uom }}</span>
                        </div>
                        <div class="detail-item full-width">
                            <span class="detail-label">Description</span>
                            <span class="detail-value">{{ $rfq->description ?: '-' }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Raw Materials Card -->
    <div class="detail-card">
        <div class="detail-header success">
            <i class="fas fa-cubes"></i>
            <h3>Raw Materials</h3>
        </div>
        <div class="detail-body">
            @php
                $rawMaterials = json_decode($rfq->raw_material, true);
            @endphp
            @if (is_array($rawMaterials) && count($rawMaterials))
                <div class="materials-grid">
                    @foreach ($rawMaterials as $matId)
                        <div class="material-badge">
                            <i class="fas fa-check-circle"></i>
                            {{ $rawMaterialNames[$matId] ?? 'Unknown Material (ID: '.$matId.')' }}
                        </div>
                    @endforeach
                </div>
            @else
                <div class="empty-state">
                    <i class="fas fa-info-circle"></i>
                    <p class="mb-0">No raw materials specified</p>
                </div>
            @endif
        </div>
    </div>

    <!-- Notes Card -->
    @if($rfq->note)
    <div class="detail-card">
        <div class="detail-header warning">
            <i class="fas fa-sticky-note"></i>
            <h3>Additional Notes</h3>
        </div>
        <div class="detail-body">
            <div class="note-box">{{ $rfq->note }}</div>
        </div>
    </div>
    @endif

    <!-- Attachments Card -->
    <div class="detail-card">
        <div class="detail-header secondary">
            <i class="fas fa-paperclip"></i>
            <h3>Attachments</h3>
        </div>
        <div class="detail-body">
            @php
                $fileTypes = [
                    'drawing' => ['label' => 'Drawing Files', 'icon' => 'fa-drafting-compass'],
                    'material_spec' => ['label' => 'Material Specification', 'icon' => 'fa-file-alt'],
                    'rfq_form' => ['label' => 'RFQ Form Files', 'icon' => 'fa-file-invoice'],
                    'annexure' => ['label' => 'Annexure Files', 'icon' => 'fa-file-archive']
                ];
                $hasFiles = false;
            @endphp

            <div class="files-grid">
                @foreach ($fileTypes as $type => $info)
                    @php
                        $files = $rfq->rfqFiles->where('file_type', $type);
                    @endphp
                    @if ($files->count())
                        @php $hasFiles = true; @endphp
                        <div class="file-group">
                            <h4>
                                <i class="fas {{ $info['icon'] }}"></i> {{ $info['label'] }}
                            </h4>
                            @foreach ($files as $file)
                                <a href="{{ asset('storage/' . $file->file_path) }}"
                                   target="_blank"
                                   class="file-link"
                                   title="{{ $file->file_name }}">
                                   <i class="fas fa-external-link-alt"></i>
                                   {{ Str::limit($file->file_name, 25) }}
                                </a>
                            @endforeach
                        </div>
                    @endif
                @endforeach
            </div>

            @if(!$hasFiles)
                <div class="empty-state">
                    <i class="fas fa-paperclip"></i>
                    <p class="mb-0">No attachments available</p>
                </div>
            @endif
        </div>
    </div>

    <!-- Action Buttons -->
    <div class="action-buttons">
        <a href="{{ route('superadmin.salesbom.rfq.rfqdetails') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Back to List
        </a>
        <a href="{{ route('superadmin.salesbom.rfq.edit', $rfq->id) }}" class="btn btn-primary">
            <i class="fas fa-edit"></i> Edit RFQ
        </a>
    </div>

</div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    // Dynamic Date/Time Update
    function updateDateTime() {
        const now = new Date();
        const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
        const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

        document.getElementById('day').textContent = days[now.getDay()];
        document.getElementById('daynum').textContent = now.getDate();
        document.getElementById('month').textContent = months[now.getMonth()];
        document.getElementById('year').textContent = now.getFullYear();

        const timeStr = now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
        document.querySelector('.display-time').textContent = timeStr;
    }
    updateDateTime();
    setInterval(updateDateTime, 1000);
});
</script>
@endsection
