@extends('layouts.master')
@php
    $mode = "edit";
@endphp

@section('content')
    <main class="contentContainer">
        <h1>
            Lieferantenanfrage bearbeiten
        </h1>
        <form method="post" action="{{route("supplierinquiry.store")}}" name="editSupplierInquiry" enctype="multipart/form-data">
            @csrf
            <div style="position: absolute; right: 10px; top: 25px;">
                <button type="button" data-correct-form-button="1" class="btn btn-primary btn-big">
                    <i class="fas fa-save" style="margin-right:10px;"></i> <span>
                        Speichern
                    </span>
                </button>
            </div>

            {{--GRUNDDATEN--}}
            <div class="row no-gutters listHeader">
                <div class="col-12">E-Mail</div>
            </div>

            <div class="row">
                <div class="col-12 col-lg-12">
                    <div class="form-group">
                        <div class="col-12">
                            <label>Betreff</label>
                            <input class="form-control" name="subject" value="{{ $supplierInquery->subject }}">
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12 col-lg-12">
                    <div class="form-group">
                        <div class="col-12">
                            <label>E-Mail-Text</label>
                            <textarea id="supplierInquiryEmail" class="w-100" rows="5" name="email">{{ $supplierInquery->email }}</textarea>
                        </div>
                    </div>
                </div>
            </div>

            {{--BLÖCKE--}}
            <div class="row no-gutters listHeader mt-5">
                <div class="col-12">BLÖCKE</div>
            </div>


            <div id="suplierInquiryBlocks">
                <div class="add-block-container" data-position="1">
                    <i class="fal fa-plus-circle d-none d-lg-block"></i>
                </div>
                @if($mode=="edit")
                    @php($index = 1)
                    @foreach($supplierInquery->supplierInquiryBlocks as $block)
                        @php ($index = $index + 1)
                        <div class="block-container">
                            <div class="block-left">
                                <i class="fas fa-ellipsis-v" class="drag-icon"></i>
                                <i class="fas fa-ellipsis-v" class="drag-icon"></i>
                            </div>
                            <div class="block-right">
                                <div class="block-header">
                                    {{$block->supplierInquiryBlockType->description}}
                                </div>
                                <div class="block-body">
                                    @if($block->supplierInquiryBlockType->key=="SUPPLIER/TEXT")
                                        <textarea name="block[]" data-correct-post-name="1" class="w-100" rows="5">{{$block->block_type_content}}</textarea>
                                    @elseif($block->supplierInquiryBlockType->key=="SUPPLIER/IMAGE")
                                        <input name="block[]" data-correct-post-name="1" type="file" accept="image/png, image/jpeg" value="{{$block->block_type_content}}"/>
                                        @if(!empty($block->block_type_content))
                                            <div class="block-file-preview">
                                                <a href="{{$supplierInquery->getSupplierInquiryFilePathByFilename($block->block_type_content)}}" target="_blank">
                                                    <span>{{$block->block_type_content}}</span>
                                                </a>
                                                <img src="{{$supplierInquery->getSupplierInquiryFilePathByFilename($block->block_type_content)}}"/>
                                            </div>
                                        @endif
                                    @elseif($block->supplierInquiryBlockType->key=="SUPPLIER/PDF")
                                        <input name="block[]" data-correct-post-name="1" type="file" accept="application/pdf" value="{{$block->block_type_content}}"/>
                                        @if(!empty($block->block_type_content))
                                        <div class="block-file-preview">
                                            <a href="{{$supplierInquery->getSupplierInquiryFilePathByFilename($block->block_type_content)}}" target="_blank">
                                                <span>{{$block->block_type_content}}</span>
                                            </a>
                                        </div>
                                        @endif
                                    @elseif($block->supplierInquiryBlockType->key=="SUPPLIER/ARTICLE")
                                        Der Artikel wird später in der Anfrage automatisch befüllt
                                        <input type="hidden" data-correct-post-name="1" name="block[]" value="" />
                                    @endif
                                    {{--Hidden Input um die letzte Datei zu bestimmen--}}
                                    <input type="hidden" name="blocktypeLastContent[]" data-correct-block-last-content="1" value="{{$block->block_type_content}}" />
                                    {{--Hidden Input um den Typ zu bestimmen--}}
                                    <input type="hidden" name="blocktype[]" data-correct-type-post-name="1" value="{{$block->supplierInquiryBlockType->key}}" />
                                </div>
                            </div>
                            <div class="block-actions">
                                <i class="fas fa-trash-alt" title="Block löschen" data-action="delete-block"></i>
                            </div>
                        </div>
                        <div class="add-block-container" data-position="{{$index}}">
                            <i class="fal fa-plus-circle d-none d-lg-block"></i>
                        </div>
                    @endforeach
                @endif
            </div>
        </form>


        <div id="choose-block-type" class="d-none">
            <div class="row p-3">
                @foreach($supplierInquiryBlockTypes as $supplierInquiryBlockType)
                    <div class="col-6">
                        <div class="block-type my-2" data-action="addBlock" data-blocktypeid="{{$supplierInquiryBlockType->key}}">
                            @if($supplierInquiryBlockType->key == "SUPPLIER/TEXT")
                                <i class="fal fa-keyboard"></i>
                            @elseif($supplierInquiryBlockType->key == "SUPPLIER/IMAGE")
                                <i class="fal fa-image"></i>
                            @elseif($supplierInquiryBlockType->key == "SUPPLIER/PDF")
                                <i class="fal fa-file-pdf"></i>
                            @elseif($supplierInquiryBlockType->key == "SUPPLIER/ARTICLE")
                                <i class="fal fa-list-alt"></i>
                            @endif
                            {{$supplierInquiryBlockType->name}}
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        {{--Module--}}
        @foreach($supplierInquiryBlockTypes as $supplierInquiryBlockType)
        <div class="block-outer-container d-none" data-block-master-key="{{$supplierInquiryBlockType->key}}">
            <div class="block-container">
                <div class="block-left">
                    <i class="fas fa-ellipsis-v" class="drag-icon"></i>
                    <i class="fas fa-ellipsis-v" class="drag-icon"></i>
                </div>
                <div class="block-right">
                    <div class="block-header">
                        {{$supplierInquiryBlockType->description}}
                    </div>
                    <div class="block-body">
                        @if($supplierInquiryBlockType->key=="SUPPLIER/TEXT")
                            <textarea name="block[]" data-correct-post-name="1" class="w-100" rows="5"></textarea>
                        @elseif($supplierInquiryBlockType->key=="SUPPLIER/IMAGE")
                            <input name="block[]" data-correct-post-name="1" type="file" accept="image/png, image/jpeg"/>
                        @elseif($supplierInquiryBlockType->key=="SUPPLIER/PDF")
                            <input name="block[]" data-correct-post-name="1" type="file" accept="application/pdf"/>
                        @elseif($supplierInquiryBlockType->key=="SUPPLIER/ARTICLE")
                            Der Artikel wird später in der Anfrage automatisch befüllt
                            <input type="hidden" data-correct-post-name="1" name="block[]" value="" />
                        @endif
                        {{--Hidden Input um die letzte Datei zu bestimmen--}}
                        <input type="hidden" name="blocktypeLastContent[]" data-correct-block-last-content="1" value="" />
                        {{--Hidden Input um den Typ zu bestimmen--}}
                        <input type="hidden" name="blocktype[]" data-correct-type-post-name="1" value="{{$supplierInquiryBlockType->key}}" />
                    </div>
                </div>
                <div class="block-actions">
                    <i class="fas fa-trash-alt" title="Block löschen" data-action="delete-block"></i>
                </div>
            </div>
        </div>
        @endforeach

        <script>
            var addBlockPosition = 100;
            var highestboxPosition = 100;
            jQuery(document).ready(function() {
                jQuery('.select2').select2();
            });

            jQuery(document).on("click", ".add-block-container", function(){
                var position = jQuery(this).data("position");
                addBlockPosition = position;
                showAddBoxModal();
            });

            jQuery(document).on("click", "[data-action=addBlock]", function(){
                var blocktypeId = jQuery(this).data("blocktypeid");
                addBox(blocktypeId, addBlockPosition)
                addBoxSwal.close();
            });
            var addBoxSwal = null;
            function showAddBoxModal() {
                var _body = jQuery("#choose-block-type").html();
                addBoxSwal = Swal.fire({
                    position: 'center',
                    icon: "",
                    title: "",
                    html: _body,
                    showConfirmButton: false,
                    allowOutsideClick: false,
                    showCloseButton: true
                });
            }

            function addBox(_blockType, _position){
                var boxHtml = "";
                highestboxPosition++;

                boxHtml = jQuery(".block-outer-container[data-block-master-key='"+_blockType+"']").html();

                var anotherAddButton = jQuery(".add-block-container[data-position]").eq(0).clone();
                jQuery(anotherAddButton).attr("data-position", highestboxPosition);

                // Zuerst den Add-Button einfügen
                jQuery("#suplierInquiryBlocks").find(".add-block-container[data-position="+addBlockPosition+"]").after(anotherAddButton);
                // Dann zwischen Add-Button und der letzten Position den neuen Block einsetzen
                jQuery("#suplierInquiryBlocks").find(".add-block-container[data-position="+addBlockPosition+"]").after(boxHtml);

                if(_blockType=="SUPPLIER/TEXT"){
                    jQuery("#suplierInquiryBlocks textarea:not([id])").tinymce({
                        height: 500,
                        menubar: false,
                        plugins: [

                        ],
                        toolbar: 'undo redo | a11ycheck casechange blocks | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist checklist outdent indent | removeformat | code table help'
                    });
                }

            }

            jQuery(document).ready(function() {
                new Sortable(suplierInquiryBlocks, {
                    animation: 150,
                    filter: '.add-block-container', // 'add-block-container' class is not draggable
                    ghostClass: 'blue-background-class',
                    dragClass: "add-block-container-drag",
                    onEnd: function(evt) {
                        newSortAddBlockContainer();
                    }
                });
            });

            function newSortAddBlockContainer(){
              // Alle add-block-container durchschleifen
                jQuery( "#suplierInquiryBlocks .add-block-container" ).each(function( index ) {
                    // Die letzte-Add Box an das Ende setzen
                    if(index==jQuery("#suplierInquiryBlocks .block-container").length)
                    {
                        jQuery(this).insertAfter(jQuery("#suplierInquiryBlocks .block-container")[index-1]);
                    }
                    else{
                        // Nun nach dem entsprechenden Block positionieren
                        jQuery(this).insertBefore(jQuery("#suplierInquiryBlocks .block-container")[index]);
                    }
                });
            }

            jQuery(document).on("click",".block-actions [data-action=delete-block]", function(){
                var blockContainer = jQuery(this).parents(".block-container");
                var addBeforeBlockContainer = jQuery(blockContainer).prev(".add-block-container");
                // Den Add-Block nur entfernen, wenn noch mindestens einer besteht
                if(jQuery("#suplierInquiryBlocks .add-block-container").length >= 1)
                {
                    jQuery(addBeforeBlockContainer).remove();
                }
                jQuery(blockContainer).remove();
            });

            jQuery(document).on("click","[data-correct-form-button=1]", function(){
                // Alle Inputs korrekt benennen
                jQuery("[data-correct-post-name=1]").each(function( index ) {
                    jQuery(this).attr("name", "block["+index+"]");
                });

                jQuery("[data-correct-type-post-name=1]").each(function( index ) {
                    jQuery(this).attr("name", "blocktype["+index+"]");
                });

                jQuery("[data-correct-block-last-content=1]").each(function( index ) {
                    jQuery(this).attr("name", "blocktypeLastContent["+index+"]");
                });

                jQuery(this).parents("form").submit();
            });

        </script>

        <style>
            .select2-container--default .select2-selection--single .select2-selection__arrow{
                height: 35px;
                line-height: 35px;
            }
            .select2-container--default .select2-selection--single .select2-selection__rendered,
            .select2-container--default .select2-selection--single{
                height: 38px;
                line-height: 38px;
            }

            .add-block-container,
            .block-type{
                border: 1px solid #ddd;
                color: #ddd;
                padding: 5px;
                border-radius: 5px;
                display: flex;
                justify-content: center;
                align-items: center;
                transition-duration: .4s;
            }

            .add-block-container:hover,
            .block-type:hover{
                border: 1px solid #282d67;
                color: #282d67;
                cursor:pointer;
                box-shadow: rgb(179 186 197) 0px 0px 1px 0px, rgb(193 199 208) 0px 8px 8px -6px;
            }
            .add-block-container i,
            .block-type i{
                font-size: 20px;
                margin:0px 20px;
            }

            .block-type{
                justify-content: space-between;
                padding-right: 20px;
                padding:20px 20px 20px 0px;
            }

            .block-container{
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;

                border: 1px solid #ddd;
                padding: 5px;
                border-radius: 5px;
                margin:5px 0px;
            }

            .block-container .block-left{
                display:flex;
                padding: 10px;
            }

            .block-container .block-left i{
                color: #ddd;
                font-size: 20px;

            }

            .block-container .block-right{
                width:100%;
                padding: 10px;
            }

            .block-actions{

            }

            .block-actions i{
                color: #ddd;
                font-size: 20px;
                padding: 10px;
                transition-duration: .4s;
            }

            .block-actions i:hover{
                color: #282d67;
                cursor:pointer
            }

            .block-container .block-header {

            }

            .block-container .block-body{

            }

            .block-container .block-body .block-file-preview{
                display: flex;
                width: 100%;
                justify-content: center;
                align-items: center;
                grid-gap: 20px;
                flex-direction: column;
            }

            .block-container .block-body .block-file-preview span{
                font-weight: bold;
                display: block;

                border: 1px solid #ddd;
                background: #f0f0f0;
                padding: 5px 20px;
                border-radius: 5px;
            }

            .block-container .block-body .block-file-preview img{
                max-width: 250px;
                border-radius: 10px;
            }

        </style>

        {{--Initialisieren bestehender Text-Areas--}}
        <script>
            jQuery(document).ready(function() {
                jQuery('#supplierInquiryEmail').tinymce({
                    height: 500,
                    menubar: false,
                    plugins: [

                    ],
                    toolbar: 'undo redo | a11ycheck casechange blocks | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist checklist outdent indent | removeformat | code table help'
                });

                jQuery('#suplierInquiryBlocks textarea').tinymce({
                    height: 500,
                    menubar: false,
                    plugins: [

                    ],
                    toolbar: 'undo redo | a11ycheck casechange blocks | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist checklist outdent indent | removeformat | code table help'
                });
            });
        </script>

    </main>
@endsection