@extends('Templates/AdminLayout/AdminLayout')

@section('Main-content')

<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Relatorios</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item active">Obras Concluidas</li>
                </ol>
            </div>
        </div>
    </div>
</section>

    <fieldset class="content">
        <div class="container-fluid">

            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">Obras Concluidas</h3>
                </div>
                <!--./card-header-->
                <div class="card-body">

                    <input type="hidden" id="clientID" name="clientID" value="{{$clientID}}">

                    <div class="row text-center">

                        <div class="col-sm" id="card-allPlantsClient">
                            <div class="form-group">
                                <label>Instalacoes </label>
                                <select class="form-control" id="allPlantsClient" name="allPlantsClient">
                                    <option value='#' selected>Mostrar Todos</option>
                                    @foreach ($allPlantsClient as $plantClient)
                                        <option value="{{ $plantClient->plant_id }}">
                                            {{ $plantClient->plant_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-sm" id="card-yearsProjects">
                            <div class="form-group">
                                <label>Ano</label>
                                <select class="form-control" id="yearsProjects" name="yearsProjects">
                                    <option value='#' selected>Mostrar Todos</option>
                                    @foreach ($yearsProjects as $yearsProject)
                                        <option value="{{ $yearsProject }}">
                                            {{ $yearsProject }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-sm" id="card-monthsProjects">
                            <div class="form-group">
                                <label>Mes</label>
                                <select class="form-control" id="monthsProjects" name="monthsProjects">
                                </select>
                            </div>
                        </div>

                        <div class="col-sm" id="card-daysProjects">
                            <div class="form-group">
                                <label>Dia</label>
                                <select class="form-control" id="daysProjects" name="daysProjects">
                                </select>
                            </div>
                        </div>

                    </div>
                    <!-- row text-center -->


                    <table id="showProjectsClient" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>Instalacao</th>
                                <th>Numero Projecto</th>
                                <th>Descricao Projecto</th>
                                <th>Responsavel Projecto</th>
                                <th>Data Inicio</th>
                                <th>Data Fim</th>
                                <th>Visualizar</th>
                            </tr>
                        </thead>
                    </table>
                    
                </div>
                <!--./card-body-->
            </div>
            <!--./card card-primary-->
        </div>
    </fieldset>
@endsection

@section('scriptsTemplateAdmin')

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

            dataTables = $('#showProjectsClient').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                ajax: {
                    // Rota para obter os valores para o Yajra
                    url: '{{ route('getDataProjectsClient') }}',
                    type: 'GET',
                    data: function(d) {
                        // Envia as variaveis de acordo com as opcoes selecionadas para o DataTables
                        d.allPlantsClient = $('#allPlantsClient').val();
                        d.yearsProjects = $('#yearsProjects').val();
                        d.monthsProjects = $('#monthsProjects').val();
                        d.daysProjects = $('#daysProjects').val();
                        d.clientID = $('#clientID').val();
                    }
                },
                columns: [{
                        data: 'plant_name',
                        name: 'plant_name'
                    },
                    {
                        data: 'project_company_name',
                        name: 'project_company_name'
                    },
                    {
                        data: 'company_project_description',
                        name: 'company_project_description'
                    },
                    {
                        data: 'project_company_responsible',
                        name: 'project_company_responsible'
                    },
                    {
                        data: 'date_started',
                        name: 'date_started'
                    },
                    {
                        data: 'end_date',
                        name: 'end_date'
                    },
                    {
                        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 
        $('#allPlantsClient,#yearsProjects,#monthsProjects,#daysProjects').on('change',
            function() {
                dataTables.ajax.reload();
            });
    </script>


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

            // Esconde os cards inicialmente
            $('#card-monthsProjects').hide();
            $('#card-daysProjects').hide();

            // Receber os meses com base no Ano selecionado
            $('#yearsProjects').on('change', function() {
                var yearsProjects = $(this).val();

                // Esconde os cards Novamente (confirmar...)
                $('#card-monthsProjects').hide();
                $('#card-daysProjects').hide();

                if (yearsProjects && yearsProjects !== '#') {
                    $('#card-monthsProjects').show();

                    // Faz a requisição AJAX para receber os Meses
                    $.ajax({
                        url: '/api/receiveMonths/' + yearsProjects,
                        type: 'GET',

                        success: function(data) {
                            var select = $('#monthsProjects');
                            select.empty(); // Limpa o select atual
                            select.append($('<option>', {
                                value: '#',
                                text: 'Mostrar Todas'
                            }));

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

            // Receber os Dias com base no mes selecionado
            $('#monthsProjects').on('change', function() {
                var monthsProjects = $(this).val();

                var yearsProjects = $('#yearsProjects').val(); // Captura o valor do ano selecionado

                // Esconde os cards Novamente independente do valor de monthsProjects
                $('#card-daysProjects').hide();

                if (monthsProjects && monthsProjects !== '#') {

                    $('#card-daysProjects').show();

                    // Faz a requisição AJAX para receber os Meses
                    $.ajax({
                        url: '/api/receiveDays/' + yearsProjects + '/' + monthsProjects,
                        type: 'GET',
                        success: function(data) {
                            var select = $('#daysProjects');
                            select.empty(); // Limpa o select atual
                            select.append($('<option>', {
                                value: '#',
                                text: 'Mostrar Todas'
                            }));
                            // Preenche o select dos Meses
                            $.each(data, function(index, item) {
                                select.append($('<option>', {
                                    value: item.id,
                                    text: item.name
                                }));
                            });
                        }
                    });
                }

            })


            // Manipulador de eventos quando o valor do select 'allPlantsClient' muda
            $('#allPlantsClient').on('change', function() {
                // Esconde os cards especificados
                $('#card-monthsProjects').hide();
                $('#card-daysProjects').hide();
            });



        });
    </script>

@endsection