@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>Relatorios Gerais</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item active"><a
                                href="{{ route('reportingDataClient', ['clientID' => $receiveDetailsCompany->company_id]) }}">Obras
                                Concluidas</a></li>
                        <li class="breadcrumb-item active"> Relatorios Gerais</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-md-12">
                    <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">

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

                                <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>Tag</th>
                                                <th>Fabrica</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>
                </div>
            </div>
        </div>
    </section>
@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: 'equipment_tag',
                        name: 'equipment_tag'
                    },
                    {
                        data: 'unit_name',
                        name: 'unit_name'
                    },
                    {
                        data: 'equipment_type_name',
                        name: 'equipment_type_name'
                    },
                    {
                        data: 'ambit_name',
                        name: 'ambit_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 
        $('#allUnitsProject,#AllAmbitsProject,#typeEquipments').on('change',
            function() {
                dataTables.ajax.reload();
            });
    </script>
@endsection