@extends('adminlte::layouts.app')

@section('htmlheader_title')
	Job List
@endsection

@section('contentheader_title')
	Trades Diary
@endsection

@section('header_styles')
	{{--<link rel="stylesheet" type="text/css" href={{ asset("plugins/datatables/dataTables.bootstrap.css")}}>--}}
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.3.3/css/fixedColumns.dataTables.min.css">

@stop

@section('main-content')




	<div class="container-fluid spark-screen">
		<div class="row">
			<div class="col-md-12">
				<div class="panel panel-default">


					<div class="panel-body">
						@include('jobs.table2')
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="" id="new_job" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="exampleModalLabel">Job Card Detail</h4>
				</div>
                {!! Form::open(['route' => 'job.store','enctype'=>'multipart/form-data','id'=>'new_job_form']) !!}
                    <div class="modal-body">
                        <input type="hidden" id="user_id" name="user_id" >
                        <input type="hidden" id="col_id"  name="col_id" >
                        <input type="hidden" id="year"    name="year"  value="2021">
                        <input type="hidden" id="month"   name="month" value="07">
                        <input type="hidden" id="day"     name="day">
                        <div class="row">
                            <!-- Name Field -->
                            <div class="form-group col-sm-12">
                                {!! Form::label('name', 'Job Title:') !!}
                                {!! Form::text('title',null, ['class' => 'form-control', 'id'=>'title']) !!}
                            </div>

                            <!-- Name Field -->
                            <div class="form-group col-sm-12">
                                {!! Form::label('name', 'Job Detail:') !!}
                                {!! Form::text('detail',null, ['class' => 'form-control', 'id'=>'detail']) !!}
                            </div>
                        </div>
                        <div class="row ">
                            <div class="form-group col-sm-12">
                                @include('jobs.partial.documents')
                            </div>
                        </div>
                        <div class="row ">
                            <div class="form-group col-sm-12">
                                @include('jobs.partial.repeat_date')
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        {{--<button id="add_task" type="button" class="btn btn-success" >Add Task</button>--}}
                        {!! Form::submit('submit', ['class' => 'btn btn-primary']) !!}
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                {!! Form::close() !!}
			</div>
		</div>
	</div>

    <div class="modal fade" id="edit_job" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="exampleModalLabel">Edit Job Card Detail</h4>
				</div>
				<div class="modal-body">
					<input type="hidden" id="job_id">
                    <div class="row">
                        <!-- Name Field -->
                        <div class="form-group col-sm-12">
                            {!! Form::label('name', 'Job Title:') !!}
                            {!! Form::text('title',null, ['class' => 'form-control', 'id'=>'edit_title']) !!}
                        </div>

                        <!-- Name Field -->
                        <div class="form-group col-sm-12">
                            {!! Form::label('name', 'Job Detail:') !!}
                            {!! Form::text('detail',null, ['class' => 'form-control', 'id'=>'edit_detail']) !!}
                        </div>
                    </div>
                    <div class="row ">
                        <div class="form-group col-sm-12">
                            @include('jobs.partial.documents')
                        </div>
                    </div>
                    <div class="row ">
                        <div class="form-group col-sm-12">
                            @include('jobs.partial.repeat_date')
                        </div>
                    </div>
                </div>
				<div class="modal-footer">
					{{--<button id="update_task" type="button" class="btn btn-success" >Update Task</button>--}}
                    {!! Form::submit('submit', ['class' => 'btn btn-primary']) !!}
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				</div>
			</div>
		</div>
	</div>

@endsection


@section('footer_scripts')

{{--
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.3.3/js/dataTables.fixedColumns.min.js"></script>
--}}



<script type="text/javascript" language="javascript" src= {{ asset("plugins/jQuery/jquery-2.2.3.min.js")}} ></script>
<script type="text/javascript" language="javascript" src= {{ asset("plugins/datatables/jquery.dataTables.js")}} ></script>
<script type="text/javascript" language="javascript" src= {{ asset("plugins/datatables/dataTables.bootstrap.js")}} ></script>


<script type="text/javascript" language="javascript" src= {{ asset("plugins/sweetalert/sweetalert.min.js")}} ></script>

<script>

    function doClick(user_id,index,day) {
        //alert(day);
        $('#user_id').val(user_id);
        $('#col_id').val(index);
        $('#day').val(day);
        $('#new_job').modal('show')
    }


    $( document ).ready(function() {
        var table = $('#job_table').DataTable( {
            scrollY:        "500px",
            scrollX:        true,
            scrollCollapse: true,
            paging:         false,
            fixedColumns:   {
                leftColumns: 1,
                rightColumns: 0
            }
        } );

        $('#target').focus();




    //$(document).on("click","#add_task",function() {
    $('#new_job_form').on('submit', function(event){
        event.preventDefault();
        user_id=$('#user_id').val();
        index=$('#col_id').val();
        title=$('#title').val();
        detail=$('#detail').val();
        day=$('#day').val();

        year=2021;
        month=07;

        if(title=='') {
            swal({
                title: "Job Title can't be blank",
                icon: "warning",
                timer: 3000
            });
        }else if(detail==''){
            swal({
                title: "Job Detail can't be blank",
                icon: "warning",
                timer: 3000
            });
        }else {
            var dataUrls = '{{url('job')}}';
            var dataForm = new FormData(this);

            $.ajax({
                url:"{{ url('job') }}",
                method:"POST",
                data:new FormData(this),
                dataType:'JSON',
                contentType: false,
                cache: false,
                processData: false,
                success:function(response)
                {
                    $('#' + user_id + '_' + index).html(response);
                }
            })


            /*var data = {
                "_token": "{{ csrf_token() }}",
                user_id: user_id,
                title: title,
                detail: detail,
                year: year,
                month: month,
                day: day,
            };*/
            /*var post = ajax_post(dataUrls, dataForm, 'post');
            post.done(function (response) {
                $('#' + user_id + '_' + index).html(response);
            });*/
            $('#title').val('');
            $('#detail').val('');
            $('#new_job').modal('hide');
        }
    });
    });

    $(document).on("click","#test",function() {
       $('#target').focus();
        //alert('ok');
    });

    function deleteJob(job_id) {
        swal({
            title: "Are you sure to delete this job ?",
            text: "",
            icon: "warning",
            buttons: true,
            dangerMode: false,
        })
            .then((willUpdate) => {
            if(willUpdate) {
                deleteByJobId(job_id);
            } else {
                //swal("Not updated");
            }
        });
    }

    function deleteByJobId(job_id) {
        var dataUrls = "{{url('job/:job_id')}}";
        dataUrls = dataUrls.replace(':job_id', job_id);
        var data = {
            "_token": "{{ csrf_token() }}",
            job_id: job_id
        };
        var post = ajax_post(dataUrls, data, 'delete');
        post.done(function (response) {
            if(response.status==1){
                $('#'+response.index).html(response.view);
                swal({
                    title: "Job delete success!",
                    icon: "success",
                    timer: 3000
                });
            }else{
                swal({
                    title: "Job delete fail.",
                    icon: "warning",
                    timer: 3000
                });
            }
        });
    }

    function editJob(job_id) {
        var dataUrls = "{{url('job/:job_id/edit')}}";
            dataUrls = dataUrls.replace(':job_id', job_id);
        var data = {
            job_id: job_id
        };
        var post = ajax_post(dataUrls, data, 'get');
        post.done(function (response) {
            if(response.status==1){
                $('#job_id').val(response.data.job_id);
                $('#edit_title').val(response.data.title);
                $('#edit_detail').val(response.data.detail);
                $('#edit_job').modal('show')
            }else{
            }
        });
    }

    $(document).on("click","#update_task",function() {
        job_id=$('#job_id').val();
        title=$('#edit_title').val();
        detail=$('#edit_detail').val();
        day=$('#day').val();
        if(title=='') {
            swal({
                title: "Job Title can't be blank",
                icon: "warning",
                timer: 3000
            });
        }else if(detail==''){
            swal({
                title: "Job Detail can't be blank",
                icon: "warning",
                timer: 3000
            });
        }else {
            var dataUrls = "{{url('job/:job_id')}}";
            dataUrls = dataUrls.replace(':job_id', job_id);
            //alert(dataUrls);
            var data = {
                "_token": "{{ csrf_token() }}",
                job_id: job_id,
                title: title,
                detail: detail,
            };
            var post = ajax_post(dataUrls, data, 'PUT');
            post.done(function (response) {
                if(response.status==1){
                    $('#'+response.index).html(response.view);
                    swal({
                        title: "Job update success!",
                        icon: "success",
                        timer: 3000
                    });
                }else{
                    swal({
                        title: "Job update fail.",
                        icon: "warning",
                        timer: 3000
                    });
                }
            });
            $('#edit_title').val('');
            $('#edit_detail').val('');
            $('#edit_job').modal('hide');
        }
    });

    function ajax_post(url, data, type) {
        return $.ajax({
            'dataType': 'json',
            'type': type,
            'url': url,
            async: true,
            'data': data
        });
    }


</script>


@stop