@extends('Templates/AdminLayout/AdminLayout')

@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">

                    <x-layouts.elementalTasksOfficial :recebeTasksForEquipment="$receiveAllTasksHistiory" :dataControlEquipment="$dataControlEquipment" />

                    <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>
@endsection