@extends('layouts.app')

@php
    $pageTitle = 'Create Department';
    $pageHeading = 'New Department';
    $pageDescription = 'Tambah department baru untuk struktur organisasi.';
@endphp

@section('content')
    <section class="hero">
        <h3 style="margin: 0 0 10px; font-size: 22px;">Buat department baru.</h3>
        <p style="margin: 0; color: var(--muted); line-height: 1.7;">
            Data akan disimpan ke tabel <strong>`personnel_department`</strong>.
        </p>
    </section>

    @if ($errors->any())
        <section class="hero" style="border-color: rgba(180, 35, 24, 0.2); background: rgba(180, 35, 24, 0.06);">
            <strong style="display: block; color: var(--red); margin-bottom: 8px;">Beberapa input perlu diperbaiki</strong>
            <ul style="margin: 0; padding-left: 18px; color: var(--ink);">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </section>
    @endif

    <section class="table-card">
        <div style="display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px;">
            <div>
                <h3 style="margin-bottom: 6px;">Create Department</h3>
                <div class="muted">Isi code dan nama, lalu simpan.</div>
            </div>
            <a href="{{ route('departments.index') }}" style="color: var(--green-deep); text-decoration: none; font-weight: 700;">Kembali ke directory</a>
        </div>

        <form method="POST" action="{{ route('departments.store') }}">
            @csrf

            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px;">
                <label style="display: grid; gap: 8px;">
                    <span style="font-weight: 700;">Department Code</span>
                    <input type="text" name="dept_code" value="{{ old('dept_code') }}" style="width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);" placeholder="EX: HRD">
                    <span class="muted" style="font-size: 13px; line-height: 1.6;">Wajib unik.</span>
                </label>

                <label style="display: grid; gap: 8px;">
                    <span style="font-weight: 700;">Department Name</span>
                    <input type="text" name="dept_name" value="{{ old('dept_name') }}" style="width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);" placeholder="Human Resource">
                </label>

                <label style="display: grid; gap: 8px;">
                    <span style="font-weight: 700;">Default Flag</span>
                    <select name="is_default" style="width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                        <option value="0" @selected((string) old('is_default', $defaults['is_default'] ?? 0) === '0')>Non Default</option>
                        <option value="1" @selected((string) old('is_default', $defaults['is_default'] ?? 0) === '1')>Default</option>
                    </select>
                </label>

                <label style="display: grid; gap: 8px;">
                    <span style="font-weight: 700;">Company ID</span>
                    <input type="number" name="company_id" value="{{ old('company_id', $defaults['company_id'] ?? 1) }}" style="width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                </label>

                <label style="display: grid; gap: 8px;">
                    <span style="font-weight: 700;">Parent Department</span>
                    <select name="parent_dept_id" style="width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                        <option value="">- None -</option>
                        @foreach (($departments ?? []) as $dept)
                            <option value="{{ $dept->id }}" @selected((string) old('parent_dept_id') === (string) $dept->id)>
                                {{ $dept->dept_name }} (ID {{ $dept->id }})
                            </option>
                        @endforeach
                    </select>
                </label>
            </div>

            <div style="display: flex; justify-content: flex-end; margin-top: 22px;">
                <button type="submit" style="border: 0; border-radius: 999px; padding: 12px 18px; font-weight: 800; cursor: pointer; color: #fffaf2; background: linear-gradient(135deg, var(--green-deep), var(--green));">
                    Simpan Department
                </button>
            </div>
        </form>
    </section>
@endsection