@extends('layouts.frontend.master')

@section('content')
    <section data-anim="fade" class="breadcrumbs">
        <div class="container">
            <div class="row">
                <div class="col-auto">
                    <div class="breadcrumbs__content">
                        <div class="breadcrumbs__item"><a href="{{ route('home') }}">Utama</a></div>
                        <div class="breadcrumbs__item"><a href="{{ route('appointment.tracking') }}">Lacak Antrian</a></div>
                        @if ($appointment)
                            <div class="breadcrumbs__item"><a href="javascript:void(0)">{{ $appointment->booking_code }}</a></div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="layout-pt-md layout-pb-lg">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-8 col-lg-10">
                    <div class="text-center mb-4">
                        <h1 class="text-30 fw-700 mb-2">{{ $appointment ? 'Tracking Booking dan Antrian' : 'Lacak Booking dan Antrian' }}</h1>
                        <p class="text-muted mb-0">Masukkan kode booking untuk melihat posisi, status, dan jadwal layanan.</p>
                    </div>

                    <div class="card shadow-sm border-0 mb-4">
                        <div class="card-body p-4">
                            <form method="GET" action="{{ route('appointment.tracking.show', '__CODE__') }}" onsubmit="event.preventDefault(); const code = this.booking_code.value.trim(); if (code) { window.location = '{{ rtrim(route('appointment.tracking'), '/') }}' + '/' + encodeURIComponent(code.toUpperCase()); }">
                                <label for="booking_code" class="form-label fw-semibold">Kode Booking</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" name="booking_code" id="booking_code" value="{{ $appointment?->booking_code }}" placeholder="Contoh: BK-20260410-0001">
                                    <button type="submit" class="btn btn-primary">Lacak</button>
                                </div>
                            </form>
                        </div>
                    </div>

                    @if ($appointment && $trackingPayload)
                        <div class="row g-3 mb-4">
                            @foreach ($trackingPayload['summary_cards'] as $card)
                                <div class="col-md-6 col-xl-3">
                                    <div class="card border-0 shadow-sm h-100">
                                        <div class="card-body">
                                            <div class="small text-uppercase text-muted mb-2">{{ $card['label'] }}</div>
                                            <div class="fs-4 fw-semibold">{{ $card['value'] }}</div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <div class="card shadow-sm border-0 mb-4">
                            <div class="card-header bg-white border-0 pt-4">
                                <h5 class="mb-1">Detail Booking</h5>
                                <p class="text-muted mb-0">Ringkasan operasional booking dan antrian Anda.</p>
                            </div>
                            <div class="card-body pt-2">
                                <div class="row g-3">
                                    @foreach ($trackingPayload['detail_rows'] as $row)
                                        <div class="col-md-6">
                                            <div class="border rounded-3 p-3 h-100">
                                                <div class="small text-muted">{{ $row['label'] }}</div>
                                                <div class="fw-semibold">{{ $row['value'] }}</div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>

                        <div class="card shadow-sm border-0">
                            <div class="card-header bg-white border-0 pt-4">
                                <h5 class="mb-1">Timeline Layanan</h5>
                                <p class="text-muted mb-0">Progress booking bergerak dari booked, check-in, dipanggil, sampai dilayani.</p>
                            </div>
                            <div class="card-body pt-2">
                                @foreach ($trackingPayload['timeline'] as $item)
                                    <div class="d-flex justify-content-between align-items-center py-3 border-bottom">
                                        <div>
                                            <div class="fw-semibold">{{ $item['label'] }}</div>
                                            <div class="small text-muted">{{ $item['done'] ? 'Sudah tercatat' : 'Menunggu proses berikutnya' }}</div>
                                        </div>
                                        <div class="text-end">
                                            <span class="badge {{ $item['done'] ? 'bg-success-subtle text-success' : 'bg-secondary-subtle text-secondary' }}">
                                                {{ $item['done'] ? 'Siap' : 'Belum' }}
                                            </span>
                                            <div class="small text-muted mt-2">{{ $item['at'] ? \Illuminate\Support\Carbon::parse($item['at'])->translatedFormat('d M Y H:i') : '-' }}</div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>
@endsection