@extends('layouts.master')
@section('content')
<div class="baseContainer">
    <div class="forward-import-container">
        <div class="row">
            <div class="col-12">
                <h1>Datenimport</h1>
                <h5>Betreff</h5>
                <input type="text" disabled value="{{$forward->subject}}"/>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <h5>Beschreibung</h5>
                <textarea rows="10" disabled>{{$forward->description}}</textarea>
            </div>
        </div>

        <div class="file-container">
            <h5>Bitte konfigurieren Sie den Dateiupload</h5>
        @foreach ($forward->forwardFiles as $file)
            <div class="row" data-file-id="{{$file->id}}">
                <div class="col-6 d-flex align-items-center">
                    {{$file->getFullFilename()}}
                </div>
                <div class="col-6 col-actions" data-action-step="1">
                    {{--Step 1--}}
                    <div class="step-container" data-container-step="1">
                        <select class="js-example-basic-single" id="project_select_{{ $file->id }}">
                            <option value="none">
                                Nicht hochladen
                            </option>
                            <optgroup label="Projekt auswählen">
                                @foreach(\App\Project::orderBy("project_nr", "DESC")->get() as $project)
                                    <option value="{{$project->id}}" data-project-id="{{$project->id}}">{{$project->project_nr}}</option>
                                @endforeach
                            </optgroup>
                        </select>
                    </div>

                    {{--Step 2--}}
                    <div class="step-container d-none" data-container-step="2">
                        <button class="step-back" title="Auswahl rückgängig machen">
                            <i class="fal fa-step-backward"></i>
                        </button>
                        <select class="js-example-basic-single" id="article_select_{{ $file->id }}">
                            <option value="none">
                                Bitte wählen
                            </option>
                            {{--Alle Dateien zum Projekt--}}
                            <optgroup label="Projekt-Dateien">
                                <option value="new">Als neue Datei  zum Projekt hochladen</option>
                                @foreach(\App\Document::where("attachable_type","like","%Project")->orderBy("title", "ASC")->get() as $document)
                                    <option value="{{$document->id}}" data-type="project-file" data-project-id="{{$document->attachable_id}}">Revision zu "{{$document->title}}"</option>
                                @endforeach
                            </optgroup>
                            {{--Alle Artikel zum Projekt--}}
                            <optgroup label="Zu Artikel hochladen">
                                @foreach(\App\Article::orderBy("title", "ASC")->get() as $article)
                                    <option value="{{$article->id}}" data-type="project-article" data-project-id="{{$article->project_id}}">{{$article->title}}</option>
                                @endforeach
                            </optgroup>
                        </select>
                    </div>

                    {{--Step 3--}}
                    <div class="step-container d-none" data-container-step="3">
                        <button class="step-back" title="Auswahl rückgängig machen">
                            <i class="fal fa-step-backward"></i>
                        </button>
                        <select class="js-example-basic-single">
                            <option value="none">
                                Bitte Datei wählen
                            </option>
                            {{--Alle Dateien zum Artikel--}}
                            <optgroup label="Artikel-Dateien">
                                <option value="new">Als neue Datei zum Artikel hochladen</option>
                                @foreach(\App\Document::where("attachable_type","like","%Article")->orderBy("title", "ASC")->get() as $document)
                                    <option value="{{$document->id}}" data-type="article-file" data-article-id="{{$document->attachable_id}}">Revision zu "{{$document->title}}"</option>
                                @endforeach
                            </optgroup>
                        </select>
                    </div>
                    <div class="col-12 info-col"><span>{{--Hier werden dynamisch Hinweise dargestellt--}}</span></div>
                </div>
            </div>
        @endforeach
        </div>

        <div class="row">
            <div class="col-12">
                <button class="btn btn-primary w-100 mt-3" id="startForwardUpload">Upload starten</button>
            </div>
        </div>

    </div>

    <script>
        jQuery(document).ready(function() {
            jQuery('.js-example-basic-single').select2({templateResult: resultState});

            @foreach ($forward->forwardFiles as $file)
                jQuery('#project_select_{{ $file->id }}').val('{{ $forward->project_id }}');
                jQuery('#project_select_{{ $file->id }}').change();

                jQuery('#article_select_{{ $file->id }}').val('{{ $forward->article_id }}');
                jQuery('#article_select_{{ $file->id }}').change();
            @endforeach
        });
        function resultState(data, container) {
            if(data.element) {
                $(container).addClass($(data.element).attr("class"));
            }
            return data.text;
        }

        {{--Step 1: Projektauswahl--}}
        jQuery(document).on("change", "div.step-container[data-container-step='1'] select", function() {
            var projectId = jQuery(this).val();
            var containerRow = jQuery(this).parents(".row[data-file-id]");
            if(projectId != "none")
            {
                {{--Projekt wurde ausgewählt, Vorbereiten des nächsten Schritts--}}
                jQuery(containerRow).find("div.step-container[data-container-step='1']").addClass("d-none");

                jQuery(containerRow).find("div.step-container[data-container-step='2'] select option").addClass('d-none');
                jQuery(containerRow).find("div.step-container[data-container-step='2'] select option[data-project-id='"+projectId+"']," +
                    "div.step-container[data-container-step='2'] select option[value='none']," +
                    "div.step-container[data-container-step='2'] select option[value='new']").removeClass('d-none');
                jQuery(containerRow).find("div.step-container[data-container-step='2'] select option:eq(0)").prop('selected', true);
                jQuery(containerRow).find("div.step-container[data-container-step='2'] select").trigger('change');
                jQuery(containerRow).find("div.step-container[data-container-step='2']").removeClass("d-none");
                {{--Step festhalten--}}
                jQuery(containerRow).find("div.col-actions").data("action-step", 2);
                updateImportHint(containerRow);
            }
        });

        {{--Step 2: Projekt-Dateien oder Artikel Auswahl--}}
        jQuery(document).on("change", "div.step-container[data-container-step='2'] select", function() {
            var articleId = jQuery(this).val();
            var containerRow = jQuery(this).parents(".row[data-file-id]");
            jQuery(containerRow).removeClass("complete");
            updateImportHint(containerRow);

            if(articleId == "new")
            {
                // Neue Projekt-Datei hochladen
                jQuery(containerRow).addClass("complete");
                updateImportHint(containerRow);
            }
            if(articleId != "none")
            {
                {{--Es wurde entweder eine Projekt-Datei oder ein Artikel, Vorbereiten des nächsten Schritts--}}
                var type = jQuery(this).find("option:selected").data("type");
                if(type=="project-file")
                {
                    jQuery(containerRow).addClass("complete");
                    updateImportHint(containerRow);
                }
                else if(type=="project-article")
                {
                    jQuery(containerRow).find("div.step-container[data-container-step='2']").addClass("d-none");

                    jQuery(containerRow).find("div.step-container[data-container-step='3'] select option").addClass('d-none');
                    jQuery(containerRow).find("div.step-container[data-container-step='3'] select option[data-article-id='"+articleId+"']," +
                        "div.step-container[data-container-step='3'] select option[value='none']," +
                        "div.step-container[data-container-step='3'] select option[value='new']").removeClass('d-none');
                    jQuery(containerRow).find("div.step-container[data-container-step='3'] select option:eq(0)").prop('selected', true);
                    jQuery(containerRow).find("div.step-container[data-container-step='3'] select").trigger('change');
                    jQuery(containerRow).find("div.step-container[data-container-step='3']").removeClass("d-none");
                    {{--Step festhalten--}}
                    jQuery(containerRow).find("div.col-actions").data("action-step", 3);
                    updateImportHint(containerRow);
                }
            }
        });

        {{--Step 3: Artikel-Dateien Auswahl--}}
        jQuery(document).on("change", "div.step-container[data-container-step='3'] select", function() {
            var fileId = jQuery(this).val();
            var containerRow = jQuery(this).parents(".row[data-file-id]");
            jQuery(containerRow).removeClass("complete");
            updateImportHint(containerRow);

            if(fileId == "new")
            {
                // Neue Artikel-Datei hochladen
                jQuery(containerRow).addClass("complete");
                updateImportHint(containerRow);
            }
            if(fileId != "none")
            {
                {{--Es wurdee eine Datei-Option gewählt--}}
                jQuery(containerRow).addClass("complete");
                updateImportHint(containerRow);
            }
        });

        {{--Zurück-Buttons--}}
        jQuery(document).on("click", "button.step-back", function() {
            var containerRow = jQuery(this).parents(".row[data-file-id]");
            var currentStep = jQuery(containerRow).find("div.col-actions").data("action-step");

            jQuery(containerRow).removeClass("complete");
            updateImportHint(containerRow);

            if(currentStep == 2)
            {
                jQuery(containerRow).find("div.step-container[data-container-step='2']").addClass("d-none");

                jQuery(containerRow).find("div.step-container[data-container-step='1'] select option:eq(0)").prop('selected', true);
                jQuery(containerRow).find("div.step-container[data-container-step='1'] select").trigger('change');
                jQuery(containerRow).find("div.step-container[data-container-step='1']").removeClass("d-none");

                {{--Step festhalten--}}
                jQuery(containerRow).find("div.col-actions").data("action-step", 1);
                updateImportHint(containerRow);
            }
            else if(currentStep == 3)
            {
                jQuery(containerRow).find("div.step-container[data-container-step='3']").addClass("d-none");

                jQuery(containerRow).find("div.step-container[data-container-step='2'] select option:eq(0)").prop('selected', true);
                jQuery(containerRow).find("div.step-container[data-container-step='2'] select").trigger('change');
                jQuery(containerRow).find("div.step-container[data-container-step='2']").removeClass("d-none");

                {{--Step festhalten--}}
                jQuery(containerRow).find("div.col-actions").data("action-step", 2);
                updateImportHint(containerRow);
            }
        });

        {{--Forward-Upload starten--}}
        jQuery(document).on("click", "button#startForwardUpload", function() {

            if(jQuery(".forward-import-container .file-container .row.complete").length == 0)
            {
                showModalBox("Hinweis", "Konfigurieren Sie mindestens einen Datei-Upload");
                return false;
            }
            var forwardImports = [];

            {{--Alle validen Dateien ermitteln--}}
            jQuery.each(jQuery(".forward-import-container .file-container .row.complete"), function(index, obj){
                {{--Variablen ermitteln--}}
                var actionStep = jQuery(obj).find("div.col-actions").data("action-step");
                var fileToUploadId = jQuery(obj).data("file-id");

                var projectId = "";
                var articleId = "";
                var fileId = "";
                var importKey = "";

                if(actionStep == 2)
                {
                    {{--Projekt-Datei (neu oder Revision)--}}
                    var projectId = jQuery(obj).find("div.step-container[data-container-step='1'] select").val();
                    var fileId = jQuery(obj).find("div.step-container[data-container-step='2'] select").val();

                    if(fileId=="new"){
                        importKey = "uploadToProjectAsNewFile";
                    }
                    else{
                        importKey = "uploadToProjectAsFileRevision";
                    }
                }
                else if(actionStep == 3)
                {
                    {{--Artikel-Datei (neu oder Revision)--}}
                    var projectId = jQuery(obj).find("div.step-container[data-container-step='1'] select").val();
                    var articleId = jQuery(obj).find("div.step-container[data-container-step='2'] select").val();
                    var fileId = jQuery(obj).find("div.step-container[data-container-step='3'] select").val();

                    if(fileId=="new"){
                        importKey = "uploadToArticleAsNewFile";
                    }
                    else{
                        importKey = "uploadToArticleAsFileRevision";
                    }
                }
                {{--Daten in Array übernehmen--}}
                var forwardImport = {};
                forwardImport["fileToUploadId"] = fileToUploadId;
                forwardImport["projectId"] = projectId;
                forwardImport["articleId"] = articleId;
                forwardImport["fileId"] = fileId;
                forwardImport["importKey"] = importKey;

                forwardImports.push(forwardImport);
            });

            {{--Speichern verarbeiten--}}
            showLoadingSpinner();

            var url = "/forward/{{$forward->id}}/processForwardImport";

            jQuery.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                }
            });

            jQuery.ajax({
                type: 'POST',
                cache:  false,
                url: url,
                data: JSON.stringify(forwardImports),
                dataType: "json",
                success: function (data) {
                    window.location.href = '/projects';
                },
                error: function (data) {
                    showModalBox("Es ist ein Fehler aufgetreten.", "");
                    showOverlayAlert(data.message);
                }
            });
        });

        {{--Hinweistext zum Upload--}}
        function updateImportHint(containerRow){

            var currentStep = jQuery(containerRow).find("div.col-actions").data("action-step");
            var hintSpan = jQuery(containerRow).find("div.col-actions div.info-col span");
            var hint = "";
            if(currentStep == 1)
            {
                jQuery(hintSpan).html(hint);
                return;
            }
            else if(currentStep == 2)
            {
                // Projekt nennen
                var proj = jQuery(containerRow).find("div.step-container[data-container-step=1] select option:selected").html();
                // Aktuelle Auswahl
                var currentSelect = jQuery(containerRow).find("div.step-container[data-container-step=2] select option:selected").val();
                hint += proj;
                if(currentSelect == "new")
                {
                    hint += " > " + jQuery(containerRow).find("div.step-container[data-container-step=2] select option:selected").html();
                }
                else if(currentSelect != "none")
                {
                    hint += " > " + jQuery(containerRow).find("div.step-container[data-container-step=2] select option:selected").html();
                }
            }
            else if(currentStep == 3)
            {
                // Projekt nennen
                var proj = jQuery(containerRow).find("div.step-container[data-container-step=1] select option:selected").html();
                // Artikel nennen
                var article = jQuery(containerRow).find("div.step-container[data-container-step=2] select option:selected").html();
                // Aktuelle Auswahl
                var currentSelect = jQuery(containerRow).find("div.step-container[data-container-step=3] select option:selected").val();
                hint += proj + " > " + article;
                if(currentSelect == "new")
                {
                    hint += " > " + jQuery(containerRow).find("div.step-container[data-container-step=3] select option:selected").html();
                }
                else if(currentSelect != "none")
                {
                    hint += " > " + jQuery(containerRow).find("div.step-container[data-container-step=3] select option:selected").html();
                }
            }
            if(hint != "")
            {
                hint = '<i class="fal fa-info-circle"></i> ' + hint;
            }
            jQuery(hintSpan).html(hint);
        }

    </script>

    <style>
        .select2-container .select2-results__option.d-none {
            display: none;
        }
        .forward-import-container{
            border: 1px solid #282d67;
            margin: 20px;
            border-radius: 10px;
            padding: 30px;

            box-shadow: rgb(179 186 197) 0px 0px 1px 0px, rgb(193 199 208) 0px 8px 16px -6px;
            transition: box-shadow 300ms ease 0s;
        }
        .forward-import-container h1{
            color:#8cc0d5;
        }
        .forward-import-container .file-container{

        }
        .forward-import-container .file-container .row{
            border-radius: 10px;
            overflow: hidden;
            margin: 10px 0px;
            background: #fafafa;
            padding:10px 20px;
            position:relative;
            transition: 300ms ease 0s;
        }
        .forward-import-container .file-container .row:hover{
            background: #f0f0f0;
            box-shadow: rgb(179 186 197) 0px 0px 1px 0px, rgb(193 199 208) 0px 8px 16px -6px;
        }
        .forward-import-container .file-container .row.complete,
        .forward-import-container .file-container .row.complete:hover{
            background:#c3ecd0!important;
        }
        .forward-import-container .file-container .row.complete:after{
            content: "\f058";
            font-family: "Font Awesome 5 Pro";
            display: block;
            position: absolute;
            left: 10px;
            top: 22px;
            font-size: 20px;
            color: #468920;
        }
        .forward-import-container h5{
            margin-top: 20px;
        }
        .forward-import-container input,
        .forward-import-container select,
        .forward-import-container textarea{
            width:100%;
        }
        .forward-import-container span.select2.select2-container{
            width: 100%!important;
        }
        .forward-import-container .col-actions .step-container{
            display: flex;
            gap:10px;
        }
        .forward-import-container button.step-back{
            border: 0px;
            border-radius: 5px;
            padding: 0px 20px;
            background: #f0f0f0;
            opacity: .5;
            border: 1px solid #aaa;
        }
        .forward-import-container button.step-back:hover{
            background: #ddd;
            opacity: 1;
            cursor:pointer;
            transition: 300ms ease 0s;
        }
        .forward-import-container div.info-col span{
            font-size: 10px;
            padding-left: 0px;
            height:0px;
            transition-duration: .4s;
        }
        .forward-import-container div.info-col span:not(:empty){
            height:14px;
            padding-left: 50px;
        }
    </style>
</div>
@include('layouts.overlay')
@endsection