@extends('layouts.app')

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

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="fw-bold mb-1">Departments & Designations</h4>
        <p class="text-secondary small mb-0">Organizational units, department heads, and corporate designations</p>
    </div>
    <div class="d-flex gap-2">
        <button class="btn btn-primary btn-sm shadow-sm" data-bs-toggle="modal" data-bs-target="#addDepartmentModal">
            <i class="bi bi-plus-lg me-1"></i> Add Department
        </button>
        <button class="btn btn-outline-secondary btn-sm bg-white" data-bs-toggle="modal" data-bs-target="#addDesignationModal">
            <i class="bi bi-person-badge me-1"></i> Add Designation
        </button>
    </div>
</div>

<div class="row g-3">
    @forelse($departments as $dept)
        <div class="col-12 col-md-6 col-xl-4">
            <div class="card h-100 shadow-sm">
                <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
                    <div>
                        <span class="badge bg-primary-subtle text-primary border me-1">{{ $dept->code }}</span>
                        <span class="fw-bold text-dark">{{ $dept->name }}</span>
                    </div>
                    <span class="badge bg-secondary-subtle text-secondary">
                        {{ $dept->employees_count }} Staff
                    </span>
                </div>
                <div class="card-body">
                    <p class="text-secondary small mb-3">{{ $dept->description ?? 'Business functional department unit.' }}</p>
                    
                    <div class="mb-3 p-2 bg-light rounded-3 small">
                        <span class="text-muted d-block text-xs">Department Head / Manager:</span>
                        <div class="fw-semibold text-dark mt-1">
                            @if($dept->manager)
                                <i class="bi bi-person-check-fill text-success me-1"></i> {{ $dept->manager->full_name }}
                            @else
                                <span class="text-muted fst-italic">Vacant / Unassigned</span>
                            @endif
                        </div>
                    </div>

                    <div class="small fw-semibold text-secondary mb-2">Designations ({{ $dept->designations->count() }}):</div>
                    <div class="d-flex flex-wrap gap-1">
                        @forelse($dept->designations as $desig)
                            <span class="badge bg-light text-dark border py-1 px-2 text-xs">
                                {{ $desig->title }}
                            </span>
                        @empty
                            <span class="text-muted text-xs">No designations defined.</span>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    @empty
        <div class="col-12 text-center py-5 text-muted">
            No departments defined yet.
        </div>
    @endforelse
</div>

<!-- Modal: Add Department -->
<div class="modal fade" id="addDepartmentModal" tabindex="-1">
    <div class="modal-dialog">
        <form action="{{ route('departments.store') }}" method="POST" class="modal-content">
            @csrf
            <div class="modal-header">
                <h6 class="modal-title fw-bold">Create New Department</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label small fw-semibold">Department Name *</label>
                    <input type="text" name="name" class="form-control form-control-sm" required placeholder="e.g. Legal & Compliance">
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-semibold">Department Code *</label>
                    <input type="text" name="code" class="form-control form-control-sm" required placeholder="e.g. LGL">
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-semibold">Description</label>
                    <textarea name="description" class="form-control form-control-sm" rows="2"></textarea>
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-semibold">Department Manager</label>
                    <select name="manager_id" class="form-select form-select-sm">
                        <option value="">Select Manager</option>
                        @foreach($employees as $emp)
                            <option value="{{ $emp->id }}">{{ $emp->full_name }} ({{ $emp->employee_code }})</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-light" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-sm btn-primary">Save Department</button>
            </div>
        </form>
    </div>
</div>

<!-- Modal: Add Designation -->
<div class="modal fade" id="addDesignationModal" tabindex="-1">
    <div class="modal-dialog">
        <form action="{{ route('designations.store') }}" method="POST" class="modal-content">
            @csrf
            <div class="modal-header">
                <h6 class="modal-title fw-bold">Add Corporate Designation</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label small fw-semibold">Belongs to Department *</label>
                    <select name="department_id" class="form-select form-select-sm" required>
                        <option value="">Select Department</option>
                        @foreach($departments as $dept)
                            <option value="{{ $dept->id }}">{{ $dept->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-semibold">Designation Title *</label>
                    <input type="text" name="title" class="form-control form-control-sm" required placeholder="e.g. Senior Frontend Engineer">
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-semibold">Description</label>
                    <textarea name="description" class="form-control form-control-sm" rows="2"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-light" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-sm btn-primary">Add Designation</button>
            </div>
        </form>
    </div>
</div>
@endsection