@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;
        }

        /*.seatCharts-row{
            height: 50px !important;
        }
        div.seatCharts-row
        {
            width: 16%;
            float: left;
	}*/

        .num
        {
            float: left;
            width: 25px;
            margin-top: 13px;
        }
        .secrow
        {
            margin-left: 25px;
            margin-top: -14px;
        }

        .seatCharts-space{
            display: none;
        }

	.seatCharts-row{
	    padding-top: 20px;
	}
div.seatCharts-row:nth-child(7){
	padding-top: 70px;
}
/*
div.seatCharts-row:nth-child(1){
	margin-left: 96px;
}
div.seatCharts-row:nth-child(2){
	margin-left: 96px;
}
div.seatCharts-row:nth-child(3){
	margin-left: 64px;
}*/
/*SOMMERTHEATERdiv.seatCharts-row:nth-last-child(53){
	margin-left: 32%;
}
div.seatCharts-row:nth-last-child(49){
	margin-left: 32%;
}
div.seatCharts-row:nth-last-child(45){
	margin-left: 16%;
}
div.seatCharts-row:nth-last-child(10){
	margin-left: 16%;
}
div.seatCharts-row:nth-last-child(5){
	margin-left: 16%;
}*/
/*div.seatCharts-row:nth-child(1){
	margin-left: 80%;
}
div.seatCharts-row:nth-child(2){
	margin-left: 32%;
}
div.seatCharts-row:nth-last-child(2){
	margin-left: 64%;
}*/
    </style>


    <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 />

    @if( strtotime('2025-04-31') >= strtotime('now') && $event->id==1823)
        <div class="ui message">
            <div class="header">
                Frühbucherpreis
            </div>
            <p>Schnell sein lohnt sich! Bis zum 30. April 2025 ist eine Karte um 25/20€ erhältlich (wird im zweiten Schritt automatisch abgezogen). Ab 1. Mai 2025 erhöht sich der Preis auf 29/24€ (unsere üblichen Ermäßigungen sind natürlich gültig).</p>
        </div>
        <br />
    @endif
    {!! Form::open(['url' => 'book', 'onsubmit="return validateForm()"']) !!}
    <div class="row">
        <div class="col-sm-12 col-lg-8">
            <h1 style="margin-bottom: 50px;">{{$event->title}} <span style="white-space: nowrap;">({{strftime('%d. %m. %Y', strtotime($seat->date))}})</span></h1>

            <!--<table id='note-empore' style="width:70px; height: 550px; text-align: center;position: absolute;bottom: 15px;left: 680px;" border="1"><tbody><tr><td>Bühne</td></tr></tbody></table>-->
            <!-- SOMMERFEST<table style="width: 600px; text-align: center; position: absolute; top: 40px; height: 50px; border: none;" ><tbody><tr><td>~~~ Wasserpark ~~~</td></tr></tbody></table>-->
	    <table style="width: 255px; position: absolute; text-align:center; bottom: 340px; height: 30px;" border="1"><tbody><tr><td style="border-right: none;">Bühne</td></tr></tbody></table>
	    <!--<table style="width: 600px; text-align: left; position: absolute; top: 70px; height: 50px; border: none;" ><tbody><tr><td>Gastronomie</td></tr></tbody></table>-->
            <div id="seat-map" style="width: 700px;"></div>
	    <table style="width: 150px; position: absolute; left: 280px;text-align:center; bottom: 140px; height: 50px;" border="1"><tbody><tr><td style="border-right: none;">Eingang</td></tr></tbody></table>
            <table style="width: 100px; text-align: center; position: absolute; right: 50px; bottom: -34px; height: 48px; background-color: white;"><tbody><tr><td></td></tr></tbody></table>
	    <!--<table style="width: 50px; text-align: center; position: absolute; bottom: -35px; height: 50px;" border="1"><tbody><tr><td>Eingang</td></tr></tbody></table>-->
	<br />

        </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>
    </div>
    @if($seat->date=='2020-12-31' or $seat->date=='2021-12-31')
        @if (Auth::check() && Auth::user()->isAdmin())
            <h2>Sitzplatz bei Tisch mit Buffett</h2>
            {!! Form::input('number','amountBuffett', '0', ['id'=>'amountBuffett', 'min' =>'0']) !!} Plätze reservieren
        @endif
    @endif

    <br />
    <br />

    <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


    {!! Form::hidden('event_id', $event->id) !!}
    {!! Form::hidden('seat_id', $seat->id) !!}

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

    {!! 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() {
            //    $("div[id$='_3']").after('<br /><br /><div class="secrow">');
            //    $("div[id$='_6']").after('</div>');
            //}, 1000);

            $('.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];
                }
            }
            console.log(seats);
            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('Buffett')").remove();
                    $("#selected-seats").append("<li>" + this.value + " x Buffett (€ 80)</li>");
                    $("#sum_price").text("€ " + (price / 100));
                    $('#submit').prop('disabled', false);

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

            if(seats.length <= 16){
                $("#note-empore").hide();
            }


            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') {
                        //$("#selected-seats").append("<li>Tisch "+(56-this.settings.row-1)+", Platz "+(this.settings.column+1)+" (€ " + this.data().price + ") <span class='cancel-cart-item' id='" + this.settings.id + "'><i class=\"remove icon\"></i></span>" + concessionTemplate + "</li>");
                        $("#selected-seats").append("<li>Reihe "+(this.settings.row+1)+", Platz "+(this.settings.column+1)+" (€ " + 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