@extends('layouts.digitar')
@section('Breadcrumbs')
    {!! Breadcrumbs::render('meetings.show') !!}
@endsection
@section('content')
    <style>
        .menu,
        .list-group {
            text-decoration: none;
            color: #999;

            .disabled {
                pointer-events: none;
                cursor: not-allowed;
                color: #6c757d;
                text-decoration: none;
            }
        }

        .meeting-sidebar-mobile-toggle {
            display: none;
            width: 100%;
            margin-bottom: 12px;
            padding: 12px 14px;
            border: 0;
            border-radius: 8px;
            background: #434a54;
            color: #fff;
            font-weight: 600;
            text-align: left;
        }

        .meeting-sidebar-mobile-toggle .fa {
            margin-right: 8px;
        }

        @media (max-width: 767px) {
            .meeting-sidebar-column {
                margin-bottom: 16px;
            }

            .meeting-sidebar-mobile-toggle {
                display: block;
            }

            .meeting-sidebar-box {
                margin-bottom: 0;
            }

            .meeting-sidebar-box .list-group {
                margin-bottom: 0;
            }

            .meeting-content-column .the-box {
                margin-top: 0;
            }
        }

        @media (min-width: 768px) {
            .meeting-sidebar-collapse {
                display: block !important;
                height: auto !important;
            }
        }
    </style>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3 meeting-sidebar-column">
                <button class="meeting-sidebar-mobile-toggle visible-xs visible-sm" type="button" data-toggle="collapse"
                    data-target="#meeting-sidebar-menu" aria-expanded="false" aria-controls="meeting-sidebar-menu">
                    <i class="fa fa-bars"></i> Menu da Sessão
                </button>
                <div class="the-box text-center meeting-sidebar-box collapse in meeting-sidebar-collapse" id="meeting-sidebar-menu">
                    <ul class="list-group">
                        <li class="list-group-item text-left active">
                            @shield('meetings.show')
                                <a href="{!! route('meetings.show', [$meeting->id]) !!}" class="menu" style="color: #fff;"><i class="fa fa-home"></i>
                                    INÍCIO</a>
                            @endshield
                        </li>
                        <li class="list-group-item text-left">
                            @shield('meetings.edit')
                                <a href="{!! route('meetings.newpauta', [$meeting->id]) !!}" class="menu"><i class="fa fa-book"></i> PAUTA</a>
                            @endshield
                        </li>
                        <li class="list-group-item text-left">
                            @shield('meetings.edit')
                                <a href="{!! route('meetings.newata', [$meeting->id]) !!}" class="menu"><i class="fa fa-file-text"></i> ATA</a>
                            @endshield
                        </li>
                        <li class="list-group-item text-left">
                            @shield('meetings.edit')
                                <a href="{!! route('meetings.presence', [$meeting->id]) !!}" class="menu"><i class="fa fa-users"></i> PRESENÇA</a>
                            @endshield
                        </li>
                        <li class="list-group-item text-left">
                            @shield('meetings.edit')
                                <a href="{!! route('meetings.voting', [$meeting->id]) !!}" class="menu"><i class="fa fa-list"></i> VOTAÇÃO</a>
                            @endshield
                        </li>
                        <li class="list-group-item text-left">
                            @shield('meetings.edit')
                                <a href="{{ \App\Helpers\PanelStageShortcutHelper::shortUrlForStage(Auth()->user()->company->stage) }}" class="menu"
                                    target="_blank"><i class="fa fa-ticket"></i> PAINEL DE VOTAÇÃO</a>
                            @endshield
                        </li>
                        <li class="list-group-item text-left active">
                            <i class="fa fa-user"></i> INFORMAÇÕES
                        </li>
                        <li class="list-group-item text-left bt-danger">
                            <a href="/meetings/{{ $meeting->id }}/word/order" class="menu  text-uppercase"><i
                                    class="fa fa-cog"></i> Ordem da Palavra</a>
                            </a>
                        </li>
                        <li class="list-group-item text-left active">
                            <i class="fa fa-cog"></i> CONFIGURAÇÕES
                        </li>
                        <li class="list-group-item text-left">
                            @shield('meetings.edit')
                                <a href="{!! route('voting.panelStage', $meeting->id) !!}" class="menu text-uppercase"><i class="fa fa-ticket "></i>
                                    Estado do painel</a>
                            @endshield
                        </li>
                        <li class="list-group-item text-left">
                            <a href="{!! route('meetings.index') !!}" class="menu"><i class="fa fa-reply"></i> VOLTAR</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-md-9 meeting-content-column">
                <div class="the-box">
                    <h1>
                        SESSÃO
                        {{ $meeting->number }}/{{ Carbon\Carbon::createFromFormat('d/m/Y H:i', $meeting->date_start)->year }}
                    </h1>
                    <small>
                        {{ $meeting->SessionType->name }}
                    </small>
                    <hr />
                    <div>
                        @yield('content-meeting')

                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const disabledLinks = document.querySelectorAll('a.disabled');
            disabledLinks.forEach(link => {
                link.addEventListener('click', function(event) {
                    event.preventDefault();
                });
            });
        });
    </script>
    @stack('meeting-scripts')
@endsection