@extends('layouts.app')
@section('title', 'Daftar Merchant')
@section('content')
<div class="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
    <div class="auth-card max-w-lg">
        <div class="text-center mb-6">
            <h2 class="text-2xl font-bold text-gray-900">Daftar sebagai Merchant</h2>
            <p class="text-gray-500 text-sm mt-1">Bergabung dengan ekosistem digital tourism Aceh</p>
        </div>

        {{-- Progress bar --}}
        <div class="mb-6">
            <div class="flex justify-between text-xs font-medium text-gray-500 mb-1">
                <span class="step-label" id="step-label">Langkah 1 dari 3 — Akun</span>
                <span id="step-percent">33%</span>
            </div>
            <div class="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
                <div id="progress-fill" class="h-full bg-[#0b6e7a] rounded-full transition-all duration-300" style="width: 33%"></div>
            </div>
        </div>

        <form method="POST" action="{{ route('merchant.register') }}" id="register-form">
            @csrf

            {{-- Step 1: Akun --}}
            <div id="step-1" class="step-panel">
                <div class="space-y-4">
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Nama Lengkap <span class="text-red-500">*</span></label>
                            <input type="text" name="name" value="{{ old('name') }}" required
                                   class="input-field @error('name') error @enderror" placeholder="Budi Santoso" />
                            @error('name') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Nomor HP <span class="text-red-500">*</span></label>
                            <input type="tel" name="phone" value="{{ old('phone') }}" required
                                   class="input-field @error('phone') error @enderror" placeholder="08123456789" />
                            @error('phone') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Email <span class="text-red-500">*</span></label>
                        <input type="email" name="email" value="{{ old('email') }}" required
                               class="input-field @error('email') error @enderror" placeholder="budi@email.com" />
                        @error('email') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Password <span class="text-red-500">*</span></label>
                        <input type="password" name="password" id="password" required
                               class="input-field @error('password') error @enderror" placeholder="Min. 8 karakter" />
                        @error('password') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
                        <div id="password-strength" class="mt-1 hidden">
                            <div class="flex gap-1">
                                <div class="h-1 flex-1 rounded bg-gray-200" id="str-1"></div>
                                <div class="h-1 flex-1 rounded bg-gray-200" id="str-2"></div>
                                <div class="h-1 flex-1 rounded bg-gray-200" id="str-3"></div>
                                <div class="h-1 flex-1 rounded bg-gray-200" id="str-4"></div>
                            </div>
                            <span class="text-xs text-gray-500" id="str-label">Minimal 8 karakter</span>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Konfirmasi Password <span class="text-red-500">*</span></label>
                        <input type="password" name="password_confirmation" required
                               class="input-field @error('password_confirmation') error @enderror" placeholder="Ulangi password" />
                        @error('password_confirmation') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
                    </div>
                </div>
                <div class="mt-6">
                    <button type="button" onclick="goStep(2)" class="btn-primary w-full justify-center">
                        Lanjut ke info bisnis <i class="fas fa-arrow-right"></i>
                    </button>
                </div>
            </div>

            {{-- Step 2: Bisnis --}}
            <div id="step-2" class="step-panel hidden">
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Nama Bisnis / Toko <span class="text-red-500">*</span></label>
                        <input type="text" name="business_name" value="{{ old('business_name') }}" required
                               class="input-field @error('business_name') error @enderror" placeholder="Toko Souvenir Aceh" />
                        @error('business_name') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Tipe Bisnis <span class="text-red-500">*</span></label>
                        <div class="grid grid-cols-2 gap-2">
                            @php
                                $types = [
                                    ['val' => 'hotel', 'icon' => '🏨', 'label' => 'Hotel'],
                                    ['val' => 'kuliner', 'icon' => '🍽️', 'label' => 'Kuliner'],
                                    ['val' => 'rental', 'icon' => '🚗', 'label' => 'Rental'],
                                    ['val' => 'tour', 'icon' => '🧭', 'label' => 'Tour'],
                                    ['val' => 'destinasi', 'icon' => '🏝️', 'label' => 'Destinasi'],
                                    ['val' => 'souvenir', 'icon' => '🎁', 'label' => 'Souvenir'],
                                ];
                            @endphp
                            @foreach ($types as $t)
                                <label class="border rounded-lg p-2 text-center cursor-pointer hover:border-[#0b6e7a] transition
                                    {{ old('business_type') == $t['val'] ? 'border-[#0b6e7a] bg-[#e4f2f4]' : 'border-gray-200' }}">
                                    <input type="radio" name="business_type" value="{{ $t['val'] }}"
                                           class="hidden" {{ old('business_type') == $t['val'] ? 'checked' : '' }} />
                                    <div class="text-2xl">{{ $t['icon'] }}</div>
                                    <div class="text-xs font-medium">{{ $t['label'] }}</div>
                                </label>
                            @endforeach
                        </div>
                        @error('business_type') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Alamat Lengkap</label>
                        <textarea name="address" rows="2" class="input-field">{{ old('address') }}</textarea>
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Kota</label>
                            <input type="text" name="city" value="{{ old('city') }}" class="input-field" placeholder="Banda Aceh" />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Provinsi</label>
                            <input type="text" name="province" value="{{ old('province') }}" class="input-field" placeholder="Aceh" />
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Deskripsi Bisnis <span class="text-gray-400">(opsional)</span></label>
                        <textarea name="description" rows="2" class="input-field">{{ old('description') }}</textarea>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Website <span class="text-gray-400">(opsional)</span></label>
                        <input type="url" name="website" value="{{ old('website') }}" class="input-field" placeholder="https://toko-anda.com" />
                    </div>
                </div>
                <div class="mt-6 flex gap-3">
                    <button type="button" onclick="goStep(1)" class="btn-ghost flex-1">← Kembali</button>
                    <button type="button" onclick="goStep(3)" class="btn-primary flex-1 justify-center">
                        Lanjut ke lokasi <i class="fas fa-arrow-right"></i>
                    </button>
                </div>
            </div>

            {{-- Step 3: Lokasi & Konfirmasi --}}
            <div id="step-3" class="step-panel hidden">
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Kota <span class="text-red-500">*</span></label>
                        <input type="text" name="city" value="{{ old('city') }}" required
                               class="input-field @error('city') error @enderror" placeholder="Banda Aceh" />
                        @error('city') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Kode Pos <span class="text-gray-400">(opsional)</span></label>
                        <input type="text" name="postal_code" value="{{ old('postal_code') }}" class="input-field" placeholder="23123" maxlength="5" />
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Latitude <span class="text-gray-400">(opsional)</span></label>
                        <input type="number" step="any" name="latitude" value="{{ old('latitude') }}" class="input-field" placeholder="5.548290" />
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Longitude <span class="text-gray-400">(opsional)</span></label>
                        <input type="number" step="any" name="longitude" value="{{ old('longitude') }}" class="input-field" placeholder="95.323757" />
                    </div>

                    <div class="border-t pt-4">
                        <label class="flex items-start gap-3 text-sm text-gray-600">
                            <input type="checkbox" name="agree" value="1" required class="mt-1 rounded border-gray-300 text-[#0b6e7a]" />
                            <span>Saya menyetujui <a href="#" class="text-[#0b6e7a] font-medium hover:underline">Syarat & Ketentuan</a></span>
                        </label>
                        @error('agree') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
                    </div>
                </div>
                <div class="mt-6 flex gap-3">
                    <button type="button" onclick="goStep(2)" class="btn-ghost flex-1">← Kembali</button>
                    <button type="submit" class="btn-primary flex-1 justify-center">
                        <i class="fas fa-check-circle"></i> Daftar Sekarang
                    </button>
                </div>
            </div>
        </form>

        <p class="mt-6 text-center text-sm text-gray-500">
            Sudah punya akun?
            <a href="{{ route('merchant.login') }}" class="text-[#0b6e7a] font-medium hover:underline">Login</a>
        </p>
    </div>
</div>

<script>
    let currentStep = 1;
    const totalSteps = 3;
    const stepLabels = ['Langkah 1 dari 3 — Akun', 'Langkah 2 dari 3 — Bisnis', 'Langkah 3 dari 3 — Lokasi'];
    const stepPcts = ['33%', '66%', '100%'];

    function updateUI() {
        // Hide all panels
        document.querySelectorAll('.step-panel').forEach(el => el.classList.add('hidden'));
        document.getElementById('step-' + currentStep).classList.remove('hidden');
        document.getElementById('step-label').textContent = stepLabels[currentStep - 1];
        document.getElementById('progress-fill').style.width = stepPcts[currentStep - 1];
        document.getElementById('step-percent').textContent = stepPcts[currentStep - 1];
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }

    function goStep(n) {
        // Validasi step saat ini sebelum pindah
        if (n > currentStep) {
            // Step 1: validasi field wajib
            if (currentStep === 1) {
                const name = document.querySelector('input[name="name"]');
                const email = document.querySelector('input[name="email"]');
                const phone = document.querySelector('input[name="phone"]');
                const password = document.querySelector('input[name="password"]');
                const password_conf = document.querySelector('input[name="password_confirmation"]');
                let ok = true;
                if (!name.value.trim()) { name.classList.add('error'); ok = false; } else name.classList.remove('error');
                if (!email.value.trim() || !email.value.includes('@')) { email.classList.add('error'); ok = false; } else email.classList.remove('error');
                if (!phone.value.trim()) { phone.classList.add('error'); ok = false; } else phone.classList.remove('error');
                if (password.value.length < 8) { password.classList.add('error'); ok = false; } else password.classList.remove('error');
                if (password.value !== password_conf.value) { password_conf.classList.add('error'); ok = false; } else password_conf.classList.remove('error');
                if (!ok) return;
            }
            // Step 2: validasi business fields
            if (currentStep === 2) {
                const bizName = document.querySelector('input[name="business_name"]');
                const bizType = document.querySelector('input[name="business_type"]:checked');
                let ok = true;
                if (!bizName.value.trim()) { bizName.classList.add('error'); ok = false; } else bizName.classList.remove('error');
                if (!bizType) { alert('Pilih tipe bisnis'); ok = false; }
                if (!ok) return;
            }
            // Step 3: validasi agree
            if (currentStep === 3) {
                const agree = document.querySelector('input[name="agree"]');
                if (!agree.checked) { alert('Anda harus menyetujui syarat & ketentuan.'); return; }
            }
        }
        currentStep = n;
        updateUI();
    }

    // Password strength
    document.getElementById('password')?.addEventListener('input', function(e) {
        const p = this.value;
        const strengthDiv = document.getElementById('password-strength');
        const segs = [1,2,3,4].map(i => document.getElementById('str-' + i));
        const label = document.getElementById('str-label');
        let score = 0;
        if (p.length >= 8) score++;
        if (/[A-Z]/.test(p)) score++;
        if (/\d/.test(p)) score++;
        if (/[^a-zA-Z0-9]/.test(p)) score++;
        if (p.length > 0) strengthDiv.classList.remove('hidden');
        const colors = ['#e5e7eb', '#f97316', '#eab308', '#22c55e', '#059669'];
        const labels = ['Minimal 8 karakter', 'Lemah', 'Cukup', 'Kuat', 'Sangat Kuat'];
        segs.forEach((el, i) => {
            el.style.background = i < score ? colors[score] : '#e5e7eb';
        });
        label.textContent = labels[score];
        label.style.color = colors[score];
    });

    // Inisialisasi
    updateUI();
</script>
@endsection