@extends('frontend.master.master')

@section('content')
    <!-- Preview Mode Banner -->
    @if(isset($isPreview) && $isPreview)
    <div class="alert alert-warning alert-dismissible fade show m-0" role="alert" style="border-radius: 0;">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <i class="fas fa-eye me-2"></i>
                    <strong>Mode Preview:</strong> Halaman ini menampilkan semua konten termasuk yang belum dipublish (status: entry)
                </div>
                <div class="col-md-4 text-end">
                    <small class="text-muted">Preview Layout MSJ Career</small>
                </div>
            </div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif

    <!-- Header Section with Pattern Background -->
    <section class="krirlp-header">
        <div class="container">
            <h1 class="krirlp-title">{{ $nama_menu }}</h1>
            <p class="krirlp-subtitle">
                @if ($url == 'krirlp')
                    Jadilah bagian dari tim kami yang terus berkembang
                @elseif ($url == 'mgnglp')
                    Bergabunglah bersama kami dan raih pengalaman nyata di dunia industri nonwoven
                @endif
            </p>
        </div>
    </section>

    <!-- Hero Slider Section -->
    <section class="krirlp-hero">
        @if(isset($sliders) && $sliders->count() > 0)
            <div class="krirlp-slider-container">
                <div class="swiper krirlp-swiper">
                    <div class="swiper-wrapper">
                        @foreach($sliders as $slider)
                            <div class="swiper-slide">
                                @php
                                    // Use web-optimized version if exists, fallback to original
                                    $webOptimizedPath = public_path('storage/' . $slider->image . '_web.jpg');
                                    $imageSrc = file_exists($webOptimizedPath) 
                                        ? asset('storage/' . $slider->image . '_web.jpg') 
                                        : asset('storage/' . $slider->image);
                                @endphp
                                <img src="{{ $imageSrc }}" alt="Slider {{ $slider->urut }}" class="krirlp-slider-image">
                            </div>
                        @endforeach
                    </div>
                    <!-- Pagination -->
                    <div class="swiper-pagination krirlp-pagination"></div>
                    <!-- Navigation buttons -->
                    <div class="swiper-button-prev krirlp-nav-prev"></div>
                    <div class="swiper-button-next krirlp-nav-next"></div>
                </div>
            </div>
        @else
            <!-- Fallback to static image if no slider -->
            <div class="krirlp-hero-image">
                @if ($url == 'krirlp')
                    <img src="{{ asset('assets_career/img/Header-Karir.png') }}" alt="Karir" class="img-fluid">
                @elseif ($url == 'mgnglp')
                    <img src="{{ asset('assets_career/img/Header-Magang.png') }}" alt="Magang" class="img-fluid">
                @endif
            </div>
        @endif
    </section>

    <!-- Search Bar Section -->
    <section class="krirlp-search-section">
        <div class="container">
            <div class="krirlp-search-wrapper">
                <form action="" method="GET" class="krirlp-search-form">
                    <div class="krirlp-search-input-wrapper">
                        <i class="bi bi-search"></i>
                        <input type="text" name="search" class="krirlp-search-input" 
                               placeholder="Cari lowongan disini..." 
                               value="{{ request('search') }}">
                    </div>
                    <button type="submit" class="krirlp-search-btn">Cari</button>
                </form>
            </div>
        </div>
    </section>

    <!-- Content Section with Pattern Body Background -->
    <section class="krirlp-content">
        <div class="container">
            <div class="krirlp-card-wrapper">
                <div class="row g-4">
                    @forelse ($datas as $service)
                        @php
                            $encryptedId = Crypt::encrypt($service->id);
                            $deptId = $service->dept_id ?? null;
                            $deptName = isset($deptId) && isset($department[$deptId]) ? $department[$deptId] : 'Tidak Ada Konten';
                            $deptIcon = isset($deptId) && isset($deptIcons) && isset($deptIcons[$deptId]) ? $deptIcons[$deptId] : null;
                        @endphp
                        <div class="col-12 col-md-6" data-aos="fade-up" data-aos-delay="100">
                            <div class="krirlp-card">
                                <div class="krirlp-card-content">
                                    <!-- Title and Badge -->
                                    <div class="krirlp-card-header">
                                        <div class="krirlp-card-info">
                                            <h3 class="krirlp-card-title">
                                                {{ $service->title ?? 'Tidak Ada Konten' }}
                                                @if(isset($isPreview) && $isPreview && isset($service->status))
                                                    @if($service->status == 'preview')
                                                        <span class="badge bg-info text-white ms-2" style="font-size: 0.65rem;">
                                                            <i class="fas fa-eye me-1"></i>Preview Draft
                                                        </span>
                                                    @elseif($service->status == 'entry')
                                                        <span class="badge bg-warning text-dark ms-2" style="font-size: 0.65rem;">
                                                            <i class="fas fa-edit me-1"></i>Draft
                                                        </span>
                                                    @endif
                                                @endif
                                            </h3>
                                            <span class="krirlp-badge">{{ $deptName }}</span>
                                        </div>
                                        <div class="krirlp-card-icon">
                                            @if($deptIcon)
                                                <img src="{{ asset('storage/' . $deptIcon) }}" alt="{{ $deptName }}" class="department-icon">
                                            @else
                                                <div class="department-icon-placeholder">
                                                    <i class="bi bi-briefcase"></i>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                    
                                    <!-- Meta Info -->
                                    <div class="krirlp-card-meta">
                                        <div class="krirlp-meta-item">
                                            <i class="bi bi-calendar3"></i>
                                            <span>
                                                @if(isset($service->end_regis) && $service->end_regis)
                                                    Batas melamar: {{ \Carbon\Carbon::parse($service->end_regis)->format('d M Y') }}
                                                @else
                                                    Batas tanggal melamar
                                                @endif
                                            </span>
                                        </div>
                                    </div>
                                    
                                    <!-- Action Button -->
                                    <div class="krirlp-card-action">
                                        @if(isset($isPreview) && $isPreview)
                                            <a href="{{ route('preview.menu.detail', [
                                                'url' => $url,
                                                'slug' => \Illuminate\Support\Str::slug($service->title ?? 'default-slug'),
                                            ]) }}?id_data={{ urlencode($encryptedId) }}{{ isset($service->status) && $service->status == 'preview' ? '&preview_mode=temp' : '' }}" 
                                               class="btn-krirlp-detail">
                                                Lihat detail
                                            </a>
                                        @else
                                            <a href="{{ route('layout.detail', [
                                                'url' => $url,
                                                'slug' => \Illuminate\Support\Str::slug($service->title ?? 'default-slug'),
                                            ]) }}?id_data={{ urlencode($encryptedId) }}" 
                                               class="btn-krirlp-detail">
                                                Lihat detail
                                            </a>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="col-12">
                            <div class="krirlp-empty">
                                <i class="bi bi-briefcase"></i>
                                <p>Tidak ada lowongan yang ditemukan.</p>
                            </div>
                        </div>
                    @endforelse
                </div>
            </div>

            <!-- Pagination -->
            @if($datas->hasPages())
                <div class="krirlp-pagination">
                    <nav class="pagination-nav">
                        {{-- Previous Page Link --}}
                        @if ($datas->onFirstPage())
                            <span class="pagination-link prev disabled">Sebelumnya</span>
                        @else
                            <a href="{{ $datas->previousPageUrl() }}" class="pagination-link prev">Sebelumnya</a>
                        @endif

                        {{-- Pagination Numbers --}}
                        <div class="pagination-numbers">
                            @foreach ($datas->getUrlRange(1, $datas->lastPage()) as $page => $pageUrl)
                                @if ($page == $datas->currentPage())
                                    <span class="pagination-link active">{{ $page }}</span>
                                @else
                                    <a href="{{ $pageUrl }}" class="pagination-link">{{ $page }}</a>
                                @endif
                            @endforeach
                        </div>

                        {{-- Next Page Link --}}
                        @if ($datas->hasMorePages())
                            <a href="{{ $datas->nextPageUrl() }}" class="pagination-link next">Berikutnya</a>
                        @else
                            <span class="pagination-link next disabled">Berikutnya</span>
                        @endif
                    </nav>
                </div>
            @endif
        </div>
    </section>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize Krirlp Slider
    const krirlpSwiperEl = document.querySelector('.krirlp-swiper');
    if (krirlpSwiperEl) {
        new Swiper('.krirlp-swiper', {
            loop: true,
            autoplay: {
                delay: 5000,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.krirlp-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.krirlp-nav-next',
                prevEl: '.krirlp-nav-prev',
            },
            effect: 'fade',
            fadeEffect: {
                crossFade: true
            },
        });
    }
});
</script>
@endpush

@push('styles')
<style>
/* Krirlp Slider Styles */
.krirlp-slider-container {
    position: relative;
    width: 100%;
    max-height: 500px;
    overflow: hidden;
}

.krirlp-swiper {
    width: 100%;
    height: 100%;
}

.krirlp-swiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.krirlp-slider-image {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: cover;
}

.krirlp-swiper .swiper-button-prev,
.krirlp-swiper .swiper-button-next {
    color: #fff;
    background: rgba(24, 109, 133, 0.7);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.krirlp-swiper .swiper-button-prev:hover,
.krirlp-swiper .swiper-button-next:hover {
    background: rgba(24, 109, 133, 0.9);
}

.krirlp-swiper .swiper-button-prev:after,
.krirlp-swiper .swiper-button-next:after {
    font-size: 18px;
    font-weight: bold;
}

.krirlp-swiper .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.6;
}

.krirlp-swiper .swiper-pagination-bullet-active {
    background: #186d85;
    opacity: 1;
}

@media (max-width: 768px) {
    .krirlp-slider-container {
        max-height: 300px;
    }
    
    .krirlp-slider-image {
        max-height: 300px;
    }
    
    .krirlp-swiper .swiper-button-prev,
    .krirlp-swiper .swiper-button-next {
        width: 35px;
        height: 35px;
    }
    
    .krirlp-swiper .swiper-button-prev:after,
    .krirlp-swiper .swiper-button-next:after {
        font-size: 14px;
    }
}
</style>
@endpush
@endsection