@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>
                @if ((auth()->user() && auth()->user()->type_users == 2) || (auth()->user() && auth()->user()->type_users == 1))
                    <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 -->
                @endif
            </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="#CardViewDetails" 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="#CardViewEquipments" 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="#CardViewWorkstations" type="button" class="btn btn-block bg-primary btn-lg"
                                style="margin-bottom: 2%;">Listas</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>{{}}</td> --}}
                                    </tr>
                                    <tr>
                                        <td>N.º obra Cliente :</td>
                                        <td>{{ $DatasProject->project_company_name }}</td>
                                    </tr>
                                </tbody>
                            </table>

                            @if ((auth()->user() && auth()->user()->type_users == 2) || (auth()->user() && auth()->user()->type_users == 1))
                                <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>
                            @endif


                            <!-- 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="CardViewWorkstations">

                        <div class="card-header">
                            <h3 class="card-title">Listas de equipamentos</h3>
                            <div class="card-tools">
                            </div>
                        </div>
                        <div class="card-body">

                            @if ((auth()->user() && auth()->user()->type_users == 2) || (auth()->user() && auth()->user()->type_users == 1))
                                {{-- Faça algo específico para esse tipo de usuário --}}
                                <div class="card card-info mt-4">

                                    <div class="card-header">
                                        <h3 class="card-title">Lista de equipamentos da Obra - Em execução</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">Equipamentos 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 -->
                            @endif
                            <div class="card card-info mt-4">

                                <div class="card-header ">
                                    <h3 class="card-title">Equipamento finalizados</h3>
                                </div>
                                <!-- /.card-header -->

                                <div class="card-body">

                                    <table id="TableListOfCompletedProjectEquipment"
                                        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="CardViewEquipments">
                        <div class="card-header">
                            <h3 class="card-title">Equipamentos</h3>
                            <div class="card-tools">
                            </div>
                        </div>

                        <div class="card-body">

                            @if ((auth()->user() && auth()->user()->type_users == 2) || (auth()->user() && auth()->user()->type_users == 1))
                                <div class="card card-success">

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

                            <div class="card card-success">

                                <div class="card-header">
                                    <h3 class="card-title">Graficos 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>
                            </div>

                            <div class="card card-success">

                                <div class="card-header">
                                    <h3 class="card-title">Postos de Trabalho</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>




                    </div>



                </div>

            </div>
        </div>
    </section>
    <!-- ./Main content -->
@endsection

@section('scriptsTemplateAdmin')
    <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');
            setupDataTable('#TableListOfCompletedProjectEquipment', 'completed');
        });
    </script>

    <script>
        $(document).ready(function() {
            // Ja vai ser inicializado no card Equipamentos.

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

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

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

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


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

            // })

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

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

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

            //     $("#CardViewDetails").hide();
            //     $("#CardViewWorkstations").hide();
            //     $("#ViewEquipmentsButton").hide();
            //     $("#CardViewTasks").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 das  Workstatios
            //  $("#ViewWorkstationButton").on('click', function() {

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

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

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



        });
    </script>
@endsection