@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>{{ __('messages.portfolio.top_view_part.management_assets') }}</h1>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-md-12">
                    <form>
                        <div class="row">
                            <div class="col-sm-6" id="buttonCreateAssets">
                                <a href="#" type="button"
                                    class="btn btn-block bg-primary btn-lg">{{ __('messages.portfolio.change_buttons.create_assets') }}</a>
                            </div>
                            <div class="col-sm-6" id="buttonAssetsTable">
                                <a href="#" type="button"
                                    class="btn btn-block bg-primary btn-lg">{{ __('messages.portfolio.change_buttons.asset_table') }}</a>
                            </div>
                        </div>
                    </form>

                    <br>

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

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

                            <div class="row text-center">
                                <input type="hidden" id="clientId" value="{{ $client }}">
                                <div class="form-group col-sm" id="card-receivePlantClientRelated">
                                    <label>Instalações </label>
                                    <select id="receivePlantClientRelated" name="receivePlantClientRelated"
                                        class="form-control">
                                        <option value='#' selected>Mostrar Todos</option>
                                        @foreach ($allPlantsClient as $plantClient)
                                            <option value="{{ $plantClient->plant_id }}">
                                                {{ $plantClient->plant_name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-sm" id="card-receiveUnitsClientRelated">
                                    <div class="form-group">
                                        <label>Fábricas </label>
                                        <select id="receiveUnitsClientRelated" name="receiveUnitsClientRelated"
                                            class="form-control">
                                            {{-- <option value='#' selected>Mostrar Todos</option>
                                            @foreach ($allUnitsClient as $unitsClient)
                                                <option value="{{ $unitsClient->unit_id }}">
                                                    {{ $unitsClient->unit_name }}</option>
                                            @endforeach --}}
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group col-sm">
                                    <label>Tipo de Equipamento </label>
                                    <select id="tipo_valvulasList" name="equipmentTypeId" class="form-control">
                                        <option value='#' selected>Mostrar Todos</option>
                                        @foreach ($allEquipmentType as $equipmentsType)
                                            <option value="{{ $equipmentsType->equipment_type_id }}">
                                                {{ $equipmentsType->equipment_type_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <!-- row text-center -->
                            <table id="showProjectEquipment" class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Tag</th>
                                        <th>Fabrica</th>
                                        <th>Tipo</th>
                                        <th>Ações</th>
                                    </tr>
                                </thead>
                            </table>


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

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


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

            var clientId = $('#clientId').val();

            dataTables = $('#showProjectEquipment').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('getDataEquipment') }}',
                    type: 'GET',
                    data: function(d) {
                        d.clientId = clientId;
                        // Envia as variaveis de acordo com as opcoes selecionadas para o DataTables
                        d.receiveAllPlants = $('#receivePlantClientRelated').val();
                        d.receiveAllUnits = $('#receiveUnitsClientRelated').val();
                        d.receiveEquipmentsType = $('#tipo_valvulasList').val();
                    }
                },
                columns: [{
                        data: 'equipment_id',
                        name: 'equipment_id'
                    },
                    {
                        data: 'equipment_tag',
                        name: 'equipment_tag'
                    },
                    {
                        data: 'unit_id',
                        name: 'unit_id'
                    },
                    {
                        data: 'equipment_type_id',
                        name: 'equipment_type_id'
                    },
                    {
                        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,#receiveUnitsClientRelated,#tipo_valvulasList').on('change',
            function() {
                dataTables.ajax.reload();
            });
    </script>

    <script type="text/javascript">
        $('#card-receiveUnitsClientRelated').hide();

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

            if (receivePlantClientRelated && receivePlantClientRelated !== '#') {
                $('#card-receiveUnitsClientRelated').show(); // Mostra o card de Unidades

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

                        // Preenche o select de Unidades
                        $.each(data, function(index, item) {
                            select.append($('<option>', {
                                value: item.id,
                                text: item.name
                            }));
                        });
                    }
                });
            } else {
                $('#card-receiveUnitsClientRelated').hide(); // Esconde o card de Unidades
            }
        });
    </script>
@endsection