@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>
        div[title]{
            border-color: red;
            border-width: 2px;
        }
    </style>
    <h1>Veranstaltung bearbeiten</h1>
    <a href="/printSeatMap/{{$event->id}}" class="btn btn-primary" target="_blank" >Sitzplan drucken</a>
    <a href="/printSeatMap/{{$event->id}}/new" class="btn btn-primary" target="_blank" >Gesamte Liste</a>
    {!! Form::model($event,['method' => 'PATCH','route'=>['events.update',$event->id], 'files' => true, 'id' => 'form']) !!}
    <div class="form-group">
	<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('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::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, $selReservation, array('disabled')) !!}<br /><br />

        {!! Form::label('pinned', 'Top:') !!}
        {!! Form::checkbox('pinned', null) !!}<br /><br />


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

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

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


	<h2>Ermäßigungen</h2>
	@if($event->payableWithCultureCard)
		Das Event kann mit der Kulturkarte bezahlt werden.
		@else
		Das Event kann NICHT mit der Kulturkarte bezahlt werden.
	@endif


        <table>
            @foreach($concessions as $concession)
                <tr>
                    <td>{{$concession->name}}</td>
                    <td>{{$concession->perc}} %</td>
                </tr>
            @endforeach
        </table>



        <div class="row">
            <div class="small-12 medium-4 columns">
                {!! 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"=>".", "disabled"=>"disabled"]) !!}
            </div>
            <div class="small-12 medium-4 columns">
                {!! 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"=>".", "disabled"=>"disabled"]) !!}
            </div>
            <div class="small-12 medium-4 columns">
                {!! 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"=>".", "disabled" => "disabled"]) !!}
            </div>
        </div>

	@if($event["amountSeats"] > 0)
		<div class="row">
		    <div class="small-12 columns">
			   {!! Form::number('amountSeats',$event["amountSeats"],['min'=>$event["amountSeats"]]) !!}
		    </div>
		</div>
	@endif


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

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

    <div class="form-group">
        {!! Form::submit('Update', ['class' => 'btn btn-primary', 'id' => 'update_event_submit']) !!}
    </div>
    {!! Form::close() !!}
    <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 id="dialog_col" title="Spalte Kategorie zuweiesn" style="display:none;">
        <p>
            <input id="seatmap_col"/><br/>
            <button onclick="$(this).setCol('a');">A</button>
            <br/>
            <button onclick="$(this).setCol('b');">B</button>
            <br/>
            <button onclick="$(this).setCol('c');">C</button>
            <br/>
            <button onclick="$(this).setCol('nv');">Nicht verkäuflich</button>
        </p>
    </div>


    {{ Html::script('ckeditor/ckeditor.js') }}
    <script>
        CKEDITOR.replace( 'article-ckeditor' );
    </script>
@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>
<?php use App\SingleSeatsUser; ?>
        var selectedSeats=new Array(27);
        for (i=0; i <selectedSeats.length; i++){
            selectedSeats[i]=new Array(27)
        }
        var seat;

	$(document).ready(function() {

            var tableSeats = new Array(53);
	    var price = 0;
	                    <?php echo 'var tablex = ', js_array(explode("\n", $seatMap)), ';';?>
                tablex = tablex.reverse();
	    tablex.shift();
	    if (tablex[0].length <= 6){
		    for (var i = 0; i < tableSeats.length; i++) {
			tableSeats[i] = "";
			for (var j = 0; j <6; j++) {
			    tableSeats[i] = tableSeats[i] + "" + tablex[i][j];
			}
		    }
		    var tc = $('#table-map').seatCharts({
			map: tableSeats,
			seats: {
			    a: {
				price: 1,
				classes: 'a-cat' //your custom CSS class
			    },
			    z: {
				classes: 'bought-cat'
			    }
			}
		    });
	    }


<?php
                    foreach($tickets as $ticket){
                            if(SingleSeatsUser::where('single_seat_id', $ticket->id)->first() != null){
				    $user = SingleSeatsUser::where('single_seat_id', $ticket->id)->first()->user()->withTrashed()->first();
				    echo 'if(tablex[0].length <= 6){ tc.get(["'.$ticket->x.'_'.$ticket->y.'"]).node().attr("title","'.$user->firstname.' '.$user->lastname.'");}';
                            }
		    }
                    ?>


            $( "#start_date" ).datepicker({ dateFormat: 'yy-mm-dd' });
            $( "#end_date" ).datepicker({ dateFormat: 'yy-mm-dd' });
            $( "#dialog" ).dialog({autoOpen: false});
            // $( "#dialog_row" ).dialog({autoOpen: false});
            $('#price_cat_a').autoNumeric('init');
            $('#price_cat_b').autoNumeric('init');
            $('#price_cat_c').autoNumeric('init');


            <?php
            function js_str($s)
            {
                return '"' . addcslashes($s, "\0..\37\"\\") . '"';
            }

            function js_array($array)
            {
                $temp = array_map('js_str', $array);
                return '[' . implode(',', $temp) . ']';
            }?>
            <?php echo 'var x = ', js_array(explode("\n", $seatMap)), ';';?>
                var init_seatmap = [
                '____________________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'
            ];
            for(var i=x.length; i<=init_seatmap.length; i++){
                x[i] = '';
            }
            x = x.reverse();
            // init_seatmap  =init_seatmap.reverse();
            x.shift();

            for(var i=0; i<init_seatmap.length; i++){
                for(var j=0; j<init_seatmap[i].length; j++){
                    var tmpI =  i;
                    if((x[tmpI].charAt(j)==='_' || x[tmpI].charAt(j) === '') && init_seatmap[tmpI].charAt(j) === 'u'){
                        x[tmpI] = x[tmpI].substr(0, j) + 'u' + x[tmpI].substr(j+1);
                    }else if(init_seatmap[tmpI].charAt(j) === '_' && (x[tmpI].charAt(j)==='_' || x[tmpI].charAt(j) === '') ){
                        x[tmpI] = x[tmpI].substr(0, j) + '_' + x[tmpI].substr(j+1);
                    }
                }
            }
            // x.pop(); //remove last empty element


            var sc = $('#seat-map').seatCharts({
                map: x,
                seats: {
                    a: {
                        price   : 99.99,
                        classes : 'cat-a'
                    },
                    b: {
                        price   : 99.99,
                        classes : 'cat-b'
                    },
                    c: {
                        price   : 99.99,
                        classes : 'cat-c'
                    }
                },
                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 {
                        return this.style();
                    }
                },
                naming: {
                    rows: ['23','22','21','20','19','18','17','16','15','14','13','12','11','10','9','8','7','6','5','4','3','2','1'],
                },
            });

            $.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];
                        console.log(seat);
                        setSeat(category);
                    }
                });
                $( "#dialog_row" ).dialog("close");
            };

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

	});



            setTimeout(
                function() {
                    <?php
                    foreach($tickets as $ticket){
                            if(SingleSeatsUser::where('single_seat_id', $ticket->id)->first() != null){
                                $user = SingleSeatsUser::where('single_seat_id', $ticket->id)->first()->user()->withTrashed()->first();
                                echo '$("#'.$ticket->x.'_'.$ticket->y.'").attr("title", "'.$user->firstname.' '.$user->lastname.'");';
                            }
                        }
                    ?>
                }, 2000);

        $("#dialog").dialog();
        $("#dialog").dialog("close");
        function setSeat(category){
            x = seat.settings.column;
            y = seat.settings.row;
            y = 22 - y;
            selectedSeats[x][y] = category;
            seat.settings.character = category;
            $(seat.node()[0]).removeClass("choose").removeClass("cat-a").removeClass("cat-b").removeClass("cat-c");
            if(category !== "nv") $(seat.node()[0]).addClass("cat-"+category);
            if($('#dialog').dialog('isOpen'))
                $( "#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' && (selectedSeats[j][i] =='a' || selectedSeats[j][i]=='b' || selectedSeats[j][i]=='c')) {
                        ret += selectedSeats[j][i];
                    }else {
                        ret += "_"
                    }
                }
                ret+="\n";
            }
            // var splitted = ret.split("\n");
            // splitted = splitted.reverse();
            // ret = "";
            // for (var i=0; i <splitted.length; i++){
            //     ret += splitted[i]+"\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();
        }
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            }
        })

        // $("#form").on('submit', function (e) {
        //     //ajax call here
        //     applyCrop();
        //     var blob = dataURLtoBlob(canvas.toDataURL('image/png'));
        //     var formData = new FormData(document.getElementById("form"));
        //     formData.append("cropped_image", blob);;
        //
        //     //stop form submission
        //     e.preventDefault();
        // });


        $("#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("image", blob);
            formData.append("_method", 'POST');

            $.ajax({
                url: "/admin/updateevent/{{$event->id}}",
                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