@extends('layouts.app')

@section('title', 'Add Client')
@section('page-title', 'Add New Client 🐾')
@section('page-subtitle', 'Fill in the contact details below')

@section('content')
<div class="max-w-2xl mx-auto">
    <div class="cat-card p-4 lg:p-8">
        <form action="{{ route('clients.store') }}" method="POST" class="space-y-5">
            @csrf

            {{-- Basic Info --}}
            <div>
                <label class="block text-xs font-semibold text-gray-600 mb-1 uppercase tracking-wide">Basic Info</label>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div class="sm:col-span-2">
                        <label class="block text-sm font-semibold text-gray-700 mb-1">Name <span class="text-pink-400">*</span></label>
                        <input type="text" name="name" value="{{ old('name') }}" class="input-soft" placeholder="Brand / Contact name" required>
                        @error('name') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">Email</label>
                        <input type="email" name="email" value="{{ old('email') }}" class="input-soft" placeholder="hello@brand.com">
                        @error('email') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">Phone</label>
                        <input type="text" name="phone" value="{{ old('phone') }}" class="input-soft" placeholder="+62 812 xxxx">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">Company</label>
                        <input type="text" name="company" value="{{ old('company') }}" class="input-soft" placeholder="Brand / Company name">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">Status</label>
                        <select name="status" class="input-soft">
                            @foreach($statuses as $s)
                                <option value="{{ $s->value }}" {{ old('status', 'prospect') === $s->value ? 'selected' : '' }}>
                                    {{ $s->label() }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="sm:col-span-2">
                        <label class="block text-sm font-semibold text-gray-700 mb-1">🏷️ Category</label>
                        <select name="category_id" class="input-soft">
                            <option value="">— No Category —</option>
                            @foreach($categoryTree as $parent)
                                <option value="{{ $parent->id }}" {{ old('category_id') == $parent->id ? 'selected' : '' }}>
                                    {{ $parent->icon }} {{ $parent->name }}
                                </option>
                                @foreach($parent->children as $child)
                                    <option value="{{ $child->id }}" {{ old('category_id') == $child->id ? 'selected' : '' }}>
                                        &nbsp;&nbsp;↳ {{ $child->icon }} {{ $child->name }}
                                    </option>
                                @endforeach
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            {{-- Social Handles --}}
            <div>
                <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">📱 Social Handles</label>
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1">📸 Instagram</label>
                        <input type="text" name="ig_handle" value="{{ old('ig_handle') }}" class="input-soft" placeholder="@handle">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1">🎵 TikTok</label>
                        <input type="text" name="tiktok_handle" value="{{ old('tiktok_handle') }}" class="input-soft" placeholder="@handle">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1">▶️ YouTube</label>
                        <input type="text" name="youtube_handle" value="{{ old('youtube_handle') }}" class="input-soft" placeholder="Channel name">
                    </div>
                </div>
            </div>

            {{-- Shipping Address --}}
            <div>
                <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">📍 Shipping / PR Address</label>
                <div class="grid grid-cols-2 gap-3">
                    <div class="col-span-2">
                        <input type="text" name="address_line1" value="{{ old('address_line1') }}" class="input-soft" placeholder="Street address">
                    </div>
                    <div class="col-span-2">
                        <input type="text" name="address_line2" value="{{ old('address_line2') }}" class="input-soft" placeholder="Apartment, suite, etc.">
                    </div>
                    <div>
                        <input type="text" name="city" value="{{ old('city') }}" class="input-soft" placeholder="City">
                    </div>
                    <div>
                        <input type="text" name="state" value="{{ old('state') }}" class="input-soft" placeholder="Province">
                    </div>
                    <div>
                        <input type="text" name="postal_code" value="{{ old('postal_code') }}" class="input-soft" placeholder="Postal code">
                    </div>
                    <div>
                        <input type="text" name="country" value="{{ old('country', 'Indonesia') }}" class="input-soft" placeholder="Country">
                    </div>
                </div>
            </div>

            {{-- Notes --}}
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-1">Notes</label>
                <textarea name="notes" rows="3" class="input-soft resize-none" placeholder="Any extra notes...">{{ old('notes') }}</textarea>
            </div>

            <div class="flex flex-col sm:flex-row gap-3 pt-1">
                <button type="submit" class="btn-sakura flex-1 py-3">🐱 Save Client</button>
                <a href="{{ route('clients.index') }}" class="flex-1 py-3 text-center rounded-full border border-pink-200 text-gray-600 hover:bg-pink-50 font-semibold text-sm">Cancel</a>
            </div>
        </form>
    </div>
</div>
@endsection