@include('admin.layouts.header')
@include('admin.layouts.sidebar')
<div class="m-grid__item m-grid__item--fluid m-wrapper">
    <!-- BEGIN: Subheader -->
    <div class="m-subheader ">
        <div class="d-flex align-items-center">
            <div class="mr-auto">

            </div>

        </div>
    </div>
    <!-- END: Subheader -->
    <div class="m-content">
        @if(Session::has('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
            {{ Session::get('success') }}
        </div>
        @endif
        @if(Session::has('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
            {{ Session::get('error') }}
        </div>
        @endif

        <div class="btn btn-primary" style="margin-bottom: 7px;" data-toggle="modal" data-target="#view_departments">Departments <i class="fa fa-group"></i></div>
        @if(isset($positions) && @count($positions) > 0)
            <div class="btn btn-success" style="margin-bottom: 7px;" id="create_jobs_ml">Jobs <i class="fa fa-handshake-o"></i></div>
        @endif
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__head" style="position: relative;">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <span class="m-portlet__head-icon">
                            <i class="fa fa-vcard"></i>
                        </span>
                        <h3 class="m-portlet__head-text">
                            Jobs
                        </h3>
                    </div>
                </div>
            </div>
                <div class="m-section" style="padding: 21px;">
                    <div class="m-section__content">
                        <table class="table m-table merchant-form">
                            <thead>
                                <tr>
                                    <th>Job ID</th>
                                    <th>Department</th>
                                    <th>Title</th>
                                    <th>Created By</th>
                                    <th>Created At</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                            @if(@count($jobs) > 0)
                                    @foreach($jobs as $key => $job)
                                    <tr>
                                        <td>{!! $job->id !!}</td>
                                        <td>{!! $job->departments->department or '' !!}</td>
                                        <td>{!! $job->title !!}</td>
                                        <td>{!! $job->user->name !!}</td>
                                        <td>{!! date('d, M Y h:i A', strtotime($job->created_at)) !!}</td>
                                        <td id="job_data_{!! $job->id !!}" data-obj='{!! json_encode($job); !!}'>
                                            <div class="row">
                                                <select class="form-control col-md-8" name="status_change" data-id="{!! $job->id !!}">
                                                    <option value="inactive" @if(isset($job->status) && $job->status == 'inactive') selected="selected" @endif>Inactive</option>
                                                    <option value="active" @if(isset($job->status) && $job->status == 'active') selected="selected" @endif>Active</option>
                                                </select>
                                                <span style="margin-left: 18px;margin-top: 10px;">
                                                    <i class="fa fa-edit mk-jb-edit" data-id="{!! $job->id !!}"></i>
                                                </span>
                                                <span style="margin-left: 18px;margin-top: 10px;">
                                                    <i class="fa fa-trash  mk-jb-delete" data-id="{!! $job->id !!}"></i>
                                                </span>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="view_departments" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header" style="display: inline;padding: 13px;background-color: #f9f9f9;">
                <button type="button" class="close" data-dismiss="modal" style="line-height:1 !important;">&times;</button>
                <h4 class="modal-title">View/Create Departments</h4>
            </div>
            <div class="modal-body">
                    <table class="table position-tb" style="@if(isset($positions) && @count($positions) == 0) display: none; @endif">
                    <thead>
                    <tr>
                        <td>Department</td>
                        <td>Created By</td>
                        <td>Created At</td>
                        <td>Action</td>
                    </tr>
                    </thead>
                    <tbody>
                    @if(isset($positions) && @count($positions) > 0)
                        @foreach($positions as $position)
                            <tr>
                                <td class="dep_{!! $position->id !!}">{!! $position->department !!}</td>
                                <td>{!! $position->user->name !!}</td>
                                <td>{!! $position->created_at !!}</td>
                                <td><span style="margin-right: 20px;"><i data-id="{!! $position->id !!}" class="delete-dep fa fa-trash"></i></span><span><i data-id="{!! $position->id !!}" data-dep="{!! $position->department !!}" class="edit-dep fa fa-edit"></i></span></td>
                            </tr>
                        @endforeach
                    @endif
                    </tbody>
                </table>
                @if(isset($positions) && @count($positions) == 0)
                    <div style="text-align:center;">No Department</div>
                @endif
            </div>
            <div class="modal-footer" style="padding: 3px;">
                <table class="table">
                    <tbody>
                    <tr>
                        <td style="border-top:none;"><input type="text" name="department" class="form-control" placeholder="Enter Department - eg. Quality Analyst"/>
                        <div class="error-msg-vm" style="color: red;"></div>
                        </td>
                        <td style="border-top:none;">
                            <div class="btn btn-primary from-control create-department" data-id="0">Create</div>
                            <span><img class="loader-ig" src="/assets/front/img/loading.gif" style="display: none;width: 15px;"></span>
                            <button type="button" class="btn btn-default reset-dep">Reset</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </td>
                        <td style="border-top:none;"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="create_jobs" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header" style="display: inline;padding: 13px;background-color: #f9f9f9;">
                <button type="button" class="close" data-dismiss="modal" style="line-height:1 !important;">&times;</button>
                <h4 class="modal-title">Create Jobs</h4>
            </div>
            <div class="modal-body">
                <form action="/admin/job/create" method="post" id="create_job_frm">
                <div class="col-md-12">
                    <div class="form-group row">
                        <label for="department_id" class="col-sm-2 col-form-label">Department <span style="color: red;">*</span></label>
                        <div class="col-sm-10">
                            <select type="text" class="form-control" id="department_id" name="department_id" required="required">
                                <option value="">Select Department</option>
                                @if(isset($positions) && @count($positions) > 0)
                                    @foreach($positions as $position)
                                        <option value="{!! $position->id !!}">{!! $position->department !!}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="title" class="col-sm-2 col-form-label">Title <span style="color: red;">*</span></label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="title" name="title" placeholder="eg. Software Developer" required="required"/>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="location" class="col-sm-2 col-form-label">Location <span style="color: red;">*</span></label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="location" name="location" placeholder="eg. Hyderabad/Bangalore" required="required"/>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="job_desc" class="col-sm-2 col-form-label">Job Description <span style="color: red;">*</span></label>
                        <div class="col-sm-10">
                            <textarea type="text" class="form-control" id="job_desc" name="job_desc" placeholder="Job Description" required="required"></textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="roles_responsibiltes" class="col-sm-2 col-form-label">Roles & Responsibilities <span style="color: red;">*</span></label>
                        <div class="col-sm-10">
                            <textarea type="text" class="form-control" id="roles_responsibiltes" name="roles_responsibiltes" placeholder="Roles & Responsibilities" required="required"></textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="req_skills" class="col-sm-2 col-form-label">Requirement & Skills<span style="color: red;">*</span></label>
                        <div class="col-sm-10">
                            <textarea type="text" class="form-control" id="req_skills" name="req_skills" placeholder="Requirement & Skills" required="required"></textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="status" class="col-sm-2 col-form-label">Status</label>
                        <div class="col-sm-10">
                            <select type="text" class="form-control" id="status" name="status" required="required">
                                <option value="Inactive">Inactive</option>
                                <option value="active">Active</option>
                            </select>
                        </div>
                    </div>
                    <div>
                        <label for="you_get" class="col-sm-2 col-form-label"></label>
                        <input type="hidden" name="_token" value="{!! csrf_token() !!}"/>
                        <input type="hidden" name="job_id" value="0"/>
                        <input type="hidden" name="user_id" value="{!! Auth::user()->id; !!}"/>
                        <input type="submit" class="btn btn-primary" value="Create Job"/>
                        <span><img class="loader-iv" src="/assets/front/img/loading.gif" style="display: none;width: 15px;"></span>
                    </div>
                </div>
                </form>
            </div>
        </div>
    </div>
</div>
@include("admin.layouts.footer")

<script>

    $(".reset-dep").click(function(){
        let main = $(".create-department");
        let tr = main.closest('tr');
        main.html('Create');
        main.attr('data-id', 0);
        tr.find('input[name="department"]').val('');
    });

    $("#create_jobs_ml").click(function(){

        let event = $("#create_jobs");

        event.find('.modal-title').html('Create Job');

        event.find('#title').val('');
        event.find('#location').val('');
        event.find('#job_desc').val('');
        event.find('#roles_responsibiltes').val('');
        event.find('#req_skills').val('');
        event.find('select option').removeAttr('selected');
        event.find('input[type="submit"]').val('Create Job');
        event.find('input[name="job_id"]').val(0);

        event.modal('show');
    });

    $("#create_job_frm").on('submit', function(){
        $(".loader-iv").css({'display':'initial'});
        return true;
    });

    $(document).on('click','.edit-dep', function(){
        $('input[name="department"]').val($(this).attr('data-dep'));
        $(".create-department").html('Update');
        $(".create-department").attr('data-id', $(this).attr('data-id'));
    });

    $(document).on('click','.delete-dep', function(){
        let tr = $(this).closest('tr');
        var _token = '<?php echo csrf_token(); ?>';
        var user_id = '<?php echo Auth::user()->id; ?>';
        let id = $(this).attr('data-id');
        $(".error-msg-vm").html('');

        if(window.confirm('Are you sure?')) {
            $.ajax({
                type: 'POST',
                url: "/admin/department/delete",
                data: {id: id, _token: _token, user_id: user_id},
                dataType: "JSON",
                success: function (response) {
                    tr.fadeOut("slow", function () {

                    });
                    if (typeof response.message !== 'undefined' && response.message.length) {
                        $(".error-msg-vm").html(response.message);
                    }
                }
            });
        }
    });

    $(".create-department").click(function(){
        let main = $(this);
        let tr = $(this).closest('tr');
        var _token = '<?php echo csrf_token(); ?>';
        var user_id = '<?php echo Auth::user()->id; ?>';
        let department = tr.find('input[name="department"]').val();
        let edit_id = $(this).attr('data-id');

        $(".error-msg-vm").html('');
        tr.find('input[name="department"]').css({'border-color':'#efe9e9'});
        if(department.length == 0){
            tr.find('input[name="department"]').css({'border-color':'red'});
            return false;
        }

        $(".loader-ig").css({'display':'initial'});
        $.ajax({
            type: 'POST',
            url: "/admin/department/create",
            data: {department:department,  _token:_token, user_id:user_id, edit_id:edit_id},
            dataType: "JSON",
            success: function (response) {
                if(typeof response.data !== 'undefined') {
                    let event = $(".position-tb");
                    event.find('tbody').append(response.data);
                    event.css({'display': 'inline-table'});
                }
                $(".loader-ig").css({'display':'none'});
                if(typeof response.message !== 'undefined' && response.message.length){
                    $(".error-msg-vm").html(response.message);
                }

                if(response.status === 'OK') {

                    if(edit_id){
                        $("td.dep_"+edit_id).html(department);
                    }

                    main.html('Create');
                    main.attr('data-id', 0);
                    tr.find('input[name="department"]').val('');
                    window.location.reload();
                }
            }
        });
    });

    $("select[name='status_change']").on('change', function() {
        var status = $(this).val();
        var job_id = $(this).attr('data-id');
        var _token = '<?php echo csrf_token(); ?>';
        var user_id = '<?php echo Auth::user()->id; ?>';

        $(".init-loader").css({display: 'block'});
        $.ajax({
            type: 'POST',
            url: "/admin/job/status",
            data: {status:status, job_id:job_id, _token:_token, user_id:user_id},
            dataType: "JSON",
            success: function (response) {
                alert(response.message);
                if(response.status == 'OK') {
                    window.location.reload();
                }
                $(".init-loader").css({display: 'none'});
            }
        });
    });

    $(".mk-jb-edit").on('click', function() {
        var job_id = $(this).attr('data-id');

        let event = $("#create_jobs");
        event.find('.modal-title').html('Update Job');

        let data = $("#job_data_"+job_id).attr('data-obj');
        data = JSON.parse(data);
        event.find('#title').val(data.title);
        event.find('#location').val(data.location);
        event.find('#job_desc').val(data.requirement);
        event.find('#roles_responsibiltes').val(data.expectation);
        event.find('#req_skills').val(data.description);
        event.find('select[name="status"] option[value='+data.status+']').attr('selected', true);
        event.find('select[name="department_id"] option[value='+data.department_id+']').attr('selected', true);
        event.find('input[type="submit"]').val('Update Job');
        event.find('input[name="job_id"]').val(job_id);
        event.modal('show');
    });

    $(".mk-jb-delete").on('click', function() {
        var job_id = $(this).attr('data-id');
        var _token = '<?php echo csrf_token(); ?>';
        var user_id = '<?php echo Auth::user()->id; ?>';

        $(".init-loader").css({display: 'block'});
        $.ajax({
            type: 'POST',
            url: "/admin/job/delete",
            data: {job_id:job_id, _token:_token, user_id:user_id},
            dataType: "JSON",
            success: function (response) {
                alert(response.message);
                if(response.status == 'OK') {
                    window.location.reload();
                }
                $(".init-loader").css({display: 'none'});
            }
        });
    });

</script>