@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 class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item active">{{ __('messages.portfolio.top_view_part.portfolio') }}</li>
                        <li class="breadcrumb-item active">{{ __('messages.portfolio.top_view_part.managing_assets') }}</li>
                    </ol>
                </div><!-- /.col -->
            </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> --}}


                    <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">

                            <div class="row text-center">
                                <div class="form-group col-sm">
                                    <label>Cliente </label>
                                    <select id="receiveAllClients" name="receiveAllClients" class="form-control">
                                        <option value='#' selected>Mostrar Todos</option>
                                        @foreach ($allClients as $client)
                                            <option value="{{ $client->user_id }}">
                                                {{ $client->user_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">
                                    </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">
                                        </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="showAllEquipments" class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Tag</th>
                                            <th>Descricao</th>
                                            <th>Cliente</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() {

            dataTables = $('#showAllEquipments').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('getDataEquipment') }}',
                    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.receiveAllUnits = $('#receiveUnitsClientRelated').val();
                        d.receiveEquipmentsType = $('#tipo_valvulasList').val();
                    }
                },
                columns: [
                    {
                        data: 'equipment_tag',
                        name: 'equipment_tag'
                    },
                    {
                        data: 'equipment_description',
                        name: 'equipment_description'
                    },
                    {
                        data: 'client_name',
                        name: 'client_name'
                    },
                    {
                        data: 'unit_name',
                        name: 'unit_name'
                    },
                    {
                        data: 'equipment_type_name',
                        name: 'equipment_type_name'
                    },
                    {
                        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">
        $(document).ready(function() {
            // Esconde os cards inicialmente
            $('#card-receivePlantClientRelated').hide();
            $('#card-receiveUnitsClientRelated').hide();

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

                // Esconde ambos os cards ao mudar o cliente
                $('#card-receivePlantClientRelated').hide();
                $('#card-receiveUnitsClientRelated').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
                                }));
                            });
                        }
                    });
                }
            });

            $('#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