@extends('admin.layouts.app')

@section('admin-content')
    <div class="flex flex-col gap-2 md:flex-row md:items-end md:justify-between">
        <div>
            <h1 class="text-2xl font-bold tracking-tight">
                {{ $mode === 'edit' ? 'Edit Stylist' : 'Create Stylist' }}
            </h1>
            <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-300">
                Keep stylists up to date so “Any Available” routing stays accurate.
            </p>
        </div>
        <a href="{{ route('admin.stylists.index') }}" class="text-sm font-semibold text-[#FF2D20] hover:opacity-90">
            Back to list
        </a>
    </div>

    <form
        method="POST"
        action="{{ $mode === 'edit' ? route('admin.stylists.update', $stylist) : route('admin.stylists.store') }}"
        class="mt-6 space-y-6 rounded-2xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950"
    >
        @csrf
        @if ($mode === 'edit')
            @method('PUT')
        @endif

        @if ($errors->any())
            <div class="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-rose-800 dark:border-rose-900/40 dark:bg-rose-950/20 dark:text-rose-200">
                <ul class="list-disc pl-5">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="grid gap-4 md:grid-cols-2">
            <div class="space-y-2">
                <label for="name" class="block text-sm font-medium text-zinc-800 dark:text-zinc-100">Name</label>
                <input
                    id="name"
                    name="name"
                    type="text"
                    class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100"
                    value="{{ old('name', $stylist?->name ?? '') }}"
                    required
                />
            </div>

            <div class="space-y-2">
                <label for="email" class="block text-sm font-medium text-zinc-800 dark:text-zinc-100">Email</label>
                <input
                    id="email"
                    name="email"
                    type="email"
                    class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100"
                    value="{{ old('email', $stylist?->email ?? '') }}"
                />
            </div>

            <div class="space-y-2">
                <label for="phone" class="block text-sm font-medium text-zinc-800 dark:text-zinc-100">Phone</label>
                <input
                    id="phone"
                    name="phone"
                    type="text"
                    class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100"
                    value="{{ old('phone', $stylist?->phone ?? '') }}"
                />
            </div>

            <div class="space-y-2">
                <label class="block text-sm font-medium text-zinc-800 dark:text-zinc-100">Active</label>
                <div class="flex items-center gap-3 pt-2">
                    <input type="hidden" name="active" value="0">
                    <label class="inline-flex items-center gap-2 text-sm">
                        <input
                            type="checkbox"
                            name="active"
                            value="1"
                            class="h-4 w-4 accent-[#FF2D20]"
                            {{ (int) (old('active', $stylist?->active ? 1 : 0)) === 1 ? 'checked' : '' }}
                        />
                        {{ (int) (old('active', $stylist?->active ? 1 : 0)) === 1 ? 'Active' : 'Inactive' }}
                    </label>
                </div>
                <div class="text-xs text-zinc-500 dark:text-zinc-400">
                    Only active stylists are considered for “Any Available”.
                </div>
            </div>
        </div>

        <div class="flex items-center justify-end gap-3">
            <button type="submit" class="rounded-xl bg-[#FF2D20] px-6 py-2.5 text-sm font-semibold text-white hover:opacity-95">
                {{ $mode === 'edit' ? 'Save Changes' : 'Create Stylist' }}
            </button>
        </div>
    </form>
@endsection