@extends('adminlte::page')

@section('title', 'Departments & Positions')

@include('partials.ui-polish')

@section('css')
    <style>
        .org-chart-wrap {
            overflow-x: auto;
            padding-bottom: .5rem;
        }

        .org-chart,
        .org-chart ul {
            display: flex;
            justify-content: center;
            list-style: none;
            margin: 0;
            min-width: max-content;
            padding: 0;
            position: relative;
        }

        .org-chart ul {
            gap: .75rem;
            padding-top: 1.5rem;
        }

        .org-chart li {
            align-items: center;
            display: flex;
            flex-direction: column;
            padding: 0 .35rem;
            position: relative;
        }

        .org-chart li::before,
        .org-chart li::after {
            border-top: 1px solid #d8e0ec;
            content: '';
            height: 1rem;
            position: absolute;
            top: 0;
            width: 50%;
        }

        .org-chart li::before {
            left: 0;
        }

        .org-chart li::after {
            right: 0;
        }

        .org-chart > li::before,
        .org-chart > li::after,
        .org-chart li:only-child::before,
        .org-chart li:only-child::after {
            display: none;
        }

        .org-chart li:first-child::before,
        .org-chart li:last-child::after {
            border-top: 0;
        }

        .org-chart ul::before {
            border-left: 1px solid #d8e0ec;
            content: '';
            height: 1.5rem;
            left: 50%;
            position: absolute;
            top: 0;
        }

        .org-node-card {
            background: #fff;
            border: 1px solid #dfe7f2;
            border-radius: 8px;
            box-shadow: 0 10px 24px rgba(31, 45, 61, .06);
            min-height: 118px;
            padding: .85rem;
            text-align: center;
            width: 210px;
        }

        .org-node-card strong,
        .org-node-card span,
        .org-node-card small {
            display: block;
        }

        .org-node-card strong {
            color: #1f2d3d;
            font-size: .98rem;
            line-height: 1.2;
        }

        .org-node-card span {
            color: #0d7cf2;
            font-weight: 700;
            margin-top: .35rem;
        }

        .org-node-card small {
            color: #64748b;
            margin: .25rem 0 .5rem;
        }
    </style>
@stop

@section('content_header')
    <div class="d-flex align-items-center justify-content-between flex-wrap">
        <div>
            <h1 class="m-0">Departments & Positions</h1>
            <span class="text-muted">Maintain the HR structure used by employee records and reports</span>
        </div>
        <div class="module-actions mt-2 mt-sm-0">
            <button type="button" class="btn btn-success btn-sm" data-toggle="collapse" data-target="#department-create-panel" aria-expanded="{{ $errors->any() ? 'true' : 'false' }}" aria-controls="department-create-panel">
                <i class="fas fa-plus mr-1"></i> Department
            </button>
            <button type="button" class="btn btn-success btn-sm" data-toggle="collapse" data-target="#position-create-panel" aria-expanded="{{ $errors->any() ? 'true' : 'false' }}" aria-controls="position-create-panel">
                <i class="fas fa-plus mr-1"></i> Position
            </button>
            <a href="{{ route('hrm.employees.index') }}" class="btn btn-outline-primary btn-sm">
                <i class="fas fa-users mr-1"></i> Employees
            </a>
        </div>
    </div>
@stop

@section('content')
    @if(session('success'))
        <x-adminlte-alert theme="success" title="Done" dismissable>
            {{ session('success') }}
        </x-adminlte-alert>
    @endif

    @if($errors->any())
        <x-adminlte-alert theme="danger" title="Please review the form" dismissable>
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </x-adminlte-alert>
    @endif

    <div class="row">
        <div class="col-12">
            <x-adminlte-card title="Organization Chart" icon="fas fa-project-diagram" theme="info">
                @if(count($orgChart))
                    <div class="org-chart-wrap">
                        <ul class="org-chart">
                            @foreach($orgChart as $node)
                                @include('hrm.structure.partials.org-node', ['node' => $node])
                            @endforeach
                        </ul>
                    </div>
                @else
                    <div class="text-center text-muted py-4">
                        Add employees and assign supervisors to draw the reporting hierarchy.
                    </div>
                @endif
            </x-adminlte-card>
        </div>

        <div class="col-lg-5">
            <div class="collapse module-panel {{ $errors->any() ? 'show' : '' }}" id="department-create-panel">
                <x-adminlte-card title="Add Department" icon="fas fa-sitemap" theme="success">
                    <form method="POST" action="{{ route('hrm.structure.departments.store') }}">
                        @csrf
                        <x-adminlte-input name="name" label="Department Name" value="{{ old('name') }}" required/>
                        <x-adminlte-input name="code" label="Code" value="{{ old('code') }}"/>
                        <x-adminlte-textarea name="description" label="Description" rows="2">{{ old('description') }}</x-adminlte-textarea>
                        <button type="submit" class="btn btn-success btn-block">
                            <i class="fas fa-save mr-1"></i> Save Department
                        </button>
                    </form>
                </x-adminlte-card>
            </div>

            <x-adminlte-card title="Departments" icon="fas fa-building" theme="primary">
                <div class="table-responsive">
                    <table class="table table-hover text-nowrap mb-0">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Code</th>
                                <th class="text-center">Positions</th>
                                <th class="text-center">Employees</th>
                                <th class="text-right">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($departments as $department)
                                <tr>
                                    <td>
                                        <button class="btn btn-link p-0 text-left" data-toggle="modal" data-target="#department-{{ $department->id }}">
                                            {{ $department->name }}
                                        </button>
                                        @if($department->description)
                                            <div class="text-muted small">{{ $department->description }}</div>
                                        @endif
                                    </td>
                                    <td>{{ $department->code ?: '-' }}</td>
                                    <td class="text-center">
                                        <span class="badge badge-info">{{ $department->positions_count }}</span>
                                    </td>
                                    <td class="text-center">
                                        <span class="badge badge-success">{{ $department->employees_count }}</span>
                                    </td>
                                    <td class="text-right">
                                        <button class="btn btn-xs btn-outline-primary" data-toggle="modal" data-target="#department-{{ $department->id }}">
                                            <i class="fas fa-edit"></i> Edit
                                        </button>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center text-muted py-4">No departments found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </x-adminlte-card>
        </div>

        <div class="col-lg-7">
            <div class="collapse module-panel {{ $errors->any() ? 'show' : '' }}" id="position-create-panel">
                <x-adminlte-card title="Add Position" icon="fas fa-briefcase" theme="success">
                    <form method="POST" action="{{ route('hrm.structure.positions.store') }}">
                        @csrf
                        <div class="row">
                            <div class="col-md-5">
                                <x-adminlte-select name="department_id" label="Department" required>
                                    <option value="">Select department</option>
                                    @foreach($departments as $department)
                                        <option value="{{ $department->id }}" @selected((int) old('department_id') === $department->id)>
                                            {{ $department->name }}
                                        </option>
                                    @endforeach
                                </x-adminlte-select>
                            </div>
                            <div class="col-md-5">
                                <x-adminlte-input name="title" label="Position Title" value="{{ old('title') }}" required/>
                            </div>
                            <div class="col-md-2">
                                <x-adminlte-input name="grade" label="Grade" value="{{ old('grade') }}"/>
                            </div>
                        </div>
                        <x-adminlte-textarea name="description" label="Description" rows="2">{{ old('description') }}</x-adminlte-textarea>
                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-save mr-1"></i> Save Position
                        </button>
                    </form>
                </x-adminlte-card>
            </div>

            <x-adminlte-card title="Positions" icon="fas fa-id-badge" theme="primary">
                <div class="table-responsive">
                    <table class="table table-hover text-nowrap mb-0">
                        <thead>
                            <tr>
                                <th>Title</th>
                                <th>Department</th>
                                <th>Grade</th>
                                <th class="text-center">Employees</th>
                                <th class="text-right">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($positions as $position)
                                <tr>
                                    <td>
                                        <strong>{{ $position->title }}</strong>
                                        @if($position->description)
                                            <div class="text-muted small">{{ $position->description }}</div>
                                        @endif
                                    </td>
                                    <td>{{ $position->department->name ?? 'Unassigned' }}</td>
                                    <td>{{ $position->grade ?: '-' }}</td>
                                    <td class="text-center">
                                        <span class="badge badge-success">{{ $position->employees_count }}</span>
                                    </td>
                                    <td class="text-right">
                                        <button class="btn btn-xs btn-outline-primary" data-toggle="modal" data-target="#position-{{ $position->id }}">
                                            <i class="fas fa-edit"></i> Edit
                                        </button>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center text-muted py-4">No positions found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </x-adminlte-card>
        </div>
    </div>

    @foreach($departments as $department)
        <x-adminlte-modal id="department-{{ $department->id }}" title="Edit Department" theme="primary" icon="fas fa-building">
            <form id="department-form-{{ $department->id }}" method="POST" action="{{ route('hrm.structure.departments.update', $department) }}">
                @csrf
                @method('PUT')
                <x-adminlte-input name="name" label="Department Name" value="{{ old('name', $department->name) }}" required/>
                <x-adminlte-input name="code" label="Code" value="{{ old('code', $department->code) }}"/>
                <x-adminlte-textarea name="description" label="Description" rows="2">{{ old('description', $department->description) }}</x-adminlte-textarea>
                <x-slot name="footerSlot">
                    <button type="submit" form="department-delete-{{ $department->id }}" class="btn btn-outline-danger mr-auto" onclick="return confirm('Delete this department? Positions under it will also be deleted, and linked employees will be unassigned.');">
                        <i class="fas fa-trash mr-1"></i> Delete
                    </button>
                    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" form="department-form-{{ $department->id }}" class="btn btn-primary">
                        <i class="fas fa-save mr-1"></i> Update Department
                    </button>
                </x-slot>
            </form>
            <form id="department-delete-{{ $department->id }}" method="POST" action="{{ route('hrm.structure.departments.destroy', $department) }}">
                @csrf
                @method('DELETE')
            </form>
        </x-adminlte-modal>
    @endforeach

    @foreach($positions as $position)
        <x-adminlte-modal id="position-{{ $position->id }}" title="Edit Position" theme="primary" icon="fas fa-id-badge">
            <form id="position-form-{{ $position->id }}" method="POST" action="{{ route('hrm.structure.positions.update', $position) }}">
                @csrf
                @method('PUT')
                <x-adminlte-select name="department_id" label="Department" required>
                    @foreach($departments as $department)
                        <option value="{{ $department->id }}" @selected((int) old('department_id', $position->department_id) === $department->id)>
                            {{ $department->name }}
                        </option>
                    @endforeach
                </x-adminlte-select>
                <x-adminlte-input name="title" label="Position Title" value="{{ old('title', $position->title) }}" required/>
                <x-adminlte-input name="grade" label="Grade" value="{{ old('grade', $position->grade) }}"/>
                <x-adminlte-textarea name="description" label="Description" rows="2">{{ old('description', $position->description) }}</x-adminlte-textarea>
                <x-slot name="footerSlot">
                    <button type="submit" form="position-delete-{{ $position->id }}" class="btn btn-outline-danger mr-auto" onclick="return confirm('Delete this position? Linked employees will be unassigned from this position.');">
                        <i class="fas fa-trash mr-1"></i> Delete
                    </button>
                    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" form="position-form-{{ $position->id }}" class="btn btn-primary">
                        <i class="fas fa-save mr-1"></i> Update Position
                    </button>
                </x-slot>
            </form>
            <form id="position-delete-{{ $position->id }}" method="POST" action="{{ route('hrm.structure.positions.destroy', $position) }}">
                @csrf
                @method('DELETE')
            </form>
        </x-adminlte-modal>
    @endforeach
@stop