@extends('app')
@section('content')
    <div class="container-fluid px-4">
        <h5 class="mt-4">Data Laporan</h5>
        <div class="card mb-4">
            <div class="card-header">
                <i class="fas fa-table me-1"></i>
                Data Laporan Pelanggan
            </div>
            <div class="card-body">
                <table id="datatablesSimple" class="table table-bordered table-striped">
                    <thead class="table-light">
                        <tr>
                            <th>Nama Pelanggan</th>
                            <th>Nama Barang</th>
                            <th>Nomor HP</th>
                            <th>Lokasi</th>
                            <th>Foto</th>
                            <th>Status</th>
                            <th>Teknisi</th>
                            <th width="220">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($laporan as $l)
                            <tr>
                                <td>{{ $l->pelanggan->nama }}</td>
                                <td>{{ $l->nama_barang }}</td>
                                <td>{{ $l->nomor_hp }}</td>
                                <td>
                                    {{ $l->lokasi }}
                                    @if ($l->latitude && $l->longitude)
                                        <div class="mt-1">
                                            <button class="btn btn-info btn-sm"
                                                onclick="lihatLokasi({{ $l->latitude }}, {{ $l->longitude }}, '{{ $l->latitude }}', '{{ $l->longitude }}')">
                                                Lihat Peta
                                            </button>
                                        </div>
                                    @endif
                                </td>
                                <td>
                                    <img src="{{ asset('storage/' . $l->foto) }}" width="120"
                                        class="img-fluid img-thumbnail">
                                </td>
                                <td>
                                    <span class="badge bg-secondary">
                                        {{ $l->status }}
                                    </span>
                                </td>
                                <td>
                                    {{ $l->teknisi ? $l->teknisi->nama : 'Belum Ditugaskan' }}
                                </td>
                                <td>
                                    @if ($l->status == 'Menunggu')
                                        <button class="btn btn-success btn-sm" data-bs-toggle="modal"
                                            data-bs-target="#modalTeknisi-{{ $l->id }}">
                                            Setujui
                                        </button>
                                        <form action="{{ route('admin.laporan.tolak', $l->id) }}" method="post"
                                            class="d-inline">
                                            @csrf
                                            @method('post')
                                            <button class="btn btn-danger btn-sm">
                                                Tolak
                                            </button>
                                        </form>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>

                {{-- ✅ Modal dipindah ke LUAR tabel agar struktur HTML valid --}}
                @foreach ($laporan as $l)
                    @if ($l->status == 'Menunggu')
                        <div class="modal fade" id="modalTeknisi-{{ $l->id }}" tabindex="-1">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Pilih Teknisi</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                    </div>
                                    <form action="{{ route('admin.laporan.setujui', $l->id) }}" method="POST">
                                        @csrf
                                        @method('post')
                                        <div class="modal-body">
                                            <label class="form-label">Teknisi</label>
                                            <select name="id_teknisi" class="form-control" required>
                                                <option value="">-- Pilih Teknisi --</option>
                                                @foreach ($teknisis as $teknisi)
                                                    <option value="{{ $teknisi->id }}">
                                                        {{ $teknisi->nama }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                                Batal
                                            </button>
                                            <button type="submit" class="btn btn-success">
                                                Setujui
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    @endif
                @endforeach

            </div>
        </div>
    </div>

    {{-- Modal Peta --}}
    <div class="modal fade" id="modalMap" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Lokasi Laporan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div id="mapView" style="height:400px;"></div>
                    <div class="mt-3 text-end">
                        <a id="btnNavigasi" href="#" target="_blank" class="btn btn-success btn-sm"
                            style="display:none;">
                            Navigasi
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        let map;

        function lihatLokasi(lat, lng, latStr, lngStr) {
            let modal = new bootstrap.Modal(document.getElementById('modalMap'));
            modal.show();

            setTimeout(function() {
                if (map) {
                    map.remove();
                }
                map = L.map('mapView').setView([lat, lng], 15);
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: '© OpenStreetMap'
                }).addTo(map);
                L.marker([lat, lng]).addTo(map);
            }, 300);

            // Tampilkan tombol Navigasi di modal
            const btnNavigasi = document.getElementById('btnNavigasi');
            btnNavigasi.style.display = 'inline-block';
            btnNavigasi.href = `https://www.google.com/maps?q=${latStr},${lngStr}`;
        }
    </script>
@endsection