@extends('layout')

@section('content')
    <link href="{{ asset('css/jquery.seat-charts.css') }}" rel="stylesheet" type="text/css" >
    <h1>Sitzplan</h1>

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

@endsection

@section('scripts')
    <script src="{{ URL::asset('js/jquery.seat-charts.min.js') }}"></script>
    <script>
        <?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',$seattemplate->map)), ';';?>
                console.log(x);
        $(document).ready(function() {
            var sc = $('#seat-map').seatCharts({
                map: x,
                seats: {
                    a: {
                        price   : 99.99,
                        classes : 'cat-a' //your custom CSS class
                    },
                    b: {
                        price   : 99.99,
                        classes : 'cat-b' //your custom CSS class
                    },
                    c: {
                        price   : 99.99,
                        classes : 'cat-c' //your custom CSS class
                    }

                },
                click: function () {
                    if (this.status() == 'available') {
                        //do some stuff, i.e. add to the cart
                        return 'selected';
                    } else if (this.status() == 'selected') {
                        //seat has been vacated
                        return 'available';
                    } else if (this.status() == 'unavailable') {
                        //seat has been already booked
                        return 'unavailable';
                    } else {
                        return this.style();
                    }
                },
                naming : {
                    getLabel: function (character, row, column) {
                        return '';
                    }
                },
            });

            //Make all available 'c' seats unavailable
            //sc.find('c.available').status('unavailable');

            /*
            Get seats with ids 2_6, 1_7 (more on ids later on),
            put them in a jQuery set and change some css
            */
        });
    </script>

@endsection