@extends('layouts.admin')

@section('title', 'Detail Service Package')

@section('content')
    <!-- Notifikasi -->
    <x-admin-notification />

    <!-- Header -->
    <div class="mb-8">
        <div class="flex items-center justify-between mb-6">
            <div class="flex items-center gap-4">
                <a href="{{ route('admin.service-packages.index') }}"
                    class="flex items-center justify-center w-11 h-11 text-gray-600 dark:text-gray-300
                          hover:text-gray-900 dark:hover:text-white
                          hover:bg-gray-100 dark:hover:bg-gray-700
                          rounded-lg transition-all duration-200">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <div>
                    <h1 class="text-3xl font-bold text-gray-900 dark:text-white">
                        Detail Service Package
                    </h1>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
                        Informasi lengkap paket jasa
                    </p>
                </div>
            </div>

            <a href="{{ route('admin.service-packages.edit', $servicePackage->id) }}"
                class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg
                       bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700
                       text-white font-semibold shadow-lg hover:shadow-xl
                       transition-all duration-200">
                <i class="fas fa-edit text-sm"></i>
                <span>Edit Paket</span>
            </a>
        </div>
    </div>

    <!-- Main Content -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Left Column - Main Details -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Basic Information Card -->
            <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden">
                <!-- Card Header -->
                <div class="px-6 py-4 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 border-b border-gray-200 dark:border-gray-700">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center">
                            <i class="fas fa-info-circle text-white text-sm"></i>
                        </div>
                        <h2 class="text-lg font-bold text-gray-900 dark:text-white">
                            Informasi Paket
                        </h2>
                    </div>
                </div>

                <!-- Card Body -->
                <div class="p-6 space-y-6">
                    <!-- Nama Paket -->
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">
                            Nama Paket
                        </label>
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-gradient-to-br from-blue-100 to-indigo-100 dark:from-blue-900/30 dark:to-indigo-900/30 rounded-lg flex items-center justify-center">
                                <i class="fas fa-box text-blue-600 dark:text-blue-400 text-sm"></i>
                            </div>
                            <p class="text-xl font-bold text-gray-900 dark:text-white">
                                {{ $servicePackage->name }}
                            </p>
                        </div>
                    </div>

                    <!-- Harga -->
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">
                            Harga Paket
                        </label>
                        <div class="flex items-baseline gap-3">
                            <div class="px-4 py-3 bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 rounded-lg border border-green-200 dark:border-green-800">
                                <p class="text-3xl font-bold text-green-700 dark:text-green-400">
                                    Rp {{ number_format($servicePackage->price, 0, ',', '.') }}
                                </p>
                            </div>
                            <span class="text-sm text-gray-500 dark:text-gray-400">per paket</span>
                        </div>
                    </div>

                    <!-- Deskripsi -->
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">
                            Deskripsi
                        </label>
                        <div class="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg border border-gray-200 dark:border-gray-600">
                            <p class="text-gray-700 dark:text-gray-300 leading-relaxed whitespace-pre-wrap">
                                {{ $servicePackage->description ?: 'Tidak ada deskripsi untuk paket ini.' }}
                            </p>
                        </div>
                    </div>

                    <!-- Status -->
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">
                            Status
                        </label>
                        <div>
                            @if ($servicePackage->is_active)
                                <span class="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-semibold
                                           bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-300
                                           border border-green-200 dark:border-green-800">
                                    <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
                                    Aktif
                                </span>
                            @else
                                <span class="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-semibold
                                           bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400
                                           border border-gray-200 dark:border-gray-600">
                                    <span class="w-2 h-2 bg-gray-400 rounded-full"></span>
                                    Nonaktif
                                </span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Statistics Card -->
            <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden">
                <!-- Card Header -->
                <div class="px-6 py-4 bg-gradient-to-r from-indigo-50 to-purple-50 dark:from-indigo-900/20 dark:to-purple-900/20 border-b border-gray-200 dark:border-gray-700">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-lg flex items-center justify-center">
                            <i class="fas fa-chart-bar text-white text-sm"></i>
                        </div>
                        <h2 class="text-lg font-bold text-gray-900 dark:text-white">
                            Statistik Penggunaan
                        </h2>
                    </div>
                </div>

                <!-- Card Body -->
                <div class="p-6">
                    <div class="flex items-center gap-4 p-5 bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-indigo-900/20 dark:to-purple-900/20 rounded-lg border border-indigo-200 dark:border-indigo-800">
                        <div class="w-16 h-16 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-lg flex items-center justify-center shadow-lg">
                            <i class="fas fa-industry text-white text-2xl"></i>
                        </div>
                        <div class="flex-1">
                            <p class="text-sm text-gray-600 dark:text-gray-400 mb-1">Total Produksi</p>
                            <p class="text-3xl font-bold text-indigo-700 dark:text-indigo-400">
                                {{ $servicePackage->productions_count ?? 0 }}
                            </p>
                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                produksi menggunakan paket ini
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right Column - Metadata -->
        <div class="space-y-6">
            <!-- Timestamps Card -->
            <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden">
                <!-- Card Header -->
                <div class="px-6 py-4 bg-gradient-to-r from-gray-50 to-slate-50 dark:from-gray-700/50 dark:to-slate-700/50 border-b border-gray-200 dark:border-gray-700">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-gradient-to-br from-gray-500 to-slate-600 rounded-lg flex items-center justify-center">
                            <i class="fas fa-clock text-white text-sm"></i>
                        </div>
                        <h2 class="text-lg font-bold text-gray-900 dark:text-white">
                            Informasi Waktu
                        </h2>
                    </div>
                </div>

                <!-- Card Body -->
                <div class="p-6 space-y-5">
                    <!-- Created At -->
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">
                            Dibuat
                        </label>
                        <div class="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                            <div class="w-8 h-8 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center">
                                <i class="fas fa-calendar-plus text-blue-600 dark:text-blue-400 text-xs"></i>
                            </div>
                            <div>
                                <p class="text-sm font-semibold text-gray-900 dark:text-white">
                                    {{ $servicePackage->created_at->format('d M Y') }}
                                </p>
                                <p class="text-xs text-gray-500 dark:text-gray-400">
                                    {{ $servicePackage->created_at->format('H:i') }} WIB
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Updated At -->
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">
                            Terakhir Diupdate
                        </label>
                        <div class="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                            <div class="w-8 h-8 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg flex items-center justify-center">
                                <i class="fas fa-calendar-edit text-indigo-600 dark:text-indigo-400 text-xs"></i>
                            </div>
                            <div>
                                <p class="text-sm font-semibold text-gray-900 dark:text-white">
                                    {{ $servicePackage->updated_at->format('d M Y') }}
                                </p>
                                <p class="text-xs text-gray-500 dark:text-gray-400">
                                    {{ $servicePackage->updated_at->format('H:i') }} WIB
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Actions Card -->
            <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden">
                <!-- Card Header -->
                <div class="px-6 py-4 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 border-b border-gray-200 dark:border-gray-700">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center">
                            <i class="fas fa-bolt text-white text-sm"></i>
                        </div>
                        <h2 class="text-lg font-bold text-gray-900 dark:text-white">
                            Tindakan Cepat
                        </h2>
                    </div>
                </div>

                <!-- Card Body -->
                <div class="p-6 space-y-3">
                    <!-- Edit Button -->
                    <a href="{{ route('admin.service-packages.edit', $servicePackage->id) }}"
                        class="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-lg
                               bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700
                               text-white font-semibold shadow-lg hover:shadow-xl
                               transition-all duration-200">
                        <i class="fas fa-edit text-sm"></i>
                        <span>Edit Paket</span>
                    </a>

                    <!-- Back Button -->
                    <a href="{{ route('admin.service-packages.index') }}"
                        class="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-lg
                               bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600
                               text-gray-700 dark:text-gray-300 font-semibold
                               transition-all duration-200">
                        <i class="fas fa-arrow-left text-sm"></i>
                        <span>Kembali</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

@endsection