@extends('frontend.app')

@section('content')

    {{-- LOGIKA 1: JIKA USER SUDAH LOGIN DAN MEMILIKI ROLE OWNER/ADMIN --}}
    @if(auth()->check() && auth()->user()->hasRole(['Owner', 'super_admin', 'Admin']))
        
        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-32">
            <div class="bg-white rounded-3xl shadow-2xl border border-gray-100 p-8 md:p-16 text-center relative overflow-hidden animate-fade-in-up">
                
                <!-- Dekorasi Garis Atas -->
                <div class="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-amber-400 to-amber-600"></div>
                
                <!-- Ikon Centang -->
                <div class="w-24 h-24 bg-green-50 border-4 border-green-100 text-green-500 rounded-full flex items-center justify-center mx-auto mb-8 shadow-sm">
                    <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg>
                </div>
                
                <h2 class="text-3xl md:text-4xl font-black text-gray-900 mb-4">
                    Halo, <span class="text-amber-500">{{ auth()->user()->name }}</span>!
                </h2>
                
                <div class="bg-gray-50 border border-gray-100 rounded-2xl p-6 mb-8 text-left">
                    <p class="text-gray-600 text-lg leading-relaxed text-center">
                        Anda sudah terdaftar secara resmi dan berstatus aktif sebagai <strong class="text-gray-900">Mitra Pemilik Properti</strong> di NgekosYuk. Anda tidak perlu melakukan pendaftaran ulang.
                    </p>
                </div>

                <div class="flex flex-col sm:flex-row justify-center gap-4">
                    <a href="/admin" class="bg-amber-500 hover:bg-amber-600 text-gray-950 font-extrabold py-4 px-8 rounded-xl transition shadow-lg shadow-amber-500/20 flex items-center justify-center gap-2">
                        Buka Dasbor Admin
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                    </a>
                    <a href="{{ route('home') }}" class="bg-gray-100 hover:bg-gray-200 text-gray-700 font-extrabold py-4 px-8 rounded-xl transition text-center">
                        Kembali ke Beranda
                    </a>
                </div>
            </div>
        </div>

        <style>
            .animate-fade-in-up {
                animation: fadeInUp 0.6s ease-out forwards;
            }
            @keyframes fadeInUp {
                from { opacity: 0; transform: translateY(20px); }
                to { opacity: 1; transform: translateY(0); }
            }
        </style>

    {{-- LOGIKA 2: JIKA BELUM LOGIN / USER ADALAH TENANT (TAMPILKAN FORM PENDAFTARAN ASLI) --}}
    @else

        <div class="min-h-screen bg-gradient-to-b from-amber-50 to-white flex flex-col justify-center py-12 sm:px-6 lg:px-8 relative">
            
            <!-- POPUP MODAL ERROR EMAIL (Muncul otomatis jika validasi gagal) -->
            @if($errors->has('email'))
                <div x-data="{ open: true }" x-show="open" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm px-4">
                    <div @click.away="open = false" class="bg-white rounded-3xl w-full max-w-md p-8 shadow-2xl relative text-center">
                        <div class="w-20 h-20 bg-red-100 text-red-600 rounded-full flex items-center justify-center mx-auto mb-4">
                            <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
                        </div>
                        <h3 class="text-2xl font-black text-gray-900 mb-2">Pendaftaran Gagal</h3>
                        <p class="text-gray-600 mb-6 text-sm leading-relaxed">
                            {{ $errors->first('email') }}
                        </p>
                        <button @click="open = false" class="w-full bg-gray-900 hover:bg-gray-800 text-white font-bold py-3.5 rounded-xl transition">
                            Mengerti, Saya Ganti Email
                        </button>
                    </div>
                </div>
            @endif

            <div class="sm:mx-auto sm:w-full sm:max-w-2xl">
                <div class="text-center mb-8">
                    <h2 class="text-3xl md:text-4xl font-extrabold text-gray-900 tracking-tight">
                        Bergabung sebagai Mitra <span class="text-amber-500">NgekosYuk</span>
                    </h2>
                    <p class="mt-3 text-base text-gray-600">
                        Lengkapi data diri Anda di bawah ini. Proses verifikasi bertujuan untuk menjaga keamanan dan kenyamanan bersama.
                    </p>
                </div>

                <div class="bg-white py-8 px-6 shadow-xl sm:rounded-2xl border border-gray-100">
                    
                    <!-- BANNER PERINGATAN JIKA TENANT SEDANG LOGIN -->
                    @if(auth()->check())
                        <div class="bg-blue-50 border border-blue-200 text-blue-800 p-4 rounded-xl mb-8 flex items-start gap-3">
                            <svg class="w-6 h-6 shrink-0 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                            <div class="text-sm">
                                <strong>Pemberitahuan Sistem:</strong> Anda saat ini sedang login sebagai Penyewa ({{ auth()->user()->email }}). Sesuai kebijakan pemisahan akun, silakan mendaftar menggunakan <b>Alamat Email yang berbeda</b> untuk akun Mitra Properti Anda.
                            </div>
                        </div>
                    @endif

                    <form action="{{ route('owner.register.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
                        @csrf

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- SECTION 1: Informasi Akun -->
                            <div class="space-y-6 md:col-span-1">
                                <h3 class="text-lg font-bold text-gray-900 border-b border-gray-100 pb-2">1. Informasi Akun</h3>
                                
                                <div>
                                    <label for="name" class="block text-sm font-semibold text-gray-700">Nama Lengkap Sesuai KTP</label>
                                    <input id="name" name="name" type="text" required value="{{ old('name') }}" class="mt-1 block w-full px-4 py-2.5 bg-gray-50 border {{ $errors->has('name') ? 'border-red-400 focus:ring-red-500' : 'border-gray-200 focus:ring-amber-500' }} rounded-lg shadow-sm focus:bg-white focus:outline-none focus:ring-2 sm:text-sm transition">
                                    @error('name') <span class="text-xs text-red-500 mt-1 block font-medium">{{ $message }}</span> @enderror
                                </div>

                                <div>
                                    <label for="email" class="block text-sm font-semibold text-gray-700">Alamat Email Baru <span class="text-red-500">*</span></label>
                                    <input id="email" name="email" type="email" required value="{{ old('email') }}" placeholder="Gunakan email selain akun penyewa" class="mt-1 block w-full px-4 py-2.5 bg-gray-50 border {{ $errors->has('email') ? 'border-red-400 focus:ring-red-500' : 'border-gray-200 focus:ring-amber-500' }} rounded-lg shadow-sm focus:bg-white focus:outline-none focus:ring-2 sm:text-sm transition">
                                    @error('email') <span class="text-xs text-red-500 mt-1 block font-medium">{{ $message }}</span> @enderror
                                </div>

                                <div>
                                    <label for="password" class="block text-sm font-semibold text-gray-700">Kata Sandi</label>
                                    <input id="password" name="password" type="password" required class="mt-1 block w-full px-4 py-2.5 bg-gray-50 border {{ $errors->has('password') ? 'border-red-400 focus:ring-red-500' : 'border-gray-200 focus:ring-amber-500' }} rounded-lg shadow-sm focus:bg-white focus:outline-none focus:ring-2 sm:text-sm transition">
                                    @error('password') <span class="text-xs text-red-500 mt-1 block font-medium">{{ $message }}</span> @enderror
                                </div>

                                <div>
                                    <label for="password_confirmation" class="block text-sm font-semibold text-gray-700">Konfirmasi Kata Sandi</label>
                                    <input id="password_confirmation" name="password_confirmation" type="password" required class="mt-1 block w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-lg shadow-sm focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500 sm:text-sm transition">
                                </div>
                            </div>

                            <!-- SECTION 2: Verifikasi Identitas -->
                            <div class="space-y-6 md:col-span-1">
                                <h3 class="text-lg font-bold text-gray-900 border-b border-gray-100 pb-2">2. Data Verifikasi</h3>
                                
                                <div>
                                    <label for="phone" class="block text-sm font-semibold text-gray-700">Nomor WhatsApp Aktif</label>
                                    <input id="phone" name="phone" type="number" required value="{{ old('phone') }}" placeholder="081234567890" class="mt-1 block w-full px-4 py-2.5 bg-gray-50 border {{ $errors->has('phone') ? 'border-red-400 focus:ring-red-500' : 'border-gray-200 focus:ring-amber-500' }} rounded-lg shadow-sm focus:bg-white focus:outline-none focus:ring-2 sm:text-sm transition">
                                    @error('phone') <span class="text-xs text-red-500 mt-1 block font-medium">{{ $message }}</span> @enderror
                                </div>

                                <div>
                                    <label for="nik" class="block text-sm font-semibold text-gray-700">Nomor Induk Kependudukan (NIK)</label>
                                    <input id="nik" name="nik" type="number" required value="{{ old('nik') }}" placeholder="16 Digit NIK KTP" class="mt-1 block w-full px-4 py-2.5 bg-gray-50 border {{ $errors->has('nik') ? 'border-red-400 focus:ring-red-500' : 'border-gray-200 focus:ring-amber-500' }} rounded-lg shadow-sm focus:bg-white focus:outline-none focus:ring-2 sm:text-sm transition">
                                    @error('nik') <span class="text-xs text-red-500 mt-1 block font-medium">{{ $message }}</span> @enderror
                                </div>

                                <!-- Blok Upload KTP dengan Alpine.js -->
                                <div x-data="{ fileName: '' }">
                                    <label for="ktp_image" class="block text-sm font-semibold text-gray-700">Upload Foto KTP Asli</label>
                                    <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 {{ $errors->has('ktp_image') ? 'border-red-300' : 'border-gray-300' }} border-dashed rounded-lg bg-gray-50 hover:bg-gray-100 transition relative">
                                        <div class="space-y-1 text-center">
                                            <svg x-show="!fileName" class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                                                <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                            </svg>
                                            <svg x-show="fileName" style="display: none;" class="mx-auto h-12 w-12 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                            </svg>

                                            <div class="flex text-sm text-gray-600 justify-center mt-2">
                                                <label for="ktp_image" class="relative cursor-pointer bg-white rounded-md font-medium text-amber-600 hover:text-amber-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-amber-500 px-2 py-1 shadow-sm border border-gray-200">
                                                    <span x-text="fileName ? 'Ganti File' : 'Pilih File'">Pilih File</span>
                                                    <input id="ktp_image" name="ktp_image" type="file" class="sr-only" required accept="image/png, image/jpeg, image/jpg" @change="fileName = $event.target.files[0].name">
                                                </label>
                                            </div>
                                            <p x-show="fileName" style="display: none;" class="text-sm text-green-600 font-bold mt-2 truncate max-w-[150px] mx-auto" x-text="fileName"></p>
                                            <p x-show="!fileName" class="text-xs text-gray-500 mt-2">PNG, JPG, JPEG maks 2MB</p>
                                        </div>
                                    </div>
                                    @error('ktp_image') <span class="text-xs text-red-500 mt-1 block font-medium">{{ $message }}</span> @enderror
                                </div>
                            </div>
                        </div>

                        <div class="pt-4 border-t border-gray-100 mt-6">
                            <button type="submit" class="w-full flex justify-center py-3.5 px-4 border border-transparent rounded-xl shadow-md text-sm font-bold text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition duration-150">
                                Ajukan Pendaftaran Mitra
                            </button>
                            <p class="mt-4 text-center text-xs text-gray-500">
                                Dengan mendaftar, Anda menyetujui Syarat & Ketentuan serta Kebijakan Privasi NgekosYuk.
                            </p>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    @endif

@endsection