@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" >
    <h1>Veranstaltung hinzufügen</h1>
    {!! Form::open(['url' => 'admin/seating']) !!}
    {!! Form::label('name', 'Name:') !!}
    {!! Form::text('name',null,['class'=>'form-control']) !!}


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

    <div id="seat-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 />




    {!! Form::submit('Speichern', ['class' => 'btn btn-primary form-control']) !!}

    {!! 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>
@endsection

@section('scripts')
    <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 {
                        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];
                        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");
            };


        });
        function setSeat(category){
            x = seat.settings.column;
            y = seat.settings.row;
            selectedSeats[seat.settings.column][seat.settings.row] = 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 (i=0; i <=selectedSeats.length-4; i++){
                for(j=0;j<selectedSeats[i].length; j++){
                    if(typeof selectedSeats[j][i] == 'string') {
                        ret += selectedSeats[j][i];
                    }else {
                        ret += "_"
                    }
                }
                ret+="\n";
            }
            $("#hiddenSeatMap").val(ret);
        }

    </script>
@endsection