@extends('layouts.pelanggan')

@section('title', 'Beranda')

@section('content')

<div class="min-h-screen bg-slate-50 font-inter pb-24">

    {{-- WRAPPER MOBILE: membatasi lebar maksimal seperti frame HP --}}


        {{-- FLASH MESSAGE --}}
        @if(session('success'))
        <div class="px-5 pt-4">
            <div class="rounded-xl bg-green-50 border border-green-200 px-4 py-3 text-sm font-semibold text-green-700 flex items-center gap-2">
                <svg width="20" height="20" class="w-5 h-5 shrink-0" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
                </svg>
                {{ session('success') }}
            </div>
        </div>
        @endif
        @if(session('error'))
        <div class="px-5 pt-4">
            <div class="rounded-xl bg-red-50 border border-red-200 px-4 py-3 text-sm font-semibold text-red-700 flex items-center gap-2">
                <svg width="20" height="20" class="w-5 h-5 shrink-0" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
                </svg>
                {{ session('error') }}
            </div>
        </div>
        @endif

        {{-- HEADER --}}
        <header class="bg-white border-b border-slate-100 px-5 py-4">
            <div class="flex items-center gap-3">
                <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-blue-600 shrink-0">
                    <svg width="24" height="24" class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M4 16c0 .88.39 1.67 1 2.22V20c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h8v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1.78c.61-.55 1-1.34 1-2.22V6c0-3.5-3.58-4-8-4s-8 .5-8 4v10zm3.5 1c-.83 0-1.5-.67-1.5-1.5S6.67 14 7.5 14s1.5.67 1.5 1.5S8.33 17 7.5 17zm9 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm1.5-6H6V6h12v5z" />
                    </svg>
                </div>
                <div>
                    <p class="font-extrabold text-slate-900 leading-tight">PT. Bilah Pane Putra</p>
                    <p class="text-xs text-slate-500">Sistem Pemesanan Tiket Bus</p>
                </div>
            </div>
        </header>

        <main class="px-5">

            {{-- HERO --}}
            <section class="mt-5">
                <div class="relative overflow-hidden rounded-3xl shadow-sm"
                    style="position: relative; overflow: hidden; border-radius: 24px; background: linear-gradient(160deg, #ffffff 0%, #f8fafc 55%, #eef2ff 100%); box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(15,23,42,0.06);">

                    {{-- Aksen diagonal pojok kiri atas --}}
                    <div style="position: absolute; top: -40px; left: -56px; width: 200px; height: 170px; background: linear-gradient(135deg,#ef4444,#dc2626); clip-path: polygon(0 0, 100% 0, 20% 100%, 0% 100%); z-index: 0;"></div>
                    <div style="position:absolute; top:58px; left:-42px; width:230px; height:6px; background:#dc2626; transform: rotate(-52deg); border-radius:4px; z-index:0; opacity:0.9;"></div>
                    <div style="position:absolute; top:80px; left:-52px; width:230px; height:5px; background:#16a34a; transform: rotate(-52deg); border-radius:4px; z-index:0; opacity:0.9;"></div>

                    {{-- Dot pattern dekoratif kanan atas --}}
                    <div style="position:absolute; top:0; right:0; width:120px; height:120px; opacity:0.3;
                    background-image: radial-gradient(#94a3b8 1.2px, transparent 1.2px);
                    background-size: 13px 13px; z-index:0;"></div>

                    {{-- Badge kecil pojok kanan atas --}}
                    <div class="absolute top-4 right-4 flex items-center gap-1 rounded-full bg-white/80 backdrop-blur px-3 py-1.5 shadow-sm"
                        style="position:absolute; top:16px; right:16px; z-index:1; background:rgba(255,255,255,0.85); backdrop-filter: blur(4px); box-shadow: 0 1px 4px rgba(0,0,0,0.06);">
                        <svg width="12" height="12" fill="#f59e0b" viewBox="0 0 24 24" class="shrink-0">
                            <path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.7L5.8 21l1.6-7-5.4-4.8 7.1-.7z" />
                        </svg>
                        <span class="text-[10px] font-bold text-slate-700">Terpercaya</span>
                    </div>

                    <div class="relative px-6 pt-8 pb-3" style="position: relative; padding: 32px 24px 12px 24px; z-index: 1;">

                        {{-- HEADING 3 BARIS --}}
                        <h1 class="leading-[1.05]">
                            <span class="block text-xl font-extrabold text-slate-900">Pesan Tiket Bus</span>
                            <span class="block text-3xl font-black mt-0.5" style="color:#dc2626; letter-spacing:-0.5px;">Lebih Mudah</span>
                            <span class="flex items-center gap-2 mt-0.5">
                                <span class="text-3xl font-black" style="color:#15803d; letter-spacing:-0.5px;">Cepat</span>
                                <svg width="30" height="16" viewBox="0 0 30 16" fill="none" class="shrink-0">
                                    <path d="M2 4h16M2 8h20M2 12h12" stroke="#16a34a" stroke-width="2.5" stroke-linecap="round" />
                                </svg>
                            </span>
                        </h1>

                        <div class="mt-3 h-1 w-12 rounded-full" style="background: linear-gradient(90deg,#dc2626,#f59e0b);"></div>

                        <p class="mt-3 text-sm text-slate-500 leading-relaxed" style="max-width: 320px;">
                            Nikmati perjalanan bersama
                            <span class="font-bold text-slate-900">PT. Bilah Pane Putra</span>
                            dengan pemesanan tiket online yang praktis dan aman.
                        </p>

                        <div class="mt-5 flex items-center gap-3">
                            <a href="{{ route('p.cari') }}"
                                class="inline-flex items-center gap-2 rounded-xl text-white font-bold text-sm px-5 py-3 transition-all hover:opacity-90"
                                style="background: linear-gradient(135deg,#2563eb,#1d4ed8); box-shadow: 0 4px 14px rgba(37,99,235,0.35);">
                                <svg width="16" height="16" class="shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                                </svg>
                                Cari Tiket
                            </a>
                            <span class="text-[11px] text-slate-400 font-medium">Rute Medan &amp; sekitarnya</span>
                        </div>
                    </div>

                    {{-- FOTO BUS --}}
                    <div class="relative px-4 pt-4 pb-2" style="position: relative; z-index: 1; padding: 16px 16px 8px 16px;">
                        <div class="relative rounded-2xl overflow-hidden" style="border-radius: 18px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(15,23,42,0.05);">
                            <img src="{{ asset('images/bus-banner.png') }}"
                                alt="Bus PT. Bilah Pane Putra"
                                class="w-full h-40 object-cover"
                                style="width: 100%; height: 160px; object-fit: cover; object-position: center 42%; display:block;"
                                onerror="this.style.display='none'; document.getElementById('busFallback').style.display='flex';">
                            <div id="busFallback" class="hidden h-40 items-center justify-center bg-slate-100">
                                <svg width="64" height="64" class="text-blue-600/70" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M4 16c0 .88.39 1.67 1 2.22V20c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h8v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1.78c.61-.55 1-1.34 1-2.22V6c0-3.5-3.58-4-8-4s-8 .5-8 4v10zm3.5 1c-.83 0-1.5-.67-1.5-1.5S6.67 14 7.5 14s1.5.67 1.5 1.5S8.33 17 7.5 17zm9 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm1.5-6H6V6h12v5z" />
                                </svg>
                            </div>

                            {{-- Gradient tipis bawah supaya foto menyatu dengan card --}}
                            <div style="position:absolute; bottom:0; left:0; right:0; height:36px; background: linear-gradient(to top, rgba(0,0,0,0.18), transparent); pointer-events:none;"></div>

                            {{-- Label kecil di atas foto --}}

                        </div>
                    </div>

                    {{-- Carousel dots --}}
                    <div class="relative flex items-center justify-center gap-1.5 pb-5" style="position: relative; z-index: 1;">
                        <span class="h-1.5 w-4 rounded-full" style="background:#2563eb;"></span>
                        <span class="h-1.5 w-1.5 rounded-full bg-slate-300"></span>
                        <span class="h-1.5 w-1.5 rounded-full bg-slate-300"></span>
                    </div>
                </div>
            </section>
            {{-- QUICK MENU --}}
            <section class="mt-5 grid grid-cols-3 gap-3">

                <a href="{{ route('p.kuesioner') }}"
                    class="relative flex flex-col gap-3 rounded-2xl bg-blue-50 border border-blue-100 p-4 hover:shadow-md hover:border-blue-200 transition-all overflow-hidden"
                    style="position: relative; border-radius: 16px; background-color: #eff6ff; border: 1px solid #dbeafe; padding: 16px; overflow: hidden;">
                    <svg width="16" height="16"
                        class="w-4 h-4 shrink-0 text-blue-600"
                        style="color: #2563eb;"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                        viewBox="0 0 24 24">

                        <!-- Clipboard -->
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M9 3h6a1 1 0 011 1v1h2a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V7a2 2 0 012-2h2V4a1 1 0 011-1z" />

                        <!-- Checklist -->
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M8 10l1.5 1.5L12 9m-4 6l1.5 1.5L12 14m3-4h3m-3 5h3" />
                    </svg>
                    <div>
                        <p class="font-bold text-slate-900 text-sm leading-tight">Kuesioner</p>
                        <p class="text-[11px] text-slate-400 mt-0.5 leading-tight">Bantu kami meningkatkan layanan</p>
                    </div>
                    <svg width="14" height="14" class="absolute bottom-3 right-3 w-3.5 h-3.5 text-slate-400" style="position: absolute; bottom: 12px; right: 12px; color: #94a3b8;" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                    </svg>
                </a>

                <a href="{{ route('p.riwayat') }}"
                    class="relative flex flex-col gap-3 rounded-2xl bg-green-50 border border-green-100 p-4 hover:shadow-md hover:border-green-200 transition-all overflow-hidden"
                    style="position: relative; border-radius: 16px; background-color: #f0fdf4; border: 1px solid #dcfce7; padding: 16px; overflow: hidden;">
                    <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-green-100"
                        style="display: flex; height: 40px; width: 40px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; background-color: #dcfce7;">
                        <svg width="16" height="16" class="w-4 h-4 shrink-0 text-green-600" style="color: #16a34a;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                        </svg>
                    </span>
                    <div>
                        <p class="font-bold text-slate-900 text-sm leading-tight">Riwayat</p>
                        <p class="text-[11px] text-slate-400 mt-0.5 leading-tight">Tiket saya</p>
                    </div>
                    <svg width="14" height="14" class="absolute bottom-3 right-3 w-3.5 h-3.5 text-slate-400" style="position: absolute; bottom: 12px; right: 12px; color: #94a3b8;" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                    </svg>
                </a>

                <a href="{{ route('p.keluhan') }}"
                    class="relative flex flex-col gap-3 rounded-2xl bg-purple-50 border border-purple-100 p-4 hover:shadow-md hover:border-purple-200 transition-all overflow-hidden"
                    style="position: relative; border-radius: 16px; background-color: #faf5ff; border: 1px solid #f3e8ff; padding: 16px; overflow: hidden;">
                    <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-purple-100"
                        style="display: flex; height: 40px; width: 40px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; background-color: #f3e8ff;">
                        <svg width="16" height="16" class="w-4 h-4 shrink-0 text-purple-500" style="color: #a855f7;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8-1.19 0-2.326-.204-3.362-.577L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                        </svg>
                    </span>
                    <div>
                        <p class="font-bold text-slate-900 text-sm leading-tight">Keluhan</p>
                        <p class="text-[11px] text-slate-400 mt-0.5 leading-tight">Bantuan &amp; dukungan</p>
                    </div>
                    <svg width="14" height="14" class="absolute bottom-3 right-3 w-3.5 h-3.5 text-slate-400" style="position: absolute; bottom: 12px; right: 12px; color: #94a3b8;" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                    </svg>
                </a>

            </section>


            {{-- RUTE TERSEDIA --}}
            <section class="mt-8">
                <h2 class="text-base font-bold text-slate-900 mb-3">Rute Tersedia</h2>

                @if($rute->isEmpty())
                <div class="rounded-2xl bg-white border border-slate-200 py-8 text-center">
                    <p class="text-sm font-semibold text-slate-500">Belum ada rute tersedia</p>
                </div>
                @else
                <div class="space-y-3">
                    @foreach($rute as $item)
                    <a href="{{ route('p.cari', ['asal' => $item->kota_asal, 'tujuan' => $item->kota_tujuan]) }}"
                        class="flex items-center justify-between rounded-2xl bg-white border border-slate-200 px-5 py-4 hover:shadow-md hover:border-blue-200 transition-all">
                        <div class="min-w-0">
                            <p class="font-bold text-slate-900 text-sm truncate">{{ $item->kota_asal }} &rarr; {{ $item->kota_tujuan }}</p>
                            <p class="text-xs text-slate-400 mt-0.5">Harga Tiket</p>
                        </div>
                        <div class="flex items-center gap-2 shrink-0 ml-3">
                            <p class="font-black text-blue-600 text-sm">Rp {{ number_format($item->harga,0,',','.') }}</p>
                            <svg width="16" height="16" class="w-4 h-4 shrink-0 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                            </svg>
                        </div>
                    </a>
                    @endforeach
                </div>
                @endif
            </section>

        </main>

    </div>
    {{-- /WRAPPER MOBILE --}}

</div>

@endsection