@extends('layout.layout')

@php
    $title = 'Monitoring Pemasangan';
    $subTitle = 'Pantau Progress Pemasangan Meteran';
@endphp

@section('content')

<div class="grid grid-cols-12 gap-6">
    
    {{-- STATS --}}
    {{-- STATS --}}
<div class="col-span-12">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <div class="card border-0 shadow-sm p-4 text-center">
            <p class="text-sm text-neutral-500 mb-1">Total Disetujui</p>
            <p class="text-3xl font-bold text-info-600">{{ $pemasangan->where('status', 'disetujui')->count() }}</p>
        </div>
        <div class="card border-0 shadow-sm p-4 text-center">
            <p class="text-sm text-neutral-500 mb-1">Total Terpasang</p>
            <p class="text-3xl font-bold text-success-600">{{ $pemasangan->where('status', 'aktif')->count() }}</p>
        </div>
        <div class="card border-0 shadow-sm p-4 text-center">
            <p class="text-sm text-neutral-500 mb-1">Stok Meteran</p>
            <p class="text-3xl font-bold text-warning-600">{{ \App\Models\Meteran::whereNull('user_id')->count() }}</p>
        </div>
        <div class="card border-0 shadow-sm p-4 text-center">
            <p class="text-sm text-neutral-500 mb-1">Total Petugas</p>
            <p class="text-3xl font-bold text-primary-600">{{ $perPetugas->count() }}</p>
        </div>
    </div>
</div>

    {{-- TABEL PEMASANGAN --}}
    <div class="col-span-12">
        <div class="card border-0 overflow-hidden">
            <div class="card-header px-6 py-4 border-b">
                <h6 class="text-lg font-semibold">Daftar Pemasangan</h6>
            </div>
            <div class="card-body p-6">
                <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">Pelanggan</th>
                                <th class="px-4 py-3 text-left font-semibold">Alamat</th>
                                <th class="px-4 py-3 text-left font-semibold">Dusun</th>
                                <th class="px-4 py-3 text-left font-semibold">Status</th>
                                <th class="px-4 py-3 text-left font-semibold">ID Meteran</th>
                                <th class="px-4 py-3 text-left font-semibold">Tgl Pasang</th>
                                <th class="px-4 py-3 text-left font-semibold">Petugas</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($pemasangan as $index => $p)
                            <tr class="border-b border-neutral-200 hover:bg-neutral-50 transition">
                                <td class="px-4 py-3 text-sm">{{ $pemasangan->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">
                                    {{ explode(',', $p->profile->address ?? '')[0] ?? '-' }}
                                </td>
                                <td class="px-4 py-3">
                                    @if($p->status == 'aktif')
                                        <span class="bg-success-100 text-success-600 px-2 py-1 rounded-full text-xs font-medium">Terpasang</span>
                                    @else
                                        <span class="bg-info-100 text-info-600 px-2 py-1 rounded-full text-xs font-medium">Menunggu</span>
                                    @endif
                                </td>
                                <td class="px-4 py-3 text-sm">
                                    @if($p->meteran)
                                        <span class="font-mono text-primary-600">{{ $p->meteran->nomor_seri }}</span>
                                    @else
                                        <span class="text-neutral-400">-</span>
                                    @endif
                                </td>
                               <td class="px-4 py-3 text-sm">
                                    @if($p->meteran && $p->meteran->tanggal_pasang)
                                        {{ $p->meteran->tanggal_pasang->format('d M Y') }}
                                    @else
                                        -
                                    @endif
                                </td>
                                <td class="px-4 py-3 text-sm">
                                @if($p->meteran && $p->meteran->petugas)
                                    {{ $p->meteran->petugas->name }}  
                                @else
                                    -
                                @endif
                            </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="8" class="text-center py-10 text-neutral-500">Belum ada data pemasangan</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="mt-6">{{ $pemasangan->links() }}</div>
            </div>
        </div>
    </div>

    {{-- PROGRESS PER PETUGAS --}}
    <div class="col-span-12">
        <div class="card border-0 overflow-hidden">
            <div class="card-header px-6 py-4 border-b">
                <h6 class="text-lg font-semibold">Progress Per Petugas</h6>
            </div>
            <div class="card-body p-6">
                <div class="overflow-x-auto">
                    <table class="w-full border border-neutral-200 rounded-lg">
                        <thead>
                            <tr class="bg-neutral-50">
                                <th class="px-4 py-3 text-left font-semibold">Petugas</th>
                                <th class="px-4 py-3 text-left font-semibold">Dusun</th>
                                <th class="px-4 py-3 text-center font-semibold">Total Terpasang</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($perPetugas as $ptg)
                            <tr class="border-b hover:bg-neutral-50">
                                <td class="px-4 py-3 font-medium">{{ $ptg->name }}</td>
                                <td class="px-4 py-3 text-sm">
                                    {{ explode(',', $ptg->profile->address ?? '')[0] ?? '-' }}
                                </td>
                                <td class="px-4 py-3 text-center">
                                    <span class="bg-success-100 text-success-600 px-3 py-1 rounded-full font-medium text-sm">
                                        {{ $ptg->total_pasang }}
                                    </span>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>

@endsection