@extends('layouts.app')

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <div class="card-title-wrap bar-success">
                    <h4 class="card-title" id="basic-layout-form">Add Employee</h4>
                </div>
                {{-- <p class="mb-0">This is the most basic and cost estimation form is the default position.</p> --}}
            </div>
            <div class="card-body">
                <div class="px-3">
                    <form class="form" id="employeeForm">
                        <div class="form-body">
                            <h4 class="form-section">
                                <i class="icon-user"></i> Personal Details</h4>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_name">Employee Name</label>
                                        <input type="text" id="emp_name" placeholder="Employee Name" class="form-control" name="emp_name">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_email">Email</label>
                                        <input type="text" placeholder="Email" id="emp_email" class="form-control" name="emp_email">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_phone">Cell Phone</label>
                                        <input type="text" placeholder="Phone" id="emp_phone" class="form-control" name="emp_phone">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_address">Address</label>
                                        <input type="text" placeholder="Address" id="emp_address" class="form-control" name="emp_address">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_address">Home Phone</label>
                                        <input type="text" placeholder="Home Phone" id="home_phone" class="form-control" name="home_phone">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_address">CNIC No</label>
                                        <input type="text" placeholder="CNIC No" id="cnic" class="form-control" name="cnic">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_address">Birth Date</label>
                                        <input type="date" placeholder="Birth Date" id="dob" class="form-control" name="dob">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_address">Marital Status</label>
                                        <input type="text" placeholder="Marital Status" id="marital_status" class="form-control" name="marital_status">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_address">Spouce's Name</label>
                                        <input type="text" placeholder="Spouce's Name" id="spouce_name" class="form-control" name="spouce_name">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_address">Spouce's Employer</label>
                                        <input type="text" placeholder="Spouce's Employer" id="spouce_employer" class="form-control" name="spouce_employer">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_address">Spouce's Work Home</label>
                                        <input type="text" placeholder="Spouce's Work Home" id="spouce_work_phone" class="form-control" name="spouce_work_phone">
                                    </div>
                                </div>
                            </div>
                            <h4 class="form-section">
                                <i class="icon-user"></i> Job Information</h4>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_address">Role</label>
                                        <select name="role_id" id="role_id" class="form-control" required>
                                            <option selected disabled value="">Select Role</option>
                                            @foreach ($roles as $role)
                                                <option value="{{$role->id}}">{{$role->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_address">Title</label>
                                        <input type="text" placeholder="Title" id="job_title" class="form-control" name="job_title">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_address">Supervisor</label>
                                        <input type="text" placeholder="Supervisor" id="supervisor" class="form-control" name="supervisor">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_address">Work Location</label>
                                        <input type="text" placeholder="Work Location" id="work_location" class="form-control" name="work_location">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_address">Email Address</label>
                                        <input type="text" placeholder="Email Address" id="work_email" class="form-control" name="work_email">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_address">Work Phone</label>
                                        <input type="text" placeholder="Work Phone" id="work_phone" class="form-control" name="work_phone">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_address">Cell Phone</label>
                                        <input type="text" placeholder="Cell Phone" id="work_cell_phone" class="form-control" name="work_cell_phone">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_address">Start Date</label>
                                        <input type="date" placeholder="Start Date" id="start_date" class="form-control" name="start_date">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_address">Job Type</label>
                                        <select name="job_type" id="job_type" class="form-control">
                                            <option selected disabled value="">Select Option</option>
                                            <option>Permanent</option>
                                            <option>Temporary</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <h4 class="form-section">
                                <i class="icon-user"></i> Emergency Contact Information</h4>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_address">Full Name</label>
                                        <input type="text" placeholder="Full Name" id="emergency_name" class="form-control" name="emergency_name">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_address">Address</label>
                                        <input type="text" placeholder="Address" id="emergency_address" class="form-control" name="emergency_address">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_address">Primary Phone</label>
                                        <input type="text" placeholder="Primary Phone" id="emergency_primary_phone" class="form-control" name="emergency_primary_phone">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_address">Cell Phone</label>
                                        <input type="text" placeholder="Cell Phone" id="emergency_cell_phone" class="form-control" name="emergency_cell_phone">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_address">Relationship</label>
                                        <input type="text" placeholder="Relationship" id="emergency_relationship" class="form-control" name="emergency_relationship">
                                    </div>
                                </div>
                            </div>
                            <h4 class="form-section">
                                <i class="icon-user"></i> Dependent Information (For Insurance Purpose Only)</h4>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_address">Name of dependent</label>
                                        <input type="text" placeholder="Name" id="dependent_name_one" class="form-control" name="dependent_name_one">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_address">Relation to Employee</label>
                                        <input type="text" placeholder="Relation" id="dependent_realation_one" class="form-control" name="dependent_realation_one">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_address">Name of dependent</label>
                                        <input type="text" placeholder="Name" id="dependent_name_two" class="form-control" name="dependent_name_two">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_address">Relation to Employee</label>
                                        <input type="text" placeholder="Relation" id="dependent_realation_two" class="form-control" name="dependent_realation_two">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_address">Name of dependent</label>
                                        <input type="text" placeholder="Name" id="dependent_name_three" class="form-control" name="dependent_name_three">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_address">Relation to Employee</label>
                                        <input type="text" placeholder="Relation" id="dependent_realation_three" class="form-control" name="dependent_realation_three">
                                    </div>
                                </div>
                            </div>
                            <h4 class="form-section">
                                <i class="icon-user"></i> Salary and Allowances Details</h4>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_address">Basic Pay</label>
                                        <input type="text" placeholder="Basic Pay" id="basic_pay" class="form-control" name="basic_pay">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_address">Food  Allowance</label>
                                        <input type="text" placeholder="Food  Allowance" id="food_allowance" class="form-control" name="food_allowance">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_address">Conveyance Allowance</label>
                                        <input type="text" placeholder="Conveyance Allowance" id="conveyance_allowance" class="form-control" name="conveyance_allowance">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_address">Other Allowance</label>
                                        <input type="text" placeholder="Other Allowance" id="other_allowance" class="form-control" name="other_allowance">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_address">Tax Deduction</label>
                                        <input type="text" placeholder="Tax Deduction" id="tax_deduction" class="form-control" name="tax_deduction">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_address">Deduction Details</label>
                                        <input type="text" placeholder="Deduction Details" id="deduction_detail" class="form-control" name="deduction_detail">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_address">Net Salary</label>
                                        <input type="text" placeholder="Net Salary" id="net_salary" class="form-control" name="net_salary">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-actions">
                            <button type="button" class="btn btn-danger mr-1">
                                <i class="icon-trash"></i> Cancel
                            </button>
                            <button type="button" class="btn btn-success" id="saveBtn">
                                <i class="icon-note"></i> Save
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection


@section('afterScript')
<script src="{{ asset('app-assets/vendors/js/core/jquery-3.3.1.min.js')}}"></script>

<script>
    $(document).on('click',"#saveBtn", function(e){
        e.preventDefault();
       
        var form_data = new FormData($("#employeeForm")[0]);
        $.ajaxSetup({
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            url : "{{ route('employee.store') }}",
            type: "POST",
            data : form_data,
            async: false,
            cache: false,
            contentType: false,
            enctype: 'multipart/form-data',
            processData: false,
            success: function (res) {
                 swal("Inserted!", "Employee has been Added Successfully!", "success");
                //  setTimeout(function() { 
                //     // location.reload();
                // }, 1000);
                $('#employeeForm')[0].reset();
            },
            error: function(err) {
                swal('Not Valid',err.responseJSON.message,'error');
                // setTimeout(function() { 
                //     location.reload();
                // }, 1000);
               
            }
        });
    });

</script>