@extends('Templates/WorkstationsLayout/WorkstationsLayout')

@section('Main-content')

    @if (session('danger'))
        <div class="content">
            <div class="alert alert-danger" role="alert" id="alert-message-danger" style="transition: opacity 1s;">
                {{ session('danger') }}
            </div>
        </div>
        <script>
            setTimeout(function() {
                $('#alert-message-danger').fadeOut('slow', function() {
                    $(this).remove();
                });
            }, 5000); // A mensagem desaparecerá após 5 segundos
        </script>
    @endif

     <section class="content mt-3">

        <div class="row justify-content-center align-items-center">
            <div class="col-12">

                <div class="card card-info">

                    <!-- Card-header principal card-->
                    <div class="card-header d-flex justify-content-between align-items-center flex-wrap">
                        <!-- Alinhado à esquerda -->
                        <div class="col-auto">
                            <a class="open-modal" data-toggle="modal" data-target="#modal-showEquipment">
                                <i class="fa-sharp fa-regular fa-newspaper"></i> Portfólio
                            </a>
                        </div>

                        <!-- Centralizado -->
                        <div class="col-auto text-center flex-grow-1">
                            <h4 class="mb-0">Ispt.N :{{ $detalsEquipment->istp_number }}</h4>
                        </div>

                        <!-- Alinhado à direita -->
                        <div class="col-auto">
                            <h5 class="mb-0 text-right">Ambito :{{ $detalsEquipment->equipment_ambit }}</h5>
                        </div>

                        <!-- Modal do Portifolio  -->
                        <div class="modal fade" id="modal-showEquipment">
                            <div class="modal-dialog modal-xl">

                                <div class="modal-content">
                                    <div class="modal-header bg-light">
                                        <h4 class="modal-title">Equipamento:</h4>
                                        <h3>{{ $detalsEquipment->equipment_tag }}</h3>
                                    </div>

                                    <div class="modal-body">

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

                                        <!-- Bordered Tabs -->
                                        <ul class="nav nav-tabs nav-tabs-bordered" id="portfolioTabs" role="tablist">
                                            <li class="nav-item">
                                                <button class="nav-link active" id="view-tab" data-bs-toggle="tab"
                                                    data-bs-target="#show-Equipment" type="button" role="tab"
                                                    aria-controls="show-Equipment" aria-selected="true">
                                                    Visualizar
                                                </button>
                                            </li>

                                            <li class="nav-item">
                                                <button class="nav-link" id="edit-tab" data-bs-toggle="tab"
                                                    data-bs-target="#edit-equipment" type="button" role="tab"
                                                    aria-controls="edit-equipment" aria-selected="false">
                                                    Editar
                                                </button>
                                            </li>
                                        </ul>


                                        <div class="tab-content pt-2" id="portfolioTabsContent">
                                            <x-portfolio.portfolioAttributesForEquipments :detalsEquipment="$detalsEquipment"
                                                :specificAttributesArray="$specificAttributesArray" :portfolioOnlyreadOrEditToo="$portfolioOnlyreadOrEditToo" />
                                        </div>

                                    </div><!-- ./modal-body-->

                                </div><!-- ./modal-content-->
                            </div><!-- ./modal-dialog modal-xl-->
                        </div> <!-- ./modal-showEquipment-->
                    </div><!-- ./Card-header-->

                    <!-- Card corpo do equipamento para onde vai receber as Tarefas elementares -->
                    <div class="card-body">

                        <div class="card card-success collapsed-card">
                            <div class="card-header clickable">
                                <div class="d-flex justify-content-between align-items-center" style="width: 100%;">
                                    <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>

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

                                <!-- Área de envio de nova mensagem -->
                                <div class="mt-3">
                                    <form action="{{ route('createComment') }}" method="post">
                                        @csrf
                                        <input type="hidden" name="projectID"
                                            value="{{ $detalsEquipment->company_projects_id }}">
                                        <input type="hidden" name="equipmentID"
                                            value="{{ $dataControlEquipment['collection']->equipmentWorkHistorys_id }}">


                                        <div class="mb-3">
                                            <label for="comment" class="form-label">Comentário/Equipamento</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>
                        </div>


                        
                        <form  action="{{ route('cancelElementalTaskForEquipment', ['controlEquipmentID' => $dataControlEquipment['collection']->control_equipment_workstation_id]) }}" method="get">
                            <div class="card-footer">
                                <button type="submit" data-action="cancel" class="btn btn-danger float-right"
                                    style="background-color: red">Finalizar Ações ao equipamento</button>
                            </div>
                        </form>
                        
                        <!-- Deve futuramente atualizar a estrutura, para funcionar com o $dataControlEquipment, pois se utilizar agora, desformata a estrutura -->
                        <x-layouts.elementalTasksOfficial :recebeTasksForEquipment="$recebeTasksForEquipment" :dataControlEquipment="$dataControlEquipment" />
                        {{-- <x-layouts.elementalTasksOfficial :recebeTasksForEquipment="$recebeTasksForEquipment" :dataControlEquipment="$dataControlEquipment" /> --}}

                    </div><!-- card-body do card principal -->
                </div> <!-- ./ Card card-indo principal-->

            </div> <!-- ./ col-12 -->
        </div>
    </section>
    
@endsection