@extends('layouts.app')

@section('linktext')

@endsection


@section('content')
    <div class="container">


            <div class="col-xs-12" style="margin-left: -12%;">

                    <div class="plan1">
                        <img src="{{ asset('img/plan1.jpg') }}" alt="">
                        <button class="btn btn-danger clickbottom" typ="infouc" id="pev"><span class="glyphicon glyphicon-user"></span></button>
                        <button class="btn btn-primary clickbottom" typ="infouc" id="gav"><span class="glyphicon glyphicon-user"></span></button>
                        <button class="btn btn-primary clickbottom" typ="infouc" id="tnu"><span class="glyphicon glyphicon-user"></span></button>

                        <button class="btn btn-primary clickbottom" typ="infouc" id="hsa"><span class="glyphicon glyphicon-user"></span></button>
                        <button class="btn btn-primary clickbottom" typ="infouc" id="sklad"><span class="glyphicon glyphicon-user"></span></button>
                        <button class="btn btn-primary clickbottom" typ="infouc" id="mau"><span class="glyphicon glyphicon-user"></span></button>
                        <button class="btn btn-primary clickbottom" typ="infouc" id="pea"><span class="glyphicon glyphicon-user"></span></button>
                        <button class="btn btn-primary clickbottom" typ="infouc" id="syn"><span class="glyphicon glyphicon-user"></span></button>
                        <button class="btn btn-primary clickbottom" typ="infouc" id="bvc"><span class="glyphicon glyphicon-user"></span></button>
                        <button class="btn btn-primary clickbottom" typ="infouc" id="ema"><span class="glyphicon glyphicon-user"></span></button>
                        <button class="btn btn-primary clickbottom" typ="infouc" id="mnv"><span class="glyphicon glyphicon-user"></span></button>
                        <button class="btn btn-primary clickbottom" typ="infouc" id="ams"><span class="glyphicon glyphicon-user"></span></button>



                        <div class="infoucres" id="infoucres" style="display: none; border: 4px dotted black; /* Параметры границы */ ">

                        </div>

                        <div class="infouc" id="infouc" style="display: block; border: 4px dotted black; /* Параметры границы */ ">

                            <div class="row" style="margin-top: 60%">
                                <div class="col-md-2">
                                </div>
                                <div class="col-md-8">
                                    <span id='nulltext' style="font-size: 20px;">В данном поле выводится информация по участку, нажмите на участок</span>

                                    <div class="loader" id="loader-2" style="display: none">
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                    </div>

                                </div>

                                <div class="col-md-2">
                                </div>
                            </div>

                        </div>


                    </div>








            </div>


    </div>
@endsection

@section('scriptext')
    <script>
        $(document).ready(function(){

            $(".clickbottom").click(function(){

                var typ = $(this).attr('typ');
                var usersnik = $(this).attr('id');

                document.getElementById('nulltext').style.display='none';
                document.getElementById('loader-2').style.display='block';
                $infoucres = document.getElementById("infoucres");
                $infoucres.style.display='none';
                $infouc = document.getElementById("infouc");
                $infouc.style.display='block';


                $.ajax({
                    type: 'get',
                    url: 'logwork/clickbottom',
                    data: {
                        'typ': typ,
                        'usersnik': usersnik,
                        '_token': "{{ csrf_token() }}"
                    },
                    success: function(data) {


                        if(typ=='infouc'){

                            $objtd = $('.infoucres');
                            $objtd.html(data);
                            $infoucres.style.display='block';
                            $infouc.style.display='none';


                        }

                        if(data['typmessage']=='success'){
                            toastr.success(data['message'], 'Success Alert', {timeOut: 5000});
                        }
                        if(data['typmessage']=='warning'){
                            toastr.warning(data['message'], 'warning Alert', {timeOut: 5000});
                        }
                    },
                    error: function (data) {
                        console.log('Error:', data);
                    }
                });

            });

        });
    </script>

@endsection