@extends('master')
@section('content')
<section class="section dashboard">
        <div class="row">
            <div class="col-12">
              <div class="d-flex justify-content-between align-items-center mb-4">
                  @if(auth()->check() && auth()->user()->role_id == 2)
                    <h3 class="fw-bold fs-5">Add Employee For {{ auth()->user()->company->name }}</h3>
                  @endif
            </div>
               
                <div class="card e-collect-form card-min-height">
                    <div class="card-body mt-5">
                  
                    <form class="row g-3 needs-validation" action="{{ route('store.employee') }}" method="post" novalidate>
                          @csrf
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="validationCustom02" class="form-label fw-600">Name</label>
                                <input type="text" class="form-control custom-input" name="name" id="validationCustom02" required>
                                <div class="valid-feedback">
                                    Looks good!
                                </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="validationCustom02" class="form-label fw-600">Father Name</label>
                                <input type="text" class="form-control custom-input" name="fname" id="validationCustom02" required>
                                <div class="valid-feedback">
                                    Looks good!
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="validationCustom02" class="form-label fw-600">Date Of Birth</label>
                                <input type="date" class="form-control custom-input" name="dob" id="validationCustom03" required>
                                <div class="valid-feedback">
                                    Looks good!
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="validationCustom01" class="form-label fw-600">CNIC</label>
                                <input type="text" class="form-control custom-input" name="cnic" id="validationCustom01" required>
                                <div class="valid-feedback">
                                    Looks good!
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="validationCustom02" class="form-label fw-600">Contact</label>
                                <input type="text" class="form-control custom-input"  name="contact" id="validationCustom02" required>
                                <div class="valid-feedback">
                                    Looks good!
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="validationCustom04" class="form-label fw-600">Gender</label>
                                <select class="form-select" name="gender" aria-label="Default select example" required>
                                    <option value="" selected>Please Select</option>
                                    <option value="Male">Male</option>
                                    <option value="Female">Female</option>
                                </select>                                
                                
                            </div>
                        </div>
                        <div class="row">
                         
                            <div class="col-md-6 mb-3">
                                <label for="validationCustom02" class="form-label fw-600">Employee ID</label>
                                <input type="text" class="form-control custom-input" name="emp_id" id="validationCustom02" required />
                                <small for="employee_login" class="form-label fw-600" style="color: red;">*Emp ID should be unique for an employee</small>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="validationCustom02" class="form-label fw-600">Department</label>
                                <select class="form-select" name="dept_id" aria-label="Default select example" required>
                                    <option value="" selected>Please Select</option>
                                    
                                    @foreach($company->departments as $department)
                                        <option value="{{ $department->id }}">{{ $department->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row">
                        
                            <div class="col-md-6 mb-3">
                                <label for="validationCustom02" class="form-label fw-600">Joining Date</label>
                                <input type="date" class="form-control custom-input" name="joining_date" id="validationCustom02" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="validationCustom02" class="form-label fw-600">Resignation</label>
                                <input type="date" class="form-control custom-input" name="resignation" id="validationCustom02" >
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="validationCustom02" class="form-label fw-600">Address</label>
                                <textarea class="form-control custom-input" name="address" id="validationCustom02" required></textarea>

                                <div class="valid-feedback">
                                Please provide a valid Address.
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="validationCustom02" class="form-label fw-600">Status</label>
                                <select class="form-select" name="status"    aria-label="Default select example" >
                                    <option selected>Please Select</option>
                                    <option value="100" selected>Active</option>
                                    <option value="0">Inactive</option>
                                </select> 
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-6 mb-3">
                                <label for="employee_role" class="form-label fw-600">Role</label>
                                <select class="form-select" name="role" aria-label="" required>
                                    @foreach($roles as $role)
                                        <option value="{{$role->id}}" >{{$role->title}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="row employee_hidden" style="display: none;">
                            <div class="col-12 mb-3">
                                <small for="employee_login" class="form-label fw-600" style="color: red;">* User login information is required for this user.</small>
                            </div>
                            <div class="col-6 mb-3">
                                <label for="employee_role" class="form-label fw-600">Email</label>
                                <input type="email" class="form-control custom-input" name="employee_email" id="validationCustom01">
                            </div>

                            <div class="col-6 mb-3">
                                <label for="employee_role" class="form-label fw-600">Password</label>
                                <input type="password" class="form-control custom-input" name="employee_passsword" id="validationCustom01">
                            </div>
                        </div>
                        <div class="row">
                            @auth
                                <div class="col-md-6 mb-3 d-none">
                                    <label for="validationCustom02" class="form-label fw-600">Company Id</label>
                                    <select class="form-select" name="company_id" aria-label="Default select example" readonly>
                                        <option value="{{ auth()->user()->company->id }}" selected>{{ auth()->user()->company->name }}</option>
                                    </select> 
                                </div>
                            @endauth
                        </div>
                        <div class="col-12">
                            <div class="form-action-button">
                                <button type="submit" class="btn save-btn">Save</button>
                                <button type="button" class="btn bg-white" onclick="window.history.back()">Back</button>

                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')

<script>
    $(document).ready(function () {
        $("select[name=role]").change(function(){
            let role = $(this).find("option:selected").val(),
            allInputs = $(".employee_hidden").find("input");

            if(role != 0) {
                $(".employee_hidden").show()
                allInputs.each(function(){
                    $(this).attr("required", true)
                })
            } else {
                $(".employee_hidden").hide()
                allInputs.each(function(){
                    $(this).removeAttr("required")
                })
            }
        })
    });
</script>
@endpush