@extends('layouts.digitar')
@section('Breadcrumbs')
    {!! Breadcrumbs::render('home') !!}
@endsection
@section('content')
    <link rel="stylesheet" href="/assets/css/dashboard.css">

    <div class="dash-wrapper">

        {{-- Header com usuario + acesso rapido --}}
        <div class="dash-header">
            <div class="dash-header__left">
                <div class="dash-user-info">
                    <div class="dash-user-avatar">
                        {{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
                    </div>
                    <div>
                        <div class="dash-user-name">{{ auth()->user()->name }}</div>
                        <div class="dash-user-role">
                            @if (auth()->user()->sector_id == 1)
                                Administrador
                            @else
                                Parlamentar
                            @endif
                        </div>
                    </div>
                    <div class="dash-date-info">
                        <div class="dash-date-day" id="dash-current-date"></div>
                        <div class="dash-date-hour" id="dash-current-hour"></div>
                    </div>
                </div>
            </div>
            <div class="dash-header__right">
                <div class="dash-quick-actions__grid">
                    <a href="/lawsProjects" class="dash-quick-action-btn">
                        <i class="fas fa-gavel"></i> Projetos de Lei
                    </a>
                    <a href="/documents" class="dash-quick-action-btn">
                        <i class="fas fa-file-alt"></i> Documentos
                    </a>
                    <a href="/document/signatures/list/for/user" class="dash-quick-action-btn">
                        <i class="fas fa-signature"></i> Assinaturas
                    </a>
                    @if (isset($commissions))
                        <a href="/admin/commissions" class="dash-quick-action-btn">
                            <i class="fas fa-users"></i> Comissoes
                        </a>
                    @endif
                </div>
            </div>
        </div>

        @if (session('toastr'))
            <script>
                toastr.{{ session('toastr.type') }}('{{ session('toastr.message') }}');
            </script>
        @endif

        {{-- Stats Cards --}}
        <div class="dash-stats-grid">

            {{-- Card: Assinaturas Pendentes --}}
            <a href="/document/signatures/list/for/user" class="dash-stat-card dash-stat-card--danger dash-animate"
                style="animation-delay: 0.1s;">
                <div class="dash-stat-card__inner">
                    <div class="dash-stat-card__header">
                        <div class="dash-stat-card__icon">
                            <i class="fas fa-signature"></i>
                        </div>
                        <span class="dash-stat-card__badge">Pendente</span>
                    </div>
                    <div class="dash-stat-card__body">
                        <h3 class="dash-stat-card__title">Assinaturas Pendentes</h3>
                        <p class="dash-stat-card__number">
                            @if (App\Models\SignatureSigners::where('name', auth()->user()->name)->count() <= 0)
                                0
                            @else
                                {{ App\Models\SignatureSigners::whereNull('deleted_at')->where('status', '=', 'PENDING')->where('name', auth()->user()->name)->count() }}
                            @endif
                        </p>
                    </div>
                    <div class="dash-stat-card__footer">
                        <p class="dash-stat-card__detail">
                            Documentos aguardando sua assinatura
                        </p>
                    </div>
                </div>
            </a>

            {{-- Card: Projetos de Lei - abre modal --}}
            <div class="dash-stat-card dash-stat-card--warning dash-animate dash-stat-card--clickable"
                style="animation-delay: 0.15s;" data-modal="dashModalLaws">
                <div class="dash-stat-card__inner">
                    <div class="dash-stat-card__header">
                        <div class="dash-stat-card__icon">
                            <i class="fas fa-gavel"></i>
                        </div>
                        <span class="dash-stat-card__badge">Legislativo</span>
                    </div>
                    <div class="dash-stat-card__body">
                        <h3 class="dash-stat-card__title">Projetos de Lei</h3>
                        <p class="dash-stat-card__number">{{ $projLeiAll }}</p>
                    </div>
                    <div class="dash-stat-card__footer">
                        <p class="dash-stat-card__detail">
                            Aprovados: <strong>{{ $projLeiApr }}</strong> &middot; <span
                                style="color: var(--dash-primary); font-size: 11px;"><i class="fas fa-chart-bar"></i> Ver
                                detalhes</span>
                        </p>
                    </div>
                </div>
            </div>

            {{-- Card: Documentos - abre modal --}}
            <div class="dash-stat-card dash-stat-card--info dash-animate dash-stat-card--clickable"
                style="animation-delay: 0.2s;" data-modal="dashModalDocs">
                <div class="dash-stat-card__inner">
                    <div class="dash-stat-card__header">
                        <div class="dash-stat-card__icon">
                            <i class="fas fa-file-alt"></i>
                        </div>
                        <span class="dash-stat-card__badge">Documentos</span>
                    </div>
                    <div class="dash-stat-card__body">
                        <h3 class="dash-stat-card__title">Documentos</h3>
                        <p class="dash-stat-card__number">{{ $docAll }}</p>
                    </div>
                    <div class="dash-stat-card__footer">
                        <p class="dash-stat-card__detail">
                            Lidos: <strong>{{ $docRead }}</strong> &middot; <span
                                style="color: var(--dash-primary); font-size: 11px;"><i class="fas fa-chart-bar"></i> Ver
                                detalhes</span>
                        </p>
                    </div>
                </div>
            </div>

            {{-- Card: Comissoes --}}
            @if (isset($commissions))
                <a href="/admin/commissions" class="dash-stat-card dash-stat-card--primary dash-animate"
                    style="animation-delay: 0.25s;">
                    <div class="dash-stat-card__inner">
                        <div class="dash-stat-card__header">
                            <div class="dash-stat-card__icon">
                                <i class="fas fa-users"></i>
                            </div>
                            <span class="dash-stat-card__badge">Comissoes</span>
                        </div>
                        <div class="dash-stat-card__body">
                            <h3 class="dash-stat-card__title">Comissoes Ativas</h3>
                            <p class="dash-stat-card__number">{{ count($commissions) }}</p>
                        </div>
                        <div class="dash-stat-card__footer">
                            <p class="dash-stat-card__detail">
                                Lista das comissoes ativas
                            </p>
                        </div>
                    </div>
                </a>
            @endif
        </div>

        <div class="clearfix"></div>

        {{-- JS: Clickable cards abrem modal --}}
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                var clickableCards = document.querySelectorAll('.dash-stat-card--clickable');
                clickableCards.forEach(function(card) {
                    card.addEventListener('click', function(e) {
                        e.preventDefault();
                        var modalId = this.getAttribute('data-modal');
                        if (modalId) {
                            $('#' + modalId).modal('show');
                        }
                    });
                });
            });
        </script>

    </div>{{-- fim dash-wrapper --}}

    {{-- Modal: Estatisticas Projetos de Lei --}}
    <div class="modal fade dash-modal" id="dashModalLaws" role="dialog">
        <div class="modal-dialog dash-modal-dialog" role="document">
            <div class="modal-content dash-modal-content"
                style="border-radius: 14px; overflow: hidden; border: none; box-shadow: 0 25px 60px rgba(0,0,0,0.2);">
                <div class="modal-header"
                    style="background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); color: #fff; border: none; padding: 20px 24px;">
                    <button type="button" class="close" data-dismiss="modal"
                        style="color:#fff; opacity:1; font-size: 24px;">&times;</button>
                    <h4 class="modal-title" style="color:#fff; font-weight: 700; font-size: 18px;"><i
                            class="fas fa-gavel"></i> Projetos de Lei por Categoria</h4>
                </div>
                <div class="modal-body dash-modal-body" style="padding: 0;">
                    <div
                        style="display: flex; gap: 16px; padding: 20px 24px; background: #fef9f0; border-bottom: 1px solid #f0e6d4;">
                        <div style="flex: 1; text-align: center;">
                            <div style="font-size: 28px; font-weight: 800; color: #f39c12;">{{ $projLeiAll }}</div>
                            <div
                                style="font-size: 11px; color: #636e72; text-transform: uppercase; letter-spacing: 0.5px;">
                                Total</div>
                        </div>
                        <div style="flex: 1; text-align: center;">
                            <div style="font-size: 28px; font-weight: 800; color: #27ae60;">{{ $projLeiApr }}</div>
                            <div
                                style="font-size: 11px; color: #636e72; text-transform: uppercase; letter-spacing: 0.5px;">
                                Aprovados</div>
                        </div>
                        <div style="flex: 1; text-align: center;">
                            <div style="font-size: 28px; font-weight: 800; color: #e74c3c;">
                                {{ $projLeiAll - $projLeiApr }}</div>
                            <div
                                style="font-size: 11px; color: #636e72; text-transform: uppercase; letter-spacing: 0.5px;">
                                Em tramitacao</div>
                        </div>
                    </div>
                    <div style="padding: 16px 24px 24px;">
                        <h5
                            style="font-size: 13px; font-weight: 700; color: #2d3436; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 12px 0;">
                            Distribuicao por tipo</h5>
                        <div class="dash-modal-list dash-modal-list--laws">
                            @forelse($countType as $key => $items)
                                <a href="/lawsProjects?has-filter=true&created_at=&law_type_id={{ $items['id'] }}&project_number=&law_date=&assemblyman_id="
                                    class="dash-modal-list__item"
                                    style="text-decoration: none; color: #2d3436;">
                                    <span style="display: flex; align-items: center; gap: 10px; min-width: 0;">
                                        <span
                                            style="width: 8px; height: 8px; border-radius: 50%; background: #f39c12; flex-shrink: 0;"></span>
                                        <span class="dash-modal-list__label" style="font-size: 14px; font-weight: 500;">{{ $key }}</span>
                                    </span>
                                    <span style="display: flex; align-items: center; gap: 12px; flex-shrink: 0;">
                                        @php $percent = $projLeiAll > 0 ? round(($items['count'] / $projLeiAll) * 100, 1) : 0; @endphp
                                        <span style="font-size: 12px; color: #636e72;">{{ $percent }}%</span>
                                        <span
                                            style="font-size: 16px; font-weight: 700; color: #f39c12; min-width: 40px; text-align: right;">{{ $items['count'] }}</span>
                                    </span>
                                </a>
                            @empty
                                <p style="text-align: center; color: #b2bec3; padding: 20px 0; margin: 0;">Nenhum projeto
                                    de lei cadastrado</p>
                            @endforelse
                        </div>
                    </div>
                </div>
                <div class="modal-footer dash-modal-footer"
                    style="border-top: 1px solid #f0f0f0; padding: 12px 24px;">
                    <button type="button" class="btn btn-default" data-dismiss="modal"
                        style="border-radius: 8px;">Fechar</button>
                    <a href="/lawsProjects" class="btn btn-warning"
                        style="border-radius: 8px; color: #fff; font-weight: 600;">
                        <i class="fas fa-external-link-alt"></i> Ver todos
                    </a>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal: Estatisticas Documentos --}}
    <div class="modal fade dash-modal" id="dashModalDocs" role="dialog">
        <div class="modal-dialog dash-modal-dialog" role="document">
            <div class="modal-content dash-modal-content"
                style="border-radius: 14px; overflow: hidden; border: none; box-shadow: 0 25px 60px rgba(0,0,0,0.2);">
                <div class="modal-header"
                    style="background: linear-gradient(135deg, #3498db 0%, #2980b9 100%); color: #fff; border: none; padding: 20px 24px;">
                    <button type="button" class="close" data-dismiss="modal"
                        style="color:#fff; opacity:1; font-size: 24px;">&times;</button>
                    <h4 class="modal-title" style="color:#fff; font-weight: 700; font-size: 18px;"><i
                            class="fas fa-file-alt"></i> Documentos por Categoria</h4>
                </div>
                <div class="modal-body dash-modal-body" style="padding: 0;">
                    <div
                        style="display: flex; gap: 16px; padding: 20px 24px; background: #eef6fc; border-bottom: 1px solid #d4e8f8;">
                        <div style="flex: 1; text-align: center;">
                            <div style="font-size: 28px; font-weight: 800; color: #3498db;">{{ $docAll }}</div>
                            <div
                                style="font-size: 11px; color: #636e72; text-transform: uppercase; letter-spacing: 0.5px;">
                                Total</div>
                        </div>
                        <div style="flex: 1; text-align: center;">
                            <div style="font-size: 28px; font-weight: 800; color: #27ae60;">{{ $docRead }}</div>
                            <div
                                style="font-size: 11px; color: #636e72; text-transform: uppercase; letter-spacing: 0.5px;">
                                Lidos</div>
                        </div>
                        <div style="flex: 1; text-align: center;">
                            <div style="font-size: 28px; font-weight: 800; color: #e74c3c;">{{ $docAll - $docRead }}
                            </div>
                            <div
                                style="font-size: 11px; color: #636e72; text-transform: uppercase; letter-spacing: 0.5px;">
                                Nao lidos</div>
                        </div>
                    </div>
                    <div style="padding: 16px 24px 24px;">
                        <h5
                            style="font-size: 13px; font-weight: 700; color: #2d3436; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 12px 0;">
                            Distribuicao por tipo</h5>
                        <div class="dash-modal-list dash-modal-list--docs">
                            @forelse($countDoc as $key => $items)
                                <a href="/documents?has-filter=true&reg=&document_type_id={{ $items['id'] }}&number=&date=&owner_id=&content=&status=0"
                                    class="dash-modal-list__item"
                                    style="text-decoration: none; color: #2d3436;">
                                    <span style="display: flex; align-items: center; gap: 10px; min-width: 0;">
                                        <span
                                            style="width: 8px; height: 8px; border-radius: 50%; background: #3498db; flex-shrink: 0;"></span>
                                        <span class="dash-modal-list__label" style="font-size: 14px; font-weight: 500;">{{ $key }}</span>
                                    </span>
                                    <span style="display: flex; align-items: center; gap: 12px; flex-shrink: 0;">
                                        @php $percentDoc = $docAll > 0 ? round(($items['count'] / $docAll) * 100, 1) : 0; @endphp
                                        <span style="font-size: 12px; color: #636e72;">{{ $percentDoc }}%</span>
                                        <span
                                            style="font-size: 16px; font-weight: 700; color: #3498db; min-width: 40px; text-align: right;">{{ $items['count'] }}</span>
                                    </span>
                                </a>
                            @empty
                                <p style="text-align: center; color: #b2bec3; padding: 20px 0; margin: 0;">Nenhum documento
                                    cadastrado</p>
                            @endforelse
                        </div>
                    </div>
                </div>
                <div class="modal-footer dash-modal-footer"
                    style="border-top: 1px solid #f0f0f0; padding: 12px 24px;">
                    <button type="button" class="btn btn-default" data-dismiss="modal"
                        style="border-radius: 8px;">Fechar</button>
                    <a href="/documents" class="btn btn-info"
                        style="border-radius: 8px; color: #fff; font-weight: 600;">
                        <i class="fas fa-external-link-alt"></i> Ver todos
                    </a>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal: Detalhes do pedido --}}
    <div class="container">
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog modal-lg">
                <div class="modal-content" style="border-radius: 12px; overflow: hidden; border: none;">
                    <div class="modal-header"
                        style="background: linear-gradient(135deg, #6c5ce7 0%, #5b4cdb 100%); color: #fff; border: none;">
                        <button type="button" class="close" data-dismiss="modal"
                            style="color:#fff; opacity:1; font-size: 24px;">&times;</button>
                        <h4 class="modal-title" style="color:#fff; font-weight: 600;"><i class="fas fa-info-circle"></i>
                            Detalhes do Pedido</h4>
                    </div>
                    <div class="modal-body" style="padding: 24px;">
                        <div class="col-md-12">
                            <div class="form-group col-sm-6 hidden">
                                {{ Form::label('advice_id', 'id:') }}
                                <input type="text" id="advice_id" />
                                <label id="advice_id"></label>
                            </div>
                            <div class="form-group col-sm-6">
                                {!! Form::label('date', 'Data:') !!}
                                <label id="date" style="font-weight: 600; color: #2d3436;"></label>
                            </div>
                            <div class="form-group col-sm-6">
                                {!! Form::label('laws_projects_id', 'Projeto de lei:', ['id' => 'projectName']) !!}
                                <label id="laws_projects_id" style="font-weight: 600; color: #2d3436;"></label>
                            </div>
                            <div class="form-group col-sm-12">
                                {!! Form::label('description', 'Descricao:') !!}<br />
                                <p id="description" style="margin-left: 15px; color: #636e72;"></p>
                            </div>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                    <div class="modal-footer" style="border-top: 1px solid #f0f0f0; padding: 16px 24px;">
                        <a href="" id="history" class="btn btn-info" style="border-radius: 8px;">
                            <i class="fas fa-history"></i> Historico do tramite
                        </a>
                        <button type="button" class="btn btn-default" data-dismiss="modal" style="border-radius: 8px;">
                            <i class="fas fa-arrow-left"></i> Voltar
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal: Responder Parecer --}}
    <div class="container">
        <div class="modal fade" id="myModal1" role="dialog">
            <div class="modal-dialog modal-lg">
                <div class="modal-content" style="border-radius: 12px; overflow: hidden; border: none;">
                    <form id="adviceForm" action="/admin/saveAdvice" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" id="adv_idP" name="id" value="">
                        <div class="modal-header"
                            style="background: linear-gradient(135deg, #6c5ce7 0%, #5b4cdb 100%); color: #fff; border: none;">
                            <button type="button" class="close" data-dismiss="modal"
                                style="color:#fff; opacity:1; font-size: 24px;">&times;</button>
                            <h4 class="modal-title" style="color:#fff; font-weight: 600;"><i class="fas fa-reply"></i>
                                Responder Parecer</h4>
                        </div>
                        <div class="modal-body" style="padding: 24px;">
                            <div class="form-group">
                                <label style="font-weight: 600; color: #2d3436;">Data *</label>
                                <input type="date" id="dateP" name="date" class="form-control"
                                    style="border-radius: 8px; border-color: #e0e0e0;" required>
                            </div>
                            <div class="form-group">
                                <label style="font-weight: 600; color: #2d3436;">Situacao *</label>
                                <select id="situationP" name="commission_id" class="form-control"
                                    style="border-radius: 8px; border-color: #e0e0e0;" required>
                                    <option value="0">Selecione a situacao</option>
                                    @if (isset($commissions_situation))
                                        @foreach ($commissions_situation as $id => $name)
                                            @if ($id != 0)
                                                <option value="{{ $id }}">{{ $name }}</option>
                                            @endif
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                            <div class="form-group">
                                <label style="font-weight: 600; color: #2d3436;">Descricao *</label>
                                <textarea id="descriptionP" name="desc" class="form-control" rows="5"
                                    style="border-radius: 8px; border-color: #e0e0e0;" required></textarea>
                            </div>
                            <div class="form-group">
                                <label style="font-weight: 600; color: #2d3436;">Arquivo</label>
                                <input type="file" id="fileP" name="Arquivo" class="form-control"
                                    style="border-radius: 8px; border-color: #e0e0e0;">
                            </div>
                            <div class="form-group">
                                <div class="checkbox">
                                    <label style="font-weight: 500; color: #2d3436;">
                                        <input type="checkbox" id="closed" name="closed" value="1">
                                        Marcar como fechado
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer" style="border-top: 1px solid #f0f0f0; padding: 16px 24px;">
                            <button type="submit" class="btn btn-primary"
                                style="border-radius: 8px; background: linear-gradient(135deg, #6c5ce7 0%, #5b4cdb 100%); border: none; padding: 8px 24px;">
                                <i class="fas fa-save"></i> Salvar
                            </button>
                            <button type="button" class="btn btn-default" data-dismiss="modal"
                                style="border-radius: 8px; padding: 8px 24px;">
                                <i class="fas fa-times"></i> Fechar
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- VLibras --}}
    <div vw class="enabled">
        <div vw-access-button class="active"></div>
        <div vw-plugin-wrapper>
            <div class="vw-plugin-top-wrapper"></div>
        </div>
    </div>

    <script>
        // Data e hora no header
        (function() {
            function updateDateTime() {
                var now = new Date();
                var days = ['Domingo', 'Segunda-feira', 'Terca-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira',
                    'Sabado'
                ];
                var months = ['Janeiro', 'Fevereiro', 'Marco', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro',
                    'Outubro', 'Novembro', 'Dezembro'
                ];
                var dateEl = document.getElementById('dash-current-date');
                var hourEl = document.getElementById('dash-current-hour');
                if (dateEl) {
                    dateEl.textContent = days[now.getDay()] + ', ' + now.getDate() + ' de ' + months[now.getMonth()] +
                        ' de ' + now.getFullYear();
                }
                if (hourEl) {
                    hourEl.textContent = now.toLocaleTimeString('pt-BR', {
                        hour: '2-digit',
                        minute: '2-digit',
                        second: '2-digit'
                    });
                }
            }
            updateDateTime();
            setInterval(updateDateTime, 1000);
        })();
    </script>

    <script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
    <script>
        new window.VLibras.Widget('https://vlibras.gov.br/app');
    </script>
    <script>
        function verificarExibicaoModal() {
            if (!document.cookie.includes("modalExibido=true")) {
                var dataExpiracao = new Date();
                dataExpiracao.setTime(dataExpiracao.getTime() + (1 * 60 * 60 * 1000));
                document.cookie = "modalExibido=true; expires=" + dataExpiracao.toUTCString() + "; path=/";
            }
        }

        document.addEventListener("DOMContentLoaded", verificarExibicaoModal);
    </script>
@endsection