@canany(['hr_manager_hq', 'employees'])

    @extends('adminlte::page')

    @section('title', $title)

@section('content_header')
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6 m-0 text-dark">
                <h1>{{ $subtitle }}</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.index') }}">Admin</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.employees.index') }}">Employee</a></li>
                    <li class="breadcrumb-item active">Create</li>
                </ol>
            </div>
        </div>
    </div>
@stop

@section('content')
    <style>
        .iti {
            width: 100%;
        }

        #container {
            max-width: 550px;
        }

        .step-container {
            position: relative;
            text-align: center;
            transform: translateY(-43%);
        }

        .step-circle {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            /* background-color: #fff; */
            border: 2px solid #007bff;
            line-height: 30px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
            cursor: pointer;
            /* Added cursor pointer */
        }

        .step-line {
            position: absolute;
            top: 16px;
            left: 50px;
            width: calc(100% - 100px);
            height: 2px;
            background-color: #007bff;
            z-index: -1;
        }

        #multi-step-form {
            overflow-x: hidden;
        }

        #placeholder {
            transition: opacity 0.5s ease-out;
            opacity: 1;
        }
    </style>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">

                    <div id="content">

                        <div class="row mb-2">
                            <div class="col-12">
                                <a href={{ route('admin.employees.index') }} class="btn btn-secondary"><i
                                        class="fas fa-arrow-left"></i> Back</a>
                            </div>
                        </div>

                        @livewire('employee-create-steps')

                    </div>


                </div>
            </div>
        </div>
    </div>


@stop

@section('footer')

    &nbsp;

@stop

@endcan