@extends('layouts.publicador.default')

@section('content')
    <div class="container-fluid my-4 animate__animated animate__fadeIn">
        <h4 class="mb-4 text-primary text-center">
            <i class="fas fa-chart-line mr-2"></i>@choice('labels.relatorios', 1) @lang('labels.gerencial')
        </h4>

        <div class="card mb-4 shadow-sm animate__animated animate__fadeInUp">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-filter mr-2"></i>Filtros de Pesquisa</h5>
            </div>
            <div class="card-body">
                {!! Form::open([
                    'route' => ['publicador.relatorios.da.gerencial'],
                    'method' => 'GET',
                    'class' => 'form',
                    'id' => 'form-gerencial',
                ]) !!}
                <div class="row">
                    <div class="col-md-2 mb-2">
                        <label for="unidade"><i class="fas fa-building mr-1"></i>@choice('labels.unidades', 1)</label>
                        {{ Form::select('unidade', $unidades, Request::query('unidade'), ['class' => 'form-control unidade', 'placeholder' => trans_choice('labels.unidades', 1)]) }}
                    </div>
                    <div class="col-md-3 mb-3">
                        <label for="sunidade"><i class="fas fa-layer-group mr-1"></i>@choice('labels.subunidades', 0)</label>
                        {{ Form::select('sunidade', [], Request::query('sunidade'), ['class' => 'form-control select2 subunidade', 'placeholder' => trans_choice('labels.subunidades', 0)]) }}
                    </div>
                    <div class="col-md-3 mb-3">
                        <label for="responsavel"><i class="fas fa-user mr-1"></i>Responsável</label>
                        {{ Form::select('responsavel', $usuarios->pluck('name', 'id'), Request::query('responsavel'), ['class' => 'form-control select2', 'placeholder' => 'Selecione o responsável']) }}
                    </div>
                    <div class="col-md-2 mb-2">
                        <label for="processo_de"><i class="fas fa-calendar-alt mr-1"></i>Processo de</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                            </div>
                            <input value="{{ !empty($input['processo_de']) ? $input['processo_de'] : '' }}"
                                class="form-control datepicker" autocomplete="off" placeholder="Processo de"
                                name="processo_de" type="text">
                        </div>
                    </div>
                    <div class="col-md-2 mb-2">
                        <label for="processo_ate"><i class="fas fa-calendar-alt mr-1"></i>até</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                            </div>
                            <input value="{{ !empty($input['processo_ate']) ? $input['processo_ate'] : '' }}"
                                class="form-control datepicker" autocomplete="off" placeholder="até" name="processo_ate"
                                type="text">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <button class="btn btn-primary btn-animate" type="submit">
                            <i class="fas fa-search mr-1"></i> Pesquisar
                        </button>
                        <a href="#" class="btn btn-success btn-animate" id="btn-download" title="download">
                            <i class="fas fa-download mr-1"></i> Baixar Planilha
                        </a>
                        <a href="{{ route('publicador.relatorios.da.gerencial') }}" class="btn btn-secondary btn-animate">
                            <i class="fas fa-undo mr-1"></i> Limpar Filtros
                        </a>
                    </div>
                </div>
                {!! Form::close() !!}
            </div>
            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    const form = document.getElementById('form-gerencial');
                    const downloadBtn = document.getElementById('btn-download');

                    downloadBtn.addEventListener('click', function(e) {
                        e.preventDefault();
                        const formData = new FormData(form);
                        let url = '{{ route('publicador.relatorios.da.downloadform') }}';
                        let params = [];

                        for (let [key, value] of formData.entries()) {
                            // Verifica se o valor não está vazio e não é o padrão de data não preenchida
                            if (value && value.trim() !== '' && value !== '__/__/____') {
                                params.push(encodeURIComponent(key) + '=' + encodeURIComponent(value));
                            }
                        }

                        // Adiciona os parâmetros à URL apenas se houver algum
                        if (params.length > 0) {
                            url += '?' + params.join('&');
                        }

                        window.location.href = url;
                    });
                });
            </script>
        </div>

        @if (session('status-success'))
            <div class="alert alert-success alert-dismissible fade show animate__animated animate__fadeIn" role="alert">
                <i class="fas fa-check-circle mr-1"></i> {{ session('status-success') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Fechar">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif
        @if (session('status-error'))
            <div class="alert alert-danger alert-dismissible fade show animate__animated animate__fadeIn" role="alert">
                <i class="fas fa-exclamation-circle mr-1"></i> {{ session('status-error') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Fechar">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            @php
                session()->forget('status-error');
            @endphp
        @endif

        @include('layouts.publicador.aviso_paginacao')

        @unless ($lista->isEmpty())
            <div class="card shadow-sm animate__animated animate__fadeInUp animate__delay-1s">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover" id="relatoriosTable">
                            <thead class="thead-dark">
                                <tr>
                                    <th>@choice('labels.processos', 1)</th>
                                    <th>@choice('labels.data', 1) @choice('labels.processos', 1)</th>
                                    <th>@choice('labels.unidades', 1)</th>
                                    <th>Dias em aberto</th>
                                    <th>Data Unidade</th>
                                    <th>@lang('labels.procedimento')</th>
                                    <th>@lang('labels.descricao')</th>
                                    <th>Ações</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($lista as $index => $item)
                                    @php
                                        $index = str_replace('.', '_', $index);
                                    @endphp
                                    <tr>
                                        <td>{{ $item['protocolo'] }}</td>
                                        <td>{{ \Carbon\Carbon::parse($item['data_geracao'])->format('d/m/Y') }}</td>
                                        <td>
                                            @if (!empty($item['atividade']))
                                                @foreach ($item['atividade'] as $sigla => $data)
                                                    @if ($sigla === 'DA' || $sigla === 'DAT/' || strpos($sigla, 'DA/') === 0)
                                                        {{ $sigla }} <br>
                                                    @endif
                                                @endforeach
                                            @endif
                                        </td>
                                        <td>
                                            @if (!empty($item['atividade']))
                                                @foreach ($item['atividade'] as $sigla => $data)
                                                    @if ($sigla === 'DA' || $sigla === 'DAT/' || strpos($sigla, 'DA/') === 0)
                                                        {{ \Carbon\Carbon::now()->diffInDays(\Carbon\Carbon::parse($data)) }}
                                                        dias <br>
                                                    @endif
                                                @endforeach
                                            @endif
                                        </td>
                                        <td>
                                            @if (!empty($item['atividade']))
                                                @foreach ($item['atividade'] as $sigla => $data)
                                                    @if ($sigla === 'DA' || $sigla === 'DAT/' || strpos($sigla, 'DA/') === 0)
                                                        {{ date('d/m/Y H:i', strtotime($data)) }}
                                                    @endif
                                                @endforeach
                                            @endif
                                        </td>
                                        <td>{{ $item['procedimento'] }}</td>
                                        <td>{{ !empty($item['descricao']) ? $item['descricao'] : 'Processo sem descrição' }}
                                        </td>
                                        <td>
                                            @php
                                                $id = str_replace(['.', '-'], '', $item['protocolo']);
                                            @endphp
                                            <div class="btn-group" role="group">
                                                <a href="{{ route('publicador.relatorios.da.form_edit', $id) }}"
                                                    class="btn btn-sm btn-primary btn-animate" title="Alterar">
                                                    <i class="fas fa-pencil-alt"></i>
                                                </a>
                                                <button class="btn btn-sm btn-info btn-animate toggle-details"
                                                    data-target="details-{{ $index }}" title="Detalhes">
                                                    <i class="fas fa-info-circle"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr class="details-row bg-light" id="details-{{ $index }}" style="display: none;">
                                        <td colspan="8">
                                            <div class="row animate__animated animate__fadeIn">
                                                <div class="col-md-6">
                                                    <h5 class="text-primary"><i class="fas fa-file-alt mr-2"></i>Detalhes</h5>
                                                    <dl class="row">
                                                        <dt class="col-sm-4">Número:</dt>
                                                        <dd class="col-sm-8">{{ $item['protocolo'] }}</dd>

                                                        <dt class="col-sm-4">Data Abertura:</dt>
                                                        <dd class="col-sm-8">
                                                            {{ $item['data_geracao'] ? \Carbon\Carbon::parse($item['data_geracao'])->format('d/m/Y') : '' }}
                                                        </dd>

                                                        <dt class="col-sm-4">Unidade geradora:</dt>
                                                        <dd class="col-sm-8">{{ $item['unidade_geradora'] }}</dd>

                                                        <dt class="col-sm-4">Procedimento:</dt>
                                                        <dd class="col-sm-8">{{ $item['procedimento'] }}</dd>

                                                        <dt class="col-sm-4">Descrição:</dt>
                                                        <dd class="col-sm-8">{{ $item['descricao'] }}</dd>

                                                        <dt class="col-sm-4">Situação:</dt>
                                                        <dd class="col-sm-8">{{ $item['situacao'] }}</dd>

                                                        <dt class="col-sm-4">Data da Situação:</dt>
                                                        <dd class="col-sm-8">{{ $item['data_situacao'] }}</dd>

                                                        <dt class="col-sm-4">Usuário Responsável:</dt>
                                                        <dd class="col-sm-8">{{ $item['usuario_responsavel_id'] }}</dd>

                                                        <dt class="col-sm-4">Observação:</dt>
                                                        <dd class="col-sm-8">{{ $item['obs'] }}</dd>

                                                        <dt class="col-sm-4">Unidade atual:</dt>
                                                        <dd class="col-sm-8">
                                                            @if (!empty($item['atividade']))
                                                                @foreach ($item['atividade'] as $sigla => $data)
                                                                    {{ $sigla }}<br>
                                                                @endforeach
                                                            @endif
                                                        </dd>
                                                    </dl>
                                                </div>
                                                <div class="col-md-6">
                                                    <h5 class="text-primary"><i class="fas fa-history mr-2"></i>Histórico</h5>
                                                    @if (!empty($item['atividade']))
                                                        <div class="table-responsive"
                                                            style="max-height: 1600px; overflow-y: auto;">
                                                            <table class="table table-sm table-bordered">
                                                                <thead class="thead-light">
                                                                    <tr>
                                                                        <th>Unidade</th>
                                                                        <th>Data</th>
                                                                        <th>Tempo na unidade</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    @foreach ($item['atividade'] as $key => $atividade)
                                                                        <tr
                                                                            @if ($key === 'DA' || strpos($key, 'DA/') === 0) style="background-color: #888888ab; color: white;" @endif>
                                                                            <td>{{ $key }}</td>
                                                                            <td>{{ date('d/m/Y H:i', strtotime($atividade)) }}
                                                                            </td>
                                                                            <td>{{ \Carbon\Carbon::now()->diffInDays(\Carbon\Carbon::parse($atividade)) }}
                                                                                dias</td>
                                                                        </tr>
                                                                    @endforeach
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    @else
                                                        <p class="text-muted">Sem atividade registrada.</p>
                                                    @endif
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        @endunless

        @include('layouts.publicador.paginacao')
    </div>


    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" />
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <style>
        #relatoriosTable th {
            min-width: 135px;
        }

        .details-row td {
            max-width: 0;
            overflow: hidden;
        }

        .details-row .row {
            margin: 0;
            width: 100%;
        }

        .text-primary {
            color: #333 !important;
        }

        .table .thead-dark th {
            color: #fff;
            background-color: #004071;
            border-color: #454d55;
        }

        .bg-primary {
            background-color: #004071 !important;
        }

        .table {
            width: 100%;
            margin-bottom: 1rem;
            color: #000;
        }

        .select2-container--bootstrap-5 .select2-selection {
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
        }

        .details-row {
            background-color: #f8f9fa;
        }

        .details-row td {
            padding: 20px;
        }

        .btn-group {
            white-space: nowrap;
        }

        .btn-animate {
            transition: all 0.3s ease;
        }

        .btn-animate:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        #relatoriosTable tbody tr {
            transition: background-color 0.3s ease;
        }

        #relatoriosTable tbody tr:hover {
            background-color: #f1f3f5;
        }

        .card {
            transition: box-shadow 0.3s ease;
        }

        .card:hover {
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        }

        .select2-container .select2-selection--single {
            height: 38px;
            line-height: 38px;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 36px;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 38px;
        }

        .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: #004071;
        }

        .select2-container--default .select2-results__option[aria-selected=true] {
            background-color: #e9ecef;
        }

        .select2-dropdown {
            border-color: #ced4da;
        }

        .select2-search--dropdown .select2-search__field {
            border-radius: 0.25rem;
        }
    </style>

    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://kit.fontawesome.com/19aa79ed21.js" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function() {
            $('.subunidade').select2({
                theme: 'bootstrap-5',
                width: '100%',
                placeholder: '@choice('labels.subunidades', 0)',
                allowClear: true,
                minimumResultsForSearch: 5,
                maximumSelectionLength: 5
            });

            $('.toggle-details').on('click', function() {
                var target = $(this).data('target');
                $('.details-row').not('#' + target).slideUp(300);
                $('#' + target).slideToggle(300);
                $(this).find('i').toggleClass('fa-info-circle fa-times-circle');
            });

            $('.unidade').change(function() {
                let id = $(this).val();
                $('.subunidade').empty().append('<option value="0">@choice('labels.subunidades', 0)</option>');
                if (id === '') return;

                $.getJSON('{{ route('publicador.unidades.sub') }}', {
                    id: id
                }, function(data) {
                    let sub = $('.subunidade');
                    sub.empty()
                        .append('<option value="0">@lang('labels.selecione') @choice('labels.subunidades', 0)</option>')
                        .append('<option value="1">@lang('labels.todas') @choice('labels.subunidades', 0)</option>');

                    $.each(data, function(k, v) {
                        let opt = $('<option value="' + v.id_unidade + '">' + v.sigla +
                            ' - ' +
                            v.descricao + '</option>');
                        sub.append(opt);
                    });

                    @if ($subunidade > 0)
                        sub.val({{ $subunidade }});
                    @endif

                    sub.trigger('change');
                });
            }).trigger('change');

            $('.datepicker').datetimepicker({
                format: 'd/m/Y',
                timepicker: false,
                mask: false, // Removemos a máscara
                lang: 'pt-BR',
                defaultDate: '', // Define a data padrão como vazia
                allowBlank: true // Permite que o campo fique em branco
            });

            downloadBtn.addEventListener('click', function(e) {
                e.preventDefault();
                const formData = new FormData(form);
                let url = '{{ route('publicador.relatorios.da.downloadform') }}';
                let params = [];

                for (let [key, value] of formData.entries()) {
                    // Verifica se o valor não está vazio, não é o padrão de data não preenchida, e não é apenas espaços em branco
                    if (value && value.trim() !== '' && value !== '__/__/____' && !/^\s*$/.test(value)) {
                        params.push(encodeURIComponent(key) + '=' + encodeURIComponent(value));
                    }
                }

                // Adiciona os parâmetros à URL apenas se houver algum
                if (params.length > 0) {
                    url += '?' + params.join('&');
                }

                window.location.href = url;
            });

            var table = $('#relatoriosTable').DataTable({
                "language": {
                    "url": "//cdn.datatables.net/plug-ins/1.10.24/i18n/Portuguese-Brasil.json"
                },
                "pageLength": 25,
                "order": [
                    [1, "desc"]
                ],
                "responsive": true,
                "buttons": [
                    'copy', 'excel', 'pdf', 'print'
                ],
                "columnDefs": [{
                    "targets": 4,
                    "width": "135px",
                    "render": function(data, type, row) {
                        return data.replace(/<br>/g, ' ');
                    }
                }]
            });

            function adjustHistoryHeight() {
                $('.details-row').each(function() {
                    var dtHeight = $(this).find('dt:contains("Unidade atual")').height();
                    var historyDiv = $(this).find('.table-responsive');
                    historyDiv.css('max-height', dtHeight + 'px');
                });
            }

            table.on('draw', adjustHistoryHeight);
            $(window).on('resize', adjustHistoryHeight);

            // Adiciona animação aos botões de ação
            $('.btn-animate').hover(
                function() {
                    $(this).addClass('animate__animated animate__pulse');
                },
                function() {
                    $(this).removeClass('animate__animated animate__pulse');
                }
            );

            // Adiciona efeito de hover nas linhas da tabela
            $('#relatoriosTable tbody').on('mouseenter', 'tr', function() {
                $(this).addClass('animate__animated animate__fadeIn');
            }).on('mouseleave', 'tr', function() {
                $(this).removeClass('animate__animated animate__fadeIn');
            });

            // Animação suave ao scroll
            $('a[href*="#"]').on('click', function(e) {
                e.preventDefault();
                $('html, body').animate({
                    scrollTop: $($(this).attr('href')).offset().top
                }, 500, 'linear');
            });
        });
    </script>
@endsection