@extends('ctrl.app')

@section('head-script')
    <script src="{{asset('js/flatpickr.js')}}"></script>
    <script src="{{asset('js/dropzone.js')}}"></script>
@endsection

@section('head-styles')
    <link href="{{ asset('css/flatpickr.css') }}" rel="stylesheet">
    <link href="{{ asset('css/dropzone.css') }}" rel="stylesheet">
@endsection

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card">

                    <div class="card-header">
                        <div class="row">
                            <div class="col-md-2 mt-2">pdfs</div>
                            <div class="col-md-4 pl-0"></div>
                            <div class="col-md-6 text-right">
                                <div>
                                    <a class="btn btn-outline-primary mr-3" href="{{session('ctrl_back', route('pdfs.index'))}}">Back to pdfs</a>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="card-body">
                        @include('ctrl.common.i_success_notification')
                        @include('ctrl.common.i_error_notification')

                            <div class="form-group row">
                                <div class="col-md-4">
                                    <label class="m-0 text-primary" for="company_id">Company</label>
                                    <select id="company_id" name="company_id" class="custom-select mb-3" required>
                                        <option value="">Please choose a company</option>
                                        @forelse($companies as $company)
                                            <option value="{{$company->fake_id}}" class="form-control{{ $errors->has('company_id') ? ' is-invalid' : '' }}"
                                                    @if(old('company_id') == $company->id ) selected @endif>
                                                {{$company->title}}
                                            </option>
                                        @empty
                                            <option value="">There are no companies</option>
                                        @endforelse
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="m-0 text-primary" for="category_id">Category</label>
                                    <select id="category_id" name="category_id" class="custom-select  mb-3" required>
                                        <option value="" data-company="">Please choose a company first</option>
                                        @forelse($categories as $category)
                                            <option value="{{$category->fake_id}}" class="form-control{{ $errors->has('category_id') ? ' is-invalid' : '' }}"
                                                    @if(old('category_id') == $category->id ) selected @endif
                                                    data-company="{{$category->company->fake_id}}">
                                                {{$category->title}}
                                            </option>
                                        @empty
                                            <option value="">There are no categories</option>
                                        @endforelse
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="m-0 text-primary" for="sub_category_id">Sub Category</label>
                                    <select id="sub_category_id" name="sub_category_id" class="custom-select" required>
                                        <option value="" data-category="">Please choose a category first</option>
                                        @forelse($subCategories as $subCategory)
                                            <option value="{{$subCategory->fake_id}}" class="form-control{{ $errors->has('sub_category_id') ? ' is-invalid' : '' }}"
                                                    @if(old('sub_category_id') == $subCategory->id ) selected @endif
                                                    data-category="{{$subCategory->category->fake_id}}">
                                                {{$subCategory->title}}
                                            </option>
                                        @empty
                                            <option value="">There are no sub-categories</option>
                                        @endforelse
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="m-0 text-primary" for="expires_at">Expires at: view in timeZone (UTC <span id="time-zone-string"></span>)</label>
                                    <input type="text" id="expires_at" name="expires_at" class="form-control mb-3" data-old="{{old('expires_at')}}">
                                </div>
                                <div id="actions" class="col-md-6">
                                    <label class="m-0 text-primary">Certificates</label>
                                    <div class="row">
                                        <div class="col-md-8">
                                            <!-- The fileinput-button span is used to style the file input field as button -->
                                            <button class="btn btn-sm btn-success fileinput-button">
                                            <i class="fas fa-plus"></i> <span>Add files...</span>
                                            </button>
                                            <button type="submit" id="start-all" class="btn btn-sm btn-primary start" disabled>
                                                <i class="fas fa-upload"></i> <span>Start Queue</span>
                                            </button>
                                            <button id="stop-all" class="btn btn-sm btn-warning stop" disabled>
                                                <i class="fas fa-stop"></i> <span>Stop Queue</span>
                                            </button>
                                        </div>
                                        <div class="col-md-4 mt-2">
                                            <!-- The global file processing state -->
                                            <div  class="fileupload-process">
                                                <div id="total-progress" class="progress progress-striped active" style="opacity: 0" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                                                    <div class="progress-bar progress-bar-success" style="width:0;" data-dz-uploadprogress></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                            </div>

                        <div class="files" id="previews">

                            <div id="template" class="row p-3 bg-light border-bottom">

                                <!-- This is used as the file preview template -->
                                <div class="col-md-2 text-center">
                                    <span class="preview dz-image"><img data-dz-thumbnail /></span>
                                </div>
                                <div class="col-md-3 mt-1">
                                    <p class="name" data-dz-name></p>
                                    <strong class="error dz-error-message text-danger" data-dz-errormessage></strong>
                                </div>
                                <div class="col-md-1 mt-1">
                                    <p class="size" data-dz-size></p>
                                </div>
                                <div class="col-md-3 mt-2 mb-2">
                                    <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                                        <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
                                    </div>
                                </div>
                                <div class="status-update col-md-1 mt-1 mb-2">
                                    <i class="fas fa-minus-circle"></i>
                                </div>
                                <div class="col-md-2">
                                    <button data-dz-remove class="btn btn-sm btn-danger delete">
                                        <i class="fas fa-trash"></i>
                                        <span>Remove</span>
                                    </button>
                                </div>
                            </div>

                        </div>

                    </div>



                </div>
            </div>
        </div>
    </div>
@endsection


@section('footer-script')

    <script>

        let companySelect = $('#company_id');
        let categorySelect = $('#category_id');
        let subCategorySelect = $('#sub_category_id');
        let expires_at = $('#expires_at');
        let dateOld = new Date(expires_at.data('old'));

        companySelect.on('change', function () {
            let selected = $(this).val();
            $("#category_id option").each(function () {
                let element = $(this);
                if(selected === element.data("company") || element.data("company") === ''){
                    element.removeClass('hidden')
                        .addClass('visible')
                        .show();
                } else {
                    if(element.is(':selected')){
                        element.prop('selected', false);
                        $("#category_id").triggerHandler('change');
                    }
                    element.removeClass('visible')
                        .addClass('hidden')
                        .hide();
                }
            });
        }).triggerHandler('change');
        categorySelect.on('change', function () {
            let selected = $(this).val();
            $("#sub_category_id option").each(function () {
                let element = $(this);
                if(selected === element.data("category") || element.data("category") === ''){
                    element.removeClass('hidden')
                        .addClass('visible')
                        .show();
                } else {
                    if(element.is(':selected')){
                        element.prop('selected', false);
                        $("#sub_category_id").triggerHandler('change');
                    }
                    element.removeClass('visible')
                        .addClass('hidden')
                        .hide();
                }
            });
        }).triggerHandler('change');

        subCategorySelect.on('change', function(){
           if($(this).val() !== '' && expires_at.val() !== '') {
               $('#start-all').prop('disabled', false);
               $('#stop-all').prop('disabled', false);
           }  else {
               $('#start-all').prop('disabled', true);
               $('#stop-all').prop('disabled', true);
               let files = myDropzone.getFilesWithStatus(Dropzone.QUEUED);
               if(files.length > 0){
                   $.each(files, (i,file)=>{
                       myDropzone.cancelUpload(file);
                       $(file.previewElement).find('.delete').prop('disabled', false);
                   });
               }
           }
        });
        expires_at.on('change', function(){
            if($(this).val() !== '' && subCategorySelect.val() !== '') {
                $('#start-all').prop('disabled', false);
                $('#stop-all').prop('disabled', false);
            } else {
                $('#start-all').prop('disabled', true);
                $('#stop-all').prop('disabled', true);
                let files = myDropzone.getFilesWithStatus(Dropzone.QUEUED);
                if(files.length > 0){
                    $.each(files, (i,file)=>{
                        myDropzone.cancelUpload(file);
                        $(file.previewElement).find('.delete').prop('disabled', false);
                    });
                }
            }
        });


        $('#time-zone-string').text(getTimeZoneString());

        expires_at.flatpickr({
            altInput: true,
            enableTime: true,
            altFormat: "j F, Y at H:i",
            dateFormat: "Z",
            defaultDate: [ dateOld.setMinutes(dateOld.getMinutes() + timeZoneOffset)],
        });


        let previewNode = document.querySelector("#template");
        previewNode.id = "";
        let previewTemplate = previewNode.parentNode.innerHTML;
        previewNode.parentNode.removeChild(previewNode);

        let myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
            url: "{{route('pdfs.add-many')}}", // Set the url
            withCredentials: true,
            parallelUploads: 1,
            paramName: 'pdf',
            acceptedFiles: 'application/pdf',
            thumbnailMethod: 'contain',
            thumbnailWidth: 80,
            thumbnailHeight: 80,
            filesizeBase: 1024,
            previewTemplate: previewTemplate,
            autoQueue: false, // Make sure the files aren't queued until manually added
            previewsContainer: "#previews", // Define the container to display the previews
            clickable: ".fileinput-button", // Define the element that should be used as click trigger to select files.
            init: function() {
                this.on("sending", function(file, xhr, formData){
                        // disable the upload button
                        $(file.previewElement).find('.delete').prop('disabled', true);
                         $(file.previewElement).find('.status-update').html('<div class="spinner-border text-primary" style="width: 10px; height: 10px" role="status">' +
                             '<span class="sr-only">Loading...</span>' +
                             '</div>');

                        formData.append("company_id", $('#company_id').val());
                        formData.append("category_id", $('#category_id').val());
                        formData.append("sub_category_id", $('#sub_category_id').val());
                        formData.append("expires_at", $('#expires_at').val());
                        formData.append("_token", '{{csrf_token()}}');
                });

                this.on("addedfile", function(file) {
                    $('#previews').prepend($(file.previewElement));
                    let ext = file.name.split('.').pop();
                    if (ext === "pdf") {
                        $(file.previewElement).find(".dz-image img").replaceWith('<i class="far fa-3x fa-file-pdf"></i>');
                    } else if (ext.indexOf("doc") !== -1) {
                        $(file.previewElement).find(".dz-image img").replaceWith('<i class="far fa-3x fa-file-word"></i>');
                    } else if (ext.indexOf("xls") !== -1) {
                        $(file.previewElement).find(".dz-image img").replaceWith('<i class="far fa-3x fa-file-excel"></i>');
                    }
                });

                // Update the total progress bar
                this.on("totaluploadprogress", function(progress) {
                    document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
                });

                // Hide the total progress bar when nothing's uploading anymore
                this.on("queuecomplete", function(progress) {
                    document.querySelector("#total-progress").style.opacity = "0";
                });

                this.on("error", function(file, errors){
                    let e = [];
                   $.each(errors.errors, (i, error)=> {
                       Object.values(error).forEach(val => {
                           e.push('* '+val);
                       });
                   });
                    $(file.previewElement).find('.dz-error-message').html(e.join('<br>'));
                    $(file.previewElement).find('.delete').prop('disabled', false);
                    $(file.previewElement).find('.status-update').html('<i class="fas fa-times-circle text-danger"></i>');
                });

                this.on("success", function(file) {
                    $(file.previewElement).find('.status-update').html('<i class="fas fa-check-circle text-success"></i>');
                });

            },

        });

        // Setup the buttons for all transfers
        // The "add files" button doesn't need to be setup because the config
        // `clickable` has already been specified.
        document.querySelector("#actions .start").onclick = function() {
            let files = myDropzone.getFilesWithStatus(Dropzone.ADDED);
            if(files.length > 0){
                myDropzone.files = files.reverse();
                $("#total-progress").css('opacity', '1');
                myDropzone.enqueueFiles(files);
            }
        };

        document.querySelector("#actions .stop").onclick = function() {
            let files = myDropzone.getFilesWithStatus(Dropzone.QUEUED);
            if(files.length > 0){
                $.each(files, (i,file)=>{
                    myDropzone.cancelUpload(file);
                    $(file.previewElement).find('.delete').prop('disabled', false);
                });
            }
        };


    </script>
@endsection