@extends('admin.layouts.app')

@section('title', ($isEdit ? __('admin.groups.edit') : __('admin.groups.create')) . ' — ' . __('admin.brand.name'))
@section('page_title', $isEdit ? __('admin.groups.edit') : __('admin.groups.create'))

@push('styles')
<style>
    /* ── Form layout: two columns on desktop, stack on phone ──────── */
    .grp-form { display: grid; gap: 16px; }
    .grp-form .grp-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 14px 16px;
    }
    .grp-form .grp-grid > .span-full { grid-column: 1 / -1; }

    /* Compact colour picker that lines up with the surrounding inputs. */
    .grp-color-field { display: flex; align-items: center; gap: 10px; }
    .grp-color-field input[type="color"] {
        flex: 0 0 44px;
        width: 44px; height: 38px;
        padding: 2px;
        border: 1px solid #e2e8f0; border-radius: 8px;
        background: #fff; cursor: pointer;
    }
    .grp-color-field input[type="text"] { flex: 1 1 auto; }

    /* Section divider inside the card. */
    .grp-section-title {
        font-size: 12px; font-weight: 700; color: #64748b;
        text-transform: uppercase; letter-spacing: .05em;
        margin: 6px 0 2px;
    }

    .grp-help {
        font-size: 12px; color: #64748b; line-height: 1.5;
        margin-top: 4px;
    }

    /* Validation summary at the top of the card. */
    .grp-errors {
        background: #fef2f2;
        border: 1px solid #fecaca;
        border-radius: 10px;
        padding: 12px 14px;
        color: #7f1d1d;
    }
    .grp-errors strong { color: #b91c1c; }
    .grp-errors ul { margin: 6px 0 0 18px; padding: 0; }
    .grp-errors li { font-size: 13px; }

    .form-actions {
        display: flex; gap: 10px; justify-content: flex-end;
        padding-top: 8px;
    }
</style>
@endpush

@section('content')
    <x-admin.page-header
        :title="$isEdit ? __('admin.groups.edit_title', ['name' => $group->name]) : __('admin.groups.create')">
        <x-slot:actions>
            <a href="{{ route('admin.groups.index') }}" class="btn-secondary">{{ __('admin.actions.back_to_list') }}</a>
        </x-slot:actions>
    </x-admin.page-header>

    @include('admin.partials.flash')

    <div class="card form-card">
        @if (isset($errors) && $errors && $errors->any())
            <div class="grp-errors" role="alert">
                <strong>{{ __('admin.validation.summary_title') ?? 'Please fix the following:' }}</strong>
                <ul>
                    @foreach ($errors->all() as $err)
                        <li>{{ $err }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="POST"
              action="{{ $isEdit ? route('admin.groups.update', $group) : route('admin.groups.store') }}"
              class="grp-form"
              novalidate>
            @csrf
            @if ($isEdit) @method('PUT') @endif

            <div class="grp-section-title">{{ __('admin.fields.basic_info') ?? 'Basic info' }}</div>
            <div class="grp-grid">
                <x-admin.form-input
                    name="name"
                    :label="__('admin.groups.fields.name')"
                    :value="old('name', $group->name)"
                    required />

                <x-admin.form-select
                    name="type"
                    :label="__('admin.groups.fields.type')"
                    :options="[
                        \App\Models\Group::TYPE_INVESTOR => __('admin.groups.types.investor'),
                        \App\Models\Group::TYPE_STARTUP  => __('admin.groups.types.startup'),
                    ]"
                    :selected="old('type', $group->type ?: \App\Models\Group::TYPE_INVESTOR)"
                    required />

                <x-admin.form-input
                    type="number"
                    name="display_order"
                    :label="__('admin.groups.fields.display_order')"
                    :value="old('display_order', $group->display_order ?? 0)"
                    min="0" max="99999" />

                <div>
                    <label for="grp-color">{{ __('admin.groups.fields.color') }}</label>
                    <div class="grp-color-field">
                        @php $colorVal = old('color', $group->color ?? '#6366f1'); @endphp
                        <input type="color"
                               id="grp-color-picker"
                               value="{{ $colorVal }}"
                               aria-label="{{ __('admin.groups.fields.color') }}"
                               oninput="document.getElementById('grp-color').value = this.value">
                        <input type="text"
                               id="grp-color"
                               name="color"
                               value="{{ $colorVal }}"
                               pattern="#[0-9a-fA-F]{6}"
                               class="form-control"
                               oninput="document.getElementById('grp-color-picker').value = this.value">
                    </div>
                    <p class="grp-help">{{ __('admin.groups.fields.color_help') }}</p>
                </div>

                <div class="span-full">
                    <x-admin.form-textarea
                        name="description"
                        :label="__('admin.groups.fields.description')"
                        :value="old('description', $group->description)"
                        :rows="4" />
                </div>

                <x-admin.form-toggle
                    name="is_active"
                    :label="__('admin.fields.status')"
                    :checked="old('is_active', $group->is_active ?? true)" />
            </div>

            <div class="grp-section-title">{{ __('admin.startups_admin.sections.sync') ?? 'Sync metadata' }}</div>
            <div class="grp-grid">
                <div class="span-full">
                    <x-admin.form-input
                        name="monday_group_id"
                        :label="__('admin.groups.fields.monday_group_id')"
                        :value="old('monday_group_id', $group->monday_group_id)"
                        placeholder="new_group81730" />
                    <p class="grp-help">{{ __('admin.groups.fields.meta_help') }}</p>
                </div>
            </div>

            <div class="form-actions">
                <a href="{{ route('admin.groups.index') }}" class="btn-secondary">{{ __('admin.actions.cancel') }}</a>
                <button type="submit" class="btn-primary">
                    {{ $isEdit ? __('admin.actions.save') : __('admin.actions.create') }}
                </button>
            </div>
        </form>
    </div>
@endsection