@extends('layouts.app')
@section('title', 'Checklist')
@section('extrastyles')
    <link rel="stylesheet" href="{{ asset('/plugins/dataTables/datatables.min.css') }}" >
    <link href="{{ asset('/plugins/summernote/summernote.css') }}" rel="stylesheet">
    <link href="{{ asset('/plugins/summernote/summernote-bs3.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css') }}" />
@endsection

@section('content')
    <div class="studio98_websters">
        <div class="studio98_websters" >
            <div class="ibox float-e-margins">
                <div class="ibox-title2">
                    <h5>Manage Checklists</h5>
                    <div class="pull-right">
                        <a class="btn btn-primary" href="javascript:void(0);" data-toggle="modal" data-target="#create_checklist">
                            Add Checklist
                        </a>
                    </div>
                </div>
                <div class="ibox-content p-md">
                    @include('flash::message')
                    <div class="clearfix"></div>
                    <div class="table-responsive">
                        <div class="clearfix"></div>
                        <table class="table table-striped table-bordered table-hover" id="checkList_listing">
                            <thead>
                            <tr>
                                <th>Title</th>
                            </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

        <div class="modal inmodal fade" id="create_checklist" tabindex="" role="dialog"  aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    {!! Form::open(['id' => 'form','novalidate' => 'novalidate' , 'onsubmit' => 'return saveCheckList();', 'files' => true]) !!}
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title">Add Checklist</h4>
                    </div>
                    <div class="modal-body">
                        @include('EnergizedHealth::checklist.basic_form')
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
        </div>

            <div class="modal inmodal fade" id="update_check_list" tabindex="" role="dialog"  aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        {!! Form::open(['id' => 'form','novalidate' => 'novalidate' , 'onsubmit' => 'return updateCheckList();']) !!}
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                            <h4 class="modal-title">Update Testimonial</h4>
                        </div>
                        <div class="modal-body">
                            <div class="create_checklist">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Update</button>
                        </div>
                        {!! Form::close() !!}
                    </div>
                </div>
            </div>
@endsection
@section('footer')
    <script src="{{ asset('/plugins/dataTables/datatables.min.js') }}"></script>
    <script src="{{ asset('/plugins/dataTables/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('/plugins/summernote/summernote.min.js') }}"></script>
{{--    <script src="{{ asset('/plugins/dateRangePicker/moment.js') }}" ></script>--}}
    {{--   <script src="{{ asset('/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js') }}" ></script>--}}
{{--    <script src="{{ asset('/plugins/datepicker/bootstrap-datepicker.js') }}"></script>--}}
    <script src="{{ asset('/plugins/dateRangePicker/moment.js') }}" ></script>
    <script src="{{ asset('/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js') }}" ></script>

    <script>
        $(document).ready(function() {
            var oTable = $('#checkList_listing').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                dom: 'lftip',
                language: {
                    lengthMenu: " _MENU_ ",
                    searchPlaceholder: "Search...",
                    search: '', /* removed search label */
                },
                ajax : {
                    url: "{{ energized_url('check-list/records') }}",
                    data: function (data) {
                    }
                }
            });
            $('.check_list').trigger('change');
            datePicker();
        });

        checkList();
        initializeSummerNote();
        function checkList(){
            $(document).on('change', '.check_list,.recurring_option' , function (e){
                var checkList_option = $(this).val();
                e.preventDefault();
                $.ajax({
                    method: 'GET',
                    url: "{{ energized_url('check-list/check-list-option') }}",
                    data: 'check_list=' + checkList_option,
                }).done(function(response){
                    initializeSummerNote();
                    checkList();
                    $('._form').html(response);
                    datePicker();
                }).fail(function(response) {
                });
                return false;
            });
        }
        function datePicker(){
            dateTimePicker('.certain_date_picker', 'YYYY-MM-DD');

            // $('.input-group.date').datepicker({
            //     todayBtn: "linked",
            //     keyboardNavigation: false,
            //     forceParse: false,
            //     autoclose: true,
            //     format: "yyyy-mm-dd",
            // });
        }

        function saveCheckList(){
            const formData = new FormData($('#create_checklist form')[0]);
            const btn = $('#create_checklist button[type="submit"]');
            processBtnDisable(btn);
            $.ajax({
                method: 'POST',
                url: "{{ energized_url('check-list/check-list-save') }}",
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
            }).done(function(response){
                revertProcessBtnDisable(btn);
                toastrShow('Success','Data saved successfully!');
                location.reload();
            }).fail(function(response) {
                revertProcessBtnDisable(btn);
                response = response.responseJSON;
                var message = '';
                $.each(response.errors, function(i, item) {
                    $('[name='+i+']').css('border-color','red').focus();
                    message += item[0]+'<br />';
                });
                if(message != '') {
                    toastrShowError(message,'Error');
                }
            });
            return false;
        }

        $(document).on('click', '.edit_check_list', function () {
            const id = $(this).data('id');
            $.ajax({
                method: 'GET',
                url: '{{ energized_url('check-list/edit')}}/'+id
            }).done(function(data) {
                $('#update_check_list .modal-body').html(data);
                checkList();
                datePicker();
                $('#update_check_list').modal('show');
                initializeSummerNote('#update_check_list');
            });
        });

        function updateCheckList(object) {
            const formData = new FormData($('#update_check_list form')[0]);
            const btn = $('#update_check_list button[type="submit"]');
            processBtnDisable(btn);
            $.ajax({
                method: 'POST',
                url: "{{ energized_url('check-list/update') }}",
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
            }).done(function(response){
                revertProcessBtnDisable(btn);
                $("#update_testimonial").modal("hide");
                toastrShow('Success','Data saved successfully!');
                location.reload();
            }).fail(function(response) {
                revertProcessBtnDisable(btn);
                response = response.responseJSON;
                var message = '';
                $.each(response.errors, function(i, item) {
                    $('[name='+i+']').css('border-color','red').focus();
                    message += item[0]+'<br />';
                });
                if(message != '') {
                    toastrShowError(message,'Error');
                }
            });
            return false;
        }

        $(document).on('click', '.delete_check_list', function () {
            if(confirm('Are you sure you want to delete this?')) {
                const id = $(this).data('id');
                $.ajax({
                    method: 'POST',
                    url: '{{ energized_url('check-list/delete')}}',
                    data: 'check_list_id='+id,
                }).done(function(response) {
                    location.reload();
                });
            }
        });
    </script>
@endsection