@extends('layouts.auth')

@section('title', 'Daftar Merchant')

@section('content')
<div x-data="registerForm()" x-init="init()">

    {{-- Header --}}
    <div class="flex items-center justify-between mb-6">
        <div>
            <h2 class="text-2xl font-bold text-gray-800 font-display">Daftar Merchant</h2>
            <p class="text-sm text-gray-500">Bergabung dengan ekosistem digital tourism Aceh</p>
        </div>
        <div class="flex gap-1 bg-gray-100 rounded-xl p-1">
            <a href="{{ route('merchant.login') }}"
               class="px-4 py-1.5 text-sm font-semibold rounded-lg text-gray-500 hover:text-gray-700 transition">
                Login
            </a>
            <a href="{{ route('merchant.register') }}"
               class="px-4 py-1.5 text-sm font-semibold rounded-lg bg-white shadow-sm text-teal-700">
                Daftar
            </a>
        </div>
    </div>

    {{-- Server-side: error general --}}
    @if($errors->has('general'))
        <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm mb-4">
            {{ $errors->first('general') }}
        </div>
    @elseif($errors->any())
        <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm mb-4">
            @foreach($errors->all() as $error)
                <p>{{ $error }}</p>
            @endforeach
        </div>
    @endif

    {{-- Success flash --}}
    @if(session('success'))
        <div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg text-sm mb-4">
            {{ session('success') }}
        </div>
    @endif

    {{-- Client-side error Alpine --}}
    <div x-show="clientError" x-transition
         class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm mb-4">
        <span x-text="clientError"></span>
    </div>

    {{-- Step Indicator --}}
    <div class="flex items-center mb-6">
        <template x-for="(s, i) in steps" :key="i">
            <div class="flex items-center flex-1">
                <div class="flex items-center gap-2">
                    <div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold border-2 transition-colors duration-200"
                         :class="{
                             'border-teal-500 bg-teal-500 text-white': currentStep > i+1,
                             'border-teal-500 bg-white text-teal-600': currentStep === i+1,
                             'border-gray-200 bg-white text-gray-400': currentStep < i+1
                         }">
                        <span x-show="currentStep <= i+1" x-text="i+1"></span>
                        <svg x-show="currentStep > i+1"
                             xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none"
                             viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                  stroke-width="2.5" d="M5 13l4 4L19 7" />
                        </svg>
                    </div>
                    <span class="text-xs font-medium hidden sm:inline transition-colors duration-200"
                          :class="currentStep >= i+1 ? 'text-teal-600' : 'text-gray-400'"
                          x-text="s">
                    </span>
                </div>
                <div x-show="i < steps.length - 1"
                     class="flex-1 h-0.5 mx-2 transition-colors duration-300"
                     :class="currentStep > i+1 ? 'bg-teal-500' : 'bg-gray-200'">
                </div>
            </div>
        </template>
    </div>

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

        {{-- STEP 1 — AKUN --}}
        <div x-show="currentStep === 1" class="space-y-4">

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700">
                        Nama Lengkap <span class="text-red-500">*</span>
                    </label>
                    <input id="name" name="name" type="text"
                           value="{{ old('name') }}" required
                           class="mt-1 w-full px-4 py-2.5 border rounded-xl outline-none transition
                                  @error('name')
                                      border-red-400 focus:border-red-500 focus:ring-4 focus:ring-red-100
                                  @else
                                      border-gray-200 focus:border-teal-500 focus:ring-4 focus:ring-teal-100
                                  @enderror" />
                    @error('name')
                        <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="phone" class="block text-sm font-medium text-gray-700">
                        Nomor HP <span class="text-red-500">*</span>
                    </label>
                    <input id="phone" name="phone" type="tel"
                           value="{{ old('phone') }}" required
                           class="mt-1 w-full px-4 py-2.5 border rounded-xl outline-none transition
                                  @error('phone')
                                      border-red-400 focus:border-red-500 focus:ring-4 focus:ring-red-100
                                  @else
                                      border-gray-200 focus:border-teal-500 focus:ring-4 focus:ring-teal-100
                                  @enderror" />
                    @error('phone')
                        <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div>
                <label for="email" class="block text-sm font-medium text-gray-700">
                    Email <span class="text-red-500">*</span>
                </label>
                <input id="email" name="email" type="email"
                       value="{{ old('email') }}" required
                       class="mt-1 w-full px-4 py-2.5 border rounded-xl outline-none transition
                              @error('email')
                                  border-red-400 focus:border-red-500 focus:ring-4 focus:ring-red-100
                              @else
                                  border-gray-200 focus:border-teal-500 focus:ring-4 focus:ring-teal-100
                              @enderror" />
                @error('email')
                    <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="password" class="block text-sm font-medium text-gray-700">
                    Password <span class="text-red-500">*</span>
                </label>
                <div class="relative">
                    <input id="password" name="password"
                           :type="showPassword ? 'text' : 'password'"
                           required
                           @input="checkPasswordMatch()"
                           class="mt-1 w-full px-4 py-2.5 pr-10 border rounded-xl outline-none transition
                                  @error('password')
                                      border-red-400 focus:border-red-500 focus:ring-4 focus:ring-red-100
                                  @else
                                      border-gray-200 focus:border-teal-500 focus:ring-4 focus:ring-teal-100
                                  @enderror" />
                    <button type="button"
                            @click="showPassword = !showPassword"
                            class="absolute right-3 top-1/2 -translate-y-1/2 mt-0.5 text-gray-400 hover:text-gray-600">
                        <svg x-show="!showPassword" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4"
                             fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7
                                     -1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                        </svg>
                        <svg x-show="showPassword" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4"
                             fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7
                                     a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243
                                     M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29
                                     M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7
                                     a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
                        </svg>
                    </button>
                </div>
                @error('password')
                    <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                @enderror
                <p class="mt-1 text-xs text-gray-400">Minimal 8 karakter</p>
            </div>

            <div>
                <label for="password_confirmation" class="block text-sm font-medium text-gray-700">
                    Konfirmasi Password <span class="text-red-500">*</span>
                </label>
                <div class="relative">
                    <input id="password_confirmation"
                           name="password_confirmation"
                           :type="showPassword ? 'text' : 'password'"
                           required
                           placeholder="Ulangi password"
                           @input="checkPasswordMatch()"
                           class="mt-1 w-full px-4 py-2.5 pr-10 border rounded-xl outline-none transition"
                           :class="passwordMatchError
                               ? 'border-red-400 focus:border-red-500 focus:ring-4 focus:ring-red-100'
                               : passwordMatchOk
                                   ? 'border-teal-400 focus:border-teal-500 focus:ring-4 focus:ring-teal-100'
                                   : 'border-gray-200 focus:border-teal-500 focus:ring-4 focus:ring-teal-100'" />
                    <div class="absolute right-3 top-1/2 -translate-y-1/2 mt-0.5">
                        <svg x-show="passwordMatchOk"
                             xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-teal-500"
                             fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                  stroke-width="2.5" d="M5 13l4 4L19 7" />
                        </svg>
                        <svg x-show="passwordMatchError"
                             xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-red-400"
                             fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                  stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </div>
                </div>
                <p x-show="passwordMatchError" class="mt-1 text-xs text-red-500">
                    Password tidak cocok.
                </p>
                <p x-show="passwordMatchOk" class="mt-1 text-xs text-teal-600">
                    Password cocok. ✓
                </p>
                @error('password_confirmation')
                    <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                @enderror
            </div>

        </div>{{-- /STEP 1 --}}


        {{-- STEP 2 — BISNIS --}}
        <div x-show="currentStep === 2" class="space-y-4">

            <div>
                <label for="business_name" class="block text-sm font-medium text-gray-700">
                    Nama Bisnis / Toko <span class="text-red-500">*</span>
                </label>
                <input id="business_name" name="business_name" type="text"
                       value="{{ old('business_name') }}" required
                       class="mt-1 w-full px-4 py-2.5 border rounded-xl outline-none transition
                              @error('business_name')
                                  border-red-400 focus:border-red-500 focus:ring-4 focus:ring-red-100
                              @else
                                  border-gray-200 focus:border-teal-500 focus:ring-4 focus:ring-teal-100
                              @enderror" />
                @error('business_name')
                    <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                @enderror
            </div>

            {{-- Tipe Bisnis --}}
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    Tipe Bisnis <span class="text-red-500">*</span>
                </label>
                <div class="grid grid-cols-2 gap-2">
                    @foreach([
                        'hotel'     => '🏨 Hotel',
                        'kuliner'   => '🍽️ Kuline(restoran/cafe)r',
                        'rental'    => '🚗 Rental',
                        'tour'      => '🧭 Tour',
                        'destinasi' => '🏝️ Destinasi',
                        'souvenir'  => '🎁 Souvenir / Oleh-oleh',
                    ] as $val => $label)
                    <label class="flex items-center gap-2 p-2.5 border rounded-xl cursor-pointer transition
                                  {{ old('business_type') === $val
                                      ? 'border-teal-500 bg-teal-50'
                                      : 'border-gray-200 hover:bg-gray-50' }}">
                        <input type="radio" name="business_type" value="{{ $val }}"
                               {{ old('business_type') === $val ? 'checked' : '' }}
                               x-model="businessType"
                               @change="businessType = $event.target.value"
                               class="text-teal-600 focus:ring-teal-500" required />
                        <span class="text-sm">{{ $label }}</span>
                    </label>
                    @endforeach
                </div>
                @error('business_type')
                    <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                @enderror
            </div>

            {{-- ✨ KATEGORI PRODUK (muncul jika businessType === 'souvenir') --}}
            <div x-show="businessType === 'souvenir'" x-transition>
                <label for="category_id" class="block text-sm font-medium text-gray-700">
                    Kategori Produk <span class="text-red-500">*</span>
                </label>
              <select name="category_id" id="category_id"
        class="mt-1 w-full px-4 py-2.5 border rounded-xl outline-none transition
               @error('category_id')
                   border-red-400 focus:border-red-500 focus:ring-4 focus:ring-red-100
               @else
                   border-gray-200 focus:border-teal-500 focus:ring-4 focus:ring-teal-100
               @enderror">
    <option value="">Pilih kategori souvenir</option>
    @forelse($categories as $category)
        <option value="{{ $category->id }}" 
                {{ old('category_id') == $category->id ? 'selected' : '' }}>
            {{ $category->name }}
        </option>
    @empty
        <option value="" disabled>Belum ada kategori</option>
    @endforelse
</select>
                @error('category_id')
                    <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="address" class="block text-sm font-medium text-gray-700">
                    Alamat Lengkap <span class="text-red-500">*</span>
                </label>
                <input id="address" name="address" type="text"
                       value="{{ old('address') }}" required
                       class="mt-1 w-full px-4 py-2.5 border rounded-xl outline-none transition
                              @error('address')
                                  border-red-400 focus:border-red-500 focus:ring-4 focus:ring-red-100
                              @else
                                  border-gray-200 focus:border-teal-500 focus:ring-4 focus:ring-teal-100
                              @enderror" />
                @error('address')
                    <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                @enderror
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label for="city" class="block text-sm font-medium text-gray-700">
                        Kota <span class="text-red-500">*</span>
                    </label>
                    <input id="city" name="city" type="text"
                           value="{{ old('city') }}" required
                           class="mt-1 w-full px-4 py-2.5 border rounded-xl outline-none transition
                                  @error('city')
                                      border-red-400 focus:border-red-500 focus:ring-4 focus:ring-red-100
                                  @else
                                      border-gray-200 focus:border-teal-500 focus:ring-4 focus:ring-teal-100
                                  @enderror" />
                    @error('city')
                        <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="province" class="block text-sm font-medium text-gray-700">
                        Provinsi <span class="text-red-500">*</span>
                    </label>
                    <input id="province" name="province" type="text"
                           value="{{ old('province') }}" required
                           class="mt-1 w-full px-4 py-2.5 border rounded-xl outline-none transition
                                  @error('province')
                                      border-red-400 focus:border-red-500 focus:ring-4 focus:ring-red-100
                                  @else
                                      border-gray-200 focus:border-teal-500 focus:ring-4 focus:ring-teal-100
                                  @enderror" />
                    @error('province')
                        <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                    @enderror
                </div>
            </div>

        </div>{{-- /STEP 2 --}}


        {{-- STEP 3 — KONFIRMASI --}}
        <div x-show="currentStep === 3" class="space-y-4">

            <div class="bg-gray-50 rounded-xl p-4 space-y-3 text-sm">
                <h3 class="font-semibold text-gray-700">Ringkasan Pendaftaran</h3>
                <div class="border-t border-gray-200 pt-3 space-y-2">
                    @foreach([
                        'Nama'        => '#name',
                        'Email'       => '#email',
                        'No. HP'      => '#phone',
                        'Nama Bisnis' => '#business_name',
                        'Alamat'      => '#address',
                        'Kota'        => '#city',
                        'Provinsi'    => '#province',
                    ] as $label => $selector)
                    <div class="flex gap-2">
                        <span class="text-gray-500 w-28 shrink-0">{{ $label }}</span>
                        <span class="font-medium"
                              x-text="document.querySelector('{{ $selector }}')?.value || '-'">
                        </span>
                    </div>
                    @endforeach
                    <div class="flex gap-2">
                        <span class="text-gray-500 w-28 shrink-0">Tipe Bisnis</span>
                        <span class="font-medium capitalize" x-text="businessType || '-'"></span>
                    </div>
                    <div class="flex gap-2" x-show="businessType === 'souvenir'">
                        <span class="text-gray-500 w-28 shrink-0">Kategori</span>
                        <span class="font-medium"
                              x-text="document.querySelector('#category_id option:checked')?.text || '-'">
                        </span>
                    </div>
                </div>
            </div>

            <label class="flex items-start gap-2 text-sm cursor-pointer">
                <input type="checkbox" name="agree" required
                       class="mt-0.5 rounded border-gray-300 text-teal-600 focus:ring-teal-500" />
                <span>
                    Saya menyetujui
                    <a href="#" class="text-teal-600 hover:underline font-medium">Syarat &amp; Ketentuan</a>
                    dan
                    <a href="#" class="text-teal-600 hover:underline font-medium">Kebijakan Privasi</a>
                    Ovisito
                </span>
            </label>

        </div>{{-- /STEP 3 --}}


        {{-- NAVIGASI --}}
        <div class="flex justify-between gap-3 pt-4">
            <button type="button"
                    x-show="currentStep > 1"
                    @click="prevStep()"
                    class="px-6 py-2.5 border border-gray-200 rounded-xl text-gray-600 hover:bg-gray-50 transition">
                ← Kembali
            </button>
            <button type="button"
                    x-show="currentStep < 3"
                    @click="nextStep()"
                    class="px-6 py-2.5 bg-teal-600 hover:bg-teal-700 text-white rounded-xl
                           transition font-medium flex-1 md:flex-none ml-auto">
                Lanjut →
            </button>
            <button type="submit"
                    x-show="currentStep === 3"
                    class="px-6 py-2.5 bg-teal-600 hover:bg-teal-700 text-white rounded-xl
                           transition font-medium flex-1 md:flex-none ml-auto">
                Daftar Sekarang
            </button>
        </div>

    </form>

    <p class="text-center text-sm text-gray-500 mt-4">
        Sudah punya akun?
        <a href="{{ route('merchant.login') }}" class="text-teal-600 font-semibold hover:underline">
            Login
        </a>
    </p>

</div>{{-- /x-data --}}

<script>
function registerForm() {
    return {
        currentStep: 1,
        steps: ['Akun', 'Bisnis', 'Konfirmasi'],
        showPassword: false,
        passwordMatchError: false,
        passwordMatchOk: false,
        clientError: '',
        businessType: '{{ old('business_type') }}',

        init() {
            @if ($errors->hasAny(['name', 'email', 'phone', 'password', 'password_confirmation']))
                this.currentStep = 1;
            @elseif ($errors->hasAny(['business_name', 'business_type', 'address', 'city', 'province', 'category_id']))
                this.currentStep = 2;
            @endif
        },

        checkPasswordMatch() {
            const pwd     = document.getElementById('password')?.value ?? '';
            const confirm = document.getElementById('password_confirmation')?.value ?? '';
            if (confirm === '') {
                this.passwordMatchError = false;
                this.passwordMatchOk    = false;
                return;
            }
            this.passwordMatchError = pwd !== confirm;
            this.passwordMatchOk    = pwd === confirm && pwd.length >= 8;
        },

        validateStep1() {
            const name     = document.getElementById('name')?.value.trim()     ?? '';
            const phone    = document.getElementById('phone')?.value.trim()    ?? '';
            const email    = document.getElementById('email')?.value.trim()    ?? '';
            const password = document.getElementById('password')?.value        ?? '';
            const confirm  = document.getElementById('password_confirmation')?.value ?? '';

            if (!name)                         { this.clientError = 'Nama lengkap wajib diisi.';         return false; }
            if (!phone)                        { this.clientError = 'Nomor HP wajib diisi.';             return false; }
            if (!email)                        { this.clientError = 'Email wajib diisi.';                return false; }
            if (password.length < 8)           { this.clientError = 'Password minimal 8 karakter.';      return false; }
            if (password !== confirm)          { this.clientError = 'Password dan konfirmasi tidak cocok.'; return false; }
            this.clientError = '';
            return true;
        },

        validateStep2() {
            const businessName = document.getElementById('business_name')?.value.trim() ?? '';
            const address      = document.getElementById('address')?.value.trim() ?? '';
            const city         = document.getElementById('city')?.value.trim() ?? '';
            const province     = document.getElementById('province')?.value.trim() ?? '';

            if (!businessName) { this.clientError = 'Nama bisnis wajib diisi.'; return false; }
            if (!this.businessType) { this.clientError = 'Pilih tipe bisnis terlebih dahulu.'; return false; }
            if (!address)      { this.clientError = 'Alamat lengkap wajib diisi.'; return false; }
            if (!city)         { this.clientError = 'Kota wajib diisi.'; return false; }
            if (!province)     { this.clientError = 'Provinsi wajib diisi.'; return false; }

            if (this.businessType === 'souvenir') {
                const categoryId = document.getElementById('category_id')?.value ?? '';
                if (!categoryId) {
                    this.clientError = 'Pilih kategori produk souvenir.';
                    return false;
                }
            }
            this.clientError = '';
            return true;
        },

        nextStep() {
            if (this.currentStep === 1 && !this.validateStep1()) return;
            if (this.currentStep === 2 && !this.validateStep2()) return;
            if (this.currentStep < 3) {
                this.currentStep++;
                this.clientError = '';
                window.scrollTo({ top: 0, behavior: 'smooth' });
            }
        },

        prevStep() {
            if (this.currentStep > 1) {
                this.currentStep--;
                this.clientError = '';
                window.scrollTo({ top: 0, behavior: 'smooth' });
            }
        },
    };
}
</script>
@endsection