@extends('Templates/AdminLayout/AdminLayout')

@section('Main-content')

    <div class="card-body">
        <!-- Table articulado de obra -->
        {{-- <div class="card">
            <div class="card-header">
                <h3 class="card-title">Equipamentos da obra</h3>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <div class="table-responsive">
                    <div class="row text-center">

                        <div class="form-group col-sm-3">
                            <label>Tipo de Equipamento </label>
                            <select id="tipo_valvulasList" name="equipmentTypeId" class="form-control">
                                <option value='#' selected>Mostrar Todos</option>
                                @foreach ($equipmentsTypes as $equipmentsType)
                                    <option value="{{ $equipmentsType->equipment_type_id }}">
                                        {{ $equipmentsType->equipment_type_name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-sm-3">
                            <div class="form-group">
                                <label>Âmbitos </label>
                                <select class="form-control" name="EquipmentAmbit" id="AmbitsEquipments_list" required>
                                    <option value="#" hidden>Mostrar Todos</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-sm-3">
                            <div class="form-group">
                                <label>Inspeção de Equipamentos </label>
                                <select id="inspecValvula" class="form-control">
                                    <option value="#">Mostrar Todos</option>
                                    <option value="Sim">Sim </option>
                                    <option value="Nao">Nao </option>
                                </select>
                            </div>
                        </div>

                    </div>
                    <br>

                    <table id="TableExecutionProject" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>Tag</th>
                                <th>Tipo Equipamento</th>
                                <th>Âmbito</th>
                                <th>Tarefas</th>
                                <th>Tarefa Atual</th>
                                <th>Data Entrada</th>
                                <th>Data Conclusao</th>
                                <th>Inspecao</th>
                            </tr>
                        </thead>
                    </table>
                    <!-- /. Table-->
                </div>
                <!--/table obra-->
            </div>
            <!-- /.card-body -->

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

    <div class="card-body">
        <!-- Table articulado de obra -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Equipamentos da obra</h3>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <div class="table-responsive">
                    <br>
                    <table id="TableExecutionProject" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>Tag</th>
                                <th>Tipo Equipamento</th>
                                <th>Âmbito</th>
                                <th>Tarefas</th>
                                <th>Tarefa Atual</th>
                                <th>Data Entrada</th>
                                <th>Data Conclusao</th>
                                <th>Inspecao</th>
                                <th>Detalhes</th>
                            </tr>
                        </thead>
                    </table>
                    <!-- /. Table-->
                </div>
                <!--/table obra-->
            </div>
            <!-- /.card-body -->
        </div>
        <!-- ./card -->
    </div>
    {{-- card-body --}}
@endsection


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

            //Cards das div : Destricao - Articulado - Postos de Trabalho

            $("#CardArticuladoObra").hide();
            $("#CardPostosDeTrabalhoObra").hide();


            //Botoes  : Destricao - Articulado - Postos de Trabalho
            $('#BotaoDetalhesObra').hide();
            // $('#BotaoArticulado').hide();
            // $('BotaoPostosDeTrabalho').hide();

            $('#BotaoArticulado').on('click', function() {
                // Mostra o Card do Articulado e o Botao de detalhes 
                $('#CardArticuladoObra').show();
                $("#BotaoDetalhesObra").show();
                $('#BotaoPostosDeTrabalho').show();

                $('#BotaoArticulado').hide();
                $("#CardPostosDeTrabalhoObra").hide();
                $("#CardDetalhesObra").hide();
            });

            $('#BotaoDetalhesObra').on('click', function() {
                // Mostra o Card do Articulado e o Botao de detalhes 
                $('#CardDetalhesObra').show();
                $("#BotaoArticulado").show();
                $('#BotaoPostosDeTrabalho').show();

                $('#BotaoDetalhesObra').hide();
                $("#CardPostosDeTrabalhoObra").hide();
                $("#CardArticuladoObra").hide();
            });

            $('#BotaoPostosDeTrabalho').on('click', function() {
                // Mostra o Card do Articulado e o Botao de detalhes 
                $('#CardPostosDeTrabalhoObra').show();
                $("#BotaoArticulado").show();
                $("#BotaoDetalhesObra").show();

                $('#BotaoPostosDeTrabalho').hide();
                $("#CardDetalhesObra").hide();
                $("#CardArticuladoObra").hide();
            });
        })
    </script>

    <script>
        $(document).ready(function() {
            $('#TableExecutionProject').DataTable({
                autoWidth: false,
                processing: true,
                serverSide: true,
                ajax: {
                    url: '/api/receiveEquipmentsExecutionProject/' + $('#receiveNumberProject').val(),
                    data: function(d) {
                        d.equipment_type_id = $('#tipo_valvulasList').val();
                        d.ambits_id = $('#AmbitsEquipments_list').val();
                    },
                },

                columns: [{
                        data: 'equipment_tag',
                        name: 'equipment_tag'
                    },
                    {
                        data: 'equipment_type',
                        name: 'equipment_type'
                    },
                    {
                        data: 'Ambits',
                        name: 'Ambits'
                    },
                    {
                        data: 'order_tasks',
                        name: 'order_tasks'
                    },


                ],
                rowId: 'equipment_id'
            });
            // Scripts para que com base no recebido , ele atualiza a pagina automaticamente
            $('#tipo_valvulasList').on('change', function() {
                // Atualiza a tabela quando o valor selecionado no select de tipo de válvulas for alterado
                $('#TableExecutionProject').DataTable().ajax.reload();
            });
            $('#AmbitsEquipments_list').on('change', function() {
                // Atualiza a tabela quando o valor selecionado no select de tipo de válvulas for alterado
                $('#TableExecutionProject').DataTable().ajax.reload();
            });
        });
    </script>
@endsection