@extends('Templates/templateAdmin')

@section('Main-content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="text-light">Relatorio Geral</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item active">Obrar Concluidas</li>
                        <li class="breadcrumb-item active"><a href="{{ route('CreateUsers') }}">Relatorio Geral</a></li>
                    </ol>
                </div>
            </div>
        </div>
    </section>

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

            <input type="hidden" id="projectId" value="{{ $receiveDataProject->company_projects_id }}">
            <input type="hidden" id="AmbitsIdString" value="{{ $AmbitsIdString }}">


            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">{{ $receiveDataProject->company_project_description }}</h3>
                </div>

                <div class="card-body">

                    <div class="card card-success collapsed-card">

                        <div class="card-header clickable">
                            <h3 class="card-title">Relatório geral Ambito</h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool collapse-button" data-card-widget="collapse"><i
                                        class="fas fa-plus"></i></button>
                            </div>
                        </div>

                        <div class="card-body">

                            <table id="showReportingForAmbits" class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>Ambito</th>
                                        <th>Qtd.Equipmentos</th>
                                        <th>Visualizar</th>
                                    </tr>
                                </thead>
                            </table>

                        </div>
                    </div>
                    <!--card card-success collapsed-card-->

                    <div class="card card-primary collapsed-card">

                        <div class="card-header clickable">
                            <h3 class="card-title">Relatório individual dos Equipamentos</h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool collapse-button" data-card-widget="collapse"><i
                                        class="fas fa-plus"></i></button>
                            </div>
                        </div>
                        <!--card-header clickable-->

                        <div class="card-body">

                            <div class="row text-center">

                                <div class="col-sm">
                                    <div class="form-group">
                                        <label>Fabricas </label>
                                        <select class="form-control" id="allUnitsProject" name="allUnitsProject">
                                            <option value='#' selected>Mostrar Todos</option>
                                            @foreach ($receiveUnitsOfProject as $unitsOfProject)
                                                <option value="{{ $unitsOfProject->unit_id }}">
                                                    {{ $unitsOfProject->unit_name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="col-sm">
                                    <div class="form-group">
                                        <label>Ambito</label>
                                        <select class="form-control" id="AllAmbitsProject" name="AllAmbitsProject">
                                            <option value='#' selected>Mostrar Todos</option>
                                            @foreach ($receiveDataAmbitsProject as $ambitsProject)
                                                <option value="{{ $ambitsProject->ambits_id }}">
                                                    {{ $ambitsProject->ambits_description }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="col-sm">
                                    <div class="form-group">
                                        <label>Tipo de equipamento</label>
                                        <select class="form-control" id="typeEquipments" name="typeEquipments">
                                            <option value='#' selected>Mostrar Todos</option>
                                            @foreach ($receiveAllTypeEquipments as $allTypeEquipments)
                                                <option value="{{ $allTypeEquipments->equipment_type_id }}">
                                                    {{ $allTypeEquipments->equipment_type_name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

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

                            <table id="showEquipmentsOfProject" class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>Fabrica</th>
                                        <th>Tag Number</th>
                                        <th>Tipo de Equipamento</th>
                                        <th>Ambito</th>
                                        <th>Visualizar</th>
                                    </tr>
                                </thead>
                            </table>

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

                    </div>
                    <!--card card-success collapsed-card-->

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

            </div>
        @endsection

        @section('scriptsTemplateAdmin')
            {{-- Script para abrir os cards sem precisar click no icones --}}
            <script type="text/javascript">
                $(document).ready(function() {
                    $('.clickable').on('click', function(e) {
                        // Verifica se o clique não foi no botão
                        if (!$(e.target).is('.collapse-button') && !$(e.target).is('.collapse-button *')) {
                            $(this).find('.collapse-button').trigger('click');
                        }
                    });
                });
            </script>

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


                    dataTables = $('#showReportingForAmbits').DataTable({
                        responsive: true,
                        processing: true,
                        serverSide: true,
                        ajax: {
                            // Rota para obter os valores para o Yajra
                            url: '{{ route('getDataAmbitsOfProject') }}',
                            type: 'GET',
                            data: function(d) {
                                // Busca diretamente o valor de um input tipo Hidden para buscar e enviar o valor do id do project atual
                                d.AmbitsIdString = $('#AmbitsIdString').val();
                                d.projectId = $('#projectId').val();
                            }
                        },
                        columns: [{
                                data: 'ambits_description',
                                name: 'ambits_description'
                            },

                            {
                                data: 'amountEquipment',
                                name: 'amountEquipment'
                            },
                            {
                                data: 'action',
                                name: 'action',
                                orderable: false,
                                searchable: false
                            },
                        ],
                    });
                });
            </script>



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


                    dataTables = $('#showEquipmentsOfProject').DataTable({
                        responsive: true,
                        processing: true,
                        serverSide: true,
                        ajax: {
                            // Rota para obter os valores para o Yajra
                            url: '{{ route('getDataEquipmentsOfProject') }}',
                            type: 'GET',
                            data: function(d) {
                                // Envia as variaveis de acordo com as opcoes selecionadas para o DataTables
                                d.allUnitsProject = $('#allUnitsProject').val();
                                d.AllAmbitsProject = $('#AllAmbitsProject').val();
                                d.typeEquipments = $('#typeEquipments').val();
                                // Busca diretamente o valor de um input tipo Hidden para buscar e enviar o valor do id do project atual
                                d.projectId = $('#projectId').val();
                            }
                        },
                        columns: [{
                                data: 'unit_id',
                                name: 'unit_id'
                            },
                            {
                                data: 'equipment_tag',
                                name: 'equipment_tag'
                            },
                            {
                                data: 'equipment_type_id',
                                name: 'equipment_type_id'
                            },
                            {
                                data: 'ambits_description',
                                name: 'ambits_description'
                            },
                            {
                                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 
                $('#allUnitsProject,#AllAmbitsProject,#typeEquipments').on('change',
                    function() {
                        dataTables.ajax.reload();
                    });
            </script>
        @endsection