@extends("main")
@section("title", "Bukti Pengiriman - Dino Logistics")

@push('styles')
    <style>
        /* ==========================================================================
           DINO LOGISTICS - PROOF OF DELIVERY STYLES (CLEAN THEME)
           ========================================================================== */
        .page-title {
            background: linear-gradient(135deg, #056fc6 0%, #0442a0 100%);
            color: white;
            padding: 80px 0 100px 0; 
            text-align: center;
            position: relative;
        }

        .page-title::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
            background-size: 20px 20px;
            opacity: 0.4;
            pointer-events: none;
        }

        .page-title h1 {
            font-weight: 800;
            letter-spacing: -0.02em;
            margin-bottom: 12px;
            color: #ffffff;
            font-size: 2.5rem;
            position: relative;
            z-index: 2;
        }

        .page-title p {
            color: rgba(255, 255, 255, 0.85);
            font-size: 1.1rem;
            font-weight: 400;
            position: relative;
            z-index: 2;
            max-width: 600px;
            margin: 0 auto;
        }

        .proof-card-wrapper {
            background: #ffffff;
            border-radius: 20px;
            padding: 40px 50px;
            box-shadow: 0 20px 40px -10px rgba(5, 84, 198, 0.15);
            max-width: 750px;
            margin: -60px auto 80px auto;
            border: 1px solid rgba(0,0,0,0.03);
            border-top: 4px solid #10b981; /* Aksen hijau untuk status Delivered */
            position: relative;
            z-index: 10;
        }

        .proof-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 2px dashed #e2e8f0;
            padding-bottom: 20px;
            margin-bottom: 30px;
        }

        .proof-header h5 {
            font-weight: 800;
            color: #0f172a;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 1.4rem;
        }

        .proof-image-container {
            background: #f8fafc;
            border-radius: 16px;
            border: 1px solid #e2e8f0;
            padding: 15px;
            text-align: center;
        }

        .proof-image-container img {
            max-height: 500px;
            width: 100%;
            object-fit: contain;
            border-radius: 8px;
        }

        .carousel-caption-custom {
            display: inline-block;
            background: #f1f5f9;
            color: #334155;
            padding: 8px 20px;
            border-radius: 20px;
            font-weight: 700;
            font-size: 0.85rem;
            margin-top: 20px;
            border: 1px solid #e2e8f0;
        }

        .custom-carousel-control {
            background: rgba(15, 23, 42, 0.6);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            top: 50%;
            transform: translateY(-50%);
            margin: 0 20px;
            opacity: 0.8;
            transition: all 0.3s;
        }

        .custom-carousel-control:hover {
            opacity: 1;
            background: rgba(15, 23, 42, 0.9);
        }

        .empty-state {
            text-align: center;
            padding: 40px 20px;
        }

        @media (max-width: 768px) {
            .proof-card-wrapper {
                padding: 30px 20px;
                border-radius: 16px;
                margin: -40px 15px 60px 15px;
            }
            .page-title { padding: 60px 20px 80px 20px; }
            .proof-header h5 { font-size: 1.2rem; }
        }
    </style>
@endpush

@section("content")

<main class="main">
    
    <!-- HEADER PAGE - BLUE GRADIENT -->
    <div class="page-title">
      <div class="container" style="margin-top: 50px;">
        <h1>Bukti Pengiriman</h1>
        <p>Dokumentasi foto saat paket diterima di lokasi tujuan.</p>
      </div>
    </div>

    <!-- PROOF SECTION (FLOATING WHITE CARD) -->
    <section class="proof-section container">
        <div class="proof-card-wrapper">
            
            <div class="proof-header">
                <h5>
                    <i class="bi bi-camera-fill text-success"></i> Foto Dokumentasi
                </h5>
                <a href="javascript:window.close();" class="btn btn-outline-danger rounded-pill btn-sm px-4 fw-bold">
                    <i class="bi bi-x-lg me-1"></i> Tutup
                </a>
            </div>

            <div class="card-body p-0">
                @if(isset($decryptedImages) && count($decryptedImages) > 0)
                    
                    <div id="proofCarousel" class="carousel slide" data-bs-ride="carousel">
                        
                        <!-- Indikator -->
                        @if(count($decryptedImages) > 1)
                        <div class="carousel-indicators" style="bottom: -10px;">
                            @foreach($decryptedImages as $key => $img)
                                <button type="button" data-bs-target="#proofCarousel" data-bs-slide-to="{{ $key }}" 
                                    class="{{ $key == 0 ? 'active' : '' }} bg-secondary" aria-current="true" aria-label="Slide {{ $key+1 }}"></button>
                            @endforeach
                        </div>
                        @endif

                        <div class="carousel-inner">
                            @foreach($decryptedImages as $key => $img)
                                <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                                    
                                    <!-- Container Gambar Abu-abu Terang -->
                                    <div class="proof-image-container">
                                        <img src="{{ rtrim($baseUrl, '/') . $img }}" 
                                             alt="Bukti Pengiriman {{ $key + 1 }}"
                                             loading="{{ $key == 0 ? 'eager' : 'lazy' }}">
                                    </div>
                                    
                                    <!-- Caption Modern (Di luar gambar agar terbaca) -->
                                    <div class="text-center">
                                        <div class="carousel-caption-custom">
                                            <i class="bi bi-images me-1"></i> Foto Bukti {{ $key + 1 }} dari {{ count($decryptedImages) }}
                                        </div>
                                    </div>

                                </div>
                            @endforeach
                        </div>

                        <!-- Tombol Navigasi Carousel -->
                        @if(count($decryptedImages) > 1)
                            <button class="carousel-control-prev custom-carousel-control" type="button" data-bs-target="#proofCarousel" data-bs-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Previous</span>
                            </button>
                            <button class="carousel-control-next custom-carousel-control" type="button" data-bs-target="#proofCarousel" data-bs-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Next</span>
                            </button>
                        @endif

                    </div>

                @else
                    <!-- Jika gambar tidak ada / gagal dimuat -->
                    <div class="empty-state">
                        <i class="bi bi-file-earmark-x text-muted" style="font-size: 5rem; opacity: 0.3;"></i>
                        <h4 class="mt-4 fw-bold" style="color: #0f172a;">Gambar Tidak Tersedia</h4>
                        <p class="text-muted mb-4">Maaf, bukti pengiriman untuk resi ini belum diunggah atau tidak dapat dimuat saat ini.</p>
                        <button onclick="window.close()" class="btn btn-primary rounded-pill px-4 py-2 fw-bold">Kembali ke Pelacakan</button>
                    </div>
                @endif
            </div>

        </div>
    </section>

</main>
@endsection