@extends("main")
@section("title", "Promo Terbatas - Dino Logistics")

@push('styles')
    {{-- Menggunakan style tracking untuk konsistensi Header Page --}}
    <link rel="stylesheet" href="{{ asset('css/tracking.css') }}">
    {{-- Memastikan style utama termuat --}}
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
    
    <style>
        /* Custom Breadcrumb Style untuk Header Biru */
        .breadcrumb-item + .breadcrumb-item::before {
            color: rgba(255, 255, 255, 0.5);
        }
        .breadcrumb-item a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            font-weight: 500;
        }
        .breadcrumb-item a:hover {
            color: #ffffff;
            text-decoration: underline;
        }
        .breadcrumb-item.active {
            color: #ffffff;
            font-weight: 700;
        }
        
        /* Adjustment untuk page title agar breadcrumb pas */
        .page-title .container {
            position: relative;
            z-index: 2;
        }

        /* Promo Card Styling - Mirip Service tapi dengan sentuhan promo */
        .promo-card {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            display: flex;
            flex-direction: column;
            height: 100%;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
        }

        .promo-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(5, 84, 198, 0.15);
        }

        /* Promo Image Container */
        .promo-img-wrapper {
            width: 100%;
            height: 240px;
            background-size: cover;
            background-position: center;
            position: relative;
            overflow: hidden;
            transition: transform 0.4s ease;
        }

        .promo-card:hover .promo-img-wrapper {
            transform: scale(1.05);
        }

        .promo-img-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Promo Badge */
        .promo-badge {
            position: absolute;
            top: 16px;
            right: 16px;
            background: linear-gradient(135deg, #FF3D00 0%, #FF6F00 100%);
            color: white;
            padding: 8px 20px;
            border-radius: 50px;
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            box-shadow: 0 4px 15px rgba(255, 61, 0, 0.4);
            animation: pulse-badge 2s infinite;
        }

        @keyframes pulse-badge {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        /* Promo Content */
        .promo-content {
            padding: 28px;
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .promo-content h3 {
            font-size: 22px;
            font-weight: 800;
            line-height: 1.3;
            margin: 0;
            color: #1f2937;
            transition: color 0.3s ease;
        }

        .promo-card:hover .promo-content h3 {
            color: #0554c6;
        }

        .promo-desc {
            font-size: 15px;
            line-height: 1.6;
            margin: 0;
            flex: 1;
            color: #6b7280;
        }

        /* Promo Date Info */
        .promo-date-info {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: #9ca3af;
            margin-top: 8px;
            padding-top: 12px;
            border-top: 1px solid #f3f4f6;
        }

        .promo-date-info i {
            color: #0554c6;
        }

        /* Promo Footer */
        .promo-footer {
            padding: 0 28px 28px 28px;
            border-top: 1px solid #f3f4f6;
            padding-top: 16px;
            margin-top: auto;
        }

        .btn-lihat-promo {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #0554c6;
            font-weight: 700;
            font-size: 15px;
            text-decoration: none;
            transition: all 0.3s ease;
            position: relative;
        }

        .btn-lihat-promo::after {
            content: '→';
            font-size: 18px;
            transition: transform 0.3s ease;
        }

        .btn-lihat-promo:hover {
            color: #0442a0;
            gap: 12px;
        }

        .btn-lihat-promo:hover::after {
            transform: translateX(5px);
        }

        /* Grid Layout */
        .promo-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 32px;
            margin-top: 40px;
        }

        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 80px 20px;
            background: white;
            border-radius: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        .empty-state i {
            font-size: 64px;
            color: #cbd5e1;
            margin-bottom: 20px;
        }

        .empty-state h4 {
            color: #6b7280;
            font-size: 20px;
            margin-bottom: 10px;
        }

        .empty-state p {
            color: #9ca3af;
            font-size: 15px;
        }
    </style>
@endpush

@section("content")

  <main class="main">

    <!-- HEADER PAGE (Blue Gradient) -->
    <div class="page-title">
      <div class="container text-center">
        <h1>Promo Terbatas</h1>
        <p>Manfaatkan penawaran spesial untuk penghematan ongkos kirim Anda</p>
      </div>
    </div>

    <!-- PROMO LIST SECTION -->
    <section id="promo-list" class="section bg-light" style="margin-top: -60px; position: relative; z-index: 10; padding-top: 80px;">
      <div class="container">
        
        <!-- Promo Grid -->
        <div class="promo-grid">

          @forelse($promos as $promo)
            <div class="promo-card">
                <!-- Gambar Promo -->
                <div class="promo-img-wrapper">
                    <img src="{{ $promo->image_url }}" 
                         alt="{{ $promo->name }}" 
                         loading="lazy">
                    <span class="promo-badge">Promo</span>
                </div>

                <!-- Konten -->
                <div class="promo-content">
                    <h3>{{ $promo->name }}</h3>
                    <div class="promo-desc">
                        {{-- Batasi teks agar kartu rapi --}}
                        {!! Str::limit(strip_tags($promo->description), 120) !!}
                    </div>
                    
                    <!-- Tanggal Promo -->
                    <div class="promo-date-info">
                        <i class="fas fa-calendar-alt"></i>
                        <span>{{ $promo->start_date->format('d M Y') }} - {{ $promo->end_date->format('d M Y') }}</span>
                    </div>
                </div>

                <!-- Footer Card (Tombol) -->
                <div class="promo-footer">
                    <a href="{{ route('promos.show', $promo->id) }}" class="btn-lihat-promo">
                        Lihat Detail
                    </a>
                </div>
            </div>
          @empty
            <div class="col-12">
                <div class="empty-state">
                    <i class="fas fa-tags"></i>
                    <h4>Belum Ada Promo Aktif</h4>
                    <p>Saat ini belum ada promo yang tersedia. Pantau terus halaman ini untuk penawaran menarik!</p>
                </div>
            </div>
          @endforelse

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

@php
$message = urlencode('Halo, saya ingin bertanya tentang promo.');
@endphp


    <!-- CALL TO ACTION -->
    <section class="section">
        <div class="container">
            <div class="wrapper-dark" style="border-radius: 20px; text-align: center; padding: 60px 40px;">
                <h2 style="margin-bottom: 15px;">Ingin Tahu Promo Terbaru?</h2>
                <p style="opacity: 0.9; margin-bottom: 30px; max-width: 600px; margin-left: auto; margin-right: auto;">
                    Hubungi tim kami untuk mendapatkan informasi promo eksklusif dan penawaran khusus untuk kebutuhan pengiriman Anda.
                </p>
               @if(isset($globalContact) && $globalContact->whatsapp_formatted)
              <a href="https://wa.me/{{ $globalContact->whatsapp_formatted }}?text={{ $message }}"  class="btn-red-block" style="display: inline-block; width: auto; padding: 14px 40px; text-decoration: none;">
                    <i class="fas fa-headset me-2"></i> Hubungi Kami
                </a>
                @endif
            </div>
        </div>
    </section>

  </main>
@endsection