@extends('layouts.app')

@section('title', 'New Bowler Chart — ' . config('app.name'))

@section('content')
    <div class="mx-auto max-w-md rounded-lg border border-gray-200 bg-white p-8">
        <h1 class="mb-6 text-2xl font-bold">Create bowler chart</h1>

        @if ($groups->isEmpty())
            <p class="text-gray-600">
                You are not an owner of any group, so you can't create group charts.
                Ask a group owner (or an administrator) to make you an owner, or use
                <a href="{{ route('charts.personal') }}" class="text-primary hover:underline">your personal bowler</a>.
            </p>
        @else
            <form method="POST" action="{{ route('charts.store') }}">
                @csrf

                <div class="mb-4">
                    <label for="group_id" class="mb-1 block font-semibold">Group</label>
                    <select id="group_id" name="group_id" required
                            class="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-secondary focus:outline-none focus:ring-2 focus:ring-secondary/40">
                        @foreach ($groups as $group)
                            <option value="{{ $group->id }}" {{ (int) old('group_id') === $group->id ? 'selected' : '' }}>{{ $group->name }}</option>
                        @endforeach
                    </select>
                    @error('group_id')
                        <p class="mt-1 text-sm text-red-700">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-4">
                    <label for="name" class="mb-1 block font-semibold">Name</label>
                    <input id="name" type="text" name="name" value="{{ old('name') }}" required
                           class="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-secondary focus:outline-none focus:ring-2 focus:ring-secondary/40">
                    @error('name')
                        <p class="mt-1 text-sm text-red-700">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-6">
                    <label for="description" class="mb-1 block font-semibold">Description <span class="font-normal text-gray-500">(optional)</span></label>
                    <textarea id="description" name="description" rows="2"
                              class="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-secondary focus:outline-none focus:ring-2 focus:ring-secondary/40">{{ old('description') }}</textarea>
                    @error('description')
                        <p class="mt-1 text-sm text-red-700">{{ $message }}</p>
                    @enderror
                </div>

                <div class="flex gap-2">
                    <button type="submit" class="cursor-pointer rounded-md bg-primary px-4 py-2 font-medium text-white hover:bg-primary-hover">Create chart</button>
                    <a href="{{ route('charts.index') }}" class="rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-900 hover:bg-gray-50">Cancel</a>
                </div>
            </form>
        @endif
    </div>
@endsection