@extends('layouts.app')
@section('title', 'Daftar Jadi Seller')
@section('content')
<div class="max-w-2xl mx-auto px-4 py-12">
    <div class="text-center mb-10">
        <div class="w-16 h-16 bg-teal-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
            <svg class="w-8 h-8 text-teal-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
        </div>
        <h1 class="text-2xl font-bold text-gray-900">Daftar Jadi Seller</h1>
        <p class="text-gray-500 mt-2">Isi formulir berikut. Tim kami akan meninjau dalam 1–3 hari kerja.</p>
    </div>

    <div class="bg-white rounded-2xl border border-gray-100 p-8 shadow-sm">
        <form method="POST" action="{{ route('seller.apply.store') }}" enctype="multipart/form-data" class="space-y-5">
            @csrf

            <p class="text-sm font-semibold text-gray-500 uppercase tracking-wide">Informasi Toko</p>

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

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Jenis Bisnis <span class="text-red-500">*</span></label>
                <select name="business_type" required class="w-full px-4 py-2.5 rounded-xl border border-gray-200 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 @error('business_type') border-red-400 @enderror">
                    <option value="">Pilih jenis bisnis...</option>
                    <option value="individual" {{ old('business_type') === 'individual' ? 'selected' : '' }}>Perorangan</option>
                    <option value="umkm" {{ old('business_type') === 'umkm' ? 'selected' : '' }}>UMKM</option>
                    <option value="pt" {{ old('business_type') === 'pt' ? 'selected' : '' }}>PT / CV</option>
                    <option value="digital_creator" {{ old('business_type') === 'digital_creator' ? 'selected' : '' }}>Kreator Digital</option>
                </select>
                @error('business_type')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
            </div>

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

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Deskripsi Toko <span class="text-red-500">*</span></label>
                <textarea name="store_description" rows="4" required placeholder="Ceritakan produk apa yang akan kamu jual..."
                    class="w-full px-4 py-2.5 rounded-xl border border-gray-200 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 resize-none @error('store_description') border-red-400 @enderror">{{ old('store_description') }}</textarea>
                @error('store_description')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
            </div>

            <div class="border-t border-gray-100 pt-5">
                <p class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-4">Verifikasi Identitas</p>

                <div class="space-y-5">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Nomor KTP (NIK) <span class="text-red-500">*</span></label>
                        <input type="text" name="id_card_number" value="{{ old('id_card_number') }}" placeholder="16 digit NIK" maxlength="16" required
                            class="w-full px-4 py-2.5 rounded-xl border border-gray-200 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 @error('id_card_number') border-red-400 @enderror">
                        @error('id_card_number')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Foto KTP <span class="text-red-500">*</span></label>
                        <input type="file" name="id_card_image" accept="image/*" required
                            class="w-full text-sm text-gray-600 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-teal-50 file:text-teal-700 hover:file:bg-teal-100 @error('id_card_image') border border-red-400 rounded-xl @enderror">
                        <p class="text-xs text-gray-400 mt-1">Format: JPG, PNG, WEBP. Maks 2MB.</p>
                        @error('id_card_image')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>
                </div>
            </div>

            <div class="bg-amber-50 border border-amber-100 rounded-xl p-4 text-sm text-amber-800">
                <strong>Perhatian:</strong> Dengan mendaftar, kamu menyetujui syarat & ketentuan seller Natagara Shop. Data identitas digunakan hanya untuk verifikasi. Akun akan aktif setelah disetujui admin.
            </div>

            <button type="submit" class="w-full py-3.5 bg-teal-600 text-white font-semibold rounded-xl hover:bg-teal-700 transition">
                Kirim Pendaftaran
            </button>
        </form>
    </div>
</div>
@endsection