@extends('layouts.app')
@include('plugins.datatables')

@section('content')
<div class="app-content content">
    <div class="content-overlay"></div>
    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-6 col-12 mb-2">
                <h3 class="content-header-title">Device Management</h3>
                <div class="row breadcrumbs-top">
                    <div class="breadcrumb-wrapper col-12">
                        <!-- {{ Breadcrumbs::render('menuconfiguration') }} -->
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="http://localhost/home">Home</a></li>
                            <li class="breadcrumb-item active">Device Management</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-body">
            <section>
                <div class="card">
                    <div class="card-header">
                        <h2 class="card-title">Device Management</h2>
                        <p class="mt-2">*Please get the <span class="font-weight-bold">device id</span> from the device settings.</p>
                    </div>
                    <div class="card-body">
                        <table class="table" id="table" style="width:100% !important;">
                            <thead>
                                <tr>
                                    <th class="fit">No.</th>
                                    <th>Device Name</th>
                                    <th>Device IP</th>
                                    <th>Device ID</th>
                                    <th>Location</th>
                                    <th>Gate</th>
                                    <th>Device Model</th>
                                    <th>Device Serial Number</th>
                                    <th>Device Image</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>
@endsection

@push('js')
<script type="text/javascript">
var table = $('#table');

var settings = {
    "processing": true,
    "serverSide": true,
    "deferRender": true,
    "ajax": "{{ fullUrl() }}",
    "columns": [
        { data: 'index', defaultContent: '', orderable: false, searchable: false, render: function (data, type, row, meta) {
            return meta.row + meta.settings._iDisplayStart + 1;
        }},
        { data: "device_name", name: "device_name", searchable: false, render: function(data, type, row){
            return $("<div/>").html(data).text();
        }},   
        { data: "device_ip", name: "device_ip", searchable: false, render: function(data, type, row){
            return $("<div/>").html(data).text();
        }},   
        { data: "device_id", name: "device_id", searchable: false, render: function(data, type, row){
            return $("<div/>").html(data).text();
        }},  
        { data: "location", name: "location", searchable: false, render: function(data, type, row){
            return $("<div/>").html(data).text();
        }},
        { data: "gate", name: "gate", searchable: false, render: function(data, type, row){
            return $("<div/>").html(data).text();
        }},
        { data: "device_model", name: "device_model", visible: false, defaultContent: "-" },
        { data: "device_serial_number", name: "device_serial_number" },
        { data: "device_image", name: "device_image", searchable: false, render: function(data, type, row){
            return $("<div/>").html(data).text();
        }},
        { data: "action", name: "action", orderable: false, searchable: false},
    ],
    "dom": "Blfrtip",
    "buttons": [
        {
            text: '<i class="la la-plus-circle m-r-5"></i> Add Device',
            className: 'btn btn-success btn-sm',
            action: function ( e, dt, node, config ) {
                add();
            }
        },
        {
            text: '<i class="la la-edit m-r-5"></i> Edit Multiple Device',
            className: 'btn btn-primary btn-sm',
            action: function ( e, dt, node, config ) {
                editMultipleDevice();
            }
        },
        {
            text: '<i class="la la-print m-r-5"></i> Print',
            extend: 'print',
            className: 'btn btn-secondary btn-sm',
            exportOptions: {
                columns: ':visible:not(.nowrap)'
            }
        },
        {
            text: '<i class="la la-download m-r-5"></i> Excel',
            extend: 'excelHtml5',
            className: 'btn btn-secondary btn-sm',
            exportOptions: {
                columns: ':visible:not(.nowrap)'
            }
        },
        {
            text: '<i class="la la-download m-r-5"></i> PDF',
            extend: 'pdfHtml5',
            className: 'btn btn-secondary btn-sm',
            exportOptions: {
                columns: ':visible:not(.nowrap)'
            }
        },
    ],
    "destroy": true,
    "iDisplayLength": 10
};

table.dataTable(settings);

function edit(id) {
    var url = '{{ route("editDevice", ":id") }}';
    url = url.replace(':id',id);
    window.location.href = url;
}

function add() {
  $("#modal-div").load("{{ route('addDevice') }}");
}

function editMultipleDevice() {
    window.location.href = "{{ route('editMultipleDevice') }}";
}

$("#form-add").submit(function(e) {
    e.preventDefault();
    var form = $(this);

    if(!form.valid())
       return;

    $.ajax({
        url: form.attr('action'),
        method: form.attr('method'),
        data: new FormData(form[0]),
        dataType: 'json',
        async: true,
        contentType: false,
        processData: false,
        success: function(data) {
            swal(data.title, data.message, data.status);
            $("#modal-add").modal("hide");
            table.api().ajax.reload(null, false);
        }
    });
});

function remove(id) {
    swal({
        title: "Delete Data",
        text: "Data that have been deleted cannot be recovered. Proceed?",
        icon: "warning",
        buttons: ["Cancel", { text: "Delete", closeModal: false }],
        dangerMode: true,
    })
    .then((confirm) => {
        if (confirm) {
            var url = '{{ route("deleteDevice", ":id") }}';
            url = url.replace(':id',id);

            $.ajax({
                url: url,
                method: 'get',
                dataType: 'json',
                async: true,
                contentType: false,
                processData: false,
                success: function(data) {
                    swal(data.title, data.message, data.status);
                    table.api().ajax.reload(null, false);
                }
            });
        }
    });
}

function imageNewTab(imageBase64) {
    var image = new Image();
    image.src = imageBase64;
    // exit();
    var w = window.open("");
    w.document.write(image.outerHTML);
}


@if (session('status'))
    $("#modal-div").load("{{ route('updateIP',['device' => session('status')]) }}");
@endif

@if (session('alloffline'))
    swal('Unsuccess!', 'All Device is offline', 'warning');
@endif
</script>
@endpush


{{-- 

@extends('layouts.app')

@section('content')

<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Device</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">DataTables</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="col-12">
          <div class="card">
            <div class="card-header">
              <h3 class="card-title"></h3>
              <div class="float-right"><a href="{{ route('addDevice')}}" class="btn btn-primary">Add Device</a></div>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
            @if ($message = Session::get('success'))
                <div class="alert alert-success alert-block">
                  <button type="button" class="close" data-dismiss="alert">×</button> 
                  <strong>{{ $message }}</strong>
                </div>
                @endif
        
                @if ($message = Session::get('fail'))
                <div class="alert alert-danger alert-block">
                  <button type="button" class="close" data-dismiss="alert">×</button> 
                  <strong>{{ $message }}</strong>
                </div>
                @endif
        
                @if ($message = Session::get('warning'))
                <div class="alert alert-warning alert-block">
                  <button type="button" class="close" data-dismiss="alert">×</button> 
                  <strong>{{ $message }}</strong>
                </div>
                @endif
              <table id="example2" class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>#</th>
                    <th>Device Id</th>
                    <th>Device Ip</th>
                    <th>Device Name</th>
                    <th>Device Address</th>
                    <th>Device Model</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody>
                @php
                  $i =1;
                @endphp
                @foreach ($device as $data)
                <tr>
                    <td>{{ $i++}}</td>
                    <td>{{$data->device_id}}</td>
                    <td>{{$data->device_ip}}</td>
                    <td>{{$data->device_name}}</td>
                    <td>{{$data->device_address}}</td>
                    <td>{{$data->device_model}}</td>
                    <td>
                    <!-- cara dptkan id boleh blako nk tulis companies or companies->id -->
                    <a href=" {{ route('showDevice', $data) }}" class="btn btn-warning">View</a>
                    <a href=" {{ route('editDevice', $data) }}" class="btn btn-primary">Edit</a>
                    <a href=" {{ route('deleteDevice', $data) }}" class="btn btn-danger" onclick="return confirm('Are you sure?')">Delete</a>
                    </td>
                </tr>
                @endforeach
                </tbody>
            </table>
            
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!-- /.col -->
    </section>
    <!-- /.content -->
  </div>
@endsection

@section('js')
<script>
  $(function () {
    $('#example2').DataTable({
      "paging"      : false,
      "lengthChange": false,
      "searching"   : false,
      "ordering"    : true,
      "info"        : true,
      "autoWidth"   : false,
      "scrollX"     : true,
    });
  });
</script>
@endsection --}}