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


    <main class="contentContainer">

        <h1>{{ __('messages.send.send') }}</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">
                                <form id="forwardnew" action="{{ route('forward.store') }}" method="POST" enctype="multipart/form-data">
                                    <input type="hidden" name="_token" value="{{ csrf_token() }}" />
                                {{-- Betreff und Empfänger --}}


                                {{-- 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>{{ __('messages.send.assignment') }}</h5></label>
                                                    <div class="col-12">
                                                        <select class="form-control js-example-basic-single" id="project" name="project">
                                                            <option value="none" {{ !isset($project) ? 'selected="selected"' : '' }}>{{ __('messages.send.generally') }}</option>
                                                                                                                        @foreach ($projects as $key => $projectToShow)
                                                                <option value="{{$key}}" {{ isset($project) && $project->id == $key ? 'selected="selected"' : '' }}>{{$projectToShow}}</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>{{ __('messages.send.tool_number') }}</h5></label>
                                                    <div class="col-12">
                                                        <select class="form-control js-example-basic-single" id="article" name="article" disabled="disabled">
                                                            <option value="none" selected="">{{ __('messages.send.no_tool_assignment') }}</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <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>{{ __('messages.send.subject') }}</h5></label>
                                            <div class="col-12">
                                                <input class="form-control" name="subject" value="" required="required" data-autofilled="1"
                                                       placeholder="{{ __('messages.send.subject_placeholder') }}">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 col-lg-12">
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <label for="order_type_id" class="col-12 col-form-label"><h5>{{ __('messages.send.send_to') }}</h5></label>
                                                    <div class="col-12">
                                                        <select class="form-control js-example-basic-single" id="recipient" name="recipient[]" required="required" multiple="multiple">
                                                            <option value="" disabled="">{{ __('messages.send.please_select') }}</option>
                                                            @foreach ($recipients as $key => $recipient)
                                                                <option value="{{$key}}">{{$recipient}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 col-lg-12">
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <label for="order_type_id" class="col-12 col-form-label"><h5>{{ __('messages.send.cc') }}</h5></label>
                                                    <div class="col-12">
                                                        <select class="form-control js-example-basic-single" id="recipient_cc" name="recipient_cc[]" multiple="multiple">
                                                            <option value="" disabled="">{{ __('messages.send.please_select') }}</option>
                                                            @foreach ($recipients as $key => $recipient)
                                                                <option value="{{$key}}">{{$recipient}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 col-lg-12">
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <label for="order_type_id" class="col-12 col-form-label"><h5>{{ __('messages.send.bcc') }}</h5></label>
                                                    <div class="col-12">
                                                        <select class="form-control js-example-basic-single" id="recipient_bcc" name="recipient_bcc[]" multiple="multiple">
                                                            <option value="" disabled="">{{ __('messages.send.please_select') }}</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>{{ __('messages.send.description') }}</h5></label>
                                            <div class="col-12">
                                                <textarea class="form-control" rows="6" name="description" value="" placeholder="{{ __('messages.send.use_optional_description') }}"></textarea>
                                            </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>{{ __('messages.send.select_files') }}</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'] }}" />
                                                    @if(array_key_exists('supplier_request_id', $document))
                                                        <input type="hidden" name="document_supplier_request_ids[]" value="{{ $document['supplier_request_id'] }}" />
                                                    @endif
                                                </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="{{ __('messages.send.send') }}" />
                                    </div>
                                </div>

                                </form>
                            </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");

                    setSubjectToProjectArticle();

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

                        // Artikelliste leeren
                        jQuery( "form select[name=article]" ).empty().trigger("change");
                        var newOption = new Option("{{ __('messages.send.no_tool_assignment') }}", "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');
                }
            });

            jQuery( "form select[name=article]" ).change(function() {
                setSubjectToProjectArticle();
            });

            jQuery("form input[name=subject]").keyup(function() {
                if (jQuery("form input[name=subject]").val() == '') {
                    jQuery("form input[name=subject]").data('autofilled', '1');
                } else {
                    jQuery("form input[name=subject]").data('autofilled', '0');
                }
            });

            function setSubjectToProjectArticle() {
                if (jQuery("form input[name=subject]").data('autofilled') == '1') {
                    var subject = '';
                    if (jQuery("form select[name=project]").select2('data')[0].id != 'none') {
                        subject += jQuery("form select[name=project]").select2('data')[0].text;
                    }
                    if (jQuery("form select[name=article] option").length > 0 && jQuery("form select[name=article]").select2('data')[0].id != 'none') {
                        subject += ' - ' + jQuery("form select[name=article]").select2('data')[0].text;
                    }
                    jQuery("form input[name=subject]").data('autofilled', '1');
                    jQuery("form input[name=subject]").val(subject);
                }
            }

        </script>

@endsection