@extends('layouts.app', [
    'title' => 'Halaman Ubah Data 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">UBAH DATA PELANGGAN</h6>
        </div>

        <div class="p-6">
            <form action="{{ route('klien.update', $client->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                
                <!-- 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 for="no_pelanggan" class="block text-sm font-medium text-gray-700 mb-1">No Pelanggan</label>
                        <input type="text" 
                            name="no_pelanggan" 
                            id="no_pelanggan" 
                            class="w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-1 {{ $errors->has('no_pelanggan') ? 'border-red-500 focus:ring-red-500' : 'border-gray-300 focus:ring-blue-500'}}" 
                            value="{{ old('no_pelanggan', $client->no_pelanggan) }}" 
                            placeholder="Masukkan No Pelanggan" 
                            autofocus>
                        
                        @error('no_pelanggan')
                            <span class="block text-xs font-bold text-red-600 mt-1">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>

                    @php
                        $isAdmin = auth()->check() && (auth()->user()->role === 'admin' || auth()->user()->id === 1);
                    @endphp

                    <!-- Tanggal Pemasangan -->
                    <div>
                        <label for="tanggal" class="block text-sm font-medium text-gray-700 mb-1">Tanggal Pemasangan</label>
                        <input type="date" 
                            class="w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-1 {{ $errors->has('tanggal') ? 'border-red-500 focus:ring-red-500' : 'border-gray-300 focus:ring-blue-500' }} {{ $isAdmin ? '' : 'bg-gray-100 cursor-not-allowed' }}" 
                            id="tanggal" 
                            name="tanggal" 
                            value="{{ old('tanggal', $client->tanggal) }}" 
                            placeholder="Masukkan Tanggal Pemasangan" 
                            {{ $isAdmin ? 'autofocus' : 'disabled' }}>

                        @if(!$isAdmin)
                            <input type="hidden" name="tanggal" value="{{ old('tanggal', $client->tanggal) }}">
                            <span class="block text-xs text-amber-600 italic mt-1">*Lapor Admin untuk mengubah</span>
                        @endif

                        @error('tanggal')
                            <span class="block text-xs font-bold text-red-600 mt-1">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Status Pelanggan -->
                    <div>
                        <label for="stats_id" class="block text-sm font-medium text-gray-700 mb-1">Status Pelanggan</label>
                        <select class="w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-1 {{ $errors->has('stats_id') ? 'border-red-500 focus:ring-red-500' : 'border-gray-300 focus:ring-blue-500' }} {{ $isAdmin ? '' : 'bg-gray-100 cursor-not-allowed' }}"
                            name="stats_id" 
                            id="stats_id"
                            {{ $isAdmin ? '' : 'disabled' }}>
                            <option></option>
                            @foreach ($stats as $statItem)
                                <option value="{{ $statItem->id_stats }}"
                                    {{ (old('stats_id', $client->stats_id) == $statItem->id_stats) ? 'selected' : '' }}>
                                    {{ $statItem->nama_stats }}
                                </option>
                            @endforeach
                        </select>

                        @if(!$isAdmin)
                            <input type="hidden" name="stats_id" value="{{ old('stats_id', $client->stats_id) }}">
                            <span class="block text-xs text-amber-600 italic mt-1">*Lapor Admin untuk mengubah</span>
                        @endif

                        @error('stats_id')
                            <span class="block text-xs font-bold text-red-600 mt-1">{{ $errors->first('stats_id') }}</span>
                        @enderror
                    </div>

                    <!-- Nama Pelanggan -->
                    <div>
                        <label for="name" 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 rounded-md shadow-sm focus:outline-none focus:ring-1 {{ $errors->has('name') ? 'border-red-500 focus:ring-red-500' : 'border-gray-300 focus:ring-blue-500'}}" 
                            name="name"
                            id="name" 
                            value="{{ old('name', $client->name) }}" 
                            placeholder="Masukkan Nama Pelanggan" 
                            autofocus>
                        @error('name')
                            <span class="block text-xs font-bold text-red-600 mt-1">{{ $errors->first('name') }}</span>
                        @enderror
                    </div>

                    <!-- Paket Internet -->
                    <div>
                        <label for="internet_package_id" class="block text-sm font-medium text-gray-700 mb-1">Paket Internet</label>
                        <select class="w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-1 {{ $errors->has('internet_package_id') ? 'border-red-500 focus:ring-red-500' : 'border-gray-300 focus:ring-blue-500' }} {{ $isAdmin ? '' : 'bg-gray-100 cursor-not-allowed' }}"
                            name="internet_package_id" 
                            id="internet_package_id"
                            {{ $isAdmin ? '' : 'disabled' }}>
                            <option></option>
                            @foreach ($internet_packages as $internet_package)
                                <option value="{{ $internet_package->id }}"
                                    {{ (old('internet_package_id', $client->internet_package_id) == $internet_package->id) ? 'selected' : '' }}>
                                    {{ $internet_package->name }} - {{ indonesian_currency($internet_package->price) }}
                                </option>
                            @endforeach
                        </select>

                        @if(!$isAdmin)
                            <input type="hidden" name="internet_package_id" value="{{ old('internet_package_id', $client->internet_package_id) }}">
                            <span class="block text-xs text-amber-600 italic mt-1">*Lapor Admin untuk mengubah</span>
                        @endif

                        @error('internet_package_id')
                            <span class="block text-xs font-bold text-red-600 mt-1">{{ $errors->first('internet_package_id') }}</span>
                        @enderror
                    </div>

                    <!-- Nomor Handphone -->
                    <div>
                        <label for="phone_number" 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 rounded-md shadow-sm focus:outline-none focus:ring-1 {{ $errors->has('phone_number') ? 'border-red-500 focus:ring-red-500' : 'border-gray-300 focus:ring-blue-500'}}"
                            name="phone_number" 
                            id="phone_number" 
                            value="{{ old('phone_number', $client->phone_number) }}"
                            placeholder="Masukkan Nomor Handphone">
                        @error('phone_number')
                            <span class="block text-xs font-bold text-red-600 mt-1">{{ $errors->first('phone_number') }}</span>
                        @enderror
                    </div>
                </div>

                <!-- Baris Kedua (Grid 2 Kolom untuk Port, ODP, HP, Foto, Kode ATV, & Preview) -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6" 
                    x-data="{ 
                        imageUrl: '{{ asset($client->house_image) }}', 
                        isDragging: false,
                        handleFileChange(event) {
                            const file = event.target.files[0];
                            if (file) {
                                this.imageUrl = URL.createObjectURL(file);
                                document.getElementById('label_house_image').innerText = file.name;
                            }
                        },
                        handleDrop(event) {
                            this.isDragging = false;
                            const file = event.dataTransfer.files[0];
                            if (file && file.type.startsWith('image/')) {
                                const input = document.getElementById('house_image');
                                const dataTransfer = new DataTransfer();
                                dataTransfer.items.add(file);
                                input.files = dataTransfer.files;
                                
                                this.imageUrl = URL.createObjectURL(file);
                                document.getElementById('label_house_image').innerText = file.name;
                            }
                        }
                    }">
                                    
                    <!-- Sisi Kiri: Form Pendukung -->
                    <div class="space-y-4">
                        <!-- OLT -->
                        <div>
                            <label for="olt_id" class="block text-sm font-medium text-gray-700 mb-1">OLT</label>
                            <select class="w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-1 {{ $errors->has('olt_id') ? 'border-red-500 focus:ring-red-500' : 'border-gray-300 focus:ring-blue-500' }}" 
                                name="olt_id" 
                                id="olt_id">
                                <option value="">-- Pilih OLT --</option>
                                @foreach(\App\Models\Olt::all() as $olt)
                                    <option value="{{ $olt->id }}" 
                                        {{ (old('olt_id', $client->olt_id ?? ($client->port->olt_id ?? '')) == $olt->id) ? 'selected' : '' }}>
                                        {{ $olt->lokasi_olt }}
                                    </option>
                                @endforeach
                            </select>
                            @error('olt_id')
                                <span class="block text-xs font-bold text-red-600 mt-1">{{ $message }}</span>
                            @enderror
                        </div>

                        <!-- Port OLT -->
                        <div>
                            <label for="port_id" class="block text-sm font-medium text-gray-700 mb-1">Port OLT</label>
                            <select class="w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-1 {{ $errors->has('port_id') ? 'border-red-500 focus:ring-red-500' : 'border-gray-300 focus:ring-blue-500'}}" 
                                name="port_id" 
                                id="port_id">
                                <option value="">-- Pilih Port OLT --</option>
                                @foreach(\App\Models\Port::all() as $port)
                                    <option value="{{ $port->id }}" 
                                        {{ old('port_id', $client->port_id ?? '') == $port->id ? 'selected' : '' }}>
                                        {{ $port->port_olt }}
                                    </option>
                                @endforeach
                            </select>
                            @error('port_id')
                                <span class="block text-xs font-bold text-red-600 mt-1">{{ $errors->first('port_id') }}</span>
                            @enderror
                        </div>

                        <div>
                            <label for="odp" class="block text-sm font-medium text-gray-700 mb-1">ODP</label>
                            <select class="w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-1 bg-gray-100 {{ $errors->has('odp_id') ? 'border-red-500 focus:ring-red-500' : 'border-gray-300 focus:ring-blue-500'}}" 
                                name="odp_id" 
                                id="odp" 
                                data-url="{{ route('odp.by_port') }}" 
                                data-current="{{ old('odp_id', $client->odp_id ?? '') }}" 
                                {{ old('port_id', $client->port_id ?? '') ? '' : 'disabled' }}>
                                <option value="">-- Pilih Port OLT Dulu --</option>
                            </select>
                            @error('odp_id')
                                <span class="block text-xs font-bold text-red-600 mt-1">{{ $errors->first('odp_id') }}</span>
                            @enderror
                        </div>

                        <!-- Foto Rumah -->
                        <div>
                            <label for="house_image" class="block text-sm font-medium text-gray-700 mb-1">Foto Rumah</label>
                            <div class="flex items-center">
                                <label class="w-full flex items-center px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm cursor-pointer hover:bg-gray-50">
                                    <span class="text-sm text-gray-600 truncate" id="label_house_image">{{ Str::limit($client->house_image, 50, '...') }}</span>
                                    <input type="file" 
                                        class="sr-only @error('house_image') border-red-500 @enderror" 
                                        name="house_image" 
                                        id="house_image"
                                        accept="image/jpeg,image/jpg,image/png"
                                        @change="handleFileChange($event)">
                                </label>
                            </div>
                            <span class="text-xs text-gray-500 mt-1 block">*Pastikan file berekstensi jpg/jpeg/png</span>
                            @error('house_image')
                                <span class="block text-xs font-bold text-red-600 mt-1">{{ $errors->first('house_image') }}</span>
                            @enderror
                        </div>

                        <!-- Kode TV Premium -->
                        <div>
                            <label for="kode_atv" 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 rounded-md shadow-sm focus:outline-none focus:ring-1 bg-gray-100 {{ $errors->has('kode_atv') ? 'border-red-500 focus:ring-red-500' : 'border-gray-300 focus:ring-blue-500'}}"
                                name="kode_atv" 
                                id="kode_atv" 
                                list="list_kode_atv"
                                value="{{ old('kode_atv', $client->kode_atv) }}" 
                                placeholder="Tambah kode atau pilih kode TV Premium"
                                disabled 
                                data-url="{{ route('atv.codes') }}"
                                data-current="{{ old('kode_atv', $client->kode_atv) }}">
                            
                            <datalist id="list_kode_atv"></datalist>
                            
                            <span class="text-xs text-gray-500 mt-1 block">*Opsional (Bisa diketik manual jika stok kosong)</span>
                            @error('kode_atv')
                                <span class="block text-xs font-bold text-red-600 mt-1">{{ $errors->first('kode_atv') }}</span>
                            @enderror
                        </div>
                    </div>

                    <!-- Sisi Kanan: Image Preview & Drag and Drop Area -->
                    <div class="border-2 border-dashed rounded-lg p-4 flex flex-col items-center justify-center bg-gray-50 transition-colors min-h-62.5 relative cursor-pointer"
                        :class="{ 'border-blue-500 bg-blue-50': isDragging, 'border-gray-300': !isDragging }"
                        @dragover.prevent="isDragging = true"
                        @dragleave.prevent="isDragging = false"
                        @drop.prevent="handleDrop($event)"
                        @click="document.getElementById('house_image').click()">
                        
                        <div class="text-center w-full h-full flex flex-col items-center justify-center">
                            <img :src="imageUrl" class="max-h-64 rounded shadow-md object-cover mx-auto mb-2" id="image_preview" style="width: 65%;">
                            <input type="hidden" value="{{ asset($client->house_image) }}" id="old_image_preview">
                            <span class="text-xs text-gray-500 block mt-2">Drag & Drop gambar di sini atau klik untuk mengganti</span>
                        </div>
                    </div>
                </div>

                <!-- Baris Ketiga: Alamat Lengkap -->
                <div class="mb-6">
                    <label for="address" class="block text-sm font-medium text-gray-700 mb-1">Alamat Lengkap</label>
                    <textarea class="w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-1 {{ $errors->has('address') ? 'border-red-500 focus:ring-red-500' : 'border-gray-300 focus:ring-blue-500'}}" 
                        name="address"
                        id="address" 
                        rows="3"
                        placeholder="Masukkan Alamat Lengkap">{{ old('address', $client->address) }}</textarea>
                    @error('address')
                        <span class="block text-xs font-bold text-red-600 mt-1">{{ $errors->first('address') }}</span>
                    @enderror
                </div>

                <!-- Tombol Aksi -->
                <div class="flex items-center justify-end space-x-3">
                    <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>
                    <button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md shadow-sm transition">Ubah</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

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