@extends('layouts.admin.master')

@section('content')
    <div class="container-fluid py-3">
        <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-3 mb-4">
            <div>
                <h3 class="mb-1">Pengaduan Inti</h3>
                <p class="text-muted mb-0">Tiket pengaduan warga, tracking SLA, dan titik aduan yang sekarang menjadi jalur inti pelaporan kota.</p>
            </div>
            <div class="d-flex flex-wrap gap-2">
                @foreach ($quickLinks as $link)
                    @if ($link['route'])
                        <a href="{{ $link['route'] }}" class="btn btn-outline-primary btn-sm">{{ $link['label'] }}</a>
                    @endif
                @endforeach
            </div>
        </div>

        @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="row g-3 mb-4">
            @foreach ($summaryCards as $card)
                <div class="col-xl-3 col-md-6">
                    <div class="card border-0 shadow-sm h-100 complaint-card complaint-card-{{ $card['accent'] }}">
                        <div class="card-body">
                            <div class="complaint-icon bg-{{ $card['accent'] }}-subtle text-{{ $card['accent'] }}">
                                <i class="{{ $card['icon'] }}"></i>
                            </div>
                            <div class="display-6 fw-semibold mt-3">{{ number_format($card['value']) }}</div>
                            <h5 class="mt-2 mb-1">{{ $card['title'] }}</h5>
                            <p class="text-muted mb-0">{{ $card['description'] }}</p>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="row g-3 mb-4">
            <div class="col-lg-8">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Peta Titik Pengaduan</h5>
                        <p class="text-muted mb-0">Preview sebaran aduan yang sudah punya koordinat lokasi.</p>
                    </div>
                    <div class="card-body">
                        <div id="complaint-map" class="rounded-4 border"></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Buat Aduan Manual</h5>
                        <p class="text-muted mb-0">Dipakai operator untuk input aduan yang datang dari loket, telepon, atau kanal manual.</p>
                    </div>
                    <div class="card-body pt-2">
                        <form method="POST" action="{{ route('admin.smart_city.complaints.insert') }}" enctype="multipart/form-data">
                            @csrf
                            <div class="mb-3">
                                <label class="form-label">Nama Pelapor</label>
                                <input type="text" name="nama_pelapor" value="{{ old('nama_pelapor') }}" class="form-control @error('nama_pelapor') is-invalid @enderror">
                                @error('nama_pelapor')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="row g-2">
                                <div class="col-md-6">
                                    <label class="form-label">Email</label>
                                    <input type="email" name="email_pelapor" value="{{ old('email_pelapor') }}" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">No. HP</label>
                                    <input type="text" name="no_hp" value="{{ old('no_hp') }}" class="form-control">
                                </div>
                            </div>
                            <div class="mt-3">
                                <label class="form-label">Judul Aduan</label>
                                <input type="text" name="judul" value="{{ old('judul') }}" class="form-control @error('judul') is-invalid @enderror">
                            </div>
                            <div class="mt-3">
                                <label class="form-label">Uraian</label>
                                <textarea name="uraian" rows="4" class="form-control @error('uraian') is-invalid @enderror">{{ old('uraian') }}</textarea>
                            </div>
                            <div class="row g-2 mt-1">
                                <div class="col-md-6">
                                    <label class="form-label">Kategori</label>
                                    <select name="kategori_id" class="form-select @error('kategori_id') is-invalid @enderror">
                                        <option value="">Pilih kategori</option>
                                        @foreach ($categories as $category)
                                            <option value="{{ $category->id }}" @selected(old('kategori_id') == $category->id)>{{ $category->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Layanan Terkait</label>
                                    <select name="layanan_id" class="form-select">
                                        <option value="">Opsional</option>
                                        @foreach ($serviceOptions as $service)
                                            <option value="{{ $service->id }}" @selected(old('layanan_id') == $service->id)>{{ $service->nama }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Prioritas</label>
                                    <select name="prioritas" class="form-select">
                                        @foreach (\App\Models\Pengaduan\Aduan::PRIORITIES as $key => $label)
                                            <option value="{{ $key }}" @selected(old('prioritas', 'normal') === $key)>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Severity</label>
                                    <select name="severity" class="form-select">
                                        @foreach (\App\Models\Pengaduan\Aduan::SEVERITIES as $key => $label)
                                            <option value="{{ $key }}" @selected(old('severity', 'sedang') === $key)>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">OPD Tujuan</label>
                                    <select name="opd_tujuan_id" class="form-select">
                                        <option value="">Auto dari kategori / layanan</option>
                                        @foreach ($organizations as $organization)
                                            <option value="{{ $organization->id }}" @selected(old('opd_tujuan_id') == $organization->id)>{{ $organization->short_name ?: $organization->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Status Awal</label>
                                    <select name="status" class="form-select">
                                        @foreach (\App\Models\Pengaduan\Aduan::STATUSES as $key => $label)
                                            @if (in_array($key, ['masuk', 'diverifikasi', 'didisposisi', 'diproses', 'menunggu'], true))
                                                <option value="{{ $key }}" @selected(old('status', 'masuk') === $key)>{{ $label }}</option>
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="mt-3">
                                <label class="form-label">Alamat / Lokasi Singkat</label>
                                <textarea name="address_text" rows="2" class="form-control">{{ old('address_text') }}</textarea>
                            </div>
                            <div class="row g-2 mt-1">
                                <div class="col-md-6">
                                    <label class="form-label">Latitude</label>
                                    <input type="text" name="latitude" value="{{ old('latitude') }}" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Longitude</label>
                                    <input type="text" name="longitude" value="{{ old('longitude') }}" class="form-control">
                                </div>
                            </div>
                            <div class="mt-3">
                                <label class="form-label">Lampiran</label>
                                <input type="file" name="attachments[]" multiple class="form-control">
                                <div class="form-text">Maksimal 5 file, masing-masing 2MB.</div>
                            </div>
                            <div class="mt-3">
                                <label class="form-label">Catatan Awal</label>
                                <textarea name="status_note" rows="2" class="form-control">{{ old('status_note') }}</textarea>
                            </div>
                            <button type="submit" class="btn btn-primary w-100 mt-3">Simpan Aduan</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white border-0 pt-4">
                <h5 class="mb-1">Filter Tiket</h5>
                <p class="text-muted mb-0">Pilah antrean aduan untuk keperluan operasional harian.</p>
            </div>
            <div class="card-body pt-2">
                <form method="GET" class="row g-2">
                    <div class="col-lg-3">
                        <input type="text" name="search" value="{{ request('search') }}" class="form-control" placeholder="Cari kode, judul, pelapor">
                    </div>
                    <div class="col-lg-2">
                        <select name="status" class="form-select">
                            <option value="">Semua status</option>
                            @foreach (\App\Models\Pengaduan\Aduan::STATUSES as $key => $label)
                                <option value="{{ $key }}" @selected(request('status') === $key)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-2">
                        <select name="prioritas" class="form-select">
                            <option value="">Semua prioritas</option>
                            @foreach (\App\Models\Pengaduan\Aduan::PRIORITIES as $key => $label)
                                <option value="{{ $key }}" @selected(request('prioritas') === $key)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-2">
                        <select name="kategori_id" class="form-select">
                            <option value="">Semua kategori</option>
                            @foreach ($categories as $category)
                                <option value="{{ $category->id }}" @selected((int) request('kategori_id') === $category->id)>{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-2">
                        <select name="opd_id" class="form-select">
                            <option value="">Semua OPD</option>
                            @foreach ($organizations as $organization)
                                <option value="{{ $organization->id }}" @selected((int) request('opd_id') === $organization->id)>{{ $organization->short_name ?: $organization->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-1 d-grid">
                        <button type="submit" class="btn btn-outline-primary">Terapkan</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white border-0 pt-4 d-flex justify-content-between align-items-center">
                <div>
                    <h5 class="mb-1">Daftar Pengaduan</h5>
                    <p class="text-muted mb-0">Queue operasional pengaduan warga.</p>
                </div>
                <span class="badge bg-primary-subtle text-primary">{{ $complaints->total() }} tiket</span>
            </div>
            <div class="card-body pt-2">
                <div class="table-responsive">
                    <table class="table align-middle mb-0">
                        <thead>
                            <tr>
                                <th>Kode</th>
                                <th>Pelapor</th>
                                <th>Judul</th>
                                <th>Status</th>
                                <th>OPD</th>
                                <th>SLA</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($complaints as $complaint)
                                <tr>
                                    <td>
                                        <div class="fw-semibold">{{ $complaint->kode_tiket }}</div>
                                        <div class="small text-muted">{{ optional($complaint->waktu_lapor)->format('d M Y H:i') }}</div>
                                    </td>
                                    <td>
                                        <div class="fw-semibold">{{ $complaint->nama_pelapor }}</div>
                                        <div class="small text-muted">{{ $complaint->no_hp ?: ($complaint->email_pelapor ?: '-') }}</div>
                                    </td>
                                    <td>
                                        <div class="fw-semibold">{{ $complaint->judul }}</div>
                                        <div class="small text-muted">{{ $complaint->category?->name ?? 'Tanpa kategori' }} | {{ $complaint->priority_label }}</div>
                                    </td>
                                    <td>
                                        <span class="badge {{ $complaint->status_badge_class }}">{{ $complaint->status_label }}</span>
                                        @if ($complaint->rating)
                                            <div class="small text-muted mt-1">Rating {{ number_format($complaint->rating->rating, 1) }}/5</div>
                                        @endif
                                    </td>
                                    <td>{{ $complaint->targetOrganization?->short_name ?: $complaint->targetOrganization?->name ?: 'Belum diarahkan' }}</td>
                                    <td>
                                        <div class="small">Respon: {{ optional($complaint->batas_respon_at)->format('d M H:i') ?: '-' }}</div>
                                        <div class="small text-muted">Selesai: {{ optional($complaint->batas_selesai_at)->format('d M H:i') ?: '-' }}</div>
                                    </td>
                                    <td class="text-end">
                                        <a href="{{ route('admin.smart_city.complaints.show', $complaint) }}" class="btn btn-sm btn-outline-primary">Detail</a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center text-muted py-4">Belum ada pengaduan yang tercatat.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="mt-3">{{ $complaints->links() }}</div>
            </div>
        </div>

        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-0 pt-4">
                <h5 class="mb-1">Master Kategori Pengaduan</h5>
                <p class="text-muted mb-0">Kategori akan dipakai untuk klasifikasi, SLA dasar, dan mapping OPD.</p>
            </div>
            <div class="card-body pt-2">
                <div class="row g-3">
                    <div class="col-lg-4">
                        <div class="border rounded-4 p-3 bg-light h-100">
                            <h6 class="mb-3">{{ $editingCategory ? 'Ubah Kategori' : 'Tambah Kategori' }}</h6>
                            <form method="POST" action="{{ $editingCategory ? route('admin.smart_city.complaints.category.update', $editingCategory) : route('admin.smart_city.complaints.category.insert') }}">
                                @csrf
                                @if ($editingCategory)
                                    @method('PUT')
                                @endif
                                <div class="mb-3">
                                    <label class="form-label">Nama</label>
                                    <input type="text" name="name" value="{{ old('name', $editingCategory?->name) }}" class="form-control">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Kode</label>
                                    <input type="text" name="code" value="{{ old('code', $editingCategory?->code) }}" class="form-control">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Deskripsi</label>
                                    <textarea name="description" rows="3" class="form-control">{{ old('description', $editingCategory?->description) }}</textarea>
                                </div>
                                <div class="row g-2">
                                    <div class="col-md-6">
                                        <label class="form-label">Warna</label>
                                        <input type="text" name="color" value="{{ old('color', $editingCategory?->color ?: '#0d6efd') }}" class="form-control">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Icon</label>
                                        <input type="text" name="icon" value="{{ old('icon', $editingCategory?->icon ?: 'bx bx-message-square-dots') }}" class="form-control">
                                    </div>
                                </div>
                                <div class="row g-2 mt-1">
                                    <div class="col-md-6">
                                        <label class="form-label">SLA Respon</label>
                                        <input type="number" min="0" name="sla_respon_menit" value="{{ old('sla_respon_menit', $editingCategory?->sla_respon_menit) }}" class="form-control">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">SLA Selesai</label>
                                        <input type="number" min="0" name="sla_selesai_menit" value="{{ old('sla_selesai_menit', $editingCategory?->sla_selesai_menit) }}" class="form-control">
                                    </div>
                                </div>
                                <div class="mt-3">
                                    <label class="form-label">Default OPD</label>
                                    <select name="default_opd_id" class="form-select">
                                        <option value="">Belum ditentukan</option>
                                        @foreach ($organizations as $organization)
                                            <option value="{{ $organization->id }}" @selected(old('default_opd_id', $editingCategory?->default_opd_id) == $organization->id)>{{ $organization->short_name ?: $organization->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="row g-2 mt-1">
                                    <div class="col-md-6">
                                        <label class="form-label">Urutan</label>
                                        <input type="number" min="0" name="sort_order" value="{{ old('sort_order', $editingCategory?->sort_order ?: 0) }}" class="form-control">
                                    </div>
                                    <div class="col-md-6 d-flex align-items-end">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="active_flag" id="activeFlag" value="1" @checked(old('active_flag', $editingCategory?->active_flag ?? true))>
                                            <label class="form-check-label" for="activeFlag">Kategori aktif</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex gap-2 mt-3">
                                    <button type="submit" class="btn btn-primary flex-fill">{{ $editingCategory ? 'Perbarui' : 'Tambah' }}</button>
                                    @if ($editingCategory)
                                        <a href="{{ route('admin.smart_city.complaints') }}" class="btn btn-outline-secondary">Batal</a>
                                    @endif
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="col-lg-8">
                        <div class="table-responsive">
                            <table class="table align-middle mb-0">
                                <thead>
                                    <tr>
                                        <th>Kategori</th>
                                        <th>Default OPD</th>
                                        <th>SLA</th>
                                        <th>Status</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($categories as $category)
                                        <tr>
                                            <td>
                                                <div class="fw-semibold d-flex align-items-center gap-2">
                                                    <span class="color-dot" style="background: {{ $category->color }}"></span>
                                                    {{ $category->name }}
                                                </div>
                                                <div class="small text-muted">{{ $category->code }} | {{ $category->complaints_count }} aduan</div>
                                            </td>
                                            <td>{{ $category->defaultOrganization?->short_name ?: $category->defaultOrganization?->name ?: 'Belum ditetapkan' }}</td>
                                            <td>
                                                <div class="small">Respon: {{ $category->sla_respon_menit ? number_format($category->sla_respon_menit) . ' mnt' : '-' }}</div>
                                                <div class="small text-muted">Selesai: {{ $category->sla_selesai_menit ? number_format($category->sla_selesai_menit) . ' mnt' : '-' }}</div>
                                            </td>
                                            <td>
                                                <span class="badge {{ $category->active_flag ? 'bg-success-subtle text-success' : 'bg-secondary-subtle text-secondary' }}">
                                                    {{ $category->active_flag ? 'Aktif' : 'Nonaktif' }}
                                                </span>
                                            </td>
                                            <td class="text-end">
                                                <div class="d-flex justify-content-end gap-2">
                                                    <a href="{{ route('admin.smart_city.complaints', ['edit_kategori' => $category->id]) }}" class="btn btn-sm btn-outline-primary">Ubah</a>
                                                    <form method="POST" action="{{ route('admin.smart_city.complaints.category.delete', $category) }}" onsubmit="return confirm('Hapus kategori ini?');">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-sm btn-outline-danger">Hapus</button>
                                                    </form>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center text-muted py-4">Belum ada kategori pengaduan.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('stylesheet')
    <style>
        .complaint-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
        .complaint-card:hover { transform: translateY(-4px); box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.08) !important; }
        .complaint-icon { width: 52px; height: 52px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; }
        .complaint-card-primary { border-top: 4px solid #0d6efd !important; }
        .complaint-card-warning { border-top: 4px solid #ffc107 !important; }
        .complaint-card-success { border-top: 4px solid #198754 !important; }
        .complaint-card-danger { border-top: 4px solid #dc3545 !important; }
        #complaint-map { min-height: 380px; }
        .color-dot { width: 12px; height: 12px; border-radius: 999px; display: inline-block; }
    </style>
@endsection

@section('javascript')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const items = @json($mapComplaints);
            const mapElement = document.getElementById('complaint-map');
            if (!mapElement || typeof L === 'undefined') { return; }

            const map = L.map(mapElement).setView([1.3181, 124.8383], 12);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '&copy; OpenStreetMap contributors'
            }).addTo(map);

            const bounds = [];
            items.forEach(function (item) {
                const lat = Number(item.latitude);
                const lng = Number(item.longitude);
                if (Number.isNaN(lat) || Number.isNaN(lng)) { return; }
                bounds.push([lat, lng]);
                L.marker([lat, lng]).addTo(map).bindPopup('<strong>' + item.kode_tiket + '</strong><br>' + item.judul + '<br><small>' + item.status + '</small>');
            });

            if (bounds.length) {
                map.fitBounds(bounds, { padding: [24, 24] });
            }
        });
    </script>
@endsection