@extends('layouts.master')
@section('page_title', $page_title)
@section('content')
    <div id="spinner_container">
        <div id="spinner_overlay">
            <div id="spinner_loading"><img src="/img/boomtime-animated-infinity.gif"/></div>
        </div>
    </div>
@endsection

@section('page_script')
    @if(isset($page_script) && $page_script != '')
        @include($page_script)
    @endif

    <script>
        jQuery.ajaxSetup({
            beforeSend: function () {
                $('#spinner_overlay').show();
            },
            complete: function () {
                $('#spinner_overlay').hide();
            },
        });

        $(document).ready(function () {
            var data = null;
            @if (isset($ajax_data))
                data = <br />
<b>Notice</b>:  Undefined variable: ajax_data in <b>/var/www/html/fuse2/resources/views/layouts/_spinner.blade.php</b> on line <b>29</b><br />
null;
            @endif
            $.ajax({
                url: "{{ $ajax_url }}",
                data: data,
                success: function (result) {
                    $("#spinner_container").html(result.html);
                    var fn = window["after_spinner"];
                    if (fn != undefined) {
                        fn(result.data);
                    }
                }
            });
        });

        function on() {
            document.getElementById("spinner_overlay").style.display = "block";
        }

        function off() {
            document.getElementById("spinner_overlay").style.display = "none";
        }


    </script>
@endsection

@section('page_style')
    @if(isset($page_style) && $page_style != '')
        @include($page_style)
    @endif
    {{--<meta name="viewport" content="width=device-width, initial-scale=1">--}}

    <style>
        #spinner_overlay {
            position: fixed;
            display: none;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(190, 190, 190, 0.7);
            z-index: 2;
            cursor: pointer;
        }

        #content {
            position: relative;
            display: block;
            height: 100%;
            border: 1px solid black;
            padding: 20px;
            margin: 10px;
        }

        #spinner_loading {
            position: absolute;
            top: 50%;
            left: 50%;
            font-size: 50px;
            color: white;
            width: 140px;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
        }
    </style>
@endsection