@extends('dashboard.base')

@section('content')
<div class="container my-4">
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center bg-orange text-white">
            <div class="back-button">                          
                <a href="{{ route('certification_application') }}" class="btn btn-orange text-white d-flex align-items-center">
                    <span class="circle-icon d-flex align-items-center justify-content-center">
                        <i class="fas fa-arrow-left"></i>
                    </span>
                    <span class="ml-2">BACK</span> 
                </a>  
            </div>      
            <h3 class="text-center flex-grow-1 m-0" style="margin-left: -100px !important;" >VACANCIES@MBS</h3>
        </div>
        <div class="card-body">       
            <div class="d-flex justify-content-end mb-3">
                <button type="button" class="btn btn-orange mr-2">VACANCIES</button>
                <a href="{{ route('application_form') }}" class="btn btn-warning text-white">Apply Now</a> <!-- Updated this line -->
                <!-- <button type="button" class="btn btn-warning text-white">Apply Now</button> -->
            </div>
            <div class="header">
                <h1>Deputy Director of Human Resource and Administration</h1>
            </div> 
            <div class="vacancy-details"> 
                <ul class="custom-list">      
                    <li><strong>Vac. No.:</strong> BS/78/2024-2025</li>
                    <li><strong>Location:</strong> Head Office</li>
                    <li><strong>Grade:</strong> BS 4</li>
                    <li><strong>Reporting To:</strong> Director of Human Resource and Administration</li>
                    <li><strong>Number of Posts:</strong> 1 (One)</li>
                    <li><strong>Job Type:</strong> Permanent</li>
                    <li><strong>Duration:</strong> N/A</li>
                </ul>
            </div> 
            <div class="key-responsibilities">
                <h2>Key Responsibilities</h2> 
                <ul class="custom-list">
                    <li>Reviewing, recommending and implementing sound Human Resources policies</li>
                    <li>Designing, implementing and monitoring action plans intended to impact employee satisfaction and motivation.</li>
                    <li>Providing information concerning human resources policies procedures.</li>
                    <li>Developing, implementing and reviewing employee relations policies for enhancement of positive working environment and a dynamic workforce.</li>
                    <li>Ensuring that HR processes are working as intended and are designed to support business & organization Objectives</li>
                    <li>Monitoring, analysing and report on employee movements in the organization, staff turnover and retention</li>
                    <li>Investigating trend data on resourcing issues and probe underlying causes of success and failure in placements in order to create a more effective resourcing process.</li>
                    <li>Working with Heads of Divisions to develop a clear understanding of the current to long term staffing requirements based on business strategy.</li>
                    <li>Reviewing the human resources information system quarterly reports on human resources activities and statistics</li>
                    <li>Recommending appropriate action to management on issues affecting employees</li>
                    <li>Monitoring and controlling expenditure of the departmental budget</li>
                    <li>Supervising the Human Resources Consultants and Records Administrators</li>
                    <li>Administering leave and ensure that it is in line with the laid down procedures</li>
                </ul>
            </div>
            <div class="qualifications">
                <h2>Academic and Professional Qualifications</h2>
                <ul class="custom-list">
                    <li>Master's Degree in Human Resource Management/ Business Administration, Public Administration</li>
                    <li>Excellent computer skills and knowledge of Human Resources Information Systems (HRIS) and demonstrated skills in database management and record keeping</li>
                    <li>Specialized training in employment law, compensation, organizational planning, organization development, employee relations, safety, and preventive labour relations, preferred.</li>
                    <li>General knowledge of labour laws and best practices in Malawi</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- Custom CSS -->
<style>
   
    h1, h2
    {
        font-size: 1.6em;
    }
    .custom-list {
        list-style-type: square;
    }
    .custom-list li::marker {
        color: #ff6c2f;
    }
    .btn-orange {
        background-color: #ff6c2f;
        color: white;
        border: none;
    }
    .btn-orange:hover {
        background-color: #ff6c2f;       
    }
    .btn-warning {
        background-color: #ff6c2f;
        color: white !important; /* Ensure text color is white */
        border: none;
    }
    .btn-warning:hover {
        background-color: #ff6c2f;
    }
    .bg-orange {
        background-color: #ff6c2f; /* Orange background for the card header */
    }
    .text-white {
        color: white !important; /* Ensure text color is white */
    }
    .back-button {
        float: left; /* Float the BACK button to the left */
    }
    .circle-icon {
    background-color: white;
    color: #ff6c2f;
    border-radius: 50%;
    width: 40px; /* Fixed width for the circle */
    height: 40px; /* Fixed height for the circle */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem; /* Adjust the size of the arrow */
    line-height: 1; /* Ensure the line height does not cause misalignment */
}
.circle-icon i {
    font-size: 1.2rem; /* Make sure the icon size fits well inside */
}

</style>

<!-- Include Font Awesome for the arrow icon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
@endsection