@extends('Templates/templateAdmin')

@section('Main-content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Relatório Individual</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        {{-- Precisa passar o ID do cliente --}}
                        {{-- <li class="breadcrumb-item active"><a href="{{ route('reportingDataClient', $detailsProject->user_id) }}">Obras Concluidas</a></li> --}}
                        {{-- Passar o numero da Obra --}}
                        {{-- <li class="breadcrumb-item active"><a href="{{ route('showDataDetailsProjectClient', $detailsProject->company_projects_id) }}">Relatorios Gerais</a></li> --}}
                        <li class="breadcrumb-item active">Relatório Individual</li>
                    </ol>

                </div>
            </div>
        </div>
    </section>

    <fieldset class="content">
        <div class="container-fluid">

            <div class="card card-success collapsed-card">
                <div class="card-header clickable">
                    <h3 class="card-title">Comentários sobre o Equipamento</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool collapse-button" data-card-widget="collapse"><i
                                class="fas fa-plus"></i>
                        </button>
                    </div>
                </div>

                <div class="card-body">

                    <div class="chat-container"
                        style="height: 250px; overflow-y: scroll; padding: 10px; background-color: #f9f9f9; border: 1px solid #ddd;">

                        <!-- Mensagens do Chat -->
                        @foreach ($receiveComments as $receiveComment)
                            <div class="chat-message {{ $receiveComment->type_users == 2 ? 'right' : 'left' }} mt-1">
                                <div class="flex-shrink-1 bg-light rounded py-2 px-3 {{ $receiveComment->type_users == 2 ? 'mr-3' : 'ml-3' }}"
                                    style="border: 1px solid #ccc; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
                                    <div class="font-weight-bold mb-1">{{ $receiveComment->user->user_name }}
                                        <b>({{ $receiveComment->user->userType->type_user }})</b>
                                    </div>
                                    <p style="color:black">{{ $receiveComment->comment }}</p>
                                    <div class="text-muted small text-nowrap mt-2">
                                        {{ $receiveComment->creation_date }} (
                                        {{ \Carbon\Carbon::parse($receiveComment->creation_date)->diffForHumans() }})
                                    </div>
                                </div>
                            </div>
                        @endforeach

                    </div>

                    {{-- Apenas para equipamentos de Status = 0 ou = 1  --}}
                    @if ($equipmentStatus == 0)
                        <!-- Área de envio de nova mensagem -->
                        <div class="mt-3">
                            <form action="{{ route('createComment') }}" method="post">
                                @csrf
                                <input type="hidden" name="projectID" value="{{ $detailsProject->company_projects_id }}">
                                <input type="hidden" name="equipmentID"
                                    value="{{ $detailsEquipmentWorkProject->equipmentWorkHistorys_id }}">

                                <div class="mb-3">
                                    <label for="comment" class="form-label">Comentário</label>
                                    <textarea class="form-control" id="comment" name="comment" rows="3" required
                                        placeholder="Digite aqui suas observações ou comentário..."></textarea>
                                </div>
                                <button class="btn btn-success float-right" type="submit">Enviar</button>

                            </form>
                        </div>
                    @endif

                </div>
            </div>
            <!-- ./card -->

            @if ($equipmentStatus == 1)
                <div class="card card-success">

                    <div class="card-header clickable">
                        <h3 class="card-title">Ações ao equipamento (Aprovar/Comentar)</h3>
                        <div class="card-tools">
                            <button type="button" class="btn btn-tool collapse-button" data-card-widget="collapse"><i
                                    class="fas fa-plus"></i></button>
                        </div>
                    </div>

                    <div class="card-body">
                        <form action="{{ route('changeEquipmentStatusOnProject') }}" method="post">
                            @csrf

                            <input type="hidden" name="projectID" value="{{ $detailsProject->company_projects_id }}">
                            <input type="hidden" name="equipmentID" value="{{ $detalsEquipment->equipment_id }}">
                            <div class="mb-3">
                                <label for="choiseAdminForEquipment" class="form-label">Decisão de Aprovação</label>
                                <select class="form-select" name="choiseAdminForEquipment" id="choiseAdminForEquipment">
                                    <!-- Opções para aprovação -->
                                    <option value="approve">Aprovar</option>
                                    <option value="disapprove">Não aprovar</option>
                                </select>
                                <div class="form-text">Se aprovar, as observações devem ser incluídas no relatório. Se não
                                    aprovar, comente o que é necessário alterar.</div>
                            </div>

                            <div class="mb-3">
                                <label for="comment" class="form-label">Observação/Comentário</label>
                                <textarea class="form-control" id="comment" name="comment" rows="3" required
                                    placeholder="Digite aqui suas observações ou comentário..."></textarea>
                            </div>
                            <button class="btn btn-success float-right" type="submit">Enviar</button>
                        </form>
                    </div>

                </div>
                <!-- ./card card-success-->
            @endif

            <div class="card card-primary">

                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3>{{ $detailsProject->company_project_description }}</h3>
                        <h5 class="mx-auto">Tag: {{ $detalsEquipment->equipment_tag }}</h5>
                        <h5>{{ $receiveAmbit->ambitsEquipment->ambits_description }}</h5>

                        <a
                            href="{{ route('createPDFforcompletedEquipment', ['equipmentId' => $detalsEquipment->equipment_id]) }}">
                            <i class="fa-solid fa-file-pdf fa-2x"></i>
                        </a>
                    </div>
                </div>

                <div class="card-body">


                    @foreach ($receiveAllTasksHistiory as $elemental_tasks_id => $tasks)
                        @if (!empty($tasks['latest']))
                            @php
                                $task_todo = $tasks['latest'];
                            @endphp

                            @include('components.elemental-tasks', ['task_todo' => $task_todo])
                        @endif
                    @endforeach


                    {{-- ESTA modal recebe corretamento os historicos para cada tarefa ja executada, porem a questao e que da forma que esta atualmente se tirar de comentario, os valores do tipo radio simplemente não aparecem --}}
                    <!-- Modal -->
                    {{-- <div class="modal fade" id="taskModal" tabindex="-1" role="dialog" aria-labelledby="taskModalLabel"
                        aria-hidden="true">
                        <div class="modal-dialog modal-xl" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="taskModalLabel">Histórico da Tarefa</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <!-- Conteúdo do histórico -->
                                    @foreach ($receiveAllTasksHistiory as $elemental_tasks_id => $tasks)
                                        @if (!empty($tasks['history']))
                                            <div id="task-history-{{ $elemental_tasks_id }}" class="task-history"
                                                style="display: none;">
                                                @foreach ($tasks['history'] as $task)
                                                    @include('components.elemental-tasks', [
                                                        'task_todo' => $task,
                                                    ])
                                                @endforeach
                                            </div>
                                        @endif
                                    @endforeach

                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                                </div>
                            </div>
                        </div>
                    </div>  --}}
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"
                        style="float: left;">
                        Concluir equipamento sem executar as tarefas
                    </button>
                </div>
                <!-- ./card-body -->


            </div>
            <!-- ./card card-primary -->

            <!-- Modal Structure -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document"> <!-- Added modal-lg class to increase modal size -->
                    <div class="modal-content">

                        <form action="{{ route('completedEquipmentInProject') }}" method="POST">
                            @csrf

                            <input type="hidden" name="company_projects_id"
                                value="{{ $detailsProject->company_projects_id }}">
                            <input type="hidden" name="equipment_id" value="{{ $detalsEquipment->equipment_id }}">

                            <div class="modal-header">
                                <h5 class="modal-title" id="myModalLabel">Concluir equipamento sem executar as tarefas
                                </h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>

                            <div class="modal-body">
                                <p>
                                    Ao selecionar a opção de concluir, o primeiro passo será indicar o motivo, que será
                                    incluído no relatório.
                                    As tarefas já realizadas também serão apresentadas no relatório.
                                </p>

                                <!-- Full-width textarea using Bootstrap grid -->
                                <div class="form-group">
                                    <label for="reason">Motivo</label>
                                    <textarea name="reason" class="form-control" id="reason" rows="5" style="width: 100%"></textarea>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                                <button type="submit" class="btn btn-primary">Concluir equipamento</button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>


        </div>
    </fieldset>


    <script>
        $(document).ready(function() {
            $('#taskModal').on('show.bs.modal', function(event) {
                var button = $(event.relatedTarget); // Botão que acionou o modal
                var taskId = button.data('elemental-task-id'); // Extrai informação dos atributos data-*
                var modal = $(this);

                // Define o ID da tarefa no modal
                modal.find('.modal-body #modal-task-id').text('Elemental Task ID: ' + taskId);

                // Exibe o histórico da tarefa correspondente
                $('.task-history').hide(); // Esconde todos os históricos
                $('#task-history-' + taskId).show(); // Mostra o histórico específico
            });
        });
    </script>




    <!-- Script para abrir os card sem tem que click diretamente no icone -->
    <script type="text/javascript">
        $(document).ready(function() {
            $('.clickable').on('click', function(e) {
                // Verifica se o clique não foi no botão
                if (!$(e.target).is('.collapse-button') && !$(e.target).is('.collapse-button *')) {
                    $(this).find('.collapse-button').trigger('click');
                }
            });
        });
    </script>
@endsection