@extends('layouts.app',['path'=>'employee'])
@section('title', 'Create Employee - HRMS')

@section('content')
@can('employee.create')    
    <div class="content" data-color="primary">
        <!-- Breadcrumb -->
        <div class="d-md-flex d-block align-items-center justify-content-between page-breadcrumb mb-3">
            <div class="my-auto mb-2">
                <h2 class="mb-1">Employees</h2>
                <nav>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('dashboard') }}"><i class="ti ti-smart-home"></i></a>
                        </li>
                        <li class="breadcrumb-item">
                            Employees
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{ route('employee') }}">Employee List</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">Create Employee</li>
                    </ol>
                </nav>
            </div>
        </div>
        <!-- /Breadcrumb -->
        @include('partials.new_alerts')

        <div class="row">
            <div class="col-xl-4 theiaStickySidebar">
                <div class="card card-bg-1 card-bg-1-custom">
                    <div class="card-body p-0">
                        <span class="avatar avatar-xxxl avatar-rounded border border-2 m-auto d-flex mb-2" id="employeeProfileImage">
                            <i class="ti ti-photo text-gray-2 fs-30"></i>
                        </span>
                        <div class="text-center px-3 pb-3 border-bottom">
                            <div class="mb-3">
                                <h5 class="d-flex align-items-center justify-content-center mb-1"><span id="employeeName">Employee Name</span><i class="ti ti-discount-check-filled text-success ms-1"></i></h5>
                                <span class="badge badge-soft-dark fw-medium me-2">
                                    Employee Designation
                                </span>
                                <span class="badge badge-soft-secondary fw-medium" id="employeeTotalExperience">0 year of experience</span>
                            </div>
                            <div>
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <span class="d-inline-flex align-items-center">
                                        <i class="ti ti-user me-2"></i>
                                        Father's Name
                                    </span>
                                    <p class="text-dark" id="employeeFatherName"></p>
                                </div>
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <span class="d-inline-flex align-items-center">
                                        <i class="ti ti-id me-2"></i>
                                        Employee No
                                    </span>
                                    <p class="text-dark"></p>
                                </div>
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <span class="d-inline-flex align-items-center">
                                        <i class="ti ti-calendar-check me-2"></i>
                                        Joining Date
                                    </span>
                                    <p class="text-dark" id="employeeDateOfJoining"></p>
                                </div>
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <span class="d-inline-flex align-items-center">
                                        <i id="statusIcon" class="ti ti-info-circle me-2"></i>
                                        Status
                                    </span>
                                    <span id="employeeStatus"></span>
                                </div>
                                <div class="row gx-2 mt-3">
                                    <div class="col-12">
                                        <div>
                                            <a class="btn btn-dark w-100" id="add_info"><i class="ti ti-edit me-1"></i>Add Info</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex align-items-center justify-content-between mb-2">
                    <h6>Emergency Contact Number</h6>
                </div>
                <div class="card">
                    <div class="card-body p-0" id="emergencyContactContainer">
                        <div class="py-4 px-3 accordion-body">No information available.</div>
                    </div>
                </div>
            </div>
            <div class="col-xl-8">
                <div>
                    <div class="tab-content custom-accordion-items">
                        <div class="tab-pane active show" id="bottom-justified-tab1" role="tabpanel">
                            <div class="accordion accordions-items-seperate" id="accordionExample">
                                <div class="accordion-item">
                                    <div class="accordion-header" id="headingSix">
                                        <div class="accordion-button">
                                            <div class="d-flex align-items-center justify-content-between flex-fill">
                                                <h5 data-bs-toggle="collapse" data-bs-target="#primaryBorderSix" aria-expanded="false" aria-controls="primaryBorderSix">Basic Information</h5>														
                                                <div class="d-flex">
                                                    <a class="d-flex align-items-center collapsed collapse-arrow" data-bs-toggle="collapse" data-bs-target="#primaryBorderSix" aria-expanded="false" aria-controls="primaryBorderSix">
                                                        <i class="ti ti-chevron-down fs-18"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>                                       
                                    </div>
                                    <div id="primaryBorderSix" class="accordion-collapse collapse border-top show" aria-labelledby="headingSix" data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            No information available.
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <div class="accordion-header" id="headingSeven">
                                        <div class="accordion-button">
                                            <div class="d-flex align-items-center justify-content-between flex-fill">
                                                <h5 data-bs-toggle="collapse" data-bs-target="#primaryBorderSeven" aria-expanded="false" aria-controls="primaryBorderSeven">Personal Information</h5>														
                                                <div class="d-flex">
                                                    <a class="d-flex align-items-center collapsed collapse-arrow" data-bs-toggle="collapse" data-bs-target="#primaryBorderSeven" aria-expanded="false" aria-controls="primaryBorderSeven">
                                                        <i class="ti ti-chevron-down fs-18"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>                                       
                                    </div>
                                    <div id="primaryBorderSeven" class="accordion-collapse collapse border-top" aria-labelledby="headingSeven" data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            No information available.
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="accordion-item">
                                            <div class="accordion-header" id="headingOne">
                                                <div class="accordion-button">
                                                    <div class="d-flex align-items-center justify-content-between flex-fill">
                                                        <h5 data-bs-toggle="collapse" data-bs-target="#primaryBorderOne" aria-expanded="false" aria-controls="primaryBorderOne">About Employee</h5>
                                                        <div class="d-flex">
                                                            <a class="d-flex align-items-center collapsed collapse-arrow" data-bs-toggle="collapse" data-bs-target="#primaryBorderOne" aria-expanded="false" aria-controls="primaryBorderOne">
                                                                <i class="ti ti-chevron-down fs-18"></i>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div id="primaryBorderOne" class="accordion-collapse collapse border-top" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                                <div class="accordion-body mt-2" id="employeeAbout">
                                                    No information available.
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="accordion-item">
                                            <div class="accordion-header" id="headingTwo">
                                                <div class="accordion-button">
                                                    <div class="d-flex align-items-center justify-content-between flex-fill">
                                                        <h5 data-bs-toggle="collapse" data-bs-target="#primaryBorderTwo" aria-expanded="false" aria-controls="primaryBorderTwo">Bank Information</h5>
                                                        <div class="d-flex">
                                                            <a class="d-flex align-items-center collapsed collapse-arrow"  data-bs-toggle="collapse" data-bs-target="#primaryBorderTwo" aria-expanded="false" aria-controls="primaryBorderTwo">
                                                                <i class="ti ti-chevron-down fs-18"></i>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div id="primaryBorderTwo" class="accordion-collapse collapse border-top" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                                                <div class="accordion-body" id="bankDetailContainer">
                                                    No information available.
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <div class="accordion-header" id="headingThree">
                                        <div class="accordion-button">
                                            <div class="d-flex align-items-center justify-content-between flex-fill">
                                                <h5 data-bs-toggle="collapse" data-bs-target="#primaryBorderThree" aria-expanded="false" aria-controls="primaryBorderThree">Family Information</h5>														
                                                <div class="d-flex">
                                                    <a class="d-flex align-items-center collapsed collapse-arrow" data-bs-toggle="collapse" data-bs-target="#primaryBorderThree" aria-expanded="false" aria-controls="primaryBorderThree">
                                                        <i class="ti ti-chevron-down fs-18"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>                                       
                                    </div>
                                    <div id="primaryBorderThree" class="accordion-collapse collapse border-top" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                                        <div class="accordion-body" id="familyDetailContainer">
                                            No information available.
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="accordion-item">
                                            <div class="row">												
                                                <div class="accordion-header" id="headingFour">
                                                    <div class="accordion-button">
                                                        <div class="d-flex align-items-center justify-content-between flex-fill">
                                                            <h5 data-bs-toggle="collapse" data-bs-target="#primaryBorderFour" aria-expanded="false" aria-controls="primaryBorderFour">Education Details</h5>														
                                                            <div class="d-flex">
                                                                <a class="d-flex align-items-center collapsed collapse-arrow" data-bs-toggle="collapse" data-bs-target="#primaryBorderFour" aria-expanded="false" aria-controls="primaryBorderFour">
                                                                    <i class="ti ti-chevron-down fs-18"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>                                       
                                                </div>
                                                <div id="primaryBorderFour" class="accordion-collapse collapse border-top" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
                                                    <div class="accordion-body">
                                                        <div id="educationDetailContainer">
                                                            No information available.
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="accordion-item">
                                            <div class="row">												
                                                <div class="accordion-header" id="headingFive">
                                                    <div class="accordion-button collapsed">
                                                        <div class="d-flex align-items-center justify-content-between flex-fill">
                                                            <h5 data-bs-toggle="collapse" data-bs-target="#primaryBorderFive" aria-expanded="false" aria-controls="primaryBorderFive">Experience</h5>														
                                                            <div class="d-flex">
                                                                <a class="d-flex align-items-center collapsed collapse-arrow" data-bs-toggle="collapse" data-bs-target="#primaryBorderFive" aria-expanded="false" aria-controls="primaryBorderFive">
                                                                    <i class="ti ti-chevron-down fs-18"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div id="primaryBorderFive" class="accordion-collapse collapse border-top" aria-labelledby="headingFive" data-bs-parent="#accordionExample">
                                                    <div class="accordion-body">
                                                        <div id="experienceDetailContainer">
                                                            No information available.
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>						
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Employee Info -->
    <div class="modal fade static-modal" id="add_info_form_modal" data-color="primary">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="d-flex align-items-center">
                        <h4 class="modal-title me-2">Add Employee Info</h4><span class="employee-no"></span>
                    </div>
                    <button type="button" class="btn-close custom-btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <i class="ti ti-x"></i>
                    </button>
                </div>
                <form action="{{ route('employee.store') }}" method="post" id="add_info_form" enctype="multipart/form-data">
                    <div id="add_info_form-error-alert" class="mx-3"></div>
                    <div class="contact-grids-tab">
                        <ul class="nav nav-underline" id="myTab2" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="info-tab3" data-bs-toggle="tab" data-bs-target="#basic-info3" type="button" role="tab" aria-selected="true">Employee Info</button>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-content" id="myTabContent2">
                        <div class="tab-pane fade show active" id="basic-info3" role="tabpanel" aria-labelledby="info-tab3" tabindex="0">
                            <div class="modal-body pb-0">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="card card-bg-1 pt-0 h-74">
                                            <div class="card-body p-0">
                                                <div class="d-flex align-items-center justify-content-center flex-wrap row-gap-3 w-100 rounded p-3 pb-0">                                                
                                                    <div class="d-flex align-items-center justify-content-center avatar avatar-xxxl rounded-circle border border-2 flex-shrink-0 text-dark frames position-relative" id="employeeProfileImageCircle">
                                                        <span id="previewDiv" class="rounded-circle overflow-hidden text-center" style="width: 6rem; height: 6rem;">
                                                            <i class="ti ti-photo text-gray-2 fs-30"></i>
                                                        </span>
                                                        <div class="profile-uploader d-flex align-items-center position-absolute bottom-0">
                                                            <label class="btn btn-sm on-active-no-efect m-1 bg-white rounded-circle d-flex justify-content-center align-items-center position-relative">
                                                                <i class="ti ti-edit fs-19"></i>
                                                                <input type="file" class="form-control image-sign" id="imageInput" name="profile_image" accept="image/*">
                                                            </label>
                                                            <a href="javascript:void(0);" class="btn btn-sm on-active-no-efect m-1 bg-white rounded-circle d-flex justify-content-center align-items-center" style="visibility: hidden;" id="removeImage">
                                                                <i class="ti ti-trash fs-19"></i>
                                                            </a>
                                                        </div>
                                                    </div>        
                                                </div>

                                                <div class="text-center px-3 pb-3 border-bottom">
                                                   <div class="my-2">
                                                        <h6 class="mb-1">Upload Profile Image</h6>
                                                        <p class="fs-12 mb-0">The image size must be less than 2 MB.</p>
                                                        <span class="error-validation" id="profile_image-error"></span>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Employee Name <span class="text-danger"> *</span></label>
                                            <input type="text" class="form-control" name="name">
                                            <span class="error-validation" id="name-error"></span>
                                        </div>
                                    </div>
                                    {{-- <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Common Name</label>
                                            <input type="text" class="form-control" name="common_name">
                                            <span class="error-validation" id="common_name-error"></span>
                                        </div>									
                                    </div> --}}
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Father Name <span class="text-danger"> *</span></label>
                                            <input type="text" class="form-control" name="father_name">
                                            <span class="error-validation" id="father_name-error"></span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Identity Number <span class="text-danger"> *</span></label>
                                            <input type="number" name="cnic_number" class="form-control" placeholder="">
                                            <span class="error-validation" id="cnic_number-error"></span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Joining Date <span class="text-danger"> *</span></label>
                                            <input type="text" name="date_of_joining" class="form-control datepicker" autocomplete="off" placeholder="dd/mm/yyyy">
                                            <span class="error-validation" id="date_of_joining-error"></span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Official Email <span class="text-danger"> *</span></label>
                                            <input type="email" name="official_email" class="form-control">
                                            <span class="error-validation" id="official_email-error"></span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Role <span class="text-danger"> *</span></label>
                                            <select class="select" name="role_id">
                                                <option value="">Select</option>
                                                @foreach ($organizationRoles as $role)
                                                    <option value="{{ $role['id'] }}">{{ $role['display_name'] }}</option>
                                                @endforeach
                                            </select>
                                            <span class="error-validation" id="role_id-error"></span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Department <span class="text-danger"> *</span></label>
                                            <select class="select" name="department_id">
                                                <option value="">Select</option>
                                                @foreach ($departments as $department)
                                                    <option value="{{ $department['id'] }}">{{ $department['name'] }}</option>
                                                @endforeach
                                            </select>
                                            <span class="error-validation" id="department_id-error"></span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Designation <span class="text-danger"> *</span></label>
                                            <select class="select" name="designation_id">
                                                <option value="">Select</option>
                                            </select>
                                            <span class="error-validation" id="designation_id-error"></span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Employee Type <span class="text-danger"> *</span></label>
                                            <select class="select" name="employee_type_id">
                                                <option value="">Select</option>
                                                @foreach ($employeeTypes as $type)
                                                    <option value="{{ $type['id'] }}">{{ $type['name'] }}</option>
                                                @endforeach
                                            </select>
                                            <span class="error-validation" id="employee_type_id-error"></span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Office Location <span class="text-danger"> *</span></label>
                                            <select class="select" name="office_location_id">
                                                <option value="">Select</option>
                                                @foreach ($officeLocations as $location)
                                                    <option value="{{ $location['id'] }}">{{ $location['name'] }}</option>
                                                @endforeach
                                            </select>
                                            <span class="error-validation" id="office_location_id-error"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-light border me-2" data-bs-dismiss="modal">
                                    <i class="ti ti-x me-2"></i>Cancel
                                </button>
                                <button type="submit" class="btn btn-primary" id="add_info_form_submit">
                                    <i class="ti ti-check me-2"></i>Save
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- /Edit Employee Info -->
@endcan

@endsection

@push('scripts')
    <script src="{{ asset('assets/validation/create-employee.js?v='.config('api.version')) }}"></script>
@endpush