@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">

    <style>
        .div_new_job{
            position: absolute;
            top: 25px;
            left:400px;
            width: 550px;
            background-color:white;
            z-index: 10000;
        }

        .div_edit_job{
            position: absolute;
            top: 25px;
            left:400px;
            width: 550px;
            background-color:white;
            z-index: 10000;
        }

        .div_close{
            display: none;
        }


    </style>
@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">
                        <div class="row">
                            <div class="col-sm-6">
                                <form action="{{url('job')}}">
                                    <div class="form-group col-sm-4">
                                        {!! \App\Helpers\CustomUI::selectMonth(isset($input['month'])?$input['month']:0) !!}
                                    </div>
                                    <div class="form-group col-sm-4">
                                        {!! \App\Helpers\CustomUI::SelectYear(isset($input['year'])?$input['year']:0) !!}
                                    </div>
                                    {!! Form::submit('View', ['class' => 'btn btn-primary']) !!}
                                </form>
                            </div>
                        </div>
                        @include('jobs.table')
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="" id="new_job" style="" {{-- tabindex="-1" role="" aria-labelledby="exampleModalLabel" aria-hidden="true"--}}>
        <div class="row" style="padding-left: 30px; padding-right: 30px; ">
            <div class="form-group col-sm-12" >
                <div class="">
                    <button type="button" class="new_job_close close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="" id="exampleModalLabel">Job Card Detail</h4>
                </div>
                {!! Form::open(['route' => 'job.store','enctype'=>'multipart/form-data','id'=>'new_job_form']) !!}
                <div class="">
                    <input type="hidden" id="user_id" name="user_id" >
                    <input type="hidden" id="col_id"  name="col_id" >
                    <input type="text" id="year"    name="year"  value="{{$year}}">
                    <input type="text" id="month"   name="month" value="{{$month}}">
                    <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')
                            @include('jobs.partial.repeat_date')
                        </div>
                    </div>

                </div>
                <div class="">
                    {{--<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 new_job_close" data-dismiss="modal">Close</button>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>

    <div class="" id="edit_job" {{--tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"--}}>
        <div class="row" style="padding-left: 30px; padding-right: 30px; ">
            <div class="form-group col-sm-12" >
                <div class="">
                    <button type="button" class="edit_job_close close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="" id="exampleModalLabel">Edit Job Card Detail</h4>
                </div>
                {!! Form::open(['route' => ['job.update',1], 'method' => 'patch','enctype'=>'multipart/form-data','id'=>'edit_job_form']) !!}
                <div class="">
                    <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')
                            @include('jobs.partial.repeat_date')
                        </div>
                    </div>
                </div>
                <div class="">
                    {{--<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 edit_job_close" data-dismiss="modal">Close</button>
                </div>
                {!! Form::close() !!}
            </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) {
            $('#user_id').val(user_id);
            $('#col_id').val(index);
            $('#day').val(day);
            $('#new_job').removeClass('div_close');
            $('#new_job').addClass('div_new_job');
            //alert('ok');
        }

        function close(obj) {
            $('#'+obj).addClass('div_hide');
        }


        $( document ).ready(function() {
            $('#new_job').addClass('div_close');
            $('#edit_job').addClass('div_close');
            var table = $('#job_table').DataTable( {
                scrollY:        "500px",
                scrollX:        true,
                scrollCollapse: true,
                paging:         false,
                searching: true,
                fixedColumns:   {
                    leftColumns: 2,
                    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();

                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)
                        {
                            if(response.status==1) {
                                $('#' + user_id + '_' + index).html(response.view);
                            }else{
                                setInterval(function() {
                                    window.location.href = "{{url('job')}}";
                                }, 3000)
                            }
                            swal({
                                title: "Saving success!",
                                icon: "success",
                                timer: 3000
                            });
                        }
                    })

                    $('#title').val('');
                    $('#detail').val('');
                    $('#new_job').addClass('div_close');
                }
            });
        });

        $(document).on("click",".new_job_close",function() {
            $('#new_job').addClass('div_close');
        });

        $(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')
                    $('#edit_job').removeClass('div_close');
                    $('#edit_job').addClass('div_edit_job');

                }else{
                }
            });
        }

        $(document).on("click",".edit_job_close",function() {
            $('#edit_job').addClass('div_close');
        });

        $('#edit_job_form').on('submit', function(event){
            event.preventDefault();
            //$(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);


                $.ajax({
                    url: dataUrls,
                    method: "POST",
                    data: new FormData(this),
                    dataType: 'JSON',
                    contentType: false,
                    cache: false,
                    processData: false,
                    success: function (response) {

                        if(response.status==1) {
                            $('#' + user_id + '_' + index).html(response.view);
                        }else{
                            setInterval(function() {
                                window.location.href = "{{url('job')}}";
                            }, 3000)
                        }
                        swal({
                            title: "Saving success!",
                            icon: "success",
                            timer: 3000
                        });


                    }
                })
                $('#edit_title').val('');
                $('#edit_detail').val('');
                $('#edit_job').addClass('div_close');
            }
        });

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


    </script>


@stop