@extends('layouts.auth')
@section('title', 'Daftar')

@section('content')

{{-- Tambahan CSS khusus halaman ini --}}
<style>
    /* 1. CSS Khusus File Upload (Tetap Dipertahankan karena sudah bagus) */
    .upload-wrapper {
        display: flex;
        gap: 15px;
        margin-bottom: 15px;
    }
    @media (max-width: 600px) {
        .upload-wrapper {
            flex-direction: column;
        }
    }
    .file-upload-box {
        flex: 1;
        border: 2px dashed #ced4da;
        border-radius: 12px;
        padding: 20px 10px;
        text-align: center;
        cursor: pointer;
        background-color: #f8f9fa;
        transition: all 0.3s ease;
    }
    .file-upload-box:hover {
        border-color: #0d6efd;
        background-color: #f1f5f9;
    }
    .file-upload-box input[type="file"] {
        display: none;
    }
    .file-upload-box i {
        font-size: 24px;
        color: #6c757d;
        margin-bottom: 10px;
        display: block;
    }
    .file-upload-box .upload-title {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: #495057;
    }
    .file-upload-box small {
        display: block;
        font-size: 11px;
        color: #868e96;
        margin-top: 5px;
    }
    .file-name {
        margin-top: 8px;
        font-size: 12px;
        font-weight: bold;
        color: #0d6efd;
        word-break: break-all;
    }

    /* 2. CSS Khusus Textarea Alamat agar seragam dengan form lain */
    .textarea-group .input-icon {
        top: 15px !important; /* Menahan ikon agar tetap di atas, tidak ke tengah */
        transform: none !important;
    }
    .textarea-group textarea {
        width: 100%;
        padding: 15px 15px 15px 45px; /* 45px memberi ruang untuk ikon di kiri */
        border: 1px solid #ebedf2; /* Meniru warna border template kamu */
        border-radius: 12px; /* Meniru lengkungan template kamu */
        background-color: #f8f9fc; /* Meniru warna abu-abu muda */
        font-family: inherit;
        font-size: 14px;
        color: #495057;
        outline: none;
        resize: vertical;
        min-height: 100px;
        box-sizing: border-box;
        transition: border-color 0.3s;
    }
    .textarea-group textarea:focus {
        border-color: #0d6efd; /* Berubah warna biru saat di-klik */
        background-color: #ffffff;
    }
</style>

<div class="login-wrapper">
    <div class="login-card">

        <div class="login-brand inside-card"></div>

        <h2 class="login-title">
            Daftar Sambungan Air Pamsimas
        </h2>

        @if($errors->any())
            <div class="alert alert-error">
                <i class="fas fa-exclamation-circle"></i>

                <ul style="margin:0;padding-left:20px;">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>

            </div>
        @endif

        <form action="{{ route('register.submit') }}"
              method="POST"
              class="login-form"
              enctype="multipart/form-data">

            @csrf

            {{-- Nama --}}
            <div class="input-group">
                <span class="input-icon">
                    <i class="fas fa-user"></i>
                </span>
                <input type="text" name="name" placeholder="Nama Lengkap" value="{{ old('name') }}" required autocomplete="name">
            </div>

            {{-- Email --}}
            <div class="input-group">
                <span class="input-icon">
                    <i class="fas fa-envelope"></i>
                </span>
                <input type="email" name="email" placeholder="Alamat Email" value="{{ old('email') }}" required autocomplete="email">
            </div>

            {{-- No HP --}}
            <div class="input-group">
                <span class="input-icon">
                    <i class="fas fa-phone"></i>
                </span>
                <input type="text" name="phone_number" placeholder="Nomor HP" value="{{ old('phone_number') }}" required autocomplete="tel">
            </div>

            {{-- Upload KTP & Selfie --}}
            <div class="upload-wrapper">
                <label class="file-upload-box">
                    <i class="fas fa-id-card"></i>
                    <span class="upload-title">Upload Foto KTP</span>
                    <small>JPG / PNG maksimal 2 MB</small>
                    <input type="file" name="ktp" accept="image/*" required onchange="showFileName(this, 'ktp-name')">
                    <div id="ktp-name" class="file-name"></div>
                </label>

                <label class="file-upload-box">
                    <i class="fas fa-camera"></i>
                    <span class="upload-title">Upload Foto Selfie</span>
                    <small>JPG / PNG maksimal 2 MB</small>
                    <input type="file" name="foto" accept="image/*" required onchange="showFileName(this, 'selfie-name')">
                    <div id="selfie-name" class="file-name"></div>
                </label>
            </div>

            {{-- Hidden Location --}}
            <input type="hidden" name="latitude" id="latitude">
            <input type="hidden" name="longitude" id="longitude">

            {{-- Share Location (Menggunakan struktur mirip Toggle Password agar ikon rapi di kanan) --}}
            <div class="input-group">
                <span class="input-icon">
                    <i class="fas fa-map-marker-alt"></i>
                </span>
                <input type="text"
                       id="location_display"
                       placeholder="Klik tombol untuk bagikan lokasi"
                       readonly
                       required>
                
                {{-- Tombol crosshair dibuat seperti tombol ikon mata (eye) --}}
                <span class="toggle-password" onclick="getLocation()" style="cursor: pointer; color: #6c757d;" title="Ambil Lokasi Saat Ini">
                    <i class="fas fa-crosshairs hover-blue"></i>
                </span>
            </div>
            
            {{-- Dusun (Dikembalikan ke kode original kamu agar border template muncul) --}}
            <div class="input-group">
                <span class="input-icon">
                    <i class="fas fa-home"></i>
                </span>
                <select name="dusun" required class="input-select">
                    <option value="">Pilih Dusun</option>
                    <option value="Dusun Krajan" {{ old('dusun') == 'Dusun Krajan' ? 'selected' : '' }}>Dusun Krajan</option>
                    <option value="Dusun Karangsari" {{ old('dusun') == 'Dusun Karangsari' ? 'selected' : '' }}>Dusun Karangsari</option>
                    <option value="Dusun Kasengan" {{ old('dusun') == 'Dusun Kasengan' ? 'selected' : '' }}>Dusun Kasengan</option>
                    <option value="Dusun Trogo" {{ old('dusun') == 'Dusun Trogo' ? 'selected' : '' }}>Dusun Trogo</option>
                    <option value="Dusun Karang Paiton" {{ old('dusun') == 'Dusun Karang Paiton' ? 'selected' : '' }}>Dusun Karang Paiton</option>
                </select>
            </div>

            {{-- Alamat --}}
            <div class="input-group textarea-group">
                <span class="input-icon">
                    <i class="fas fa-map"></i>
                </span>
                <textarea name="address"
                          rows="3"
                          placeholder="Alamat Lengkap (RT/RW, Jalan, Dusun)"
                          required>{{ old('address') }}</textarea>
            </div>

            {{-- Password --}}
            <div class="input-group">
                <span class="input-icon">
                    <i class="fas fa-lock"></i>
                </span>
                <input type="password" name="password" id="password" placeholder="Kata Sandi" required autocomplete="new-password">
                <span class="toggle-password" onclick="togglePassword('password','toggleIcon1')">
                    <i id="toggleIcon1" class="fas fa-eye"></i>
                </span>
            </div>

            {{-- Konfirmasi Password --}}
            <div class="input-group">
                <span class="input-icon">
                    <i class="fas fa-lock"></i>
                </span>
                <input type="password" name="password_confirmation" id="password_confirmation" placeholder="Konfirmasi Kata Sandi" required autocomplete="new-password">
                <span class="toggle-password" onclick="togglePassword('password_confirmation','toggleIcon2')">
                    <i id="toggleIcon2" class="fas fa-eye"></i>
                </span>
            </div>

            <button type="submit" class="btn-login">
                <span>Daftar Sambungan</span>
            </button>

        </form>

        <div class="login-footer">
            Sudah punya akun?
            <a href="{{ route('login') }}">
                Login
            </a>
        </div>

    </div>
</div>

<script>
function showFileName(input, displayId) {
    const displayElement = document.getElementById(displayId);
    if (input.files && input.files[0]) {
        displayElement.textContent = "Terpilih: " + input.files[0].name;
    } else {
        displayElement.textContent = "";
    }
}

function getLocation() {
    if (!navigator.geolocation) {
        alert('Geolocation tidak didukung browser ini.');
        return;
    }
    
    navigator.geolocation.getCurrentPosition(
        function(position) {
            const lat = position.coords.latitude;
            const lng = position.coords.longitude;
            
            document.getElementById('latitude').value = lat;
            document.getElementById('longitude').value = lng;
            document.getElementById('location_display').value = lat + ', ' + lng;
            document.getElementById('location_display').style.color = "#198754";
        },
        function(error) {
            alert('Gagal mengambil lokasi: ' + error.message);
        }
    );
}
function togglePassword(inputId, iconId) {
    const input = document.getElementById(inputId);
    const icon = document.getElementById(iconId);

    if (input.type === 'password') {
        input.type = 'text';
        icon.classList.remove('fa-eye');
        icon.classList.add('fa-eye-slash');
    } else {
        input.type = 'password';
        icon.classList.remove('fa-eye-slash');
        icon.classList.add('fa-eye');
    }
}

document.addEventListener('DOMContentLoaded', function() {
    const alerts = document.querySelectorAll('.alert');
    if (alerts.length > 0) {
        setTimeout(function() {
            alerts.forEach(function(alert) {
                alert.style.transition = 'opacity 0.5s ease';
                alert.style.opacity = '0';
                setTimeout(function() {
                    alert.remove();
                }, 500);
            });
        }, 3000);
    }
});
</script>

@endsection