@extends('layouts.app')

@php
    $pageTitle = 'Edit Department';
    $pageHeading = 'Department Editor';
    $pageDescription = 'Edit struktur department yang dipakai oleh employee dan modul organisasi.';
@endphp

@section('content')
    <section class="hero">
        <h3 style="margin: 0 0 10px; font-size: 22px;">Edit department aktif.</h3>
        <p style="margin: 0; color: var(--muted); line-height: 1.7;">
            Perubahan di sini langsung mengubah data <strong>`personnel_department`</strong> pada database aktif Laravel.
        </p>
    </section>

    @if (session('status'))
        <section class="hero" style="border-color: rgba(45, 106, 79, 0.24); background: rgba(45, 106, 79, 0.08);">
            <strong style="display: block; color: var(--green-deep); margin-bottom: 6px;">Berhasil disimpan</strong>
            <div>{{ session('status') }}</div>
        </section>
    @endif

    @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;">Edit Department</h3>
                <div class="muted">{{ $department->dept_name }} - ID {{ $department->id }}</div>
            </div>
            <div style="display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:flex-end;">
                <form method="POST" action="{{ route('departments.destroy', $department) }}" onsubmit="return confirm('Hapus department ini?');">
                    @csrf
                    @method('DELETE')
                    <button type="submit" style="border: 1px solid rgba(180, 35, 24, 0.24); border-radius: 999px; padding: 10px 16px; font-weight: 900; cursor: pointer; color: var(--red); background: rgba(180, 35, 24, 0.06);">
                        Hapus Department
                    </button>
                </form>
                <a href="{{ route('departments.index') }}" style="color: var(--green-deep); text-decoration: none; font-weight: 700;">Kembali ke directory</a>
            </div>
        </div>

        <form method="POST" action="{{ route('departments.update', $department) }}">
            @csrf
            @method('PUT')

            <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', $department->dept_code) }}" 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;">Department Name</span>
                    <input type="text" name="dept_name" value="{{ old('dept_name', $department->dept_name) }}" 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;">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="1" @selected((string) old('is_default', $department->is_default) === '1')>Default</option>
                        <option value="0" @selected((string) old('is_default', $department->is_default) === '0')>Non 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', $department->company_id) }}" 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', $department->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