@extends('Templates/templateAdmin')



@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>{{ $DatasProject->company_project_description }}</h1>
                    <input type="hidden" value="{{ $DatasProject->company_projects_id }}" id="receiveNumberProject">
                </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="./preparadas.html">Em Execucao</a></li>
                        <li class="breadcrumb-item active">{{ $DatasProject->company_project_description }}</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

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-md-12">

                    <div class="row">
                        <div class="col-sm" id="ViewDetailsButton">
                            <a href="#" type="button" class="btn btn-block bg-primary btn-lg"
                                style="margin-bottom: 2%;">Detalhes</a>
                        </div>

                        <div class="col-sm" id="ViewEquipmentsButton">
                            <a href="#" type="button" class="btn btn-block bg-primary btn-lg"
                                style="margin-bottom: 2%;"> Equipamentos</a>
                        </div>

                        <div class="col-sm" id="ViewWorkstationButton">
                            <a href="#" type="button" class="btn btn-block bg-primary btn-lg"
                                style="margin-bottom: 2%;">Postos de Trabalho</a>
                        </div>

                        <div class="col-sm" id="ViewTasksButton">
                            <a href="#" type="button" class="btn btn-block bg-primary btn-lg"
                                style="margin-bottom: 2%;">Tarefas</a>
                        </div>

                    </div>

                    <div class="card card-primary" id="CardViewDetails">
                        <div class="card-header">
                            <h3 class="card-title">Detalhes da Obra</h3>
                        </div>
                        <div class="card-body p-0">

                            <table class="table table-striped text-center">
                                <tbody>
                                    <tr>
                                        <td>Descrição da obra:</td>
                                        <td>{{ $DatasProject->company_project_description }}</td>
                                    </tr>
                                    <tr>
                                        <td>N.º obra ISPT:</td>
                                        <td>{{ $DatasProject->project_ispt_number }}</td>
                                    </tr>
                                    <tr>
                                        <td>Resp.ISPT:</td>
                                        <td>{{ $DatasProject->project_ispt_responsible }}</td>
                                    </tr>
                                    <tr>
                                        <td>Empresa :</td>
                                        <td>{{ $receiveCompany->company_name }}</td>
                                    </tr>
                                    <tr>
                                        <td>Resp.Cliente:</td>
                                        {{-- <td>{{ $DatasProject->project_company_responsible }}</td> --}}
                                        <td>Yuri Empresa Teste</td>
                                    </tr>
                                    <tr>
                                        <td>N.º obra Cliente :</td>
                                        <td>{{ $DatasProject->project_company_number }}</td>
                                    </tr>
                                </tbody>
                            </table>

                            <div class="row m-3 justify-content-between">
                                <div>
                                    <button class="btn btn-info" data-toggle="modal" data-target="#exampleModal">Adicionar
                                        equipamentos a Obra</button>
                                </div>
                                <div>
                                    <a href="{{ route('showQrcodesInProject', ['projectNumber' => $DatasProject->company_projects_id]) }}"
                                        class="btn btn-danger">Imprimir Qrcodes</a>
                                </div>
                            </div>


                            <!-- Modal -->
                            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
                                aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalLabel">Alterar para planeamento?</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            Ao optar por adicionar equipamentos, a fase do projeto será modificada para
                                            'Planeamento', impossibilitando o acompanhamento do estado atual dos
                                            equipamentos até que o projeto retorne à fase de 'Execução'.
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary"
                                                data-dismiss="modal">Fechar</button>
                                            <form
                                                action="{{ route('changeFromExecutionToPlanning', ['projectID' => $DatasProject->company_projects_id]) }}"
                                                method="post">
                                                @csrf
                                                <button type="submit" class="btn btn-primary">
                                                    Alterar para Planeamento
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- ./Modal -->


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

                    </div>

                    <div class="card card-primary" id="CardViewEquipments">
                        <div class="card-header">
                            <h3 class="card-title">Equipamentos</h3>
                            <div class="card-tools">
                            </div>
                        </div>

                        <div class="card-body">
                            @livewire('execução.equipments-dashboard', ['datasProject' => $DatasProject], key($DatasProject->company_projects_id))

                            <div class="card card-info mt-4">

                                <div class="card-header">
                                    <h3 class="card-title">Lista de equipamentos da Obra</h3>
                                </div>
                                <!-- /.card-header -->

                                <div class="card-body">

                                    <table id="TableListEquipmentInProject" class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th>Tag</th>
                                                <th>Descrição</th>
                                                <th>Tipo Equipamento</th>
                                                <th>Fabrica</th>
                                                <th>Âmbito</th>
                                                <th>Ação</th>
                                            </tr>
                                        </thead>
                                    </table>

                                </div>
                            </div>
                            <!-- ./card card-info -->


                            <div class="card card-info mt-4">

                                <div class="card-header ">
                                    <h3 class="card-title">Concluidos, por Aprovar</h3>
                                </div>
                                <!-- /.card-header -->

                                <div class="card-body">

                                    <table id="TableListEquipmentInProjectPendingsForApprove"
                                        class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th>Tag</th>
                                                <th>Descrição</th>
                                                <th>Tipo Equipamento</th>
                                                <th>Fabrica</th>
                                                <th>Âmbito</th>
                                                <th>Ação</th>
                                            </tr>
                                        </thead>
                                    </table>

                                </div>
                            </div>
                            <!-- ./card card-info -->

                        </div>
                    </div>

                    <div class="card card-primary" id="CardViewWorkstations">
                        <div class="card-header">
                            <h3 class="card-title">Postos de Trabalho</h3>
                            <div class="card-tools">
                            </div>
                        </div>

                        <div class="card-body">

                            <table class="table table-striped text-center">
                                <thead>
                                    <tr>
                                        <th>Nome do Posto</th>
                                        <th>Login</th>
                                        <th>Senha</th>
                                    </tr>
                                </thead>
                                <tbody>

                                    @foreach ($filteredUsers as $user)
                                        <tr>
                                            <td>{{ $user->nomenclature_workstation }}</td>
                                            <td>{{ $user->email }}</td>
                                            <td>{{ $user->realPassword }}</td>
                                        </tr>
                                    @endforeach
                                    <!-- Adicione mais linhas conforme necessário -->
                                </tbody>
                            </table>

                        </div>
                    </div>


                    <div class="card card-primary" id="CardViewTasks">
                        <div class="card-header">
                            <h3 class="card-title">Tarefas</h3>
                            <div class="card-tools">
                            </div>
                        </div>

                        <div class="card-body">
                            @livewire('execução.tasks-dashboard', ['datasProject' => $DatasProject], key($DatasProject->company_projects_id))
                        </div>
                    </div>



                    {{-- <div class="card card-primary" id="CardViewWorkstations">
                        <div class="card-header">
                            <h3 class="card-title">Postos de Trabalho</h3>
                            <div class="card-tools">
                            </div>
                        </div>

                        <div class="card-body">
                            <p>teste</p>
                            @livewire('execução.tasks-dashboard', ['datasProject' => $DatasProject], key($DatasProject->company_projects_id))
                        </div>
                    </div> --}}

                    {{-- <div class="card card-primary" id="CardViewWorkstations">
                        <div class="card-header">
                            <h3 class="card-title">Postos de Trabalho</h3>
                            <div class="card-tools">
                            </div>
                        </div>

                        <div class="card-body">
                            <p>teste</p>
                            @livewire('execução.workstation-dashboard', ['datasProject' => $DatasProject], key($DatasProject->company_projects_id))
                        </div>
                    </div> --}}

                </div>

            </div>
        </div>
    </section>
@endsection

@section('scriptsTemplateAdmin')
    {{-- Antigocode para  funcioanr o yajra, porem apenas para uma tabela, quando concluir osyajrada pagina,pode apagar. --}}
    {{-- <script type="text/javascript">
        var dataTables;
        $(document).ready(function() {

            dataTables = $('#TableListEquipmentInProject', '#TableListEquipmentInProjectPendingsForApprove')
                .DataTable({
                    responsive: true,
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: '{{ route('receiveDetailsEquipmentsProject') }}',
                        type: 'GET',
                        data: function(d) {
                            d.receiveNumberProject = $('#receiveNumberProject').val();
                            // Envia as variaveis de acordo com as opcoes selecionadas para o DataTables
                            d.equipmentTypeSelected = $('#tipo_valvulasList').val();
                            d.unitSelected = $('#unitsList').val();
                            d.receiveAllUnits = $('#receiveUnitsClientRelated').val();
                        }
                    },
                    columns: [{
                            data: 'equipment_tag',
                            name: 'equipment_tag'
                        },
                        {
                            data: 'equipment_description',
                            name: 'equipment_description'
                        },
                        // {
                        //     data: 'equipment_type_name',
                        //     name: 'equipment_type_name'
                        // },
                        // {
                        //     data: 'unit_name',
                        //     name: 'unit_name'
                        // },
                        // {
                        //     data: 'ambit_name',
                        //     name: 'ambit_name'
                        // },

                        // {
                        //     data: 'action',
                        //     name: 'action',
                        //     orderable: false,
                        //     searchable: false
                        // },
                    ],
                });
        });

        //De acordo com os valores deste campos, como anteriormente ja sao enviados para a DataTables para fazer as filtragens, agora atualizamos a Tabela com base no filtros feitos 
        // $('#tipo_valvulasList,#unitsList,#receiveUnitsClientRelated').on('change',
        //     function() {
        //         dataTables.ajax.reload();
        //     });
    </script> --}}

    {{-- <script type="text/javascript">
        // Inicialize as tabelas deequipamentos
        $(document).ready(function() {
            setupDataTable('#TableListEquipmentInProject', 'normal');
            setupDataTable('#TableListEquipmentInProjectPendingsForApprove', 'pending');
        });

        function setupDataTable(tableSelector) {
            $(tableSelector).DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('receiveDetailsEquipmentsProject') }}',
                    type: 'GET',
                    data: function(d) {
                        d.receiveNumberProject = $('#receiveNumberProject').val();
                    }
                },
                columns: [{
                        data: 'equipment_tag',
                        name: 'equipment_tag'
                    },
                    {
                        data: 'equipment_description',
                        name: 'equipment_description'
                    },
                    {
                        data: 'equipment_type_name',
                        name: 'equipment_type_name'
                    },
                    {
                        data: 'unit_name',
                        name: 'unit_name'
                    },
                    {
                        data: 'ambit_name',
                        name: 'ambit_name'
                    },
                ]
            });
        }
    </script> --}}

    <script type="text/javascript">
        // Inicialize as tabelas deequipamentos
        function setupDataTable(tableSelector, tableType) { // Adiciona tableType como um parâmetro
            $(tableSelector).DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('receiveDetailsEquipmentsProject') }}',
                    type: 'GET',
                    data: function(d) {
                        d.receiveNumberProject = $('#receiveNumberProject').val();
                        d.tableType = tableType; // Agora está definido corretamente
                    }
                },
                columns: [{
                        data: 'equipment_tag',
                        name: 'equipment_tag'
                    },
                    {
                        data: 'equipment_description',
                        name: 'equipment_description'
                    },
                    {
                        data: 'equipment_type_name',
                        name: 'equipment_type_name'
                    },
                    {
                        data: 'unit_name',
                        name: 'unit_name'
                    },
                    {
                        data: 'ambit_name',
                        name: 'ambit_name'
                    },
                    {
                        data: 'action',
                        name: 'action'
                    },
                ]
            });
        }

        // Inicialização das DataTables para cada tabela especificada
        $(document).ready(function() {
            setupDataTable('#TableListEquipmentInProject', 'normal');
            setupDataTable('#TableListEquipmentInProjectPendingsForApprove', 'pending');
        });
    </script>











    <script>
        $(document).ready(function() {
            // Ja vai ser inicializado no card Equipamentos.
            // $("#ViewEquipmentsButton").hide();
            // $("#CardViewTasks").hide();
            // $("#CardViewWorkstations").hide();
            // $("#CardViewDetails").hide();

            //Visualizacao das Tarefas 
            // $("#ViewTasksButton").on('click', function() {

            //     $("#CardViewTasks").show();
            //     $("#ViewEquipmentsButton").show();
            //     $("#ViewWorkstationButton").show();
            //     $("#ViewDetailsButton").show();

            //     $("#CardViewDetails").hide();
            //     $("#CardViewEquipments").hide();
            //     $("#CardViewWorkstations").hide();
            //     $("#ViewTasksButton").hide();
            // })

            //Visualizacao dos Equipamentos 
            // $("#ViewEquipmentsButton").on('click', function() {

            //     $("#CardViewEquipments").show();

            //     $("#ViewTasksButton").show();
            //     $("#ViewWorkstationButton").show();
            //     $("#ViewDetailsButton").show();

            //     $("#CardViewDetails").hide();
            //     $("#CardViewTasks").hide();
            //     $("#CardViewWorkstations").hide();
            //     $("#ViewEquipmentsButton").hide();
            // })

            //Visualizacao das  Workstatios
            // $("#ViewWorkstationButton").on('click', function() {

            //     $("#CardViewWorkstations").show();

            //     $("#ViewEquipmentsButton").show();
            //     $("#ViewTasksButton").show();
            //     $("#ViewDetailsButton").show();


            //     $("#CardViewDetails").hide();
            //     $("#CardViewEquipments").hide();
            //     $("#CardViewTasks").hide();
            //     $("#ViewWorkstationButton").hide();
            // })

            // $("#ViewDetailsButton").on('click', function() {

            //     $("#CardViewDetails").show();

            //     $("#ViewDetailsButton").hide();
            //     $("#ViewEquipmentsButton").show();
            //     $("#ViewTasksButton").show();
            //     $("#ViewWorkstationButton").show();


            //     $("#CardViewWorkstations").hide();
            //     $("#CardViewEquipments").hide();
            //     $("#CardViewTasks").hide();

            // })
        });
    </script>
@endsection