{{-- Extends layout --}}
@extends(getThemeBasePath())

@section('page_title')
    {{ $page_title ?? '' }}
@endsection
<style>
    /* Container */
.release-container {
    background: #f5f7fa;
    border-radius: 20px;
    padding: 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    min-height: 600px;
    display: flex;
    flex-direction: column;
}

/* Header */
.release-header {
    padding: 3rem 2rem;
    background: #0b4ea1;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.release-header-icon {
    background: rgba(255, 255, 255, 0.2);
    padding: 1rem;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    width: 80px;
    height: 80px;
}

.release-header-info {
    flex: 1;
    color: #fff;
}

.release-heading {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.release-title {
    margin: 0;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

.release-separator {
    color: rgba(255,255,255,0.6);
    font-size: 1.5rem;
    font-weight: 300;
}

.release-subtitle {
    font-size: 1.6rem;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
}

/* Tags */
.release-tags {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.tag-badge {
    background: rgba(255, 255, 255, 0.25);
    padding: .4rem .8rem;
    border-radius: 20px;
    font-size: .85rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Content area */
.release-content {
    padding: 3rem 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.section-title {
    color: #333;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-box {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 15px;
    padding: 2rem;
    color: #333;
    line-height: 1.8;
    font-size: .95rem;
}

.empty-text {
    margin: 0;
    opacity: .8;
}

/* Attachments */
.attachments-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.attachment-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 15px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    transition: .3s;
    cursor: pointer;
    flex: 0 1 calc(50% - 0.5rem);
    min-width: 250px;
}

.attachment-card:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

.attachment-name {
    margin: 0;
    color: #333;
    font-weight: 700;
    font-size: .9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.release-meta {
    margin-top: 15px;
}

.release-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.tag-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 30px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.release-alerts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.alert-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
}

.alert-danger {
    background: rgba(255, 77, 79, .15);
    border: 1px solid rgba(255, 77, 79, .35);
    color: #ff6b6b;
}

.alert-warning {
    background: rgba(255, 170, 0, .15);
    border: 1px solid rgba(255, 170, 0, .35);
    color: #ffb020;
}

.alert-success {
    background: rgba(34, 197, 94, .15);
    border: 1px solid rgba(34, 197, 94, .35);
    color: #22c55e;
}
</style>

@section('content')

@include('backend.hr.support_center.header')

<div class="release-container">

    <!-- Header -->
    <div class="release-header">
        <div class="release-header-icon">
            {!! theme()->getSvgIcon('icons/duotune/abstract/abs027.svg', 'svg-icon-white svg-icon-3x') !!}
        </div>

        <div class="release-header-info">
                <div class="release-heading">
                    <h1 class="release-title">
                        {{ $release_details['release_version'] ?? 'Release' }}
                    </h1>

                    <span class="release-separator">|</span>

                    <span class="release-subtitle"><b>
                        {{ $release_details['title'] ?? 'Release Details' }}
                    </b></span>
                </div>

          <div class="release-meta">

            <!-- Top Row -->
            <div class="release-tags">

                <span class="tag-badge">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14v11z"/>
                    </svg>

                    {{ isset($release_details['publish_date'])
                        ? \Carbon\Carbon::parse($release_details['publish_date'])->format('M d, Y')
                        : 'N/A' }}
                </span>
            </div>

    <!-- Alert Row -->
    <div class="release-alerts">

        @if(($release_details['important_update'] ?? '') == 'Yes')
            <span class="alert-badge alert-danger">
              <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
                 Critical / Important Update
            </span>
        @endif

        @if(($release_details['has_breaking_changes'] ?? '') == 'Yes')
            <span class="alert-badge alert-warning">
                <i class="fa fa-link" aria-hidden="true"></i>
                Breaking or Incompatible Changes
            </span>
        @endif

        @if(($release_details['requires_action'] ?? '') == 'Yes')
            <span class="alert-badge alert-success">
                <i class="fa fa-bell"  aria-hidden="true"></i>
                Action Required
            </span>
        @endif

    </div>

</div>
        </div>
        
    </div>

    <!-- Content -->
    <div class="release-content">

        <!-- Description -->
        <div>
            <h3 class="section-title">Description</h3>

            <div class="section-box">
                {!! $release_details['description'] ?? '<p class="empty-text">No description available.</p>' !!}
            </div>
        </div>

        <!-- Attachments -->
        @if (!empty($release_details['attachments']))
            <div>
                <h3 class="section-title">Attachments</h3>

                <div class="attachments-grid">
                    @foreach ($release_details['attachments'] as $item)
                        <a href="{{ $item }}" target="_blank" class="attachment-card">
                            <div class="attachment-info">
                                <p class="attachment-name" title="{{ basename($item) }}">
                                    {{ basename($item) }}
                                </p>
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
        @endif

    </div>
</div>
@endsection