@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="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    <link href="{{ asset('css/custom.css') }}" rel="stylesheet" type="text/css">
    <style>
        .seatCharts-space {
            visibility: hidden;
        }
    </style>
    @if($seat->date=='2020-12-31' or $seat->date=='2021-12-31' or $seat->date=='2023-12-31')
        <div class="ui message">
            <div class="header">
                Silvesterveranstaltung
            </div>
            <p>Bei dieser Silvesterveranstaltung gibt es zwei Arten von Karten: <ol><li>Empore (Sitzplatz)</li><li>Sitzplatz bei Tisch mit Menü (ausverkauft!)</li></ol> Sie können entweder einen Sitzplatz in der Empore auswählen, oder einen Tisch im Erdgeschoss durch Eingabe der Personenanzahl reservieren.</p>
        </div>
    @endif

    <div class="row">
        <div class="col-sm-12">
            <div class="ui ordered steps">
                <div class="active step">
                    <div class="content">
                        <div class="title">Sitzplatz wählen</div>
                        <div class="description">Sitzplatz und Rabatt wählen</div>
                    </div>
                </div>
                @if(!Auth::check())
                    <div class="step">
                        <div class="content">
                            <div class="title">Dateneingabe</div>
                            <div class="description">Login oder Registrierung</div>
                        </div>
                    </div>
                @endif
                <div class="step">
                    <div class="content">
                        <div class="title">Reservierungsbestätigung</div>
                        <div class="description">Ansehen und Reservierung aufgeben!</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br />
    {!! Form::open(['url' => 'book', 'onsubmit="return validateForm()"']) !!}
    <div class="row">
        <div class="col-sm-12 col-lg-8">
            <h1>{{$event->title}} <span style="white-space: nowrap;">({{strftime('%d. %m. %Y', strtotime($seat->date))}})</span></h1>


            <table id="note-entry" style="width:70px; height: 30px; text-align: center;position: absolute;bottom: 175px;left: -50px;" border="1"><tbody><tr><td>Eingang</td></tr></tbody></table>
            <table id='note-empore' style="width:100px; height: 30px; text-align: center;position: absolute;bottom: 310px;left: 200px;" border="1"><tbody><tr><td>Balkon</td></tr></tbody></table>
            <div id="seat-map" style="width: 700px;"></div>
            <table style="width: 300px; margin-left: 83px; text-align:center;margin-top:10px" border="1"><tbody><tr><td>Bühne</td></tr></tbody></table>
            <div class="col-sm-12 " style="text-align: center;max-width: 460px;">
            <br />
                <span style="white-space: nowrap;"><a class="ui red empty circular label" style="background-color: yellow !important;margin-right: 5px;"></a>Kat. 1</span>
                <span style="white-space: nowrap;"><a class="ui red empty circular label" style="background-color: cornflowerblue !important; margin-right: 5px;margin-left:15px;"></a>Kat. 2</span>
                <span style="white-space: nowrap;"><a class="ui red empty circular label" style="background-color: red !important;margin-right: 5px;margin-left:15px;"></a>Kat. 3</span>
                <span style="white-space: nowrap;"><a class="ui red empty circular label" style="background-color: grey !important;margin-right: 5px;margin-left:15px;"></a>Belegt</span>

        </div>
        </div>
          
        <div class="small-sm-12 col-lg-4">
            <br/>
            <div class="ui card">
                <ul>
                    <div id="selected-seats"></div>
                    <h3>Gesamtpreis: <span id="sum_price">€ 0.00</span></h3>
                    Anmerkung: Rabatt wird erst bei Reservierung abgezogen.
                </ul>
            </div>
        </div>

	
    @if($seat->date=='2020-12-31' or $seat->date=='2021-12-31' or $seat->date=='2023-12-31')
	{{--<div class="small-sm-12">--}}
        {{--    <h2>Sitzplatz bei Tisch mit Menü</h2>--}}
        {{--    {!! Form::input('number','amountBuffett', '0', ['id'=>'amountBuffett', 'min' =>'0']) !!} Plätze reservieren--}}
	{{--</div>--}}
    @endif
    
    </div>
    
    
   

    <span id="hiddenSeats" style="visibility: hidden"></span>
    <span id="concessionTemplateFill"></span>
    <script>
        var concessionTemplate = '<?php echo Form::select('concession[]', $concessions->pluck('name', 'id'))?>';
    </script>

    {{--<h2>Ermäßigungen</h2>--}}
    {{--@foreach($concessions as $concession)--}}
    {{--@if($concession->name == 'Vollpreis')--}}
    {{--{{ Form::radio('concession', $concession->id, true) }}--}}
    {{--@else--}}
    {{--{{ Form::radio('concession', $concession->id, false) }}--}}
    {{--@endif--}}
    {{--{{$concession->name}} ({{$concession->perc}} %) <br/>--}}
    {{--@endforeach--}}

    @if (Auth::check() && Auth::user()->isAdmin())
        <h2>Kunde</h2>
        <div class="row">
            <div class="col-sm-6">
                <select class="js-example-basic-single" name="user" style="width: 100%;">
                    <option value=""></option>
                    @foreach($users_identifier->get() as $user)
                        <option value="{{$user->id}}">{{$user->identifier}}</option>
                    @endforeach
                </select>
                {{--<div class="ui fluid search selection dropdown">--}}
                    {{--<input name="user" type="hidden">--}}
                    {{--<i class="dropdown icon"></i>--}}
                    {{--<div class="default text">Kunde</div>--}}
                    {{--<div class="menu">--}}
                        {{--<div class="item"></div>--}}
                        {{--@foreach($users_identifier->get() as $user)--}}
                            {{--<div class="item" data-value="{{$user->id}}">{{$user->identifier}}</div>--}}
                        {{--@endforeach--}}
                    {{--</div>--}}
                    {{--{{Form::select('user', $users_identifier->pluck('identifier', 'id'))}}--}}
                {{--</div>--}}
            </div>
            <div class="col-sm-6">
                <h2>Name des neu einzufügenden Benutzer</h2>
                Vorname: {{Form::text('newFirstname')}}<br />
                Nachname: {{Form::text('newLastname')}}<br />
                Straße + Hausnummer: {{Form::text('newStreet')}}<br />
                PLZ + Ort: {{Form::text('newLocation')}}<br />
            </div>
        </div>


    @endif


    <br style="margin-bottom:30px;"/>
    {!! Form::hidden('event_id', $event->id) !!}
    {!! Form::hidden('seat_id', $seat->id) !!}

    {!! Form::submit('Reservieren', ['class' => 'btn btn-primary form-control', 'id' => 'submit', 'disabled' => 'disabled']) !!}
    (Sie können die Reservierung noch einmal überprüfen)
    {!! Form::close() !!}









    {{--<h1>Ermäßigungen auswählen</h1>--}}
    {{--<ul>--}}
    {{--@foreach($concessions as $concession)--}}
    {{--<li>--}}
    {{--{{$concession->name}} {{$concession->perc}} %--}}
    {{--</li>--}}
    {{--@endforeach--}}
    {{--</ul>--}}


@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 src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>
    <script>
        

        
        


    
    
        function validateForm(){
            // var price = $("#sum_price").text();
            // if(confirm("Sie haben Karten im Wert von "+price+" in Ihrem Warenkorb. Wollen Sie diese jetzt verbindlich kaufen?")){
                return true;
            // }else{
            //     return false;
            // }
        }
        setInterval(function() {
            window.location.reload();
        }, 300000);

        $(document).ready(function () {
        
        setTimeout(function () {
         notfound = true
            for(var i=1; i<=13 && notfound; i++){
                var myEle = document.getElementById("6_"+i);
                if(myEle){
                    //$("#note-entry").css("left", 30+16*(i-1)+"px");
                    notfound = false
                }
            }
        
        }, 100);
           
        
            $('.js-example-basic-single').select2({
                minimumInputLength: 3
            });

            $('#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)), ';';?>
                x = x.reverse();
            x.shift();
            // x = x.reverse();
            // console.log(x);
            var row = [];
            for(var i=0; i<x.length; i++){
                row.push(x.length-i+"");
            }

            var seats = new Array({{$maxX}});
            var price = 0;
            for (var i = 0; i < seats.length; i++) {
                seats[i] = "";
                for (var j = 0; j <{{$maxY}}; j++) {
                    seats[i] = seats[i] + "" + x[i][j];
                }
            }
            var priceBuffett = 0;
            if(document.getElementById('amountBuffett') != null) {
                document.getElementById('amountBuffett').addEventListener('input', function (evt) {
                    if (this.value < 0) return;

                    var newPriceBuffett = this.value * 8000;
                    price += newPriceBuffett - priceBuffett;

                    $("#selected-seats li:contains('Menü')").remove();
                    $("#selected-seats").append("<li>" + this.value + " x Menü (€ 80)</li>");
                    $("#sum_price").text("€ " + (price / 100));
                    $('#submit').prop('disabled', false);

                    priceBuffett = this.value * 8000;
                });
            }

            if(seats.length <= 16){
                $("#note-empore").hide();
                setTimeout(function () {
                    document.querySelector("div.seatCharts-row:nth-child(8)").style.marginTop = "0px";
                    }, 100);
                
            }


            var sc = $('#seat-map').seatCharts({
                map: seats,
                seats: {
                    a: {
                        price: {{$event->price_cat_a}},
                        classes: 'a-cat' //your custom CSS class
                    },
                    b: {
                        price: {{$event->price_cat_b}},
                        classes: 'b-cat' //your custom CSS class
                    },
                    c: {
                        price: {{$event->price_cat_c}},
                        classes: 'c-cat' //your custom CSS class
                    },
                    z: {
                        classes: 'bought-cat'
                    }

                },
                click: function () {
                    if (this.status() == 'available') {
                        var row = x.length-2-this.settings.row + 1;
                        var col = this.settings.column + 1;
			var textRow = row+1;
			var textSeat = col;


			if (textRow == 10) {
                            textSeat -= 2;
                        } else if (textRow == 11) {
                            textSeat -= 4;
                        } else if (textRow == 12) {
                            textSeat -= 6;
                        } else if (textRow == 13) {
                            textSeat -= 8;
                        } else if (textRow == 14) {
                            textSeat -= 13;
                        } else if (textRow == 18) {
                            textSeat -= 4;
                        } else if (textRow == 19) {
                            textSeat -= 3;
                        } else if (textRow == 20) {
                            textSeat -= 6;
                        } else if (textRow == 21) {
                            textSeat -= 10;
                        } else if (textRow == 22) {
                            textSeat -= 14;
                        } else if (textRow == 23) {
                            textSeat -= 18;
                        }

			if(textRow <= 14 && col >= 14) textSeat--;
			if(textRow > 6) textRow--;
			if(textRow >= 15 && col > 18) textSeat -= 2;

			if(textRow >= 18) textRow = "Balkon "+(textRow-16);
                        $("#selected-seats").append("<li>Reihe "+textRow+", Sitz "+textSeat+" (€ " + this.data().price + ") <span class='cancel-cart-item' id='" + this.settings.id + "'><i class=\"remove icon\"></i></span>" + concessionTemplate + "</li>");
                        $("#hiddenSeats").append("<input name=\"seat[]\" id=\"" + this.settings.id + "\" type=\"select\" value=\" " + this.settings.id + "  \">");
                        price += this.data().price * 100;
                        $("#sum_price").text("€ " + (price / 100));
                        $('#submit').prop('disabled', false);
                        return 'selected';
                    } else if (this.status() == 'selected') {
                        console.log("selected");
                        $("#selected-seats #" + this.settings.id).parent().remove();
                        $("#hiddenSeats #" + this.settings.id).remove();
                        price -= this.data().price * 100;
                        $("#sum_price").text("€ " + (price / 100));
                        return 'available';
                    } else if (this.status() == 'unavailable') {
                        console.log("unavailable");
                        //seat has been already booked
                        return 'unavailable';
                    } else {
                        return this.style();
                    }
                },
                naming: {
                    top: false,
                    getLabel: function (character, row, column) {
                        return '';
                    },
                    rows: row,
                },
            });
            $('#selected-seats').on('click', '.cancel-cart-item', function () {
                sc.get($(this).attr("id")).click();
            });

            sc.find('z.available').status('unavailable');

        });

        $('.ui.dropdown')
            .dropdown({})
        ;
    </script>
@endsection