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

        <div class="p-6">
            <form action="{{ route('klien.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                
                <!-- 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') }}" 
                            placeholder="Masukkan No Pelanggan" 
                            autofocus>
                        
                        @error('no_pelanggan')
                            <span class="block text-xs font-bold text-red-600 mt-1">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>

                    <!-- 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'}}" 
                            id="tanggal" 
                            name="tanggal" 
                            value="{{ old('tanggal') }}" 
                            required>
                        @error('tanggal')
                            <span class="block text-xs font-bold text-red-600 mt-1">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Status -->
                    <div>
                        <label for="stats_id" class="block text-sm font-medium text-gray-700 mb-1">Status</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'}}"
                            name="stats_id" id="stats_id">
                            <option selected>Pilih..</option>
                            @foreach ($stats as $statItem)
                                <option value="{{ $statItem->id_stats }}" {{ old('stats_id') == $statItem->id_stats ? 'selected' : '' }}>
                                    {{ $statItem->nama_stats }}
                                </option>
                            @endforeach
                        </select>
                        @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') }}" 
                            placeholder="Masukkan Nama Pelanggan">
                        @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'}}"
                            name="internet_package_id" id="internet_package_id">
                            <option selected>Pilih..</option>
                            @foreach ($internet_packages as $internet_package)
                                <option value="{{ $internet_package->id }}" {{ old('internet_package_id') == $internet_package->id ? 'selected' : '' }}>
                                    {{ $internet_package->name }} - {{ indonesian_currency($internet_package->price) }}
                                </option>
                            @endforeach
                        </select>
                        @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" 
                            value="{{ old('phone_number') }}" 
                            id="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>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6" 
                    x-data="{ 
                        imageUrl: null, 
                        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 (Ditambahkan) -->
                    <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') == $olt->id || (isset($client) && $client->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 bg-gray-100 {{ $errors->has('port_id') ? 'border-red-500 focus:ring-red-500' : 'border-gray-300 focus:ring-blue-500' }}" 
                                name="port_id" 
                                id="port_id"
                                data-url="{{ route('port.by_olt') }}"
                                data-current="{{ old('port_id', $client->port_id ?? '') }}"
                                {{ old('olt_id') ? '' : 'disabled' }}>
                                <option value="">-- Pilih OLT Dulu --</option>
                            </select>
                            @error('port_id')
                                <span class="block text-xs font-bold text-red-600 mt-1">{{ $errors->first('port_id') }}</span>
                            @enderror
                        </div>

                        <!-- ODP -->
                        <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') }}" 
                                {{ old('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">Pilih Gambar</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') }}" 
                                placeholder="Ketik manual atau pilih kode TV Premium"
                                disabled 
                                data-url="{{ route('atv.codes') }}">
                            
                            <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()">
                        
                        <!-- Jika gambar sudah dipilih/di-drop -->
                        <template x-if="imageUrl">
                            <div class="relative w-full h-full flex items-center justify-center">
                                <img :src="imageUrl" class="max-h-64 rounded shadow-md object-cover mx-auto" id="image_preview">
                                <button type="button" 
                                        @click.stop="imageUrl = null; document.getElementById('house_image').value = ''; document.getElementById('label_house_image').innerText = 'Pilih Gambar';" 
                                        class="absolute top-2 right-2 bg-red-600 text-white rounded-full p-1.5 shadow hover:bg-red-700 transition" 
                                        title="Hapus Gambar">
                                    <i class="fas fa-times text-xs"></i>
                                </button>
                            </div>
                        </template>

                        <!-- Tampilan default (Belum ada gambar / gambar bawaan) -->
                        <template x-if="!imageUrl">
                            <div class="text-center">
                                <img src="{{ asset('img/no-image.jpg') }}" class="max-h-64 rounded shadow-md object-cover mx-auto mb-2" id="image_preview">
                                <span class="text-xs text-gray-500 block">Drag & Drop gambar di sini atau klik untuk mengganti</span>
                                <input type="hidden" value="{{ asset('img/no-image.jpg') }}" id="old_image_preview">
                            </div>
                        </template>
                    </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') }}</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">Tambah</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

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