@extends('layouts.master')

@section('title', 'Farm App - Jobs')

@section('content')
<div id="page">
    <div class="card cardi card-style" style="position: fixed !important; top: 50px; left: 0; right: 0; z-index: 50;margin: 0px 0px 0px 0px; border-radius: 0px;backdrop-filter: saturate(180%) blur(20px);">
        <div class="content" style="margin-top:5px;">
            <a data-menu="createJob" href="#" class="btn btn-full gradient-green font-13 btn-m font-600 mt-3 rounded-s">CREATE JOB</a>
        </div>
    </div>
    <div class="header header-auto-sho header-fixed header-logo-center">
        <a href="#" class="header-title">Jobs</a>
        <a href="#" data-back-button class="header-icon header-icon-1"><i class="fas fa-chevron-left"></i></a>
        <a href="#" data-toggle-theme class="header-icon header-icon-3 show-on-theme-dark"><i class="fas fa-sun"></i></a>
        <a href="#" data-toggle-theme class="header-icon header-icon-3 show-on-theme-light"><i class="fas fa-moon"></i></a>
        <a href="#" data-menu="menu-main" class="header-icon header-icon-4"><i class="fas fa-bars"></i></a>
    </div>

    <div class="page-title-clear"></div>
    <div class="page-content">

        <div class="job-content">
            <div class="card card-style rounded-s" style="@if($jobs->count() == 0) display:none; @else margin-top: 60px;" @endif>
                <div class="content">
                    <h5 class="font-14 opacity-0">JOBS <span class="float-end badge font-10 bg-highlight">{{ $jobs->count() }}</span></h5>
                    <div class="divider mb-3"></div>
                    <div class="list-group list-custom-small list-menu ms-0 me-1" id="jobs">

                        @foreach($jobs as $job)
                            <a href="#" data-menu="JobActions" data-id="{{$job->id}}" class="job_button">
                                <i class="fa fa-briefcase gradient-green color-white"></i>
                                <span>{{$job->job_name}}</span>
                                <i class="fa fa-angle-right"></i>
                            </a>
                        @endforeach

                    </div>
                </div>
            </div>
        </div>

    </div>

    <div id="menu-main" class="menu menu-box-left rounded-0" data-menu-load="{{url('menu-main')}}" data-menu-width="280" data-menu-active="nav-pages"></div>

    <div id="menu-share" class="menu menu-box-bottom rounded-m" data-menu-load="{{url('menu-share')}}" data-menu-height="370"></div>

    <div id="menu-colors" class="menu menu-box-bottom rounded-m" data-menu-load="{{url('menu-colors')}}" data-menu-height="480"></div>

</div>

<div id="JobActions" class="menu menu-box-bottom rounded-m bg-theme" style="min-width:95%; max-height:98%" !important ;>
    <div class="menu-title">
        <p class="color-highlight">Actions on</p>
        <h1 class="font-800">JOB</h1>
        <a href="#" class="close-menu"><i class="fa fa-times-circle"></i></a>
    </div>
    <div class="content">
        <div class="divider mt-n2"></div>
        <a href="#" data-id="" data-menu="editJob"  style="width:-webkit-fill-available !important;" class="mb-3 btn btn-full gradient-green font-13 btn-m font-600 mt-1 rounded-sm view_edit_job">EDIT JOB</a>
        <a href="#" data-id="" style="width:-webkit-fill-available !important;" class="mb-5 btn btn-full gradient-red font-13 btn-m font-600 mt-3 rounded-sm delete_job">DELETE JOB</a>

    </div>
</div>

<form id="editJobForm">
    @csrf
    <div id="editJob" class="menu menu-box-modal rounded-s bg-theme" style="min-width:95%; max-height:98%" !important ;>
        <div class="menu-title">
            <p class="color-highlight">Update</p>
            <h4 class="font-800" style="padding: 20px 0 0px 15px;">JOB</h4>
            <a href="#" class="close-menu"><i class="fa fa-times-circle"></i></a>
        </div>
        <div class="content">
            <div class="divider mt-n2"></div>

            <div class="col-12">
                <div class="input-style input-style-always-active has-borders mb-4">
                    <input type="text" class="form-control validate-name" id="edit_job_name" name="job_name" value="" required autocomplete="job_name" autofocus placeholder="TYPE JOB NAME">
                    <label for="edit_job_name" class="color-highlight">Job Name</label>
                </div>
            </div>

            <div class="col-12">
                <div class="input-style input-style-always-active has-borders mb-4">
                    <input type="text" class="form-control validate-name" id="edit_job_url" name="job_url" value="" autocomplete="job_url" autofocus placeholder="TYPE JOB URL">
                    <label for="edit_job_url" class="color-highlight">Job Url</label>
                </div>
            </div>

            <div class="col-12">
                <div class="input-style input-style-always-active has-borders no-icon mb-4">
                    <select id="edit_job_type" value="" required autocomplete="job_type" name="job_type">
                        <option value="" selected>CHOOSE JOB TYPE</option>
                        <option value="CROP JOB">CROP JOB</option>
                        <option value="LIVESTOCK JOB">LIVESTOCK JOB</option>
                        <option value="EQUIPMENT JOB">EQUIPMENT JOB</option>
                        <option value="ACCOUNTS JOB">ACCOUNTS JOB</option>
                        <option value="OTHER JOB">OTHER JOB</option>
                    </select>
                    <label for="edit_job_type" class="color-highlight">Choose Job Type</label>
                    <span><i class="fa fa-chevron-down"></i></span>
                </div>
            </div>

            <div class="col-12">
                <div class="input-style input-style-always-active has-borders no-icon mb-4">
            <textarea id="edit_job_desc" value="" name="job_desc" placeholder="ENTER JOB DESCRIPTION" style="margin-top: 0px; margin-bottom: 0px; height: 79px;"></textarea>
                    <label for="job_desc" class="color-highlight">Enter Description</label>
                </div>
            </div>

            <button type="submit" style="width:-webkit-fill-available !important;" class="mb-5 btn btn-full gradient-green font-13 btn-m font-600 mt-3 rounded-s">UPDATE JOB</button>
        </div>
    </div>
</form>

<form id="createJobForm">
    @csrf
    <div id="createJob" class="menu menu-box-modal rounded-s bg-theme" style="min-width:95%; max-height:98%" !important ;>
        <div class="menu-title">
            <p class="color-highlight">Create</p>
            <h4 class="font-800" style="padding: 20px 0 0px 15px;">JOB</h4>
            <a href="#" class="close-menu"><i class="fa fa-times-circle"></i></a>
        </div>
        <div class="content">
            <div class="divider mt-n2"></div>

            <div class="col-12">
                <div class="input-style input-style-always-active has-borders mb-4">
                    <input type="text" class="form-control validate-name" name="job_name" value="" required autocomplete="job_name" autofocus placeholder="TYPE JOB NAME">
                    <label for="job_name" class="color-highlight">Job Name</label>
                </div>
            </div>

            <div class="col-12">
                <div class="input-style input-style-always-active has-borders mb-4">
                    <input type="text" class="form-control validate-name" name="job_url" value="" autocomplete="job_url" autofocus placeholder="TYPE JOB URL">
                    <label for="job_url" class="color-highlight">Job Url</label>
                </div>
            </div>

            <div class="col-12">
                <div class="input-style input-style-always-active has-borders no-icon mb-4">
                    <select id="job_type" value="" required autocomplete="job_type" name="job_type">
                        <option value="" selected>CHOOSE JOB TYPE</option>
                        <option value="CROP JOB">CROP JOB</option>
                        <option value="LIVESTOCK JOB">LIVESTOCK JOB</option>
                        <option value="EQUIPMENT JOB">EQUIPMENT JOB</option>
                        <option value="ACCOUNTS JOB">ACCOUNTS JOB</option>
                        <option value="OTHER JOB">OTHER JOB</option>
                    </select>
                    <label for="animal_id" class="color-highlight">Choose Job Type</label>
                    <span><i class="fa fa-chevron-down"></i></span>
                </div>
            </div>

            <div class="col-12">
                <div class="input-style input-style-always-active has-borders no-icon mb-4">
                    <textarea id="job_desc" required value="" name="job_desc" placeholder="ENTER JOB DESCRIPTION" style="margin-top: 0px; margin-bottom: 0px; height: 79px;"></textarea>
                    <label for="job_desc" class="color-highlight">Enter Description</label>
                </div>
            </div>
            <button type="submit" style="width:-webkit-fill-available !important;" class="mb-5 btn btn-full gradient-green font-13 btn-m font-600 mt-3 rounded-s">CREATE JOB</button>
        </div>
    </div>
</form>

@endsection

@section('footer-links')
<script type="text/javascript" src="{{asset('scripts/bootstrap.min.js?v2')}}"></script>
<script type="text/javascript" src="{{asset('scripts/custom.js?v13')}}"></script>

<script>
    function close_modal(){
        $(".modal").modal('hide');
        $('body').removeClass('modal-open');
        $('.modal-backdrop').remove();
    }
    $(function () {

        $("#createJobForm").submit(function(e){
            e.preventDefault();
            var error = false;

            if(!error){
                close_modal();
                swal({
                        title: "Are you sure?",
                        text: "Job will be created",
                        type: "warning",
                        showCancelButton: true,
                        closeOnConfirm: false,
                        showLoaderOnConfirm: true
                    },
                    function() {
                        $("#createJobForm").ajaxSubmit({
                            type: "POST",
                            url: "create_job",
                            dataType: "json",
                            success: function (response) {
                                if (response.status === "success") {
                                    swal("Done!", "Job Creation Successful", "success");

                                    $(".job-content").load(location.href+(' .job-content'));
                                    $('#createJobForm').resetForm();
                                    $("#filtered_date").load(location.href+(' #filtered_date'));
                                    var element = document.getElementById("createJob");
                                    element.classList.remove("menu-active");
                                    var element = document.getElementById("logger");
                                    element.classList.remove("menu-active");

                                } else{
                                    swal("Cancelled!", response.msg, "error")

                                }
                            }
                        });
                    });

            }
        });

        let job_id;

        $(".page-content").on("click", ".job_button", function (e) {

            var element = document.getElementById("JobActions");
            element.classList.add("menu-active");
            var element = document.getElementById("logger");
            element.classList.add("menu-active");

            job_id = $(this).data("id");
        });

        $("#JobActions").on("click", ".view_edit_job", function (e) {
            // $('#editStoreForm').modal('show');
            $.ajax({
                type: "GET",
                url: "view_edit_job",
                dataType: "json",
                data:{
                    job_id: job_id
                },
                success: function (response) {
                    if (response.status === "success") {
                        $("#edit_job_name").val(response.job_name);
                        $("#edit_job_url").val(response.job_url);
                        $("#edit_job_type").val(response.job_type);
                        $("#edit_job_desc").val(response.job_desc);
                    }
                    else{
                    }
                }
            });
        });

        $("#editJobForm").submit(function(e){
            e.preventDefault();
            var error = false;

            if(!error){
                swal({
                        title: "Are you sure?",
                        text: "Job will be updated!",
                        type: "warning",
                        showCancelButton: true,
                        closeOnConfirm: false,
                        showLoaderOnConfirm: true
                    },
                    function() {
                        $("#editJobForm").ajaxSubmit({
                            type: "PUT",
                            url: "edit_job",
                            dataType: "json",
                            data: {
                                job_id: job_id
                            },
                            success: function (response) {
                                if (response.status === "success") {
                                    swal("Done!", "Job Updated", "success");

                                    $(".job-content").load(location.href+(' .job-content'));
                                    $('#editJobForm').resetForm();
                                    $("#filtered_date").load(location.href+(' #filtered_date'));
                                    var element = document.getElementById("editJob");
                                    element.classList.remove("menu-active");
                                    var element = document.getElementById("logger");
                                    element.classList.remove("menu-active");

                                } else{
                                    swal("Cancelled!", response.msg, "error")

                                }
                            }
                        });
                    });

            }
        });

        $("#JobActions").on("click", ".delete_job", function (e) {
            swal({
                    title: "Are you sure?",
                    text: "Job will be deleted!",
                    type: "warning",
                    showCancelButton: true,
                    closeOnConfirm: false,
                    showLoaderOnConfirm: true
                },
                function() {
                    $.ajax({
                        type: "DELETE",
                        url: "delete_job",
                        dataType: "json",
                        data:{
                            job_id: job_id
                        },
                        success: function (response) {
                            if (response.status === "success") {
                                swal("Done!", "Job Deleted", "success");

                                $(".job-content").load(location.href+(' .job-content'));
                                $('#JobActions').resetForm();
                                $("#filtered_date").load(location.href+(' #filtered_date'));
                                var element = document.getElementById("JobActions");
                                element.classList.remove("menu-active");
                                var element = document.getElementById("logger");
                                element.classList.remove("menu-active");

                            } else{
                                swal("Cancelled!", response.msg, "error")

                            }
                        }
                    });
                });
        });
    });
</script>

</body>
</html>
@endsection