@extends('Templates/templateAdmin')

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

    @if (session('errors'))
        @php
            $allMissingTasks = session('errors');
        @endphp
        <div class="card card-danger">
            <div class="card-header">
                <h3 class="card-title">Elementos não associados:</h3>
                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    @if (count($allMissingTasks['workstation']) > 0)
                        <div class="col-sm">
                            <div class="card card-danger">
                                <div class="card-header">
                                    <h3 class="card-title">Postos de Trabalho sem tarefas</h3>
                                    <div class="card-tools">
                                        <button type="button" class="btn btn-tool" data-card-widget="collapse"><i
                                                class="fas fa-minus"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body" style="padding: 0;margin-bottom: 0%">

                                    <ul class="list-group scrollable-list">
                                        @foreach ($allMissingTasks['workstation'] as $workstationId => $workstationDetails)
                                            <li class="list-group-item d-flex align-items-center" aria-current="true">
                                                {{ $workstationDetails['name_workstations'] }}
                                                - {{ $workstationDetails['nomenclature_workstation'] }}
                                            </li>
                                        @endforeach
                                    </ul>

                                </div>
                            </div>{{-- ./card card-danger --}}
                        </div>
                    @endif
                </div>{{-- ./row --}}

                <div class="row">

                    {{-- @if (count($allMissingTasks['elemental']) > 0)
                        <div class="col-sm">
                            <div class="card card-danger">
                                <div class="card-header">
                                    <h3 class="card-title">Tarefas elementares não atribuidas</h3>
                                    <div class="card-tools">
                                        <button type="button" class="btn btn-tool" data-card-widget="collapse"><i
                                                class="fas fa-minus"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body" style="padding: 0;margin-bottom: 0%">
                                    <ul class="list-group scrollable-list">
                                        @foreach ($allMissingTasks['elemental'] as $taskId => $taskDetails)
                                            <li class="list-group-item d-flex align-items-center" aria-current="true">
                                                {{ $taskDetails['code'] }}
                                                - {{ $taskDetails['description'] }}
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div><!-- ./card card-danger -->
                        </div>
                    @endif --}}
                    <div class="col-sm">
                        <form action="{{route('removingElementalTasksFromProject')}}" method="POST">
                            @csrf
                            <input type="hidden" name="numberProject" value="{{ $numberProject }}">
                            @if (count($allMissingTasks['elemental']) > 0)
                                <div class="card card-danger">
                                    <div class="card-header">
                                        <h3 class="card-title">Tarefas elementares não atribuídas - (Seleciona para remover da obra, se necessário)</h3>
                                        <div class="card-tools">
                                            <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                                <i class="fas fa-minus"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="card-body" style="padding: 0; margin-bottom: 0%">
                                        <ul class="list-group scrollable-list">
                                            @foreach ($allMissingTasks['elemental'] as $taskId => $taskDetails)
                                                <li class="list-group-item d-flex justify-content-between align-items-center"
                                                    aria-current="true">
                                                    <div>
                                                        <input class="task-checkbox" type="checkbox" name="tasks[]"
                                                            value="{{ $taskId }}">
                                                        {{ $taskDetails['code'] }} - {{ $taskDetails['description'] }}
                                                    </div>

                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>

                                    <div class="card-footer">
                                        <button type="button" class="btn btn-info btn-sm" data-toggle="tooltip"
                                            data-placement="top" title="Todas as tarefas selecionadas serão retiradas de execução, e consequentemente, todos os equipamentos deixarão de ter essas tarefas para realizar. Para reverter esta alteração, basta entrar nos equipamentos individualmente e adicionar a tarefa removida. Assim, apenas os equipamentos que tiverem a tarefa adicionada realizarão a mesma.">
                                            Info
                                        </button>
                                        <button type="button" class="btn btn-secondary btn-sm" id="select-all">Selecionar
                                            Todos</button>
                                        <button type="submit" class="btn btn-primary btn-sm float-right">Submeter</button>
                                    </div>
                                </div>
                            @endif
                        </form>

                        <script>
                            $(document).ready(function() {
                                $('#select-all').click(function() {
                                    $('.task-checkbox').prop('checked', true);
                                });

                                // Inicializa tooltips para os botões de info
                                $('[data-toggle="tooltip"]').tooltip();
                            });
                        </script>
                    </div>




                    @if (count($allMissingTasks['further']) > 0)
                        <div class="col-sm">
                            <div class="card card-danger">
                                <div class="card-header">
                                    <h3 class="card-title">Tarefas complementares não atribuidas</h3>
                                    <div class="card-tools">
                                        <button type="button" class="btn btn-tool" data-card-widget="collapse"><i
                                                class="fas fa-minus"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body" style="padding: 0;margin-bottom: 0%">
                                    <ul class="list-group scrollable-list">
                                        @foreach ($allMissingTasks['further'] as $taskId => $taskDetails)
                                            <li class="list-group-item d-flex align-items-center" aria-current="true">
                                                {{ $taskDetails['name'] }}
                                                - {{ $taskDetails['description'] }}
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>{{-- ./card card-danger --}}
                        </div>
                    @endif
                </div>{{-- ./row --}}


            </div>
        </div>

    @endif


    <section class="content-header">
        <div class="container-fluid">

            <!-- Progressbar -->
            <ul id="progressbar" class="nav nav-pills d-flex flex-sm-row justify-content-center">
                <li class="@if ($step == 3) active @endif "></li>
                {{-- Project details --}}
                <li class="@if ($step == 3) active @endif "></li>
                {{-- Articulated --}}
                <li class="@if ($step == 3) active @endif "></li>
                {{-- Workstation --}}
            </ul>

        </div>
    </section>
    {{-- ./content-header --}}
    <fieldset class="content">
        <div class="container-fluid">

            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">Postos de Trabalho</h3>
                </div>
                <!-- ./Card-header -->
                <div class="card-body">
                    <!-- Criar tarefa -->
                    <div class="card card-success">
                        <div class="card-header">
                            <h3 class="card-title">Criar Postos de Trabalho</h3>

                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <div class="card ">
                                <div class="form-group col-md-12">
                                    <form action="{{ route('createWorkStations') }}" method="post">
                                        @csrf
                                        <input type="hidden" name="numberProject" value="{{ $numberProject }}">
                                        <div style="display: flex; justify-content: space-between;">
                                            <div style="display: flex; align-items: center;">
                                                <label class="mt-3" for="inputName" style="margin-right: 10px;">
                                                    Qtd. de Postos pretendidos :
                                                </label>
                                                <input class="form-control mt-3 mr-2" name="numberWorkstations"
                                                    type="number" id="numberPosts">
                                                <button class="btn btn-success mb-2 " type="submit" value="Guardar"
                                                    type="button" style="align-self: flex-end;">Criar</button>
                                            </div>
                                            <div>

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

                    </div>
                    <!--/Criar tarefa-->

                    <!-- Card Posto de Trabalho -->
                    <div class="card card-danger">
                        <div class="card-header">
                            <h3 class="card-title">Postos da Obra</h3>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table id="workstationTable" class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            {{-- <th>Posto de Trabalho</th> --}}
                                            <th>Nome Posto de Trabalho</th>
                                            <th>Detalhes</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($listWorkstations as $listWorkstation)
                                            <tr>
                                                {{-- <td>{{ $listWorkstation->name_workstations }}</td> --}}
                                                <td class="text-center">
                                                    <span>{{ $listWorkstation->nomenclature_workstation ?? '' }}</span>
                                                </td>
                                                <td class="text-center d-flex justify-content-around ">
                                                    <a href='#' data-toggle='modal' class="open-modal"
                                                        data-workstation-id="{{ $listWorkstation->id_workstations }}"
                                                        data-target='#modal-ViewOfices-{{ $listWorkstation->id_workstations }}'>
                                                        <i class='fa-solid fa-edit text-primary'></i>
                                                    </a>
                                                    <a href="#" data-toggle="modal"
                                                        data-target="#modal-remover-{{ $listWorkstation->id_workstations }}">
                                                        <i class="fa-solid fa-trash-alt text-danger"></i>
                                                    </a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            <!--/articulado de obra-->
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- ./Card Posto de Trabalho -->
                </div>
                {{-- ./card-body --}}
            </div>
            <!-- ./Card card-primary -->
            <a href="{{ route('articulated_2', ['projectID' => $numberProject]) }}"
                class="btn btn-primary previous float-left mb-3">Articulado</a>

            <form action="{{ route('finishCreatingProject', ['numberProject' => $numberProject]) }}">
                @csrf
                <input type="submit" class="btn btn-success previous float-right mb-3" value="Concluir">
            </form>

        </div>
        {{-- ./container-fluid --}}
    </fieldset>
    {{-- ./content --}}
    @foreach ($listWorkstations as $listWorkstation)
        @livewire('articulado.select-elemental-tasks-in-wonkstation', ['workstation' => $listWorkstation, 'key' => $listWorkstation->id_workstations])


        {{-- modal-remover --}}
        <div class="modal fade" id="modal-remover-{{ $listWorkstation->id_workstations }}">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header bg-primary">
                        <h4 class="modal-title">Remover Posto {{ $listWorkstation->name_workstations }} </h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">x</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form action="{{ route('deleteWorkstation', $listWorkstation->name_workstations) }}"
                            method="POST">
                            @csrf
                            @method('DELETE')
                            <p>Deseja realmente remover o Posto de Trabalho : {{ $listWorkstation->name_workstations }}?
                            </p>
                            <input class="btn btn-danger" type="submit" value="Remover">
                        </form>

                    </div>
                </div>
            </div>
        </div>
        {{-- ./modal-remover --}}
    @endforeach
@endsection

@section('scriptsTemplateAdmin')
    <script>
        $(function() {
            $("#workstationTable").DataTable({
                "responsive": true,
                "lengthChange": false,
                "autoWidth": false,
                "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
            }).buttons().container().appendTo('#workstationTable_wrapper .col-md-6:eq(0)');
        });
    </script>
@endsection