@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">
                    @if ($orderProjectID == '1')
                        <h1 class="breadcrumb-item active">Obras em Planeamento</h1>
                    @elseif($orderProjectID == '2')
                        <h1 class="breadcrumb-item active">Obras Preparadas</h1>
                    @elseif($orderProjectID == '3')
                        <h1 class="breadcrumb-item active">Obras em execução</h1>
                    @endif
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        @if ($orderProjectID == '1')
                            <li class="breadcrumb-item active">Obras em Planeamento</li>
                        @elseif($orderProjectID == '2')
                            <li class="breadcrumb-item active">Obras Preparadas</li>
                        @elseif($orderProjectID == '3')
                            <li class="breadcrumb-item active">Obras em execução</li>
                        @endif
                    </ol>
                </div><!-- /.col -->
            </div>
        </div><!-- /.container-fluid -->
    </section>
    <!-- /.content-header -->


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

                    <div class="card card-primary" id="cardAssetsTable">

                        <div class="card-header">
                            <h3 class="card-title">{{ __('messages.portfolio.change_buttons.asset_table') }}</h3>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">

                            <input type="hidden" name="projectOrder" id="projectOrder" value={{ $orderProjectID }}>
                            <div class="row text-center">
                                <div class="form-group col-sm">
                                    <label>Clientes </label>
                                    <select id="receiveAllClients" name="receiveAllClients" class="form-control">
                                        <option value='#' selected>Mostrar Todos</option>
                                        @foreach ($companies as $company)
                                            <option value="{{ $company->company_id }}">
                                                {{ $company->company_name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group col-sm" id="card-receivePlantClientRelated">
                                    <label>Instalações </label>
                                    <select id="receivePlantClientRelated" name="receivePlantClientRelated"
                                        class="form-control">
                                        <option value="#">Mostrar Todos</option>
                                    </select>
                                </div>

                                {{-- <div class="col-sm" id="card-receiveUnitsClientRelated">
                                    <div class="form-group">
                                        <label>intervalo de tempo  </label>
                                        <select id="receiveUnitsClientRelated" name="receiveUnitsClientRelated"
                                            class="form-control">
                                        </select>
                                    </div>
                                </div> --}}

                            </div>
                            <!-- row text-center -->
                            <table id="showAllProjscts" class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>Identificação do projecto</th>
                                        <th>Número do Projeto ISPT</th>
                                        <th>Gestor de Projeto ISPT</th>
                                        <th>Cliente</th>
                                        <th>Instalação</th>
                                        <th>Data de Início do Projeto </th>
                                        <th>Ações</th>
                                    </tr>
                                </thead>
                            </table>


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

                    </div>
                    {{-- ./cardAssetsTable --}}
                </div>
                {{-- ./col-md-12 --}}
            </div>
            {{-- ./justify-content-center --}}
    </section>

    {{-- @foreach ($receiveProjectsForThisOrder as $projectsForThisOrder)
        <h1>{{ $projectsForThisOrder->company_project_description }}</h1>
    @endforeach --}}
@endsection

@section('scriptsTemplateAdmin')
    <script type="text/javascript">
        $(document).ready(function() {
            // Esconde os cards inicialmente
            $('#card-receivePlantClientRelated').hide();


            $('#receiveAllClients').on('change', function() {
                var receiveAllClients = $(this).val();

                // Esconde ambos os cards ao mudar o cliente
                $('#card-receivePlantClientRelated').hide();

                //Se existir receiveAllClients e for diferente de '#'
                if (receiveAllClients && receiveAllClients !== '#') {
                    $('#card-receivePlantClientRelated').show(); // Mostra o card de Plantas

                    // Faz a requisição AJAX para receber as plantas
                    $.ajax({
                        url: '/api/receivePlants/' + receiveAllClients,
                        type: 'GET',
                        success: function(data) {
                            var select = $('#receivePlantClientRelated');
                            select.empty(); // Limpa o select atual
                            select.append($('<option>', {
                                value: '#',
                                text: 'Mostrar Todas'
                            }));

                            // Preenche o select de Plantas
                            $.each(data, function(index, item) {
                                select.append($('<option>', {
                                    value: item.id,
                                    text: item.name
                                }));
                            });
                        }
                    });
                }
            });

        });
    </script>

    <script type="text/javascript">
        var dataTables;
        $(document).ready(function() {

            dataTables = $('#showAllProjscts').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('getDataProjects') }}',
                    type: 'GET',
                    data: function(d) {
                        // Envia as variaveis de acordo com as opcoes selecionadas para o DataTables
                        d.receiveAllClients = $('#receiveAllClients').val();
                        d.receiveAllPlants = $('#receivePlantClientRelated').val();
                        d.projectOrder = $('#projectOrder').val();
                    }
                },
                columns: [{
                        data: 'company_project_description',
                        name: 'company_project_description'
                    },
                    {
                        data: 'project_company_number',
                        name: 'project_company_number'
                    },
                    {
                        data: 'project_ispt_responsible',
                        name: 'project_ispt_responsible'
                    },
                    {
                        data: 'client',
                        name: 'client'
                    },
                    {
                        data: 'plant_id',
                        name: 'plant_id'
                    },
                    {
                        data: 'date_started',
                        name: 'date_started'
                    },
                    {
                        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 
        $('#receiveAllClients,#receivePlantClientRelated').on('change',
            function() {
                dataTables.ajax.reload();
            });
    </script>
@endsection