@extends('Templates/AdminLayout/AdminLayout')

@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

    <input type="hidden" value="{{ $receiveDataCompanyProject->company_projects_id }}" id="receiveNumberProject">


    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2 align-items-center">
                <!-- Título da página à esquerda -->
                <div class="col-sm-6">
                    <h1 class="text-left">{{ $receiveDataCompanyProject->company_project_description }}</h1>
                </div>
                <!-- Breadcrumb alinhado à direita -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item">
                            <a href="{{ route('viewProjectsList', ['orderProjectID' => 1]) }}">Em Planeamento</a>
                        </li>
                        <li class="breadcrumb-item active">{{ $receiveDataCompanyProject->company_project_description }}
                        </li>
                        <li class="breadcrumb-item active">3 - Criar Postos de Trabalho</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>

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

            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">3 - Criar 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-->

                    <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="selectWorkstations" style="margin-right: 10px;">
                                        Quantos postos de trabalho pretende criar?
                                    </label>

                                    <select class="form-control mt-3 mr-2" name="numberWorkstations"
                                        id="selectWorkstations">
                                        @for ($i = 1; $i <= 10; $i++)
                                            <option value="{{ $i }}">{{ $i }}</option>
                                        @endfor
                                    </select>

                                    <button class="btn btn-success mb-2" type="submit"
                                        style="align-self: flex-end;">Criar</button>
                                </div>
                            </div>
                        </form>
                    </div>



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

            <!-- Card Posto de Trabalho -->
            <div class="card card-danger">
                <div class="card-header">
                    <h3 class="card-title">Postos de Trabalho</h3>
                </div>
                <div class="card-body">


                    {{-- <table id="TablePreparedProjectWorkstation" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>Postos de Trabalho</th>
                                <th>Nome do Posto de Trabalho</th>
                                <th>Tarefas Elementares</th>
                            </tr>
                        </thead>
                    </table> --}}

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

            <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

    {{-- <script type="Text/javascript">
        $(document).ready(function() {
           $('#TablePreparedProjectWorkstation').DataTable({
               autoWidth: false,
               processing: true,
               serverSide: true,
               ajax: {
                   url: '/api/receiveWorkstationProject/' + $('#receiveNumberProject').val(),
                   type: 'GET',
                   data: function(d){
                    d.typePage = 'workStation';
                   }
               },
               columns: [{
                               data: 'name_workstations',
                               name: 'name_workstations'
                           },
                           {
                               data: 'nomenclature_workstation',
                               name: 'nomenclature_workstation'
                           },
                           {
                               data: 'workstations_Association_Tasks',
                               name: 'workstations_Association_Tasks'
                           }
                       ]
               })
       })
    </script> --}}

    <script type="Text/javascript">
        $(document).ready(function() {
                $('#TablePreparedProjectWorkstation').DataTable({
                    autoWidth: false,
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: '/api/receiveWorkstationProject/' + $('#receiveNumberProject').val(),
                        type: 'GET',
                        data: function(d) {
                            d.typePage = 'workStation';  // Passa o valor de 'typePage' na requisição
                        }
                    },
                    columns: [
                        { data: 'name_workstations', name: 'name_workstations' },
                        { data: 'nomenclature_workstation', name: 'nomenclature_workstation' },
                        { data: 'workstations_Association_Tasks', name: 'workstations_Association_Tasks' }
                    ]
                });
            });
        </script>


@endsection

{{-- <script type="Text/javascript">
    $(document).ready(function(){ 

        $('#TableWorkstation').DataTable({
            autoWidth: false,
            processing: true,
            serverSide: true,
            ajax: {
                url: '/api/receiveWorkstationProject/' + $('#receiveNumberProject').val()
            },
            columns: [
                {
                    data: 'name_workstations',
                    name: 'name_workstations'
                },
                {
                    data: 'nomenclature_workstation',
                    name: 'nomenclature_workstation'
                },
                {
                    data: 'workstations_Association_Tasks',
                    name: 'workstations_Association_Tasks'
                },
                // {
                //     data: 'action',
                //     name: 'action',
                //     orderable: false,
                //     searchable: false
                // },
            ],
        })
    })
</script> --}}



@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