@extends('Templates/AdminLayout/AdminLayout')

@section('Main-content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Detalhes</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}">Dashboard</a></li>
                        <li class="breadcrumb-item">
                            <a href="{{ route('articulated_2', ['projectID' => $detailsProject->company_projects_id]) }}">
                                {{ $detailsProject->company_project_description }}
                            </a>
                        </li>
                        <li class="breadcrumb-item active">Detalhes</li>
                    </ol>
                </div><!-- /.col -->
            </div>
        </div><!-- /.container-fluid -->
    </section>
    <!-- /.content-header -->

    @if (session('success'))
        <div class="content">

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

    @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

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

            <div class="card card-primary">
                <div class="card-header "> <!-- Flex container with spaced between items -->
                    <h3 class="float-left"><b>Número ISPT -</b> {{ $receiveEquipmentWorkHistorys->ispt_number }}</h3>
                    <!-- This item will be on the left -->
                    <h3 class="float-right"> <b>Tag -</b> {{ $detalsEquipment->equipment_tag }}</h3>
                    <!-- This item will be on the right -->
                </div>

                <div class="card-body">

                    <div class="card">
                        <div class="card-body pt-3">
                            <!-- Bordered Tabs -->
                            <ul class="nav nav-tabs nav-tabs-bordered">
                                @if ($portfolioOnlyreadOrEditToo == 1 || $portfolioOnlyreadOrEditToo == 3)
                                    <li class="nav-item">
                                        <button class="nav-link active" data-bs-toggle="tab"
                                            data-bs-target="#show-Equipment">Visualizar</button>
                                    </li>
                                @endif

                                @if ($portfolioOnlyreadOrEditToo == 2 || $portfolioOnlyreadOrEditToo == 3)
                                <li class="nav-item">
                                    <button class="nav-link" data-bs-toggle="tab"
                                        data-bs-target="#edit-equipment">Editar</button>
                                </li>
                                @endif

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

    <!-- modal-confirmDeleteFurtherTask -->
    <div class="modal fade" id="modal-confirmDeleteFurtherTask">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h4 class="modal-title">Detalhes da Tarefa Complementar </h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">x</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p id="taskToDeleteId"></p>
                </div>
                <div class="modal-footer justify-content-between">
                    <!-- Botões do footer aqui -->
                </div>
            </div>
        </div>
    </div>
    <!-- ./modal-confirmDeleteFurtherTask -->

    <script>
        $(document).ready(function() {
            var filteredTasksJson = @json($filteredTasks);
            var filteredTasksArray = Object.values(filteredTasksJson);

            filteredTasksArray.forEach(task => {
                var beforeRowId = task.taskIDBeforeExecutionOrder.toString();
                var newRowId = task.execution_order.toString();

                var newRow = `
                    <tr id="${newRowId}" style="border:1px solid #00B0EA">
                        <td style="color:blue">${task.elemental_tasks_code}</td>
                        <td style="color:blue">${task.elemental_tasks_description}</td>
                        <td class="text-center">
                            <button type="button" style="background:none; border:none;" data-toggle="modal" data-target="#modal-confirmDeleteFurtherTask"
                                data-elemental_tasks_code="${task.elemental_tasks_code}"
                                data-elemental_tasks_description="${task.elemental_tasks_description}"
                                data-further_tasks_description="${task.further_tasks_description}">
                                <i class="fa-solid fa-eye text-primary"></i>
                            </button>
                        </td>
                    </tr>
                `;

                // Insere a nova linha após a linha com ID correspondente ao `taskIDBeforeExecutionOrder`, em ambas as tabelas.
                if ($("#TableTasksPSV-view tbody #" + beforeRowId).length > 0) {
                    $("#TableTasksPSV-view tbody #" + beforeRowId).after(newRow);
                } else {
                    $('#TableTasksPSV-view tbody').prepend(newRow);
                }

                if ($("#TableTasksPSV-edit tbody #" + beforeRowId).length > 0) {
                    $("#TableTasksPSV-edit tbody #" + beforeRowId).after(newRow);
                } else {
                    $('#TableTasksPSV-edit tbody').prepend(newRow);
                }
            });

            $('#modal-confirmDeleteFurtherTask').on('show.bs.modal', function(event) {
                var button = $(event.relatedTarget);
                var elementalTasksCode = button.data('elemental_tasks_code');
                var elementalTasksDescription = button.data('elemental_tasks_description');
                var furtherTasksDescription = button.data('further_tasks_description');

                var modalBody = $(this).find('.modal-body');
                modalBody.html(`
                    <p><strong>(${elementalTasksCode})</strong> ${elementalTasksDescription} </p>
                    <p><strong>Descrição da Tarefa:</strong> ${furtherTasksDescription}</p>
                `);
            });
        });
    </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>

    <script>
        $(function() {
            $('[data-toggle="tooltip"]').tooltip();
        })
    </script>

@endsection