@extends("layouts.master")

@section("title")
User employment add
@endsection

@section("content")
<div class="page-wrapper">
    <div class="page-content">

        <!--breadcrumb-->
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3"> <a href="{{ url('dashboard')}}">Home</a> </div>
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item " aria-current="page"><a href="{{url('user/employment/list')}}">User employment
                                list</a></li>
                        <li class="breadcrumb-item active" aria-current="page">User employment add</li>
                    </ol>
                </nav>
            </div>
        </div>

        <div class="row ">
            <div class="col">
                <div class="card radius-10 border-start border-0 border-3 border-success">
                    <div class="card-body">
                        <div class="card-title d-flex align-items-center">
                            <div><i class=" me-1 font-22 text-primary"></i>
                            </div>
                            <h6 class="mb-0 text-dark">Create user employment</h6>
                        </div>
                        <hr>
                        <form class="row g-3" id="employment_form">
                            <div class="col-lg-6">
                                <label for="inputState" class="form-label">User : <span class="text-danger">*</span></label>
                                <select id="inputState" name="user_id" required class="form-select">
                                    <option value="" selected disabled>Choose User..</option>
                                    @foreach($user as $usr)
                                    <option value="{{$usr->id}}">{{$usr->first_name}} {{$usr->last_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-lg-6">
                                <label for="inputState" class="form-label">Working Area : <span class="text-danger">*</span></label>
                                <select id="area_id" name="area_id"  required class="form-select">
                                    <option selected disabled value="">Choose working area</option>
                                    @foreach($area as $areas)
                                    <option value="{{$areas->id}}">{{ucwords($areas->name)}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-lg-6">
                                <label for="inputState" class="form-label">Department : <span class="text-danger">*</span></label>
                                <select id="dep_id" name="dep_id" required class="form-select">
                                    <option selected>Choose area first</option>
                                </select>
                            </div>
                            <div class="col-lg-6">
                                <label for="inputState" class="form-label">Status : <span class="text-danger">*</span></label>
                                <select id="inputState" name="status" required class="form-select">
                                    <option selected disabled value="">Choose Status</option>
                                        <option value="Inprogress">Inprogress</option>
                                        <option value="Completed">Completed</option>

                                </select>
                            </div>
                            <div class="col-lg-6">
                                <label for="" class="form-label">Regular Hourly Rate : <span class="text-danger">*</span></label>
                                <input type="text" required class="form-control" name="regular_hourly_rate" id="">
                            </div>
                            <div class="col-lg-6">
                                <label for="" class="form-label">Overtime Hourly Rate : <span class="text-danger">*</span></label>
                                <input type="text" required class="form-control" name="overtime_hourly_rate" id="">
                            </div>
                            <div class="col-12">
                                <label for="" class="form-label">Note: <span class="fst-italic">( Optional)</span></label>
                                <textarea class="form-control" id=""   name="description" placeholder="Write here..."
                                    rows="3"></textarea>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-success px-5" id="btnSubmit">
                                  <i class="bx bx-loader-circle bx-spin fa-pulse" style="display: none"></i>
                                    Add user employment
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section("script")
    <script>
        $(document).ready(function (e) {
            $("#employment_form").on('submit', (function (e) {
                e.preventDefault();
                $.ajax({
                    url: '/api/create-user-employment',
                    type: "POST",
                    data: new FormData(this),
                    dataType: "JSON",
                    processData: false,
                    contentType: false,
                    cache: false,
                    beforeSend: function () {
                        $("#btnSubmit").attr('disabled', true);
                        $(".fa-pulse").css('display', 'inline-block');
                    },
                    complete: function () {
                        $("#btnSubmit").attr('disabled', false);
                        $(".fa-pulse").css('display', 'none');
                    },
                    success: function (response) {
                        console.log(response);
                        if (response["status"] == "fail") {
                            toastr.error('Failed',response["msg"])
                        } else if (response["status"] == "success") {
                            toastr.success('Success',response["msg"])
                            $("#employment_form")[0].reset();
                        }
                    },
                    error: function (error) {
                        console.log(error);
                    }
                });
            }));
            $("#area_id").on('change', (function (e) {
                var id=$(this).val()
                e.preventDefault();
                $.ajax({
                    url: '/api/get-area-department',
                    type: "get",
                    data: {id:id},
                    dataType: "JSON",
                    success: function (response) {
                        console.log(response);
                        if (response["status"] == "fail") {
                            toastr.error('Failed',response["msg"])
                        } else if (response["status"] == "success") {
                            $("#dep_id").html('')
                            $("#dep_id").html(response["rows"])
                        }
                    },
                    error: function (error) {
                        console.log(error);
                    }
                });
            }));
        });

    </script>
@endsection