@extends("layouts.master")

@section("title")
User employment edit
@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 edit</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">Edit user employment</h6>
                        </div>
                        <hr>
                        <form class="row g-3" id="editEmployment_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">
                                    @foreach($user as $usr)
                                    <option value="{{$usr->id}}" {{$usr->id==$emp->user_id ? 'selected':''}}>{{$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="inputState" name="area_id" required class="form-select">
                                    @foreach($area as $areas)
                                    <option value="{{$areas->id}}" {{$areas->id==$emp->area_id ? 'selected':''}}>{{$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="inputState" name="dep_id" required class="form-select">
                                    @foreach($dep as $deps)
                                    <option value="{{$deps->id}}" {{$deps->id==$emp->dep_id ? 'selected':''}}>{{$deps->name}}</option>
                                    @endforeach
                                </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 value="Inprogress" {{$emp->status=="Inprogress" ? 'selected':''}}>Inprogress</option>
                                        <option value="Completed" {{$emp->status=="Completed" ? 'selected':''}}>Completed</option>
                                </select>
                            </div>
                            <div class="col-lg-6">
                                <input type="hidden" name="emp_id" value="{{$emp->id}}">
                                <label for="" class="form-label">Regular Hourly Rate : <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" value="{{$emp->regular_hourly_rate}}" required name="regular_hourly_rate" id="">
                            </div>
                            <div class="col-lg-6">
                                <input type="hidden" name="emp_id" value="{{$emp->id}}">
                                <label for="" class="form-label">Overtime Hourly Rate : <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" value="{{$emp->overtime_hourly_rate}}" required 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" name="description" id="" placeholder="Write here..."
                                    rows="3">{{$emp->description}}</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>
                                    Edit user employment
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section("script")
    <script>
        $(document).ready(function (e) {
            $("#editEmployment_form").on('submit', (function (e) {
                e.preventDefault();
                $.ajax({
                    url: '/api/update-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"])
                        }
                    },
                    error: function (error) {
                        console.log(error);
                    }
                });
            }));
        });

    </script>
@endsection