@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'))

@section('content')
    <x-admin.page-header :title="$isEdit ? __('admin.groups.edit') : __('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>

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

            <div class="form-grid">
                <x-admin.form-input name="name" :label="__('admin.groups.fields.name')" :value="$group->name" required />

                <x-admin.form-select name="user_type" :label="__('admin.groups.fields.user_type')"
                    :options="collect($types)->mapWithKeys(fn($t) => [$t => __('admin.groups.types.' . $t)])->toArray()"
                    :selected="$group->user_type" required data-user-type-select />

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

                <div class="form-field form-field-full" data-investor-block hidden>
                    <label for="investor_ids">{{ __('admin.groups.fields.investors') }} <span class="required">*</span></label>
                    <select id="investor_ids" name="investor_ids[]" multiple size="8" data-investor-select>
                        @foreach ($investors as $id => $label)
                            <option value="{{ $id }}" @selected(in_array($id, old('investor_ids', $selectedInvestors)))>{{ $label }}</option>
                        @endforeach
                    </select>
                    <small class="muted">{{ __('admin.groups.multi_select_hint') }}</small>
                    @error('investor_ids')<span class="field-error">{{ $message }}</span>@enderror
                </div>

                <div class="form-field form-field-full" data-startup-block hidden>
                    <label for="startup_ids">{{ __('admin.groups.fields.startups') }} <span class="required">*</span></label>
                    <select id="startup_ids" name="startup_ids[]" multiple size="8" data-startup-select>
                        @foreach ($startups as $id => $label)
                            <option value="{{ $id }}" @selected(in_array($id, old('startup_ids', $selectedStartups)))>{{ $label }}</option>
                        @endforeach
                    </select>
                    <small class="muted">{{ __('admin.groups.multi_select_hint') }}</small>
                    @error('startup_ids')<span class="field-error">{{ $message }}</span>@enderror
                </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

@push('scripts')
    <script>
        (function ($) {
            var $form = $('[data-group-form]');
            if (!$form.length) return;
            var $select = $form.find('[data-user-type-select]');
            var $inv = $form.find('[data-investor-block]');
            var $sup = $form.find('[data-startup-block]');

            function sync() {
                var t = $select.val();
                var showInv = (t === 'investors' || t === 'both');
                var showSup = (t === 'startups'  || t === 'both');
                $inv.attr('hidden', !showInv);
                $sup.attr('hidden', !showSup);
            }
            $select.on('change', sync);
            sync();
        })(jQuery);
    </script>
@endpush