@extends('Manager.Master')
@section('title')  وضعیت سیستم @stop
@section('header')
    <style>
        .thisarea a {
            float: left;
            font-family: "FontAwesome";
            text-shadow: 0px 1px 1px rgba(250, 250, 250, 0.1);
            font-size: 32pt;
            display: block;
            position: relative;
            text-decoration: none;
            box-shadow: 0px 3px 0px 0px rgb(34, 34, 34),
            0px 7px 10px 0px rgb(17, 17, 17),
            inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
            inset 0px -12px 35px 0px rgba(0, 0, 0, .5);
            width: 70px;
            height: 70px;
            border: 0;
            color: rgb(37, 37, 37);
            border-radius: 35px;
            text-align: center;
            line-height: 79px;
            background-color: rgb(83, 87, 93);
            transition: color 350ms ease, text-shadow 350ms;
            -o-transition: color 350ms ease, text-shadow 350ms;
            -moz-transition: color 350ms ease, text-shadow 350ms;
            -webkit-transition: color 350ms ease, text-shadow 350ms;
        }

        .thisarea a:before {
            content: "";
            width: 80px;
            height: 80px;
            display: block;
            z-index: -2;
            position: absolute;
            background-color: rgb(26, 27, 29);
            left: -5px;
            top: -2px;
            border-radius: 40px;
            box-shadow: 0px 1px 0px 0px rgba(250, 250, 250, 0.1),
            inset 0px 1px 2px rgba(0, 0, 0, 0.5);
        }

        .thisarea a:active {
            box-shadow: 0px 0px 0px 0px rgb(34, 34, 34),
            0px 3px 7px 0px rgb(17, 17, 17),
            inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
            inset 0px -10px 35px 5px rgba(0, 0, 0, .5);
            background-color: rgb(83, 87, 93);
            top: 3px;
        }

        .thisarea a.on {
            box-shadow: 0px 0px 0px 0px rgb(34, 34, 34),
            0px 3px 7px 0px rgb(17, 17, 17),
            inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
            inset 0px -10px 35px 5px rgba(0, 0, 0, .5);
            background-color: rgb(83, 87, 93);
            top: 3px;
            color: #fff;
            text-shadow: 0px 0px 3px rgb(250, 250, 250);
        }

        .thisarea a:active:before, a.on:before {
            top: -5px;
            background-color: rgb(26, 27, 29);
            box-shadow: 0px 1px 0px 0px rgba(250, 250, 250, 0.1),
            inset 0px 1px 2px rgba(0, 0, 0, 0.5);
        }

        /* Styling the Indicator light */
        .thisarea a + .thisarea span {
            display: block;
            width: 8px;
            height: 8px;
            background-color: rgb(226, 0, 0);
            box-shadow: inset 0px 1px 0px 0px rgba(250, 250, 250, 0.5),
            0px 0px 3px 2px rgba(226, 0, 0, 0.5);
            border-radius: 4px;
            clear: both;
            position: absolute;
            bottom: 0;
            left: 42%;
            transition: background-color 350ms, box-shadow 700ms;
            -o-transition: background-color 350ms, box-shadow 700ms;
            -moz-transition: background-color 350ms, box-shadow 700ms;
            -webkit-transition: background-color 350ms, box-shadow 700ms;
        }

        .thisarea p {
            width: 80%;
            float: right;
            text-align: justify;

        }
    </style>
@stop
@section('content')

    <div class="col-md-12 insert-page x_content">
        <div class="x_panel">
            <div class="x_title">
                <h2> وضعیت سیستم </h2>
                <div class="clearfix"></div>
            </div>
            <br>
            {{----}}
            <div class="well thisarea">
                <p>
                    @php
                        $text = '';
                        if ($data == 'TurnOn') {
                            $text = 'سیستم در حال حاضر مشغول به کار است .';
                        } else {
                            $text = 'سیستم در حال حاضر تعلیق شده است.';
                        }
                    @endphp
                    <strong> {{ $text }}</strong><br>
                    بهترین حالت برای اعمال تغییرات زیاد این است که سیستم را موقتا از دسترس کاربران خارج کنید و با خیال
                    راحت تغییرات دلخواه را اعمال کنید. در این حالت تمامی صفحات غیر فعال گردیده و کاربر پیامی مبنی بر
                    اینکه سیستم در حال تعمیر است مشاهده خواهد کرد .
                </p>
                <a id="button" class="{{ $data == 'TurnOn' ? 'on' : ''}}">&#xF011;</a>
                <span></span>
                <div class="clearfix"></div>

            </div>

            {{----}}

        </div>

    </div>

    @if($errors->first())
        @include('Manager.Componet.error', ['error' => $errors->first()])
    @endif
@stop
@section("footer")
    <script>
        $(document).ready(function () {
            $('#button').on('click', function () {
                waitingDialog.show();
                $(this).toggleClass('on');
                var a = $(this).attr('class');
                var status, mymsg;
                if (a == 'on') {
                    status = 'TurnOn';
                    mymsg = 'سیستم در حال حاضر مشغول به کار است .';
                }
                else {
                    status = 'ShutDown';
                    mymsg = 'سیستم در حال حاضر تعلیق شده است.';
                }

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });