@extends('layouts.app', [
    'title' => 'Halaman Detail Pelanggan'
])

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="bg-white shadow-md rounded-lg overflow-hidden mb-6">
        <!-- Card Header -->
        <div class="px-6 py-4 border-b border-gray-400">
            <h6 class="m-0 font-bold text-gray-900 text-base">DETAIL DATA PELANGGAN</h6>
        </div>

        <div class="p-6">
            <!-- Baris Pertama (3 Kolom per baris di layar besar) -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
                
                <!-- No Pelanggan -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">No Pelanggan</label>
                    <input type="text" class="w-full px-3 py-2 border border-gray-300 bg-gray-100 rounded-md shadow-sm text-gray-700 cursor-not-allowed" value="{{ $client->no_pelanggan }}" disabled>
                </div>

                <!-- Tanggal Pemasangan -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Tanggal Pemasangan</label>
                    <input type="text" class="w-full px-3 py-2 border border-gray-300 bg-gray-100 rounded-md shadow-sm text-gray-700 cursor-not-allowed" value="{{ $client->tanggal }}" disabled>
                </div>

                <!-- Status -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
                    <input type="text" class="w-full px-3 py-2 border border-gray-300 bg-gray-100 rounded-md shadow-sm text-gray-700 cursor-not-allowed" value="{{ $client->stats->nama_stats }}" disabled>
                </div>

                <!-- Nama Pelanggan -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Nama Pelanggan</label>
                    <input type="text" class="w-full px-3 py-2 border border-gray-300 bg-gray-100 rounded-md shadow-sm text-gray-700 cursor-not-allowed" value="{{ $client->name }}" disabled>
                </div>

                <!-- Paket Internet -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Paket Internet</label>
                    <input type="text" class="w-full px-3 py-2 border border-gray-300 bg-gray-100 rounded-md shadow-sm text-gray-700 cursor-not-allowed" value="{{ $client->internet_package->name }} - {{ indonesian_currency($client->internet_package->price) }}" disabled>
                </div>

                <!-- Nomor Handphone -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Nomor Handphone</label>
                    <input type="text" class="w-full px-3 py-2 border border-gray-300 bg-gray-100 rounded-md shadow-sm text-gray-700 cursor-not-allowed" value="{{ $client->phone_number }}" disabled>
                </div>
            </div>

            <!-- Baris Kedua (Grid 2 Kolom untuk Informasi Pendukung & Foto Rumah) -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                
                <!-- Sisi Kiri: Informasi Pelanggan Lainnya -->
                <div class="space-y-4">
                    <!-- OLT -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">OLT</label>
                        <input type="text" class="w-full px-3 py-2 border border-gray-300 bg-gray-100 rounded-md shadow-sm text-gray-700 cursor-not-allowed" value="{{ $client->port->olt->lokasi_olt ?? ($client->olt->lokasi_olt ?? '-') }}" disabled>
                    </div>

                    <!-- Port OLT -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Port OLT</label>
                        <input type="text" class="w-full px-3 py-2 border border-gray-300 bg-gray-100 rounded-md shadow-sm text-gray-700 cursor-not-allowed" value="{{ $client->port->port_olt ?? '-' }}" disabled>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">ODP</label>
                        <input type="text" class="w-full px-3 py-2 border border-gray-300 bg-gray-100 rounded-md shadow-sm text-gray-700 cursor-not-allowed" value="{{ $client->odp->nama_odp ?? '-' }}" disabled>
                    </div>               

                    <!-- Kode TV Premium -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Kode TV Premium</label>
                        <input type="text" class="w-full px-3 py-2 border border-gray-300 bg-gray-100 rounded-md shadow-sm text-gray-700 cursor-not-allowed" value="{{ $client->kode_atv }}" disabled>
                    </div>

                    <!-- Alamat Lengkap -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Alamat Lengkap</label>
                        <textarea class="w-full px-3 py-2 border border-gray-300 bg-gray-100 rounded-md shadow-sm text-gray-700 cursor-not-allowed" rows="3" disabled>{{ $client->address }}</textarea>
                    </div>
                </div>

                <!-- Sisi Kanan: Foto Rumah (Preview Full Box) -->
                <div class="flex flex-col bg-gray-50 border border-dashed border-gray-300 rounded-lg p-4" x-data="{ openPhoto: false }">
                    <label class="block text-sm font-medium text-gray-700 mb-3 text-center">Foto Rumah</label>
                    <div class="grow flex items-center justify-center overflow-hidden rounded-md">
                        <img src="{{ asset($client->house_image) }}" 
                            class="w-full h-64 rounded-md shadow-sm object-cover cursor-pointer hover:opacity-95 transition transform hover:scale-[1.01]" 
                            alt="Foto Rumah"
                            @click="openPhoto = true"
                            title="Klik untuk memperbesar gambar">
                    </div>

                    <!-- MODAL PREVIEW GAMBAR PENUH -->
                    <div x-show="openPhoto" 
                        x-cloak
                        class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm"
                        x-transition:enter="transition ease-out duration-300"
                        x-transition:enter-start="opacity-0"
                        x-transition:enter-end="opacity-100"
                        x-transition:leave="transition ease-in duration-200"
                        x-transition:leave-start="opacity-100"
                        x-transition:leave-end="opacity-0"
                        @click.self="openPhoto = false">
                        
                        <div class="relative bg-white rounded-2xl p-3 max-w-4xl max-h-[90vh] overflow-hidden shadow-2xl flex flex-col items-center"
                            x-transition:enter="transition ease-out duration-300"
                            x-transition:enter-start="opacity-0 scale-95"
                            x-transition:enter-end="opacity-100 scale-100">
                            
                            <!-- Tombol Tutup -->
                            <button @click="openPhoto = false" 
                                    class="absolute top-4 right-4 z-10 bg-gray-800/60 hover:bg-gray-800 text-white rounded-full w-9 h-9 flex items-center justify-center transition cursor-pointer">
                                <i class="fas fa-times"></i>
                            </button>

                            <!-- Gambar Ukuran Penuh -->
                            <img src="{{ asset($client->house_image) }}" 
                                class="max-h-[80vh] w-auto rounded-xl object-contain mx-auto shadow-inner" 
                                alt="Foto Rumah Penuh">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tombol Aksi -->
            <div class="flex items-center justify-start space-x-3 pt-4 border-t border-gray-200">
                <a href="{{ route('klien.index') }}" class="px-4 py-2 bg-gray-500 hover:bg-gray-600 text-white text-sm font-medium rounded-md shadow-sm transition">Kembali</a>
                <a href="{{ route('klien.edit', $client->id) }}" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-medium rounded-md shadow-sm transition">Ubah</a>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
@include('clients.script')
@endpush