@extends('layouts.master')
@section('content')


    <main class="contentContainer">

        <h1>Versenden</h1>

        <div class="row">
            <div class="col-12">
                <div class="row">
                    <div class="col-12 pb-5">
                        <div class="overview-box">
                            <div class="box-header"></div>
                            <div class="box-content">
                                {!! BootForm::open(["id" => "forwardnew",
                                                     "route" => "forward.store",
                                                     "method" => "POST",
                                                     "enctype" => "multipart/form-data"]);
                                                     !!}

                                {{-- Betreff und Empfänger --}}
                                <div class="row">
                                    <div class="col-12 col-lg-6">
                                        <div class="form-group">
                                            <label for="order_type_id" class="col-12 col-form-label"><h5>Betreff</h5></label>
                                            <div class="col-12">
                                                <input class="form-control" name="subject" value="" required="required"
                                                       placeholder="Wählen Sie einen passenden Betreff">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-lg-6">
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <label for="order_type_id" class="col-12 col-form-label"><h5>Empfänger</h5></label>
                                                    <div class="col-12">
                                                        <select class="form-control js-example-basic-single" id="recipient" name="recipient" required="required">
                                                            <option value="" disabled="" selected="">Bitte auswählen</option>
                                                            @foreach ($recipients as $key => $recipient)
                                                                <option value="{{$key}}">{{$recipient}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- Freitextfeld --}}
                                <div class="row">
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="order_type_id" class="col-12 col-form-label"><h5>Beschreibung</h5></label>
                                            <div class="col-12">
                                                <textarea class="form-control" rows="6" name="description" value="" placeholder="Verwenden sie einen optionalen Beschreibungstext."></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- Projekt und Artikelzuweisung --}}
                                <div class="row">
                                    <div class="col-12 col-lg-6">
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <label for="order_type_id" class="col-12 col-form-label"><h5>Zuordnung</h5></label>
                                                    <div class="col-12">
                                                        <select class="form-control js-example-basic-single" id="project" name="project">
                                                            <option value="none" selected="">Keinem Projekt zuweisen</option>
                                                            @foreach ($projects as $key => $project)
                                                                <option value="{{$key}}">{{$project}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-lg-6">
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <label for="order_type_id" class="col-12 col-form-label"><h5>Artikel</h5></label>
                                                    <div class="col-12">
                                                        <select class="form-control js-example-basic-single" id="article" name="article" disabled="disabled">
                                                            <option value="none" selected="">Keinem Artikel zuweisen</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="order_type_id" class="col-12 col-form-label"><h5>Dateien auswählen</h5></label>
                                            @if (empty($documents))
                                                <div class="col-12">
                                                    <input type="file" id="files" name="files[]" multiple required="required"/>
                                                </div>
                                            @else
                                                @foreach($documents as $document)
                                                <div class="col-12">
                                                    {{ $document['filename'] }}
                                                    <input type="hidden" name="document_ids[]" value="{{ $document['id'] }}" />
                                                    <input type="hidden" name="document_filenames[]" value="{{ $document['filename'] }}" />
                                                </div>
                                                @endforeach
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                <div class="row mt-5">
                                    <div class="col-12 text-right">
                                        <input class="btn btn-primary" type="submit" value="Versenden" />
                                    </div>
                                </div>


                                {!! BootForm::close() !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
        <script>

            // projectarticles[1]['articles'][0].id
            /*
            var projectarticles = {
                1: { articles: [{id:1, name:"Artikel 101"},{id:2, name:"Artikel 202"}] },
                2: { articles: [{id:3, name:"Artikel 303"}] },
                3: { articles: [] }
            };
             */
            var projectarticles = {!! $projectarticles !!};

            jQuery(document).ready(function() {
                jQuery('.js-example-basic-single').select2();
            });

            var lastProject = "none";
            jQuery( "form select[name=project]" ).change(function() {
                var pid = jQuery(this).val();
                if(pid != "none"){
                    jQuery( "form select[name=article]" ).removeAttr("disabled");

                    if(pid != lastProject){
                        lastProject = pid;

                        // Artikelliste leeren
                        jQuery( "form select[name=article]" ).empty().trigger("change");
                        var newOption = new Option("Keinem Artikel zuweisen", "none", false, false);
                        jQuery('form select[name=article]').append(newOption).trigger('change');

                        // Neue Artikel laden
                        //form select[name=article]
                        jQuery.each(projectarticles[pid]['articles'], function( index, art ) {
                            var newOption = new Option(art.name, art.id, false, false);
                            jQuery('form select[name=article]').append(newOption).trigger('change');
                        });
                    }
                }
                else{
                    jQuery( "form select[name=article]" ).val("none").attr("disabled", "disabled").trigger('change');
                }
            });

        </script>

@endsection