@extends('layouts.app')

@section('content')
    <div class="bg-white rounded-xl shadow-lg p-6 max-w-md mx-auto">
        <div class="text-center mb-6">
            <h2 class="text-lg font-semibold text-gray-800">
                ثبت‌نام مشترک <span id="user-type-title" class="text-blue-600"></span>
            </h2>
        </div>

        @if(session('success'))
            <div class="bg-green-50 text-green-700 text-xs p-2 rounded mb-4 text-center">{{ session('success') }}</div>
        @endif

        @if($errors->any())
            <div class="bg-red-50 text-red-700 text-xs p-2 rounded mb-4 text-center">
                {{ $errors->first() }}
            </div>
        @endif
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <form method="POST" action="{{ route('customer.register') }}" class="space-y-4" novalidate>
            @csrf

            <!-- نوع حساب — بدون option اول -->
            <div>
                <div class="relative">
                    <select name="type" id="user-type-select" class="w-full px-3 py-2 text-sm border rounded-lg input-focus transition appearance-none @error('type') border-red-500 @enderror">
                        <option value="" disabled selected></option>
                        <option value="natural" {{ old('type') == 'natural' ? 'selected' : '' }}>حقیقی</option>
                        <option value="legal" {{ old('type') == 'legal' ? 'selected' : '' }}>حقوقی</option>
                    </select>
                    <span id="select-placeholder" class="absolute left-3 top-2 text-gray-400 text-sm pointer-events-none">حقیقی یا حقوقی</span>
                    <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </div>
                </div>
                @error('type')
                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- شناسه ملی -->
            <div>
                <input type="text" name="bill_id" placeholder="شناسه قبض (13 رقم)" maxlength="13"
                       class="w-full px-3 py-2 text-sm border rounded-lg input-focus transition @error('national_id') border-red-500 @enderror"
                       value="{{ old('national_id') }}">
                @error('national_id')
                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- شماره تلفن -->
            <div>
                <input type="text" name="phone" placeholder="09123456789" maxlength="11"
                       class="w-full px-3 py-2 text-sm border rounded-lg input-focus transition @error('phone') border-red-500 @enderror"
                       value="{{ old('phone') }}">
                @error('phone')
                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- رمز عبور -->
            <div>
                <input type="password" name="password" placeholder="رمز عبور (حداقل ۶ کاراکتر)"
                       class="w-full px-3 py-2 text-sm border rounded-lg input-focus transition @error('password') border-red-500 @enderror">
                @error('password')
                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- تکرار رمز عبور -->
            <div>
                <input type="password" name="password_confirmation" placeholder="تکرار رمز عبور"
                       class="w-full px-3 py-2 text-sm border rounded-lg input-focus transition">
                @error('password_confirmation')
                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- دکمه -->
            <button type="submit" class="w-full bg-blue-600 text-white py-2 rounded-lg text-sm font-medium hover:bg-blue-700 transition">
                ثبت‌نام و ورود
            </button>
        </form>
        <p class="text-center mt-4 text-xs text-gray-600">
            حساب دارید؟ <a href="{{ route('customer.login') }}" class="text-blue-600 hover:underline font-medium">وارد شوید</a>
        </p>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const select = document.getElementById('user-type-select');
            const placeholder = document.getElementById('select-placeholder');
            const title = document.getElementById('user-type-title');

            function updateUI() {
                const value = select.value;
                placeholder.style.opacity = value ? '0' : '1';
                title.textContent = value === 'natural' ? 'حقیقی' : (value === 'legal' ? 'حقوقی' : '');
            }

            @if(old('type'))
                select.value = '{{ old('type') }}';
            @endif

            updateUI();
            select.addEventListener('change', updateUI);
        });
    </script>
@endsection