@extends('layouts.frontend.master')

@section('content')
    <section 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('pengaduan') }}">Pengaduan</a></div>
                        <div class="breadcrumbs__item"><a href="javascript:void(0)">Lacak</a></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="layout-pt-md layout-pb-lg">
        <div class="container">
            @if (session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif
            @if (session('error'))
                <div class="alert alert-danger">{{ session('error') }}</div>
            @endif

            <div class="tracking-panel mb-30">
                <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-3">
                    <div>
                        <h2 class="text-24 fw-600 mb-1">Lacak Pengaduan</h2>
                        <div class="text-15 text-dark-1">Masukkan kode tiket untuk melihat progres, disposisi, dan rating pengaduan.</div>
                    </div>
                    <a href="{{ route('pengaduan') }}" class="button -sm -outline-blue-1 text-blue-1">Kirim Aduan Baru</a>
                </div>

                <form method="GET" action="{{ route('pengaduan.tracking') }}" class="row x-gap-15 y-gap-15 mt-20">
                    <div class="col-lg-9">
                        <input type="text" name="kode_tiket" value="{{ $ticketCode }}" class="form-control" placeholder="Contoh: ADU-20260407-0001">
                    </div>
                    <div class="col-lg-3 d-grid">
                        <button type="submit" class="button -md -dark-1 text-white">Lacak Sekarang</button>
                    </div>
                </form>
            </div>

            @if ($ticketCode !== '' && ! $aduan)
                <div class="alert alert-warning">Kode tiket tidak ditemukan. Periksa kembali atau kirim pengaduan baru.</div>
            @endif

            @if ($aduan)
                <div class="row y-gap-30">
                    <div class="col-lg-7">
                        <div class="tracking-panel mb-30">
                            <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-20">
                                <div>
                                    <div class="text-14 text-dark-1">Kode tiket</div>
                                    <h3 class="text-22 fw-700 mb-0">{{ $aduan->kode_tiket }}</h3>
                                </div>
                                <span class="status-pill {{ str_replace(' ', '-', strtolower($aduan->status_label)) }}">{{ $aduan->status_label }}</span>
                            </div>

                            <div class="row x-gap-20 y-gap-20">
                                <div class="col-md-6">
                                    <div class="text-14 text-dark-1">Pelapor</div>
                                    <div class="fw-600">{{ $aduan->nama_pelapor }}</div>
                                </div>
                                <div class="col-md-6">
                                    <div class="text-14 text-dark-1">Kategori</div>
                                    <div class="fw-600">{{ $aduan->category?->name ?? 'Tanpa kategori' }}</div>
                                </div>
                                <div class="col-md-6">
                                    <div class="text-14 text-dark-1">OPD Tujuan</div>
                                    <div class="fw-600">{{ $aduan->targetOrganization?->short_name ?: $aduan->targetOrganization?->name ?: 'Sedang dipetakan' }}</div>
                                </div>
                                <div class="col-md-6">
                                    <div class="text-14 text-dark-1">Waktu Lapor</div>
                                    <div class="fw-600">{{ optional($aduan->waktu_lapor)->format('d M Y H:i') ?: '-' }}</div>
                                </div>
                                <div class="col-12">
                                    <div class="text-14 text-dark-1">Judul</div>
                                    <div class="fw-600">{{ $aduan->judul }}</div>
                                </div>
                                <div class="col-12">
                                    <div class="text-14 text-dark-1">Uraian</div>
                                    <div class="tracking-box">{{ $aduan->uraian }}</div>
                                </div>
                                <div class="col-12">
                                    <div class="text-14 text-dark-1">Alamat / Lokasi</div>
                                    <div class="fw-600">{{ $aduan->address_text ?: 'Belum ada alamat rinci' }}</div>
                                </div>
                            </div>
                        </div>

                        <div class="tracking-panel mb-30">
                            <h4 class="text-20 fw-600 mb-20">Timeline Status</h4>
                            @forelse ($aduan->statusLogs as $log)
                                <div class="timeline-row">
                                    <div class="timeline-mark"></div>
                                    <div class="tracking-box">
                                        <div class="d-flex flex-column flex-md-row justify-content-between gap-2">
                                            <div>
                                                <div class="fw-600">{{ \App\Models\Pengaduan\Aduan::STATUSES[$log->to_status] ?? $log->to_status }}</div>
                                                <div class="text-14 text-dark-1">{{ $log->note ?: 'Tidak ada catatan tambahan.' }}</div>
                                            </div>
                                            <div class="text-13 text-dark-1 text-md-end">{{ optional($log->changed_at)->format('d M Y H:i') ?: '-' }}</div>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="text-dark-1">Belum ada update status.</div>
                            @endforelse
                        </div>

                        @if ($aduan->attachments->count())
                            <div class="tracking-panel">
                                <h4 class="text-20 fw-600 mb-20">Lampiran</h4>
                                <div class="row y-gap-15">
                                    @foreach ($aduan->attachments as $attachment)
                                        <div class="col-12">
                                            <a href="{{ $attachment->url }}" target="_blank" class="tracking-attachment">
                                                <div class="fw-600">{{ $attachment->original_name }}</div>
                                                <div class="text-13 text-dark-1">{{ strtoupper($attachment->source) }} | {{ number_format($attachment->size / 1024, 1) }} KB</div>
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                    </div>

                    <div class="col-lg-5">
                        <div class="tracking-panel mb-30">
                            <h4 class="text-20 fw-600 mb-15">Peta Lokasi</h4>
                            <div id="tracking-map" class="complaint-map rounded-4"></div>
                        </div>

                        <div class="tracking-panel mb-30">
                            <h4 class="text-20 fw-600 mb-15">Riwayat Disposisi</h4>
                            @forelse ($aduan->dispositions as $disposition)
                                <div class="tracking-box mb-15">
                                    <div class="fw-600">{{ $disposition->fromOrganization?->short_name ?: $disposition->fromOrganization?->name ?: 'Belum ada' }} <i class="fas fa-arrow-right mx-1"></i> {{ $disposition->toOrganization?->short_name ?: $disposition->toOrganization?->name ?: 'Belum ada' }}</div>
                                    <div class="text-14 text-dark-1">PIC: {{ $disposition->assignedUser?->name ?: 'Belum ditentukan' }}</div>
                                    @if ($disposition->note)
                                        <div class="text-14 text-dark-1 mt-10">{{ $disposition->note }}</div>
                                    @endif
                                </div>
                            @empty
                                <div class="text-dark-1">Belum ada disposisi tercatat.</div>
                            @endforelse
                        </div>

                        <div class="tracking-panel">
                            <h4 class="text-20 fw-600 mb-15">Rating Warga</h4>
                            @if ($aduan->rating)
                                <div class="display-6 fw-700">{{ $aduan->rating->rating }}/5</div>
                                <div class="text-15 text-dark-1">{{ $aduan->rating->comment ?: 'Tidak ada catatan tambahan.' }}</div>
                            @elseif (in_array($aduan->status, ['selesai', 'ditutup'], true))
                                <form method="POST" action="{{ route('pengaduan.rating', $aduan->kode_tiket) }}">
                                    @csrf
                                    <div class="mb-15">
                                        <label class="form-label">Nilai Layanan</label>
                                        <select name="rating" class="form-select">
                                            @for ($i = 5; $i >= 1; $i--)
                                                <option value="{{ $i }}">{{ $i }} / 5</option>
                                            @endfor
                                        </select>
                                    </div>
                                    <div class="mb-15">
                                        <label class="form-label">Komentar</label>
                                        <textarea name="comment" rows="3" class="form-control"></textarea>
                                    </div>
                                    <button type="submit" class="button -sm -dark-1 text-white">Kirim Rating</button>
                                </form>
                            @else
                                <div class="text-dark-1">Rating akan dibuka setelah aduan selesai atau ditutup.</div>
                            @endif
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </section>
@endsection

@section('stylesheet')
    <link rel="stylesheet" href="{{ asset('assets/templates/frontend/assets/leaflet1.7.1/dist/leaflet.css') }}">
    <style>
        .tracking-panel {
            background: #fff;
            border-radius: 24px;
            padding: 28px;
            box-shadow: 0 20px 40px rgba(13, 30, 64, 0.08);
        }

        .tracking-box,
        .tracking-attachment {
            display: block;
            padding: 18px;
            border-radius: 20px;
            background: #f7fafc;
            border: 1px solid #e5edf4;
            color: inherit;
            text-decoration: none;
        }

        .timeline-row {
            position: relative;
            padding-left: 24px;
            margin-bottom: 16px;
        }

        .timeline-mark {
            position: absolute;
            left: 0;
            top: 16px;
            width: 10px;
            height: 10px;
            border-radius: 999px;
            background: #0d6efd;
        }

        .complaint-map {
            min-height: 320px;
            border: 1px solid #d9e3f0;
        }

        .status-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            padding: 8px 16px;
            font-weight: 700;
            background: #e8f0ff;
            color: #0d6efd;
        }

        .complaint-map-marker,
        .complaint-map-marker__pin {
            width: 24px;
            height: 24px;
        }

        .complaint-map-marker {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .complaint-map-marker__pin {
            position: relative;
            border-radius: 999px 999px 999px 0;
            transform: rotate(-45deg);
            background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
            box-shadow: 0 12px 20px rgba(220, 38, 38, 0.25);
            border: 2px solid rgba(255, 255, 255, 0.9);
        }

        .complaint-map-marker__pin::after {
            content: '';
            position: absolute;
            inset: 5px;
            border-radius: 999px;
            background: #fff;
        }
    </style>
@endsection

@section('javascript')
    <script src="{{ asset('assets/templates/frontend/assets/leaflet1.7.1/dist/leaflet.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const mapElement = document.getElementById('tracking-map');
            if (!mapElement || typeof L === 'undefined') { return; }

            const latitude = @json($aduan?->latitude);
            const longitude = @json($aduan?->longitude);
            const hasPoint = latitude !== null && longitude !== null;
            const map = L.map(mapElement).setView(hasPoint ? [latitude, longitude] : [1.3181, 124.8383], hasPoint ? 15 : 12);

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '&copy; OpenStreetMap contributors'
            }).addTo(map);

            const complaintMarkerIcon = L.divIcon({
                className: 'complaint-map-marker',
                html: '<span class="complaint-map-marker__pin" aria-hidden="true"></span>',
                iconSize: [24, 24],
                iconAnchor: [12, 24],
                popupAnchor: [0, -24],
            });

            if (hasPoint) {
                L.marker([latitude, longitude], {
                    icon: complaintMarkerIcon,
                }).addTo(map).bindPopup('<strong>{{ $aduan?->kode_tiket }}</strong><br>{{ $aduan?->judul ? addslashes($aduan->judul) : '' }}').openPopup();
            }
        });
    </script>
@endsection