@extends('layouts.app')

@section('title', 'Edit ' . $client->name)
@section('page-title', 'Edit Client 🐾')
@section('page-subtitle', $client->name)

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

            <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', $client->name) }}" class="input-soft" 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', $client->email) }}" class="input-soft">
                    @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', $client->phone) }}" class="input-soft">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Company</label>
                    <input type="text" name="company" value="{{ old('company', $client->company) }}" class="input-soft">
                </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', $client->status->value) === $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', $client->category_id) == $parent->id ? 'selected' : '' }}>
                                {{ $parent->icon }} {{ $parent->name }}
                            </option>
                            @foreach($parent->children as $child)
                                <option value="{{ $child->id }}" {{ old('category_id', $client->category_id) == $child->id ? 'selected' : '' }}>
                                    &nbsp;&nbsp;↳ {{ $child->icon }} {{ $child->name }}
                                </option>
                            @endforeach
                        @endforeach
                    </select>
                </div>
            </div>

            <div>
                <h3 class="text-sm font-bold text-gray-600 mb-3">📱 Social Handles</h3>
                <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', $client->ig_handle) }}"
                               class="input-soft text-sm" 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', $client->tiktok_handle) }}"
                               class="input-soft text-sm" 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', $client->youtube_handle) }}"
                               class="input-soft text-sm">
                    </div>
                </div>
            </div>

            <div>
                <h3 class="text-sm font-bold text-gray-600 mb-3">📍 Shipping Address</h3>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div class="sm:col-span-2">
                        <input type="text" name="address_line1" value="{{ old('address_line1', $client->address_line1) }}"
                               class="input-soft" placeholder="Street address">
                    </div>
                    <div class="sm:col-span-2">
                        <input type="text" name="address_line2" value="{{ old('address_line2', $client->address_line2) }}"
                               class="input-soft" placeholder="Apt, suite...">
                    </div>
                    <div>
                        <input type="text" name="city" value="{{ old('city', $client->city) }}"
                               class="input-soft" placeholder="City">
                    </div>
                    <div>
                        <input type="text" name="state" value="{{ old('state', $client->state) }}"
                               class="input-soft" placeholder="Province">
                    </div>
                    <div>
                        <input type="text" name="postal_code" value="{{ old('postal_code', $client->postal_code) }}"
                               class="input-soft" placeholder="Postal code">
                    </div>
                    <div>
                        <input type="text" name="country" value="{{ old('country', $client->country) }}"
                               class="input-soft" placeholder="Country">
                    </div>
                </div>
            </div>

            <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">{{ old('notes', $client->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 Changes</button>
                <a href="{{ route('clients.show', $client) }}"
                   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