@extends('layouts.app')

    @push('headersStyles')

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js" defer></script>
        <link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet">
        <link href="{{asset('public/css/tableStyleSheet.css')}}" rel="stylesheet">
        <title>DP STD - Administrace</title>
    @endpush
@section('adminContent')
<div class="d-flex flex-column flex-grow-1 vh-100" style="overflow-x: hidden;">
{{--    vrchni menu --}}
    <div style="height: 69px; width: 100%;background-repeat: repeat;background-image: url({{URL::asset('/resources/images/bg-top1.png')}}); z-index: 10;">
        <div class="row flex-shrink-0 w-100" style="z-index: 10;">
                <div class="ml-3">
                    <a class="navbar-brand" href="{{ url('/') }}">
                        <img src="{{URL::asset('/resources/images/logo-top.png')}}" alt="Zobrazit mapu"/>
                    </a>
                </div>
                <div class="ml-auto" style=" font-size: 20px; color: white; position: relative; top: 21px; float: right;">
                    {{Auth::user()->name}} [{{Auth::user()->id}}] &nbsp;&nbsp;

                    <a href="{{ route('logout') }}"
                       onclick="event.preventDefault();
                         document.getElementById('logout-form').submit();">
                        <img src="{{URL::asset('/resources/images/btn-logout.png')}}" alt="Odhlásit"/>
                    </a>

                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                        @csrf
                    </form>
                </div>
        </div>
    </div>
{{--    Spodek--}}

    <div class="row flex-grow-1" style="background-color: rgba(229,229,229,160); overflow-x: auto;">
{{--        Leve menu--}}
        <script type="application/javascript">

            $(document).ready(function()
            {
                $('a[id^="menu_"]').on('click', function ()
                {
                    styleWithAjax($(this));
                    $(this).delay(1);
                    $('a[id^="menu_"]').css("font-weight",'');
                    $('a[id^="menu_"]').css("background-image",'');
                });
                @if(session()->get('id_menu'))
                    setStyle({{session()->get('id_menu')}});
                @endif

                var size = $(window).width()-$("#leveMenu").width()-1;
                $('#dataContent').css('width', size);
            });

            $(window).resize(function()
            {
                var size = $(window).width()-$("#leveMenu").width()-1;
                $('#dataContent').css('width', size);
            });

            function setStyle(id)
            {
                $(id).css("font-weight", "bold");
                $(id).css("background-image", 'url("{{URL::asset('/resources/images/bg-top1.png')}}")');
                $(id).css("background-repeat", 'no-repeat');
                $(id).css("background-size", ' 5px 100%');
            }

            function ajaxRequest(idmenu)
            {
                $.ajax({
                    type: 'POST',
                    url: '/set_session',
                    data: {id_menu : idmenu},
                    _token: '@csrf'
                });
            }

            function styleWithAjax(id)
            {
                ajaxRequest($(id).attr('id'));
                setStyle($(id));
            }


        </script>
        <div id='leveMenu' style="min-width: 250px; font-family: Calibri,serif; font-size: 18px; color: black; background-color: rgba(217,217,217,160);">
            <div class="mt-5 ml-2">
                @foreach($menu as $id => $dataMenu)
                    <div class="row ml-3"  style="border-top: 2px whitesmoke dotted;" >
                        <a class="nav-link" id="menu_{{$id}}" href="{{ route($dataMenu->route) }}" style="font-family: Calibri,serif; font-size: 20px; color: black;">
                            {{$dataMenu->nazev}}
                        </a>
                    </div>
                @endforeach
                <div class="row ml-3"  style="border-top: 2px whitesmoke dotted;" ></div>
            </div>
        </div>
{{--        Prava strana s contentem--}}
        <div class="p-5" id="dataContent" style="background-color: rgba(229,229,229,160)">
            @yield('contentData')
        </div>
    </div>
</div>
@endsection
