@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>Gestão de ativos</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item active">Portefólio</li>
                        <li class="breadcrumb-item active">Gerir ativos</li>
                    </ol>
                </div><!-- /.col -->
            </div>
        </div><!-- /.container-fluid -->
    </section>

    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <!-- Card box criar instalção -->
            <form>
                <div class="card card-primary collapsed-card">
                    <div class="card-header">
                        <h3 class="card-title">Instalações</h3>

                        <div class="card-tools">
                            <button type="button" class="btn btn-tool" data-card-widget="collapse"><i
                                    class="fas fa-plus"></i>
                            </button>
                        </div>
                        <!-- /.card-tools -->
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <!-- Card box inserir nova instalação-->
                        <div class="card card-primary collapsed-card">
                            <div class="card-header">
                                <h3 class="card-title">Inserir nova instalação</h3>

                                <div class="card-tools">
                                    <button type="button" class="btn btn-tool" data-card-widget="collapse"><i
                                            class="fas fa-plus"></i>
                                    </button>
                                </div>
                                <!-- /.card-tools -->
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body">
                                <div class="form-group">
                                    <label>Instalação</label>
                                    <input type="text" class="form-control" placeholder="Instalação&hellip;">
                                </div>
                                <div class="form-group">
                                    <label>Fábrica</label>
                                    <input type="text" class="form-control" placeholder="Fábrica&hellip;">
                                </div>
                                <div class="form-group">
                                    <label>Localização</label>
                                    <input type="text" class="form-control" placeholder="Localização&hellip;">
                                </div>
                            </div>
                            <!-- /.card-body -->
                            <div class="card-footer">
                                <div class="float-right">
                                    <button type="submit" class="btn btn-primary">Criar</button>
                                </div>
                            </div>
                        </div>
                        <!-- Table Clientes-->
                        <div class="table-responsive">
                            <table id="example2" class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>Instalação</th>
                                        <th>Fábrica</th>
                                        <th>Cliente</th>
                                        <th>Editar</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($units as $unit)
                                        <tr>
                                            <td>{{ $unit->unit_name }}</td>
                                            <td>{{ $unit->plant_name }}</td>
                                            <td>{{ $unit->user_name }}</td>

                                            <td class="text-center d-flex justify-content-around">
                                                <a href="#" data-toggle="modal" data-target="#modal-edit-instalacao">
                                                    <i class="fa-solid fa-edit text-primary"></i>
                                                </a>
                                                <a href="#" data-toggle="modal" data-target="#modal-remover"><i
                                                        class="fa-solid fa-trash-alt text-danger"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <!-- /.tabela-->
                    </div>
                </div>
                <!-- /.card -->
            </form>
            <!-- /.Card box criar instalção -->


            <!-- Card box criar equipamentos -->
            <form>
                <div class="card card-primary collapsed-card">
                    <div class="card-header">
                        <h3 class="card-title">Equipamentos</h3>

                        <div class="card-tools">
                            <button type="button" class="btn btn-tool" data-card-widget="collapse"><i
                                    class="fas fa-plus"></i>
                            </button>
                        </div>
                        <!-- /.card-tools -->
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <!-- Card box inserir novo equipamento-->
                        <div class="card card-primary collapsed-card">
                            <div class="card-header">
                                <h3 class="card-title">Inserir novo equipamento</h3>

                                <div class="card-tools">
                                    <button type="button" class="btn btn-tool" data-card-widget="collapse"><i
                                            class="fas fa-plus"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="card-body">
                                <!-- select -->
                                <div class="form-group">
                                    <label>Selecionar instalação</label>
                                    <select class="form-control">
                                        <option hidden>Selecionar instalação&hellip;</option>
                                        <option>Instalação A</option>
                                        <option>Instalação B</option>
                                        <option>Instalação C</option>
                                        <option>Instalação D</option>
                                        <option>Instalação E</option>
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label>Selecionar tipo de equipamento</label>
                                    <select id="equipament-list" class="form-control">
                                        <option>Selecionar tipo de equipamento&hellip;</option>
                                        <option value="psv">PSV</option>
                                        <option value="isolation">Válvula de isolamento</option>
                                        <option value="control">Válvula de controlo</option>
                                    </select>
                                </div>

                                <!-- general form elements disabled -->
                                <div id="psv-card" class="card card-secondary">
                                    <div class="card-header">
                                        <h3 class="card-title">PSV</h3>
                                    </div>
                                    <!-- /.card-header -->
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Equipamento associado</label>
                                                    <input type="text" class="form-control"
                                                        placeholder="Equipamento associado&hellip;">
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Serviço associado</label>
                                                    <input type="text" class="form-control"
                                                        placeholder="Serviço associado&hellip;">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>TAG</label>
                                                    <input type="text" class="form-control" placeholder="TAG&hellip;">
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Fabricante</label>
                                                    <input type="text" class="form-control"
                                                        placeholder="Fabricante&hellip;">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Número de série</label>
                                                    <input type="text" class="form-control"
                                                        placeholder="Número de série&hellip;">
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Modelo</label>
                                                    <input type="text" class="form-control"
                                                        placeholder="Modelo&hellip;">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>DN</label>
                                                    <input type="text" class="form-control" placeholder="DN&hellip;">
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>PN</label>
                                                    <input type="text" class="form-control" placeholder="PN&hellip;">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- /.card-body -->
                                </div>

                                <!-- general form elements disabled -->
                                <div id="isolation-card" class="card card-secondary">
                                    <div class="card-header">
                                        <h3 class="card-title">Válvula de isolamento</h3>
                                    </div>
                                    <!-- /.card-header -->
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Equipamento associado</label>
                                                    <input type="text" class="form-control"
                                                        placeholder="Equipamento associado&hellip;">
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Serviço associado</label>
                                                    <input type="text" class="form-control"
                                                        placeholder="Serviço associado&hellip;">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>TAG</label>
                                                    <input type="text" class="form-control" placeholder="TAG&hellip;">
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Fabricante</label>
                                                    <input type="text" class="form-control"
                                                        placeholder="Fabricante&hellip;">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Número de série</label>
                                                    <input type="text" class="form-control"
                                                        placeholder="Número de série&hellip;">
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Modelo</label>
                                                    <input type="text" class="form-control"
                                                        placeholder="Modelo&hellip;">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>DN</label>
                                                    <input type="text" class="form-control" placeholder="DN&hellip;">
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>PN</label>
                                                    <input type="text" class="form-control" placeholder="PN&hellip;">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- /.card-body -->
                                </div>
                                <!-- general form elements disabled -->
                                <div id="control-card" class="card card-secondary">
                                    <div class="card-header">
                                        <h3 class="card-title">Válvula de controlo</h3>
                                    </div>
                                    <!-- /.card-header -->
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Equipamento associado</label>
                                                    <input type="text" class="form-control"
                                                        placeholder="Equipamento associado&hellip;">
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Serviço associado</label>
                                                    <input type="text" class="form-control"
                                                        placeholder="Serviço associado&hellip;">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>TAG da válvula</label>
                                                    <input type="text" class="form-control"
                                                        placeholder="TAG da válvula&hellip;">
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Fabricante da válvula</label>
                                                    <input type="text" class="form-control"
                                                        placeholder="Fabricante da válvula&hellip;">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Modelo da válvula</label>
                                                    <input type="text" class="form-control"
                                                        placeholder="Modelo da válvula&hellip;">
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>N.º de série da válvula</label>
                                                    <input type="text" class="form-control"
                                                        placeholder="N.º de série da válvula&hellip;">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>DN</label>
                                                    <input type="text" class="form-control" placeholder="DN&hellip;">
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>PN</label>
                                                    <input type="text" class="form-control" placeholder="PN&hellip;">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-4">
                                                <div class="form-group">
                                                    <label>Fabricante do atuador</label>
                                                    <input type="text" class="form-control"
                                                        placeholder="Fabricante do atuador&hellip;">
                                                </div>
                                            </div>
                                            <div class="col-sm-4">
                                                <div class="form-group">
                                                    <label>Modelo do atuador</label>
                                                    <input type="text" class="form-control"
                                                        placeholder="Modelo do atuador&hellip;">
                                                </div>
                                            </div>
                                            <div class="col-sm-4">
                                                <div class="form-group">
                                                    <label>N.º de série do atuador</label>
                                                    <input type="text" class="form-control"
                                                        placeholder="N.º de série do atuador&hellip;">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Fabricante do posicionador</label>
                                                    <input type="text" class="form-control"
                                                        placeholder="Fabricante do posicionador&hellip;">
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>N.º de série do posicionador</label>
                                                    <input type="text" class="form-control"
                                                        placeholder="N.º de série do posicionador&hellip;">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="exampleInputFile">Importar Equipamentos</label>
                                    <div class="input-group">
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" id="exampleInputFile">
                                            <label class="custom-file-label" for="exampleInputFile">Escolher
                                                ficheiro</label>
                                        </div>
                                    </div>
                                </div>
                                <!-- /.card-body -->
                            </div>
                            <!-- /.card-body -->
                            <div class="card-footer">
                                <div class="float-right">
                                    <button type="submit" class="btn btn-primary">Criar</button>
                                </div>
                            </div>
                        </div>

                        <!-- Table Equipamentos-->
                        <div class="card-body table-responsive p-0">
                            <table class="table table-hover text-nowrap" id="TableEquipments">
                                <thead>
                                    <tr>
                                        <th>ID equipamento</th>
                                        <th>Fabrica</th>
                                        <th>Tipo equipamento</th>
                                        <th>Tag</th>
                                        <th>Descrição equipamento</th>
                                        <th>Número de Serie </th>
                                        <th>Marca</th>
                                        <th>Modelo</th>
                                        <th>Edicao</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($equipments as $equipment)
                                        <tr>
                                            <td>{{ $equipment->equipment_id }}</td>
                                            <td>{{ $equipment->unit_id }}</td>
                                            <td>{{ $equipment->equipment_type_id }}</td>
                                            <td>{{ $equipment->equipment_tag }}</td>
                                            <td>{{ $equipment->equipment_description }}</td>
                                            <td>{{ $equipment->equipment_serial_number }}</td>
                                            <td>{{ $equipment->equipment_brand }}</td>
                                            <td>{{ $equipment->equipment_model }}</td>

                                            <td class="text-center d-flex justify-content-around">
                                                {{-- <a href="{{ route('showUnit', ['id' => $equipament->equipment_id]) }}"> --}}
                                                <i class="fa-solid fa-eye text-secondary"></i>
                                                </a>
                                                <a href="#" data-toggle="modal" data-target="#modal-edit-psv">
                                                    <i class=" fa-solid fa-edit text-primary"></i>
                                                </a>
                                                <a href="#" data-toggle="modal" data-target="#modal-remover"><i
                                                        class="fa-solid fa-trash-alt text-danger"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <!-- /.tabela-->

                    </div>
                </div>
            </form>
            <!-- /.card -->
            <!-- /.Card box criar equipamentos -->
        </div>
    </section>

    <!-- modal Instalação -->
    <div class="modal fade" id="modal-edit-instalacao">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h4 class="modal-title">Editar instalações</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">x</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!-- Articulado de obra -->
                    <div class="form-group">
                        <label>Instalação</label>
                        <input type="text" class="form-control" placeholder="Instalação&hellip;">
                    </div>
                    <div class="form-group">
                        <label>Fábrica</label>
                        <input type="text" class="form-control" placeholder="Fábrica&hellip;">
                    </div>
                    <div class="form-group">
                        <label>Localização</label>
                        <input type="text" class="form-control" placeholder="Localização&hellip;">
                    </div>
                    <!--/Articulado de obra-->
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                    <button type="submit" class="btn btn-primary">Guardar</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal Instalação-->

    <!-- modal psv-->
    <div class="modal fade" id="modal-edit-psv">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h4 class="modal-title">Editar PSV</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">x</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!-- Articulado de obra -->
                    <div class="form-group">
                        <label>TAG</label>
                        <input type="text" class="form-control" placeholder="TAG&hellip;">
                    </div>
                    <div class="form-group">
                        <label>Nº série</label>
                        <input type="text" class="form-control" placeholder="Nº série&hellip;">
                    </div>
                    <div class="form-group">
                        <label>Fabricante</label>
                        <input type="text" class="form-control" placeholder="Fabricante&hellip;">
                    </div>
                    <div class="form-group">
                        <label>Modelo</label>
                        <input type="text" class="form-control" placeholder="Modelo&hellip;">
                    </div>
                    <!-- /.card-body -->
                    <!--/Articulado de obra-->
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                    <button type="submit" class="btn btn-primary">Guardar</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal psv -->

    <!-- modal isv -->
    <div class="modal fade" id="modal-edit-isv">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h4 class="modal-title">Editar Válvula de Isolamento</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">x</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!-- Articulado de obra -->
                    <div class="form-group">
                        <label>TAG</label>
                        <input type="text" class="form-control" placeholder="TAG&hellip;">
                    </div>
                    <div class="form-group">
                        <label>Nº série</label>
                        <input type="text" class="form-control" placeholder="Nº série&hellip;">
                    </div>
                    <div class="form-group">
                        <label>Fabricante</label>
                        <input type="text" class="form-control" placeholder="Fabricante&hellip;">
                    </div>
                    <div class="form-group">
                        <label>Modelo</label>
                        <input type="text" class="form-control" placeholder="Modelo&hellip;">
                    </div>
                    <!-- /.card-body -->
                    <div class="card-footer">
                        <div class="float-right">

                        </div>
                    </div>
                    <!--/Articulado de obra-->
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                    <button type="submit" class="btn btn-primary">Guardar</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal isv-->

    <!-- modal cv-->
    <div class="modal fade" id="modal-edit-cv">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h4 class="modal-title">Editar Válvula de controlo</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">x</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!-- Articulado de obra -->
                    <div class="form-group">
                        <label>TAG válvula</label>
                        <input type="text" class="form-control" placeholder="TAG válvula&hellip;">
                    </div>
                    <div class="form-group">
                        <label>Nº série válvula</label>
                        <input type="text" class="form-control" placeholder="Nº série válvula&hellip;">
                    </div>
                    <div class="form-group">
                        <label>Fabricante válvula</label>
                        <input type="text" class="form-control" placeholder="Fabricante válvula&hellip;">
                    </div>
                    <div class="form-group">
                        <label>Modelo válvula</label>
                        <input type="text" class="form-control" placeholder="Modelo válvula&hellip;">
                    </div>
                    <div class="form-group">
                        <label>Fabricante atuador</label>
                        <input type="text" class="form-control" placeholder="Fabricante atuador&hellip;">
                    </div>
                    <div class="form-group">
                        <label>Modelo atuador</label>
                        <input type="text" class="form-control" placeholder="Modelo atuador&hellip;">
                    </div>
                    <div class="form-group">
                        <label>Nº série atuador</label>
                        <input type="text" class="form-control" placeholder="Nº série atuador&hellip;">
                    </div>
                    <div class="form-group">
                        <label>Fabricante posicionador</label>
                        <input type="text" class="form-control" placeholder="Fabricante posicionador&hellip;">
                    </div>
                    <div class="form-group">
                        <label>Nº série posicionador</label>
                        <input type="text" class="form-control" placeholder="Nº série posicionador&hellip;">
                    </div>
                    <!-- /.card-body -->
                    <!--/.Articulado de obra-->
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                    <button type="submit" class="btn btn-primary">Guardar</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal cv-->

    <!-- modal Remover -->
    <div class="modal fade" id="modal-remover">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h4 class="modal-title">Remover</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">x</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Deseja realmente remover?</p>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                    <button type="submit" class="btn btn-danger">Remover</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal remover-->
@endsection

@section('scriptsTemplateAdmin')
  

<script>
    $(function () {
      $('input[name="daterange"]').daterangepicker({
        opens: 'right'
      }, function (start, end, label) {
        console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
      });
    });
  </script>
  <script>
    $(function () {
      $("#TableEquipments").DataTable({
        "responsive": true, "lengthChange": false, "autoWidth": false,
        "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
      }).buttons().container().appendTo('#TableEquipments_wrapper .col-md-6:eq(0)');
      $("#example1").DataTable({
        "responsive": true, "lengthChange": false, "autoWidth": false,
        "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
      }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
      $("#example2").DataTable({
        "responsive": true, "lengthChange": false, "autoWidth": false,
        "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
      }).buttons().container().appendTo('#example2_wrapper .col-md-6:eq(0)');
      $("#example3").DataTable({
        "responsive": true, "lengthChange": false, "autoWidth": false,
        "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
      }).buttons().container().appendTo('#example3_wrapper .col-md-6:eq(0)');
    });
  </script>
@endsection