@extends('layouts.master')

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/hr-forms.css') }}">
@endpush

@section('content')
    <div class="hr-page-container">
        <div class="hr-breadcrumb">
            <a href="{{ url('admin') }}"><i class="fa-solid fa-house"></i> Home</a>
            <i class="fa-solid fa-chevron-right" style="font-size: 10px;"></i>
            <a href="{{ route('designations.index') }}">Designations</a>
            <i class="fa-solid fa-chevron-right" style="font-size: 10px;"></i>
            <span class="current">Add Designation</span>
        </div>

        <div class="hr-page-header">
            <div class="hr-header-left">
                <h2><i class="fa-solid fa-id-badge"></i> Add New Designation</h2>
                <p>Create staff job titles linked to organizational departments</p>
            </div>
            <div class="hr-header-actions">
                <a href="{{ route('designations.index') }}" class="hr-btn-back">
                    <i class="fa-solid fa-arrow-left"></i> Designations List
                </a>
            </div>
        </div>

        <div class="hr-card">
            <div class="hr-card-header">
                <div class="hr-card-title">
                    <i class="fa-solid fa-briefcase"></i> Designation Details
                </div>
            </div>
            <div class="hr-card-body">
                @if (isset($errors) && $errors->any())
                    <div class="hr-alert-error">
                        <strong><i class="fa-solid fa-triangle-exclamation"></i> Please fix the following errors:</strong>
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

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

                    <div class="row">
                        <div class="col-md-6">
                            <div class="hr-form-group">
                                <label class="hr-label" for="title">
                                    Designation Title <span class="required">*</span>
                                </label>
                                <div class="hr-input-icon-wrap">
                                    <i class="fa-solid fa-user-tie"></i>
                                    <input type="text" name="title" id="title" value="{{ old('title') }}" class="hr-input"
                                        placeholder="e.g. Sales Officer, Munshi, Accountant, Guard" required autofocus>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="hr-form-group">
                                <label class="hr-label" for="department_id">
                                    Assigned Department <span class="required">*</span>
                                </label>
                                <select name="department_id" id="department_id" class="hr-select" required>
                                    <option value="">Select Department</option>
                                    @foreach ($departments as $dept)
                                        <option value="{{ $dept->id }}" {{ old('department_id') == $dept->id ? 'selected' : '' }}>
                                            {{ $dept->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="hr-form-group">
                                <label class="hr-label" for="status">
                                    Status
                                </label>
                                <select name="status" id="status" class="hr-select">
                                    <option value="active" {{ old('status', 'active') === 'active' ? 'selected' : '' }}>Active
                                    </option>
                                    <option value="inactive" {{ old('status') === 'inactive' ? 'selected' : '' }}>Inactive
                                    </option>
                                </select>
                                <span class="hr-hint">Inactive designations won't show in employee onboarding</span>
                            </div>
                        </div>
                    </div>

                    <div class="hr-form-actions">
                        <a href="{{ route('designations.index') }}" class="hr-btn-cancel">
                            <i class="fa-solid fa-xmark"></i> Cancel
                        </a>
                        <button type="submit" class="hr-btn-submit">
                            <i class="fa-solid fa-check"></i> Save Designation
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection