@extends('layouts.master')
@section('page-css')
<link rel="stylesheet" href="{{ asset('assets/daterangepicker/daterangepicker.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
@endsection
@section('main-content')
<div class="breadcrumb">
    <ul>
        <li><a href="{{route('dashboard')}}">Home</a></li>
        <li><a href="{{route('problemSolving.index')}}">Problem Solving</a></li>
        <li>Entries</li>
    </ul>
</div>
<div class="breadcrumb">
    <h1>Problem Solving</h1>
    <div class="col-sm-6"><input type="text" placeholder="Start searching an issue topic or label here..." class="form-control input-lg" id="searchInProblemSolving" style=""></div>
</div>
<div class="separator-breadcrumb border-top"></div>
<!-- end of row -->

<div class="row mb-12">
    <div class="col-md-9 mb-10">
        <div class="card">
            <div class="card-body">
                <div class="form-row ">
                    <div class="col-md-6"> 
                        <h4>{!! $problemSolving->topics !!}</h4>
                    </div>
                    <div class="col-md-6"> 
                        <div class="row  pull-right text-right float-end"> 
                            <div class="col-md-11 p-0"> 
                                <div id="loadSubLabels">
                                    <!---------------SubLabels will load here-------------------->
                                </div>
                            </div>
                            <div class="col-md-1 p-0 m-0"> 
                                <button title="Add Sub-label" class="btn btn-raised ripple btn-raised-primary m-1 btn-sm text-10 text-white loadModalByAjax" data-href="{{ route('problemSolving.createSubLabel',[$problemSolvingId]) }}" type="button">
                                    <i class="fa fa-add"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <hr class="m-2">

                <div class="row" id="newVersionArea">
                    <div class="col-md-12">
                        <div class="card">
                            <form method="POST" action="{{ route('problemSolving.store') }}" id="createStandardForm" novalidate refreshPage='y'>
                                @csrf
                                <input type="hidden" name='problem_solving_id' id="view_problem_solving_id" value='{{$problemSolvingId}}'>
                                <input type="hidden" name='action' value='createStandard'>
                                <div class="card-body" id="cardBody">
                                    <div class="form-group">
                                        <label for="inputEmail4" class="ul-form__label">Standard Operating Procedure (SOPs) <small>(Related to {!! $problemSolving->topics !!})</small></label>
                                        <div class="input-group mb-3">
                                            <textarea id="view_standard" name="standard" rows="5" class="form-control" placeholder="" required></textarea>
                                            <div class="invalid-feedback">
                                                Please comment or type.
                                            </div>
                                        </div>
                                    </div>

                                    <!--                    <div class="col-lg-12 p-0 mb-7">-->
                                    <div class="row">
                                        <div class="col-lg-12 align-self-center">
                                            <!--begin::Dropzone-->
                                            <div class="dropzone dropzone-queue mb-2" id="dropEntry-topicIntro" style="border: none !important;">
                                                <!--begin::Controls-->
                                                <div class="dropzone-panel mb-lg-0 mb-2">
                                                    <a class="dropzone-select me-2" id="attached-file-button" title="Attach file" style="float: left;"><i class="fa-solid fa-paperclip"></i> Attach file</a>
                                                    <!--<a class="dropzone-remove-all btn btn-sm btn-light-primary">Remove All</a>-->
                                                </div>
                                                <!--end::Controls-->

                                                <!--begin::Items-->
                                                <div class="dropzone-items wm-200px">
                                                    <div class="dropzone-item" style="display:none">
                                                        <!--begin::File-->
                                                        <div class="dropzone-file">
                                                            <div class="dropzone-filename" title="some_image_file_name.jpg">
                                                                <span data-dz-name>some_image_file_name.jpg</span>
                                                                <strong>(<span data-dz-size>340kb</span>)</strong>
                                                            </div>

                                                            <div class="dropzone-error" data-dz-errormessage></div>
                                                        </div>
                                                        <!--end::File-->

                                                        <!--begin::Progress-->
                                                        <div class="dropzone-progress">
                                                            <div class="progress">
                                                                <div
                                                                    class="progress-bar bg-primary"
                                                                    role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!--end::Progress-->

                                                        <!--begin::Toolbar-->
                                                        <div class="dropzone-toolbar">
                                                            <span class="dropzone-delete badge  badge-round-danger  m-1" data-dz-remove><i class="i-Close-Window"></i></span>
                                                        </div>
                                                        <!--end::Toolbar-->
                                                    </div>
                                                </div>
                                                <!--end::Items-->
                                            </div>
                                            <!--end::Dropzone-->
                                        </div>
                                    </div>
                                </div>
                                <div class="card-footer">
                                    <div class="mc-footer">
                                        <div class="row">
                                            <div class="col-lg-12 text-right">
                                                <button type='submit' class="btn btn-primary float-end"> <i class="fa fa-add"></i> New version</button>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <div id="loadVersions">
                                                    <!---------------Version will load here-------------------->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="row ">
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-10"><h4>Entries</h4> </div>

                            <div class="col-md-2 text-right">
                                <button type="button" class="btn btn-success btn-md m-1 loadModalByAjax" data-href="{{ route('problemSolving.createEntry',[$problemSolvingId]) }}">Create Entry</button>
                            </div>
                        </div>

                        <div class="ul-widget1" id="loadEntries">
                            <!---------------Entries will load here-------------------->
                        </div>
                    </div>
                </div>

                <!-- end of revisions -->
            </div>
            <div class="custom-separator"></div>
        </div>

    </div>
    <div class="col-sm-3">
        <h5>Filter by added on date. <i class="fa-regular fa-window-restore cursor-pointer reset-cal" data-calName="filterByAddedOnDate-input" title="Reset Calendar"></i></h5>
        <input id="filterByAddedOnDate-input" size="40" value="" type="hidden">
        <div id="filterByAddedOnDate"></div>
        <div class="clearfix">&nbsp;</div>
        <h5>Filter by event date. <i class="fa-regular fa-window-restore cursor-pointer reset-cal" data-calName="filterByEventDate-input" title="Reset Calendar"></i></h5>
        <input id="filterByEventDate-input" size="40" value="" type="hidden">
        <div id="filterByEventDate"></div>

        <div class="ul-widget1 mt-16" id="boomarkedEntries">
            <!---------------boomarkedEntries will load here-------------------->
        </div>
    </div>
</div>

@endsection
@section('bottom-js')
<style>
    /* Override CSS to remove yellow highlight */
    .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
        background: #f6f6f6;
        border: 1px solid #c5c5c5;
        color:#000000;
    }
    .ui-state-active, .ui-widget-content .ui-state-active{
        border: 1px solid #003eff;
        background: #007fff;
        color:#fff !important;
    }
    .highlight a,.highlight span{
        background-color: #007fff !important; /* Highlight color */
        color: #fff !important;
        border: 1px solid #003eff;
        opacity: 1 !important;
    }
    .month1{
        width: 100%!important;
    }
    .date-picker-wrapper .month-wrapper table .day.real-today{
        background-color: inherit !important;
    }
</style>
<script src="{{asset('assets/js/vendor/dropzone.min.js')}}"></script>
<!--Multi-select option in the dropdown-->
<script src="{{ asset('js/bootstrap-multiselect.min.js') }}"></script>
<!--Date picker-->
<!--Date picker-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script type="text/javascript" src="{{ asset('assets/daterangepicker/jquery.daterangepicker.js') }}"></script>
<!-- page script -->
<script>
 $(".reset-cal").click(function(){
    var _calID=$(this).attr('data-calName'); 
    $('#'+_calID).data('dateRangePicker').clear();
    $('#loadEntries').ajaxContentLoader({
        url: "{{ route('problemSolving.ajaxLoad') }}",
        data: {problemSolvingId: "{{$problemSolvingId}}", loadContent: 'entries'}
    });
 });   
$('#filterByAddedOnDate-input').dateRangePicker(
        {
            inline: true,
            container: '#filterByAddedOnDate',
            alwaysOpen: true,
            singleMonth: true,
            showShortcuts: false,
            //showTopbar: false

        }).on('datepicker-first-date-selected', function (event, obj)
{
    /* This event will be triggered when first date is selected */
    $('#filterByEventDate-input').data('dateRangePicker').clear();

}).on('datepicker-change', function (event, obj)
{

    $('#loadEntries').ajaxContentLoader({
        url: "{{ route('problemSolving.ajaxLoad') }}",
        data: {created_at: obj.value, problemSolvingId: "{{$problemSolvingId}}", loadContent: 'entries'}
    });
});
$('#filterByEventDate-input').dateRangePicker(
        {
            inline: true,
            container: '#filterByEventDate',
            alwaysOpen: true,
            singleMonth: true,
            showShortcuts: false,
            // showTopbar: false

        }).on('datepicker-first-date-selected', function (event, obj)
{
    /* This event will be triggered when first date is selected */
    $('#filterByAddedOnDate-input').data('dateRangePicker').clear();

}).on('datepicker-change', function (event, obj)
{

    $('#loadEntries').ajaxContentLoader({
        url: "{{ route('problemSolving.ajaxLoad') }}",
        data: {event_date: obj.value, problemSolvingId: "{{$problemSolvingId}}", loadContent: 'entries'}
    });
});
//set the dropzone container id
var id = "#dropEntry-topicIntro";
var dropzone = document.querySelector(id);

// set the preview element template
var previewNode = dropzone.querySelector(".dropzone-item");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);
// Disable auto-discovery of dropzone elements
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone(id, {// Make the whole body a dropzone
    url: "{{ route('problemSolving.store') }}", // Set the url for your upload script location
    parallelUploads: 1,
    maxFiles: 1,
    addRemoveLinks: true,
    uploadMultiple: false,
    previewTemplate: previewTemplate,
    maxFilesize: 20, // Max filesize in 20MB
    autoQueue: false, // Make sure the files aren't queued until manually added
    previewsContainer: id + " .dropzone-items", // Define the container to display the previews
    clickable: id + " .dropzone-select", // Define the element that should be used as click trigger to select files.
    headers: {
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
    },
    init: function () {
        this.on("error", function (file, errorMessage, jqXHR) {
            $("#myForm").removeClass('was-validated');
            var err = eval("(" + jqXHR.responseText + ")");
            var showError = '';
            for (var x in err.errors) {
                showError += err.errors[x] + "<br/>";
            }
            toastr.error(showError, "Error", {
                closeButton: !0
            });
            $("button").prop("disabled", false);
        });

        this.on("success", function (file, response) {
            console.log("File " + file.name + " uploaded successfully with response: " + response);
            $("#view_standard").val('');
            $('#loadVersions').ajaxContentLoader({
                url: "{{ route('problemSolving.ajaxLoad') }}",
                data: {problemSolvingId: "{{$problemSolvingId}}", loadContent: 'loadVersions'}
            });
            $("#createStandardForm").removeClass('was-validated');
            //
            myDropzone.removeAllFiles();
            var successOptions = {
                closeButton: !0
            };
            toastr.success(response.success, "Success", successOptions);
            $("button").prop("disabled", false);
        });

    }

});

myDropzone.on("addedfile", function (file) {
    const dropzoneItems = dropzone.querySelectorAll('.dropzone-item');
    dropzoneItems.forEach(dropzoneItem => {
        dropzoneItem.style.display = '';
    });
    $("#attached-file-button").hide();
});

// Update the total progress bar
myDropzone.on("totaluploadprogress", function (progress) {
    const progressBars = dropzone.querySelectorAll('.progress-bar');
    progressBars.forEach(progressBar => {
        progressBar.style.width = progress + "%";
    });
});

myDropzone.on("sending", function (file, xhr, formData) {
    var standard = $("#view_standard").val();
    var view_problem_solving_id = $("#view_problem_solving_id").val();
    formData.append("action", 'createStandard');
    formData.append("standard", standard);
    formData.append("problem_solving_id", view_problem_solving_id);
// Show the total progress bar when upload starts
    const progressBars = dropzone.querySelectorAll('.progress-bar');
    progressBars.forEach(progressBar => {
        progressBar.style.opacity = "1";
    });
});

// Hide the total progress bar when nothing's uploading anymore
myDropzone.on("complete", function (progress) {
    const progressBars = dropzone.querySelectorAll('.dz-complete');

    setTimeout(function () {
        progressBars.forEach(progressBar => {
            progressBar.querySelector('.progress-bar').style.opacity = "0";
            progressBar.querySelector('.progress').style.opacity = "0";
            //progressBar.querySelector('.dropzone-start').style.opacity = "0";
        });
    }, 300);
});

// On all files completed upload
myDropzone.on("queuecomplete", function (progress) {
    myDropzone.removeAllFiles();
//$("#myForm").find('button[type=submit]').prop('disabled', false);
});
myDropzone.on("removedfile", function (file) {
    $("#attached-file-button").show();
});


// Listen for submit event on form
document.querySelector('#createStandardForm').addEventListener('submit', function (e) {
// Prevent form submission
    e.preventDefault();
// Check if there are files in the dropzone queue
    if ($('.dropzone-file').length > 0) {
        var form = $("#createStandardForm");
        $(this).find('button[type=submit]').prop('disabled', true);
        //console.log(form);
        if (form[0].checkValidity() !== false) {
            myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
        } else {
            form.find('button[type=submit]').prop('disabled', false);
        }
        form.addClass('was-validated');
    } else {

        var form = $("#createStandardForm");
        $(this).find('button[type=submit]').prop('disabled', true);
        if (form[0].checkValidity() !== false) {

            var url = form.attr('action');
            var form_data = form.serialize();
            var do_refreshPage = $(this).attr('refreshPage');
            $.ajax({
                url: url,
                type: 'POST',
                data: form_data,
                success: function (data) {
                    $("#view_standard").val('');
                    $("#createStandardForm").removeClass('was-validated');
                    $('#loadVersions').ajaxContentLoader({
                        url: "{{ route('problemSolving.ajaxLoad') }}",
                        data: {problemSolvingId: "{{$problemSolvingId}}", loadContent: 'loadVersions'}
                    });
                    var successOptions = {
                        closeButton: !0
                    };
                    toastr.success(data.success, "Success", successOptions);
                    $("button").prop("disabled", false);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    var err = eval("(" + jqXHR.responseText + ")");
                    var showError = '';
                    for (var x in err.errors) {
                        showError += err.errors[x] + "<br/>";
                    }
                    toastr.error(showError, "Error", {
                        closeButton: !0
                    });
                    $("button").prop("disabled", false);
                }
            });
        } else {
            form.find('button[type=submit]').prop('disabled', false);
        }
        form.addClass('was-validated');
    }

});
$(function () {

    var typingTimer;
    $("body").delegate("#searchInProblemSolving", "keydown", function () {
        $("#filterByEventDate").find(".ui-state-active").removeClass("ui-state-active");
        $("#filterByAddedOnDate").find(".ui-state-active").removeClass("ui-state-active");
        var _this = $(this);
        clearTimeout(typingTimer);
        typingTimer = setTimeout(function () {
            $('#loadEntries').ajaxContentLoader({
                url: "{{ route('problemSolving.ajaxLoad') }}",
                data: {search: _this.val(), problemSolvingId: "{{$problemSolvingId}}", loadContent: 'entries'}
            });
        }, 1000);
    });
    $('body').on('hidden.bs.modal', '.mainModalEntry', function () {
        $('#loadEntries').ajaxContentLoader({
            url: "{{ route('problemSolving.ajaxLoad') }}",
            data: {problemSolvingId: "{{$problemSolvingId}}", loadContent: 'entries'}
        });
    });

    $('body').on('hidden.bs.modal', '.mainModalSubLabel', function () {
        $('#loadSubLabels').ajaxContentLoader({
            url: "{{ route('problemSolving.ajaxLoad') }}",
            data: {problemSolvingId: "{{$problemSolvingId}}", loadContent: 'loadSubLabels'}
        });
    });
    $('#boomarkedEntries').ajaxContentLoader({
        url: "{{ route('problemSolving.ajaxLoad') }}",
        data: {problemSolvingId: "{{$problemSolvingId}}", loadContent: 'boomarkedEntries'}
    });
});

$(document).ready(function () {


    $('#loadEntries').ajaxContentLoader({
        url: "{{ route('problemSolving.ajaxLoad') }}",
        data: {problemSolvingId: "{{$problemSolvingId}}", loadContent: 'entries'}
    });
    $('#loadVersions').ajaxContentLoader({
        url: "{{ route('problemSolving.ajaxLoad') }}",
        data: {problemSolvingId: "{{$problemSolvingId}}", loadContent: 'loadVersions'}
    });
    $('#loadSubLabels').ajaxContentLoader({
        url: "{{ route('problemSolving.ajaxLoad') }}",
        data: {problemSolvingId: "{{$problemSolvingId}}", loadContent: 'loadSubLabels'}
    });


    $('body').on('click', '.ajax_submit_link', function () {
        var _action = $(this).attr('data-action');
        var _id = $(this).attr('data-id');
        $.ajax({
            url: "{{ route('problemSolving.store') }}",
            type: "post",
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            data: {
                id: _id, action: _action
            },
            success: function (response) {
                var successOptions = {
                    closeButton: !0
                };
                toastr.success(response.success, "Success", successOptions);
                $('#loadEntries').ajaxContentLoader({
                    url: "{{ route('problemSolving.ajaxLoad') }}",
                    data: {problemSolvingId: "{{$problemSolvingId}}", loadContent: 'entries'}
                });
                $('#boomarkedEntries').ajaxContentLoader({
                    url: "{{ route('problemSolving.ajaxLoad') }}",
                    data: {problemSolvingId: "{{$problemSolvingId}}", loadContent: 'boomarkedEntries'}
                });
            },
            error: function (jqXHR, textStatus, errorThrown) {
                var err = eval("(" + jqXHR.responseText + ")");
                var showError = '';
                for (var x in err.errors) {
                    showError += err.errors[x] + "<br/>";
                }
                toastr.error(showError, "Error", {
                    closeButton: !0
                });
            }
        });
    });
});
</script>
<!-- page script -->

@endsection