@extends('admin.layouts.app')

@section('admin-content')
    <div class="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
        <div>
            <h1 class="text-2xl font-bold tracking-tight">Stylists</h1>
            <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-300">Manage stylists and their availability.</p>
        </div>
        <a href="{{ route('admin.stylists.create') }}" class="rounded-xl bg-[#FF2D20] px-5 py-2.5 text-sm font-semibold text-white hover:opacity-95">
            Add Stylist
        </a>
    </div>

    <div class="mt-6 rounded-2xl border border-zinc-200 bg-white p-0 overflow-hidden dark:border-zinc-800 dark:bg-zinc-950">
        <div class="overflow-x-auto">
            <table class="min-w-[860px] w-full border-collapse">
                <thead class="bg-zinc-50 dark:bg-zinc-900">
                    <tr class="text-left text-xs font-semibold text-zinc-600 dark:text-zinc-300">
                        <th class="px-4 py-3">Name</th>
                        <th class="px-4 py-3">Email</th>
                        <th class="px-4 py-3">Phone</th>
                        <th class="px-4 py-3">Active</th>
                        <th class="px-4 py-3">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-zinc-200 dark:divide-zinc-800">
                    @foreach ($stylists as $stylist)
                        <tr class="text-sm">
                            <td class="px-4 py-3 font-medium">{{ $stylist->name }}</td>
                            <td class="px-4 py-3 text-zinc-700 dark:text-zinc-200">{{ $stylist->email ?? '-' }}</td>
                            <td class="px-4 py-3 text-zinc-700 dark:text-zinc-200">{{ $stylist->phone ?? '-' }}</td>
                            <td class="px-4 py-3">
                                <form method="POST" action="{{ route('admin.stylists.update', $stylist) }}">
                                    @csrf
                                    @method('PUT')
                                    <input type="hidden" name="name" value="{{ $stylist->name }}">
                                    <input type="hidden" name="email" value="{{ $stylist->email }}">
                                    <input type="hidden" name="phone" value="{{ $stylist->phone }}">
                                    <input type="hidden" name="active" value="0">
                                    <label class="inline-flex items-center gap-2">
                                        <input
                                            type="checkbox"
                                            name="active"
                                            value="1"
                                            class="h-4 w-4 accent-[#FF2D20]"
                                            {{ $stylist->active ? 'checked' : '' }}
                                            onchange="this.form.submit()"
                                        >
                                    </label>
                                </form>
                            </td>
                            <td class="px-4 py-3">
                                <div class="flex flex-wrap gap-2">
                                    <a href="{{ route('admin.stylists.edit', $stylist) }}" class="rounded-xl border border-zinc-200 px-3 py-1.5 text-xs font-semibold text-zinc-800 hover:bg-zinc-100 dark:border-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-900">
                                        Edit
                                    </a>
                                    <form method="POST" action="{{ route('admin.stylists.destroy', $stylist) }}">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="rounded-xl border border-rose-200 px-3 py-1.5 text-xs font-semibold text-rose-700 hover:bg-rose-50 dark:border-rose-900/50 dark:text-rose-200 dark:hover:bg-rose-950/20"
                                                onclick="return confirm('Delete this stylist?')">
                                            Delete
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="p-4">
            {{ $stylists->links() }}
        </div>
    </div>
@endsection