@extends('layout.layout')

@php
    $title = 'Pemasangan Meteran';
    $subTitle = 'Daftar Pelanggan Siap Pasang';
@endphp

@section('content')

<div class="grid grid-cols-12 gap-6">
    <div class="col-span-12">
        <div class="card border-0 overflow-hidden">
            <div class="card-header flex justify-between items-center px-6 py-4 border-b">
                <div>
                    <h6 class="card-title mb-0 text-lg font-semibold">Daftar Pemasangan Meteran</h6>
                    <p class="text-sm text-neutral-500 mt-1">
                        Area Tugas: <strong class="text-primary-600">{{ $dusunPetugas ?? 'Semua Dusun' }}</strong>
                    </p>
                </div>
                <span class="bg-info-100 text-info-600 px-3 py-1 rounded-full text-sm font-medium">
                    {{ $pelanggan->total() }} Menunggu
                </span>
            </div>

            <div class="card-body p-6">
                @if(session('success'))
                    <div class="alert alert-success mb-4">{{ session('success') }}</div>
                @endif

                @if($pelanggan->count() == 0)
                    <div class="flex flex-col items-center justify-center py-16">
                        <iconify-icon icon="mdi:check-circle" class="text-5xl block mx-auto mb-2 text-success-400"></iconify-icon>
                        <p class="font-semibold">Semua pelanggan di {{ $dusunPetugas }} sudah terpasang!</p>
                    </div>
                @else
                <div class="overflow-x-auto">
                    <table class="w-full border border-neutral-200 dark:border-neutral-600 rounded-lg">
                        <thead>
                            <tr class="bg-neutral-50 dark:bg-neutral-700">
                                <th class="px-4 py-3 text-left font-bold">No.</th>
                                <th class="px-4 py-3 text-left font-semibold">Nama</th>
                                <th class="px-4 py-3 text-left font-semibold">Alamat</th>
                                <th class="px-4 py-3 text-left font-semibold">No. Telp</th>
                                <th class="px-4 py-3 text-left font-semibold">Tgl Disetujui</th>
                                <th class="px-4 py-3 text-center font-semibold">Lokasi</th>
                                <th class="px-4 py-3 text-center font-semibold">Pasang Meteran</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($pelanggan as $index => $p)
                            <tr class="border-b border-neutral-200 hover:bg-neutral-50 transition">
                                <td class="px-4 py-3 text-sm">{{ $pelanggan->firstItem() + $index }}</td>
                                <td class="px-4 py-3 font-medium">{{ $p->name }}</td>
                                <td class="px-4 py-3 text-sm">{{ $p->profile->address ?? '-' }}</td>
                                <td class="px-4 py-3 text-sm">{{ $p->profile->phone_number ?? '-' }}</td>
                                <td class="px-4 py-3 text-sm">{{ $p->updated_at->format('d M Y') }}</td>
                                <td class="px-4 py-3 text-center">
                                    @if($p->profile->latitude && $p->profile->longitude)
                                        <a href="https://maps.google.com/?q={{ $p->profile->latitude }},{{ $p->profile->longitude }}" 
                                           target="_blank" 
                                           class="w-9 h-9 bg-primary-50 text-primary-600 rounded-lg inline-flex items-center justify-center hover:bg-primary-600 hover:text-white transition"
                                           title="Buka di Google Maps">
                                            <iconify-icon icon="mdi:map-marker" class="text-xl"></iconify-icon>
                                        </a>
                                    @else
                                        <span class="text-xs text-neutral-400">-</span>
                                    @endif
                                </td>
                                <td class="px-4 py-3 text-center">
                                    <button type="button" 
                                            onclick="openModal('{{ $p->id }}', '{{ $p->name }}')" 
                                            class="px-4 py-2 bg-success-600 text-white rounded-lg text-sm hover:bg-success-700 transition flex items-center gap-2 mx-auto">
                                        <iconify-icon icon="mdi:check-circle"></iconify-icon> Pasang
                                    </button>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="mt-6">{{ $pelanggan->links() }}</div>
                @endif
            </div>
        </div>
    </div>
</div>

{{-- MODAL PASANG METERAN --}}
<div id="modalPasang" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 99999; display: none; align-items: center; justify-content: center;">
    <div style="background: white; border-radius: 16px; padding: 24px; width: 100%; max-width: 480px; margin: 0 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); position: relative;">
        
        {{-- Close Button --}}
        <button onclick="closeModal()" style="position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; border: none; background: #f3f4f6; cursor: pointer; display: flex; align-items: center; justify-content: center;">
            ✕
        </button>

        {{-- Header --}}
        <div style="margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #e5e7eb;">
            <h6 style="font-size: 18px; font-weight: bold; color: #1f2937;">Pasang Meteran</h6>
        </div>

        {{-- Body --}}
        <div style="margin-bottom: 16px; padding: 12px; background: #eff6ff; border-radius: 8px; border: 1px solid #dbeafe;">
            <p style="font-size: 14px; color: #6b7280; margin-bottom: 4px;">Pelanggan</p>
            <p style="font-size: 18px; font-weight: bold; color: #1f2937;" id="namaPelanggan">-</p>
            <div id="linkMaps" style="margin-top: 8px;"></div>
        </div>
        
        {{-- ✅ FORM DENGAN DATA-ACTION --}}
        <form id="formPasang" method="POST" data-action="{{ route('DataPetugas.pasang', ['user' => 0]) }}">
            @csrf
            
            {{-- Dropdown --}}
            <div style="margin-bottom: 16px;">
                <label style="display: block; font-weight: 600; font-size: 14px; margin-bottom: 8px; color: #374151;">
                    Pilih ID Meteran <span style="color: #dc2626;">*</span>
                </label>
                <select name="nomor_seri" 
                        style="width: 100%; padding: 12px; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 14px; outline: none;" 
                        required>
                    <option value="">-- Pilih Meteran --</option>
                    @foreach($meteranTersedia as $m)
                        <option value="{{ $m->nomor_seri }}">{{ $m->nomor_seri }}</option>
                    @endforeach
                </select>
                @if($meteranTersedia->count() == 0)
                    <small style="color: #dc2626; display: block; margin-top: 4px;">⚠ Tidak ada stok!</small>
                @endif
            </div>

            {{-- Info --}}
            <div style="margin-bottom: 16px; padding: 8px 12px; background: #f9fafb; border-radius: 8px;">
                <p style="font-size: 12px; color: #6b7280;">
                    Stok tersedia: <strong>{{ $meteranTersedia->count() }}</strong> meteran
                </p>
            </div>
            
            {{-- Buttons --}}
            <div style="display: flex; justify-content: flex-end; gap: 12px; padding-top: 16px; border-top: 1px solid #e5e7eb;">
                <button type="button" 
                        onclick="closeModal()" 
                        style="padding: 10px 20px; border: 1px solid #d1d5db; border-radius: 8px; background: white; color: #374151; font-size: 14px; cursor: pointer;">
                    Batal
                </button>
                <button type="submit" 
                        style="padding: 10px 20px; background: #16a34a; color: white; border: none; border-radius: 8px; font-size: 14px; cursor: pointer;"
                        {{ $meteranTersedia->count() == 0 ? 'disabled' : '' }}>
                    Pasang & Aktifkan
                </button>
            </div>
        </form>
    </div>
</div>

@endsection

{{-- ✅ SCRIPT KOMPATIBEL LOCAL & HOSTING --}}
<script>
function openModal(userId, nama) {
    document.getElementById('namaPelanggan').textContent = nama;
    
    // ✅ Ambil base URL dari data-action form
    var form = document.getElementById('formPasang');
    var baseAction = form.getAttribute('data-action');
    form.action = baseAction.replace('/0', '/' + userId);
    
    document.getElementById('modalPasang').style.display = 'flex';
    document.body.style.overflow = 'hidden';
}

function closeModal() {
    document.getElementById('modalPasang').style.display = 'none';
    document.body.style.overflow = '';
}
</script>