@extends('layouts.app')

@section('content')
<div class="container-xxl px-0">
    <div class="module-shell">

        @include('modules.pm.partials._flash')

        @component('modules.pm.partials._toolbar', [
            'title' => 'Nowy projekt',
            'subtitle' => 'Utwórz projekt i domyślne kolumny tablicy'
        ])
            <a href="{{ route('pm.projects.index') }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left me-1"></i> Wróć
            </a>
        @endcomponent

        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <form method="POST" action="{{ route('pm.projects.store') }}" class="row g-3">
                    @csrf

                    <div class="col-md-6">
                        <label class="form-label">Nazwa</label>
                        <input type="text"
                               name="name"
                               value="{{ old('name') }}"
                               class="form-control @error('name') is-invalid @enderror"
                               required>
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Key (np. ERP)</label>
                        <input type="text"
                               name="key"
                               value="{{ old('key') }}"
                               class="form-control @error('key') is-invalid @enderror"
                               maxlength="16"
                               required>
                        <div class="form-text">Używane do klucza zadań: <code>ERP-123</code></div>
                        @error('key')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- ✅ DZIAŁ --}}
                    <div class="col-md-6">
                        <label class="form-label">Dział</label>
                        <select name="department_id"
                                class="form-select @error('department_id') is-invalid @enderror"
                                required>
                            <option value="">— wybierz dział —</option>

                            @foreach($departments as $dep)
                                <option value="{{ $dep->id }}"
                                    @selected((int)old('department_id', $defaultDepartmentId ?? 0) === (int)$dep->id)>
                                    {{ $dep->name }}
                                    @if(!empty($dep->code)) ({{ $dep->code }}) @endif
                                </option>
                            @endforeach
                        </select>

                        @error('department_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror

                        <div class="form-text">
                            Projekt będzie przypisany do wybranego działu (np. dla filtrowania i widoczności).
                        </div>
                    </div>

                    <div class="col-12">
                        <label class="form-label">Opis</label>
                        <textarea name="description"
                                  class="form-control @error('description') is-invalid @enderror"
                                  rows="4">{{ old('description') }}</textarea>
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-12 d-flex gap-2">
                        <button class="btn btn-primary">
                            <i class="bi bi-check2-circle me-1"></i> Utwórz
                        </button>
                        <a href="{{ route('pm.projects.index') }}" class="btn btn-outline-secondary">Anuluj</a>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>
@endsection