@extends('layout')

@section('content')
    <link href="{{ asset('css/jquery.seat-charts.css') }}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link href="{{ asset('css/custom.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('jcrop/css/jquery.Jcrop.css') }}" rel="stylesheet" type="text/css">
    <style>
        .loader {
            font-size: 10px;
            margin: 50px auto;
            text-indent: -9999em;
            width: 11em;
            height: 11em;
            border-radius: 50%;
            background: #ffffff;
            background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
            background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
            background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
            background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
            background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
            position: relative;
            -webkit-animation: load3 1.4s infinite linear;
            animation: load3 1.4s infinite linear;
            -webkit-transform: translateZ(0);
            -ms-transform: translateZ(0);
            transform: translateZ(0);
        }
        .loader:before {
            width: 50%;
            height: 50%;
            background: #ffffff;
            border-radius: 100% 0 0 0;
            position: absolute;
            top: 0;
            left: 0;
            content: '';
        }
        .loader:after {
            background: #0dc5c1;
            width: 75%;
            height: 75%;
            border-radius: 50%;
            content: '';
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }
        @-webkit-keyframes load3 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @keyframes load3 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

    </style>
    <div id="allEventCreate">
        <h1>Veranstaltung hinzufügen</h1>
	{!! Form::open(['url' => 'admin/events', 'files' => true, 'id' => 'form']) !!}
 <br />
	{!! Form::label('hide_externally', 'Veranstaltung verstecken') !!}
        {!! Form::checkbox('hide_externally', null) !!}<br /><br />

        {!! Form::label('title', 'Titel:') !!}
        {!! Form::text('title',null,['class'=>'form-control', 'required' => 'required']) !!}<br/><br/>

        {!! Form::label('image', 'Bild:') !!}
        {!! Form::file('image', null) !!}<br/><br/>
        <div id="views"></div>

        {!! Form::label('start_date', 'Startdatum:') !!}
        {!! Form::text('start_date',null,['class'=>'form-control', 'required' => 'required']) !!}<br/><br/>

        {!! Form::label('end_date', 'Enddatum:') !!}
        {!! Form::text('end_date',null,['class'=>'form-control']) !!}<br/><br/>

        {!! Form::label('starttime', 'Zeit:') !!}
        {!! Form::time('starttime',null,['class'=>'form-control', 'required' => 'required']) !!}<br/><br/>

        {!! Form::label('room', 'Raum:') !!}
        {!! Form::text('room',null,['class'=>'form-control', 'required' => 'required']) !!}<br/><br/>

        {!! Form::checkbox('lions') !!}
        {!! Form::label('lions', 'Lions-Event') !!}<br/><br/>

        {!! Form::label('shorttext', 'Kurze Beschreibung:') !!}
        {!! Form::text('shorttext',null,['class'=>'form-control', "maxlength" => "100", 'required' => 'required']) !!}<br/><br/>


        {!! Form::label('reservation_id', 'Reservation Typ:') !!}
        {!! Form::select('reservation_id',$reservations) !!}<br/><br/>

        <select id="seattemplate" onchange="$(this).setTemplate(this.value);">
            @foreach($seattemplates as $seattemplate)
                <option value="{{$seattemplate->map}}">{{$seattemplate->name}}</option>
            @endforeach
        </select>

        <div id="amountSeatsDiv">
            {!! Form::label('amountSeats', 'Anzahl der Sitzplätze') !!}
            {!! Form::number('amountSeats', '0') !!}
        </div>

        <input type="hidden" name="seatMap" id="hiddenSeatMap" value="">

        <div id="seat-map"></div>

        <span id="set-row" onclick='$("#dialog_row").dialog();'>Reihe zuweisen</span>

        <div class="row" id="prices">
            <div class="small-12 medium-4 columns" id="price-yellow">
                {!! Form::label('price_cat_a', 'Preis Kategorie A:') !!}
                {!! Form::text('price_cat_a',null,['class'=>'form-control', 'data-a-sign'=>"€ ", "data-a-dec"=>",", "data-a-sep"=>"."]) !!}
            </div>
            <div class="small-12 medium-4 columns" id="price-blue">
                {!! Form::label('price_cat_b', 'Preis Kategorie B:') !!}
                {!! Form::text('price_cat_b',null,['class'=>'form-control', 'data-a-sign'=>"€ ", "data-a-dec"=>",", "data-a-sep"=>"."]) !!}
            </div>
            <div class="small-12 medium-4 columns" id="price-red">
                {!! Form::label('price_cat_c', 'Preis Kategorie C:') !!}
                {!! Form::text('price_cat_c',null,['class'=>'form-control', 'data-a-sign'=>"€ ", "data-a-dec"=>",", "data-a-sep"=>"."]) !!}
            </div>
        </div>

        <div id="payableCulturecard">
            {!! Form::checkbox('payableWithCulturecard') !!}
            {!! Form::label('payableWithCulturecard', 'Bezahlbar mit der Kulturkarte') !!}
        </div>

        <div id="concession_div">
            <h2>Ermäßigungen</h2>
            @foreach($concessions as $concession)
                <div class="row" id="concession_{{$concession->id}}">
                    <div class="col-sm-3">
                        {{$concession->name}}
                    </div>
                    <div class="col-sm-1">
                        @if($concession->name != "Vollpreis")
                            <span onclick="$('#concession_{{$concession->id}}').remove();">(löschen)</span>
                        @endif
                    </div>
                    <div class="col-sm-2">
                        {{Form::hidden("concessionNames[]", $concession->name)}}
                        <div class="ui input">
                            @if($concession->fixed == 1)
                                {{ Form::number("concessionPercs[]", $concession->perc, ['readonly' => 'readonly']) }}
                            @else
                                {{ Form::number("concessionPercs[]", $concession->perc)}}
                            @endif
                        </div>
                    </div>
                    <div class="col-sm-5"></div>
                </div>
            @endforeach
        </div>

        {!! Form::label('text', 'Zusatzinfos:') !!}
        {!! Form::textarea('text'," ",['class'=>'form-control', 'id'=>'article-ckeditor', 'required' => 'required']) !!}

        {!! Form::label('cat', 'Kategorie:') !!}<br/>
        @foreach($cats as $cat)
            {{ Form::checkbox("cat[]", $cat->id, false) }}
            {{$cat->name}}<br/>
        @endforeach



        {!! Form::submit('Speichern', ['class' => 'btn btn-primary form-control', 'onclick' => '$(#seattemplate).disable()']) !!}

        {!! Form::close() !!}

        {{ Html::script('ckeditor/ckeditor.js') }}
        <script>
            var ckeditor = CKEDITOR.replace('article-ckeditor');
        </script>
        <div id="dialog" title="Kategorie">
            <p>
                <button onclick="setSeat('a');">A</button>
                <br/>
                <button onclick="setSeat('b');">B</button>
                <br/>
                <button onclick="setSeat('c');">C</button>
                <br/>
                <button onclick="setSeat('nv');">Nicht verkäuflich</button>
            </p>
        </div>


        <div id="dialog_row" title="Reihe Kategorie zuweiesn" style="display:none;">
            <p>
                <input id="seatmap_row"/><br/>
                <button onclick="$(this).setRow('a');">A</button>
                <br/>
                <button onclick="$(this).setRow('b');">B</button>
                <br/>
                <button onclick="$(this).setRow('c');">C</button>
                <br/>
                <button onclick="$(this).setRow('nv');">Nicht verkäuflich</button>
            </p>
        </div>
    </div>
    <div id="loader" class="loader">Loading...</div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
@endsection

@section('scripts')
    <script src="{{ URL::asset('jcrop/js/jquery.min.js') }}"></script>
    <script src="{{ URL::asset('jcrop/js/jquery.Jcrop.min.js') }}"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="{{ URL::asset('js/jquery.seat-charts.min.js') }}"></script>
    <script src="{{ URL::asset('res/admin/events.js') }}"></script>
    <script src="{{ URL::asset('js/autoNumeric.js') }}"></script>
    <script>
        var selectedSeats = new Array(27);
        for (i = 0; i < selectedSeats.length; i++) {
            selectedSeats[i] = new Array(27)
        }
        var seat;
        $(document).ready(function () {
            $("#start_date").datepicker({dateFormat: 'yy-mm-dd'});
            $("#end_date").datepicker({dateFormat: 'yy-mm-dd'});


            $("#dialog").dialog({autoOpen: false});
            $('#price_cat_a').autoNumeric('init');
            $('#price_cat_b').autoNumeric('init');
            $('#price_cat_c').autoNumeric('init');

            x = [
                '____________________uuuuuuu',
                '______________uuuu__uuuuuuu',
                '__________uuuuuuuu__uuuuuuu',
                '______uuuuuuuuuuuu__uuuuuuu',
                '___uuuuuuuuuuuuuuu__uuuuuuu',
                '____uuuuuuuuuuuuuu__uuuuuuu',
                '_',
                '_',
                '_',
                '______________uuuuuuuuuuuuu',
                '________uuuuu_uuuuuuuuuuuuu',
                '______uuuuuuu_uuuuuuuuuuuuu',
                '____uuuuuuuuu_uuuuuuuuuuuuu',
                '__uuuuuuuuuuu_uuuuuuuuuuuuu',
                'uuuuuuuuuuuuu_uuuuuuuuuuuuu',
                'uuuuuuuuuuuuu_uuuuuuuuuuuuu',
                '__________________________',
                'uuuuuuuuuuuuu_uuuuuuuuuuuuu',
                'uuuuuuuuuuuuu_uuuuuuuuuuuuu',
                'uuuuuuuuuuuuu_uuuuuuuuuuuuu',
                'uuuuuuuuuuuuu_uuuuuuuuuuuuu',
                'uuuuuuuuuuuuu_uuuuuuuuuuuuu',
                'uuuuuuuuuuuuu_uuuuuuuuuuuuu'
            ];
            var sc = $('#seat-map').seatCharts({
                map: x,
                seats: {
                    x: {
                        price: 99.99,
                        classes: 'cat-a'
                    },
                    u: {
                        price: 99.99,
                        classes: 'choose'
                    }

                },
                naming: {
                    top: false,
                    getLabel: function (character, row, column) {
                        return "";
                    },
                    rows: ['23', '22', '21', '20', '19', '18', '17', '16', '15', '14', '13', '12', '11', '10', '9', '8', '7', '6', '5', '4', '3', '2', '1'],
                },
                click: function () {
                    if (this.status() == 'available') {
                        seat = this;
                        $("#dialog").dialog("open");
                        return 'available';
                    } else if (this.status() == 'selected') {
                        selectedSeats.splice(selectedSeats.indexOf(this.node()[0].id), 1);
                        return 'available';
                    } else {
                        setSeat
                        return this.style();
                    }
                }
            });

            $.fn.setRow = function (category) {

                var row = $("#seatmap_row").val();
                row.split(",").forEach(function (item) {
                    var regex = new RegExp("^" + item + "_[0-9]+");
                    var seats = sc.find(regex).seats;
                    for (var i = 0; i < seats.length; i++) {
                        seat = seats[i];
                        setSeat(category);
                    }
                });
                $("#dialog_row").dialog("close");
            };

            $.fn.setTemplate = function (map) {
                map = map.split("\\n");
                for (var i = 1; i <= map.length; i++) {
                    var row = map[24 - i - 1];
                    console.log("");
                    for (var j = 1; j <= row.length; j++) {
                        var seats = sc.get([i + '_' + j]);
                        if (seats.seats.length > 0) {
                            var seat = seats.seats[0];
                            var cat = map[24 - i - 1][j - 1];
                            var old_cat = seat.settings.character;
                            seat.settings.character = cat;
                            selectedSeats[j - 1][i - 1] = cat;
                            if (cat === '_') {
                                $(seat.node()[0]).removeClass("cat-" + old_cat).addClass("choose");
                            } else {
                                $(seat.node()[0]).removeClass("cat-" + old_cat).removeClass("choose").addClass("cat-" + cat);
                            }
                        }
                    }
                    setSeatMap();
                }


            };


        });

        function setSeat(category) {
            console.log(category === "nv");
            x = seat.settings.column;
            y = seat.settings.row;
            y = 22 - y;
            selectedSeats[x][y] = (category === "nv" ? "_" : category);
            seat.settings.character = (category === "nv" ? "_" : category);
            $(seat.node()[0]).removeClass("choose").removeClass("cat-a").removeClass("cat-b").removeClass("cat-c").addClass("cat-" + category);
            $("#dialog").dialog("close");
            setSeatMap();
        }


        function setSeatMap() {
            var ret = "";
            for (var i = 0; i <= selectedSeats.length - 4; i++) {
                for (var j = 0; j < selectedSeats[i].length; j++) {
                    if (typeof selectedSeats[j][i] == 'string') {
                        ret += selectedSeats[j][i];
                    } else {
                        ret += "_"
                    }
                }
                ret += "\n";
            }
            $("#hiddenSeatMap").val(ret);
        }

        $("#image").change(function () {
            loadImage(this);
        });


        var crop_max_width = 1000;
        var crop_max_height = 1000;
        var jcrop_api;
        var canvas;
        var context;
        var image;

        var prefsize;

        function loadImage(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                canvas = null;
                reader.onload = function (e) {
                    image = new Image();
                    image.onload = validateImage;
                    image.src = e.target.result;
                }
                reader.readAsDataURL(input.files[0]);
            }
        }

        function dataURLtoBlob(dataURL) {
            var BASE64_MARKER = ';base64,';
            if (dataURL.indexOf(BASE64_MARKER) == -1) {
                var parts = dataURL.split(',');
                var contentType = parts[0].split(':')[1];
                var raw = decodeURIComponent(parts[1]);

                return new Blob([raw], {
                    type: contentType
                });
            }
            var parts = dataURL.split(BASE64_MARKER);
            var contentType = parts[0].split(':')[1];
            var raw = window.atob(parts[1]);
            var rawLength = raw.length;
            var uInt8Array = new Uint8Array(rawLength);
            for (var i = 0; i < rawLength; ++i) {
                uInt8Array[i] = raw.charCodeAt(i);
            }

            return new Blob([uInt8Array], {
                type: contentType
            });
        }

        function validateImage() {
            if (canvas != null) {
                image = new Image();
                image.onload = restartJcrop;
                image.src = canvas.toDataURL('image/png');
            } else restartJcrop();
        }

        function restartJcrop() {
            if (jcrop_api != null) {
                jcrop_api.destroy();
            }
            $("#views").empty();
            $("#views").append("<canvas id=\"canvas\">");
            canvas = $("#canvas")[0];
            context = canvas.getContext("2d");
            canvas.width = image.width;
            canvas.height = image.height;
            context.drawImage(image, 0, 0);
            $("#canvas").Jcrop({
                onSelect: selectcanvas,
                onRelease: clearcanvas,
                boxWidth: crop_max_width,
                boxHeight: crop_max_height,
                aspectRatio: 1,
                setSelect: [0, 0, 350, 350]
            }, function () {
                jcrop_api = this;
            });
            clearcanvas();
        }

        function clearcanvas() {
            prefsize = {
                x: 0,
                y: 0,
                w: canvas.width,
                h: canvas.height,
            };
        }

        function selectcanvas(coords) {
            prefsize = {
                x: Math.round(coords.x),
                y: Math.round(coords.y),
                w: Math.round(coords.w),
                h: Math.round(coords.h)
            };
        }

        function applyCrop() {
            canvas.width = prefsize.w;
            canvas.height = prefsize.h;
            context.drawImage(image, prefsize.x, prefsize.y, prefsize.w, prefsize.h, 0, 0, canvas.width, canvas.height);
            validateImage();
        }

        $('#loader').hide();

        $("#form").submit(function (e) {
            applyCrop();
            e.preventDefault();
            var formData = new FormData($(this)[0]);
            var blob = dataURLtoBlob(canvas.toDataURL('image/png'));
            //---Add file blob to the form data
            formData.append("cropped_image", blob);
            formData.append("text", ckeditor.getData());

            $('#loader').show();
            $('#allEventCreate').hide();
            $.ajax({
                url: "/admin/events",
                type: "POST",
                data: formData,
                contentType: false,
                cache: false,
                processData: false,
                success: function (data) {
                    window.location.href = "/admin/events/";
                },
                error: function (data) {
                    console.log("Event konnte nicht erstellt werden. Bitte aus- und einloggen und nochmal probieren.")
                },
                complete: function (data) {
                }
            });
        });

    </script>
@endsection