@extends('layouts.content')
@section('body_content')
    @push('custom-css')
        <link rel="stylesheet" href="/css/custom_step_wizard.css">
    @endpush

    <main>
        <header class="page-header page-header-compact page-header-light border-bottom bg-white mb-4">
            <div class="container-fluid px-4">
                <div class="page-header-content">
                    <div class="row align-items-center justify-content-between pt-3">
                        <div class="col-auto mb-3">
                            <h1 class="page-header-title">
                                <div class="page-header-icon"><i data-feather="user-plus"></i></div>
                                New Employee Registration
                            </h1>
                            <p class="text-muted mb-0">Please fill in all mandatory fields marked with *</p>
                        </div>
                        <div class="col-12 col-xl-auto mb-3">
                            <button class="btn btn-sm btn-outline-secondary me-2" type="button" id="saveDraftBtn">
                                <i class="me-1" data-feather="save"></i>
                                Save Draft
                            </button>
                            <a class="btn btn-sm btn-light text-primary" href="/user">
                                <i class="me-1" data-feather="arrow-left"></i>
                                Back to Employee List
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <div class="container-fluid px-4 mt-4">
            @include('partials.alert')

            <!-- Step Wizard -->
            <div class="step-wizard">
                <ul class="step-wizard-list">
                    <li class="step-wizard-item active" data-step="1">
                        <span class="progress-count">1</span>
                        <span class="progress-label">Personal Details</span>
                    </li>
                    <li class="step-wizard-item" data-step="2">
                        <span class="progress-count">2</span>
                        <span class="progress-label">Family Data</span>
                    </li>
                    <li class="step-wizard-item" data-step="3">
                        <span class="progress-count">3</span>
                        <span class="progress-label">Payroll Info</span>
                    </li>
                    <li class="step-wizard-item" data-step="4">
                        <span class="progress-count">4</span>
                        <span class="progress-label">Education History</span>
                    </li>
                    <li class="step-wizard-item" data-step="5">
                        <span class="progress-count">5</span>
                        <span class="progress-label">Work Experience</span>
                    </li>
                    <li class="step-wizard-item" data-step="6">
                        <span class="progress-count">6</span>
                        <span class="progress-label">Documents</span>
                    </li>
                </ul>
            </div>

            <form action="/user" method="post" autocomplete="off" id="add_employee_form" enctype="multipart/form-data">
                @csrf

                <!-- Step 1: Personal Details -->
                @include('employee.create.steps.create_user_step1')

                <!-- Step 2: Family Data -->
                @include('employee.create.steps.create_user_step2')

                <!-- Step 3: Payroll Info -->
                @include('employee.create.steps.create_user_step3')

                <!-- Step 4: Education History -->
                @include('employee.create.steps.create_user_step4')

                <!-- Step 5: Work Experience -->
                @include('employee.create.steps.create_user_step5')

                <!-- Step 6: Documents -->
                @include('employee.create.steps.create_user_step6')

                <!-- Navigation Buttons -->
                <div class="d-flex justify-content-between mt-4 mb-5">
                    <button type="button" class="btn btn-secondary btn-navigate" id="prevBtn" style="display: none;">
                        <i data-feather="arrow-left" class="me-2"></i>Previous
                    </button>
                    <button type="button" class="btn btn-primary btn-navigate" id="nextBtn">
                        Next<i data-feather="arrow-right" class="ms-2"></i>
                    </button>
                    <button type="submit" class="btn btn-success btn-navigate" id="submitBtn" style="display: none;">
                        <i data-feather="check-circle" class="me-2"></i>Submit Registration
                    </button>
                </div>
            </form>
        </div>
    </main>

    @push('scripts')
        <script src="{{ assetTemp('/js/functions/textarea.js') }}"></script>
        <script src="{{ assetTemp('/js/functions/maritalstatuses.js') }}"></script>
        <script src="{{ assetTemp('/js/functions/locations.js') }}"></script>
        <script src="{{ assetTemp('/js/functions/divisions.js') }}"></script>
        <script src="{{ assetTemp('/js/functions/departments.js') }}"></script>
        <script src="{{ assetTemp('/js/functions/sub_department.js') }}"></script>
        <script src="{{ assetTemp('/js/functions/roles.js') }}"></script>
        <script src="{{ assetTemp('/js/functions/employeestatuses.js') }}"></script>
        <script src="{{ assetTemp('/js/functions/structure_org_employee.js') }}"></script>
        <script src="{{ assetTemp('/js/functions/LocationAttendances.js') }}"></script>
        <script src="{{ assetTemp('/js/employees/_init.js') }}"></script>
        <script src="{{ assetTemp('/js/employees/add.js') }}"></script>
        <script src="{{ assetTemp('/js/employees/create/index.js') }}"></script>
        <script src="{{ assetTemp('/js/employees/create/children.js') }}"></script>
        <script src="{{ assetTemp('/js/employees/create/sibling.js') }}"></script>
        <script src="{{ assetTemp('/js/employees/create/education.js') }}"></script>
        <script src="{{ assetTemp('/js/employees/create/experience.js') }}"></script>
    @endpush
@endsection