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

    <main class="contentContainer">
        <h1>Lieferanten</h1>
        <div style="position: absolute; right: 10px; top: 25px;">
            <button type="button" class="btn btn-primary btn-big" form="editSupplier">
                <i class="fas fa-save" style="margin-right:10px;"></i> <span>
                    Speichern
                </span>
            </button>
        </div>

        <div class="row no-gutters listHeader">
            <div class="col-12">Grunddaten</div>
        </div>

        <form id="editSupplier" action="javascript:void(0);">

            <input type="hidden" id="supplier_id" name="supplier_id" value="{{ $supplier->id }}">
            <input type="hidden" id="client_id" name="client_id" value="{{ $supplier->client_id }}">

            @if ($mode == "edit")
                <div class="row">
                    <div class="col-12 col-lg-12">
                        <div class="form-group row">
                            <div class="col-12">
                                <h3>Lieferantendaten</h3>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="supplier_number" class="col-12 col-lg-2 col-form-label">Lieferantennummer</label>
                            <div class="col-12 col-lg-10">
                                <input type="text"
                                       class="form-control"
                                       id="supplier_number" name="supplier_number"
                                       value="{{ $supplier->supplier_number }}">
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="matchcode" class="col-12 col-lg-2 col-form-label">Matchcode</label>
                            <div class="col-12 col-lg-10">
                                <input type="text"
                                       class="form-control"
                                       id="matchcode" name="matchcode"
                                       value="{{ $supplier->matchcode }}">
                            </div>
                        </div>
                    </div>
                </div>
            @endif
            <div class="row">
                <div class="col-12 col-lg-12">
                    <div class="form-group row">
                        <div class="col-12">
                            <h3>Adressdaten</h3>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="company" class="col-12 col-lg-2 col-form-label">Firmenname</label>
                        <div class="col-12 col-lg-10">
                            <input type="text"
                                   class="form-control"
                                   id="company" name="company"
                                   value="{{ $supplier->company }}">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="contact" class="col-12 col-lg-2 col-form-label">Ansprechpartner</label>
                        <div class="col-12 col-lg-10">
                            <input type="text"
                                   class="form-control"
                                   id="contact" name="contact"
                                   value="{{ $supplier->contact }}">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="additional" class="col-12 col-lg-2 col-form-label">Zusatz</label>
                        <div class="col-12 col-lg-10">
                            <input type="text"
                                   class="form-control"
                                   id="additional" name="additional"
                                   value="{{ $supplier->additional }}">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="street" class="col-12 col-lg-2 col-form-label">Straße</label>
                        <div class="col-12 col-lg-10">
                            <input type="text"
                                   class="form-control"
                                   id="street" name="street"
                                   value="{{ $supplier->street }}">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="house_number" class="col-12 col-lg-2 col-form-label">Hausnummer</label>
                        <div class="col-12 col-lg-10">
                            <input type="text"
                                   class="form-control"
                                   id="house_number" name="house_number"
                                   value="{{ $supplier->house_number }}">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="zipcode" class="col-12 col-lg-2 col-form-label">Postleitzahl</label>
                        <div class="col-12 col-lg-10">
                            <input type="text"
                                   class="form-control"
                                   id="zipcode" name="zipcode"
                                   value="{{ $supplier->zipcode }}">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="place" class="col-12 col-lg-2 col-form-label">Ort</label>
                        <div class="col-12 col-lg-10">
                            <input type="text"
                                   class="form-control"
                                   id="place" name="place"
                                   value="{{ $supplier->place }}">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="country" class="col-12 col-lg-2 col-form-label">Land</label>
                        <div class="col-12 col-lg-10">
                            <input type="text"
                                   class="form-control"
                                   id="country" name="country"
                                   value="{{ $supplier->country }}">
                        </div>
                    </div>
                </div>
            </div>
        </form>

        {{--Kontakte--}}
        @if (isset($supplier->id))

            <div class="row no-gutters listHeader mt-5">
                <div class="col-12">Kontakte</div>
            </div>

            <div class="row">
                <div class="col-12 col-lg-12">

                    <div class="row mt-2">
                        <div class="col-12">
                            <div class="form-group">
                                <div class="customerVariablesList mt-2">
                                    <div class="row customerListControls">
                                        <div class="col-10 d-flex justify-content-start align-items-center">
                                            <i class="fal fa-info-circle mr-1"></i> Hier pflegen Sie Kontakte und steuern den Zugriff auf das Dateimanagement-System.
                                        </div>
                                        <div class="col-2 text-right">
                                            <label for="plusButton" title="User hinzufügen"
                                                   id="createNewSupplierUser" data-supplier_id="{{$supplier->id}}">
                                                <i class="fas fa-plus-circle"></i></label>
                                        </div>
                                    </div>
                                    <div class="userList">
                                        @foreach($supplier->users as $user)
                                            <div class="userItem"
                                                 data-item-id="{{$user->id}}"
                                                 data-item-supplier_id="{{$user->supplier_id}}"
                                                 data-item-title="{{$user->title}}"
                                                 data-item-lastname="{{$user->lastname}}"
                                                 data-item-firstname="{{$user->firstname}}"
                                                 data-item-email="{{$user->email}}"
                                                 data-item-telephone_number="{{$user->telephone_number}}"
                                                 data-item-fax_number="{{$user->fax_number}}"
                                                 data-item-active="{{$user->active}}"
                                            >
                                                {{ $user->lastname }} {{ $user->firstname }}
                                                <div class="actions">
                                                    <i data-action="editUser" class="fas fa-pencil hasAction" title="Bearbeiten"></i>
                                                    <i data-action="deleteUser" class="fas fa-trash hasAction" title="Löschen"></i>
                                                    <i class="fas fa-sign-in {{ $user->active == '1' ? "isActive" : "isNotActive"}}" title="{{ $user->active == '1' ? "Aktiv" : "Inaktiv"}}"></i>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{--User Add and Edit Modal Form--}}
                    <div class="user-modal-form d-none">
                        <div class="container">
                            <div class="form-group row">
                                <label for="title" class="col-12 col-lg-4 col-form-label">Anrede / Titel</label>
                                <div class="col-12 col-lg-8">
                                    <select class="form-control" name="title" id="title">
                                        @foreach($titleList as $titleLabel => $titleValue)
                                            <option value="{{ $titleValue }}">{{ $titleLabel }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="name" class="col-12 col-lg-4 col-form-label">Name</label>
                                <div class="col-12 col-lg-8">
                                    <input type="text"
                                           class="form-control"
                                           id="lastname" name="lastname"
                                           value="">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="firstname" class="col-12 col-lg-4 col-form-label">Vorname</label>
                                <div class="col-12 col-lg-8">
                                    <input type="text"
                                           class="form-control"
                                           id="firstname" name="firstname"
                                           value="">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="email" class="col-12 col-lg-4 col-form-label">E-Mail-Adresse</label>
                                <div class="col-12 col-lg-8">
                                    <input type="text"
                                           class="form-control"
                                           id="email" name="email"
                                           value="">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="telephone_number" class="col-12 col-lg-4 col-form-label">Telefonnummer</label>
                                <div class="col-12 col-lg-8">
                                    <input type="text"
                                           class="form-control"
                                           id="telephone_number" name="telephone_number"
                                           value="">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="fax_number" class="col-12 col-lg-4 col-form-label">Faxnummer</label>
                                <div class="col-12 col-lg-8">
                                    <input type="text"
                                           class="form-control"
                                           id="fax_number" name="fax_number"
                                           value="">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="user_active" class="col-12 col-lg-4 col-form-label">Aktiv</label>
                                <div class="col-12 col-lg-8">
                                    <input type="checkbox"
                                           class="form-control"
                                           id="user_active" name="user_active"
                                           value="1">
                                </div>
                            </div>

                            <input type="hidden" name="user_id" value=""/>
                            <input type="hidden" name="supplier_id" value=""/>

                        </div>
                        <footer>
                            <div class="form-group row align-items-center">
                                <div class="col-6 text-left">
                                    <button type="button" id="closeListEditorButton" class="btn btn-secondary">
                                        Abbrechen
                                    </button>
                                </div>
                                <div class="col-6 text-right">
                                    <button type="submit" form="saveSupplierUser" id="saveSupplierUser" class="btn btn-primary">
                                        Speichern
                                    </button>
                                </div>
                            </div>
                        </footer>

                    </div>

                </div>
            </div>
        @endif


    </main>

    @include('layouts.overlay')

<script>

    // Neuen Auftraggeber anlegen
    jQuery("#createNewSupplierCriterium," +
        " .supplierVariableItem i[data-action='editNode']," +
        " .supplierVariableItem i[data-action='addNode']," +
        " .supplierVariableItem i[data-action='deleteNode']").click(function () {
        showLoadingSpinner();

        var criteriumId = 0;
        if(jQuery(this).is("i")){
            criteriumId = jQuery(this).parents("div.actions").data("item-criteriumid");
        }
        var action = "editNode";
        if((jQuery(this).is("i") && jQuery(this).data("action") == "addNode") || jQuery(this).is("label"))
        {
            action = "addNode";
        }
        else if(jQuery(this).is("i") && jQuery(this).data("action") == "deleteNode")
        {
            action = "deleteNode";
        }

        var data = {};
        data["action"] = action;
        data["criteriumId"] = criteriumId;

        var url = '/supplier/{{$supplier->id}}/criterium/';
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            type: 'get',
            url: url,
            data: data,
            dataType: 'json',
            success: function (data) {
                if (data.response == "success") {
                    if(action == "deleteNode")
                    {
                        location.reload();
                    }
                    else
                    {
                        jQuery("#loadingSpinner").hide();
                        jQuery("#editorContent").html(data.editorHTML);
                        jQuery("#listEditor").addClass("windowNarrow");
                        jQuery("#listEditor").fadeIn();
                    }
                }
                else{
                    showModalBox("Es ist ein Fehler aufgetreten.", data.message);
                    hideLoadingSpinner();
                }
            }
        });
    });

    jQuery(document).ready(function () {
        // Daten asynchron über Ajax speichern
        jQuery("button[type=button][form=editSupplier]").click(function () {

            // Eingabe validieren
            if (!jQuery("form#editSupplier").valid()) {
                showModalBox("Validierungsfehler", "Bitte Eingaben überprüfen.");
                return;
            }

            var url = "/supplier/{{ $route }}";
            var data = {};

            data["supplier_id"] = jQuery("input[name='supplier_id']").val();
            data["client_id"] = jQuery("input[name='client_id']").val();
            data["matchcode"] = jQuery("input[name='matchcode']").val();
            data["additional"] = jQuery("input[name='additional']").val();
            data["contact"] = jQuery("input[name='contact']").val();
            data["company"] = jQuery("input[name='company']").val();
            data["title"] = jQuery("select[name='title']").val();
            data["name"] = jQuery("input[name='name']").val();
            data["firstname"] = jQuery("input[name='firstname']").val();
            data["street"] = jQuery("input[name='street']").val();
            data["house_number"] = jQuery("input[name='house_number']").val();
            data["zipcode"] = jQuery("input[name='zipcode']").val();
            data["place"] = jQuery("input[name='place']").val();
            data["country"] = jQuery("input[name='country']").val();
            data["telephone_number"] = jQuery("input[name='telephone_number']").val();
            data["fax_number"] = jQuery("input[name='fax_number']").val();
            data["email"] = jQuery("input[name='email']").val();
            data["pricegroup"] = jQuery("select[name='pricegroup']").val();
            data["supplier_number"] = jQuery("input[name='supplier_number']").val();

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

            $.ajax({
                type: 'post',
                url: url,
                data: data,
                dataType: 'json',
                success: function (data) {

                    if (data.response == "success") {
                        jQuery("#closeListEditor").trigger("click");

                        // Wenn die Funktion beim Auftrag anlegen aufgerufen wird, Auftraggeber als Option zur Liste hinzufügen
                        // und vorauswählen
                        if (jQuery("form#createProject").length || jQuery("form#editProject").length) {

                            if(data.newSupplier.place != null)
                                data.newSupplier.place = ', ' + data.newSupplier.place;
                            else
                                data.newSupplier.place = '';

                            let newSupplierListItem = '<div class="supplierItem searchItem" data-search-for="' + data.newSupplier.company + '">\n' +
                                '                                    <label class="radio">' + data.newSupplier.company + data.newSupplier.place + '<br>\n' +
                                '                                        <input type="radio" name="supplier_id" value="' + data.newSupplier.id + '"/>\n' +
                                '                                        <div class="indicator"></div>\n' +
                                '                                    </label>\n' +
                                '                                </div>';

                            jQuery("div#supplierList").prepend(newSupplierListItem);

                            // Alle abwählen
                            jQuery("input[name='supplier_id']").prop("checked", "");

                            // Hinzugefügtes wählen
                            jQuery("input[name='supplier_id'][value='" + data.newSupplier.id + "']").click();
                        }

                        // Wenn die Funktion innerhalb einer Auftragsliste aufgerufen wird, muss nur der Auftraggebername und der Ort
                        // aktualisiert werden
                        else if (jQuery("div.ordersList").length > 0) {
                            showModalBox("Speichern erfolgreich", "Daten des Auftraggebers " + jQuery("input[name='company']").val() + " gespeichert.");
                            jQuery("a.showSupplier[data-supplierid=" + jQuery("input[name='supplier_id']").val() + "]")
                                .text(jQuery("input[name='company']").val() + " " + jQuery("input[name='place']").val());
                        }

                        else {
                            console.log(data);
                            showLoadingSpinner();
                            // showModalBox("Speichern erfolgreich", "Daten des Auftraggebers " + jQuery("input[name='company']").val() + " gespeichert.");
                            jQuery("#modalBox").data("reload", "true");
                            if (data.newSupplier !== undefined) {
                                window.location.href = '/supplier/' + data.newSupplier.id;
                            } else {
                                location.reload();
                            }
                        }
                    }
                    else {
                        showModalBox("Es ist ein Fehler aufgetreten.", data.message);
                        showOverlayAlert(data.message);
                    }
                },
                error: function (data) {
                    //console.log(data);
                    showModalBox("Es ist ein Fehler aufgetreten.", "");
                    showOverlayAlert(data.message);
                }
            });
        });
    });


    // Neuen User anlegen
    jQuery("#createNewSupplierUser," +
        " .userItem i[data-action='editUser']," +
        " .userItem i[data-action='deleteUser']").click(function () {

        showLoadingSpinner();

        var userId = -1;
        var parentUserItem = null;
        if(jQuery(this).prop("id") == "createNewSupplierUser")
        {
            action = "addUser";
        }
        else
        {
            parentUserItem = jQuery(this).parents("div.userItem");
            userId = jQuery(this).parents("div.userItem").data("item-id");
            if(jQuery(this).data("action") == "editUser")
            {
                action = "editUser";
            }
            else if(jQuery(this).data("action") == "deleteUser")
            {
                action = "deleteUser";
            }
        }

        if(action == "deleteUser")
        {
            var url = "/supplieruser/deactivate";
            var data = {};
            data["userId"] = userId;
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                type: 'get',
                url: url,
                data: data,
                dataType: 'json',
                success: function (data) {

                    if (data.response == "success") {
                        //jQuery("#closeListEditor").trigger("click");
                        location.reload();
                    }
                    else {
                        showModalBox("Es ist ein Fehler aufgetreten.", data.message);
                        showOverlayAlert(data.message);
                    }
                },
                error: function (data) {
                    //console.log(data);
                    showModalBox("Es ist ein Fehler aufgetreten.", "");
                    showOverlayAlert(data.message);
                }
            });
        }
        else if(action == "editUser")
        {
            var modalForm = jQuery(".user-modal-form").html();

            jQuery("#loadingSpinner").hide();
            jQuery("#editorContent").html(modalForm);
            // Modal nachbereiten
            jQuery("#editorContent input[name=user_id]").val(jQuery(parentUserItem).data("item-id"));
            jQuery("#editorContent input[name=supplier_id]").val(jQuery(parentUserItem).data("item-supplier_id"));
            jQuery("#editorContent input[name=lastname]").val(jQuery(parentUserItem).data("item-lastname"));
            jQuery("#editorContent input[name=firstname]").val(jQuery(parentUserItem).data("item-firstname"));
            jQuery("#editorContent input[name=email]").val(jQuery(parentUserItem).data("item-email"));
            jQuery("#editorContent input[name=telephone_number]").val(jQuery(parentUserItem).data("item-telephone_number"));
            jQuery("#editorContent input[name=fax_number]").val(jQuery(parentUserItem).data("item-fax_number"));
            // Anrede
            if(jQuery(parentUserItem).data("item-title") == "Herr")
            {
                jQuery("#editorContent select[name=title]").val("Herr");
            }
            else if(jQuery(parentUserItem).data("item-title") == "Frau")
            {
                jQuery("#editorContent select[name=title]").val("Frau");
            }
            else{
                jQuery("#editorContent select[name=title]").prop("selectedIndex", 0);
            }
            // Active
            if(jQuery(parentUserItem).data("item-active") == "1")
            {
                jQuery("#editorContent input[name=user_active]").prop("checked", true);
            }
            else{
                jQuery("#editorContent input[name=user_active]").prop("checked", false);
            }

            jQuery("#listEditor").addClass("windowNarrow");
            jQuery("#listEditor").fadeIn();
        }
        else if(action == "addUser"){
            var modalForm = jQuery(".user-modal-form").html();
            jQuery("#loadingSpinner").hide();
            jQuery("#editorContent").html(modalForm);

            // Modal nachbereiten
            jQuery("#editorContent input[name=user_id]").val(-1);
            jQuery("#editorContent input[name=supplier_id]").val(jQuery("#createNewSupplierUser").data("supplier_id"));

            jQuery("#listEditor").addClass("windowNarrow");
            jQuery("#listEditor").fadeIn();
        }
    });

    function isEmail(email) {
        var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        return regex.test(email);
    }

    // User anlegen / editieren
    jQuery(document).on("click", "button[type=submit][form=saveSupplierUser]", function() {

        // Eingabe validieren
        if(jQuery.trim(jQuery("#editorContent input[name=lastname]").val()) == "")
        {
            jQuery("#editorContent input[name=lastname]").focus();
            showModalBox("Validierungsfehler", "Bitte Nachnamen eingeben.");
            return;
        }
        else if(jQuery.trim(jQuery("#editorContent input[name=firstname]").val()) == "")
        {
            jQuery("#editorContent input[name=firstname]").focus();
            showModalBox("Validierungsfehler", "Bitte Vornamen eingeben.");
            return;
        }
        else if(jQuery.trim(jQuery("#editorContent input[name=email]").val()) == "" || !isEmail(jQuery("#editorContent input[name=email]").val()))
        {
            jQuery("#editorContent input[name=email]").focus();
            showModalBox("Validierungsfehler", "Bitte valide E-Mail eingeben.");
            return;
        }

        var userId = jQuery("#editorContent input[name=user_id]").val();
        if(userId == -1)
        {
            // Neuanlage
            var url = "/supplieruser/create";
        }
        else{
            // Update
            var url = "/supplieruser/update";
        }

        var data = {};
        data["userId"] = userId;
        data["supplierId"] = jQuery("#editorContent input[name=supplier_id]").val();
        data["lastname"] = jQuery("#editorContent input[name=lastname]").val();
        data["firstname"] = jQuery("#editorContent input[name=firstname]").val();
        data["email"] = jQuery("#editorContent input[name=email]").val();
        data["telephone_number"] = jQuery("#editorContent input[name=telephone_number]").val();
        data["fax_number"] = jQuery("#editorContent input[name=fax_number]").val();
        // Anrede
        data["title"] = jQuery("#editorContent select[name=title]").val();
        // Aktiv
        data["active"] = jQuery("#editorContent input[name=user_active]").prop("checked") ? "1" : "0";

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

        $.ajax({
            type: 'get',
            url: url,
            data: data,
            dataType: 'json',
            success: function (data) {

                if (data.response == "success") {
                    //jQuery("#closeListEditor").trigger("click");
                    location.reload();
                }
                else {
                    showModalBox("Es ist ein Fehler aufgetreten.", data.message);
                    showOverlayAlert(data.message);
                }
            },
            error: function (data) {
                //console.log(data);
                showModalBox("Es ist ein Fehler aufgetreten.", "");
                showOverlayAlert(data.message);
            }
        });
    });

</script>


{{--    Der JSValidator muss hier extra eingebaut werden, da Template asynchron geholt wird und der Code im Header-Bereich
        nicht generiert wird --}}
@if(isset($validator))
    <script type="text/javascript" src="{{ asset('vendor/jsvalidation/js/jsvalidation.js')}}"></script>
    @if (is_array($validator))
        @foreach($validator as $vali)
            {!! $vali !!}
        @endforeach
    @else
        {!! $validator !!}
    @endif
@endif
@endsection