@extends('layouts.app')
@include('plugins.datatables')
@include('plugins.dropify')
@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">Capture Log</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">Capture Log</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-body">
            <section>
                <div class="card">
                    <div class="card-header">
                        <div class="row">
                            <!-- <div class="col-md-4">
                            </div> -->
                            <div class="col-md-12 float-left">
                                <form class="p-t-10" id="form-search" role="form" autocomplete="off" method="post" action="" novalidate>
                                    <div class="form-group-attached">
                                        <div class="row">
                                        <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="timesheetinput3">Start Time</label>
                                                    <div class="position-relative has-icon-left">
                                                        <input type="date" id="start_time" class="form-control" name="start_time">
                                                        <div class="form-control-position">
                                                            <i class="ft-message-square"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="timesheetinput3">End Time</label>
                                                    <div class="position-relative has-icon-left">
                                                        <input type="date" id="end_time" class="form-control" name="end_time">
                                                        <div class="form-control-position">
                                                            <i class="ft-message-square"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>   
                                            <div class="col-md-4">
                                                <div class="form-group form-group-default ">
                                                    <label>
                                                        <span id="label_name">Temperature Range</span>
                                                    </label>
                                                    <div class="row">
                                                       
                                                        <div class="col-md-2 pl-0 ml-1">
                                                            <input id="mintemp" class="form-control" name="mintemp" type="text"/>
                                                        </div>
                                                        <div class="col-md-1 pl-0">
                                                           <p>℃</p>
                                                        </div>
                                                        <div class="col-md-1 pl-0" style="padding-top:10px;">
                                                            <span><b>-</b></span>
                                                        </div>
                                                        <div class="col-md-2 pl-0">
                                                            <input id="maxtemp" class="form-control d-inline" name="maxtemp" type="text"/>
                                                        </div>
                                                        <div class="col-md-1 pl-0">
                                                           <p>℃</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row clearfix">
                                            <div class="col-md-2">
                                                <div class="form-group form-group-default ">
                                                    <label>
                                                        <span id="label_name">ID</span>
                                                    </label>
                                                    <input id="id" class="form-control" name="id" type="text">
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group form-group-default ">
                                                    <label>
                                                        <span id="label_name">Name</span>
                                                    </label>
                                                    <input id="name" class="form-control" name="name" type="text">
                                                </div>
                                            </div>
                                            <div class="col-md-2 text-left">
                                                <div class="form-group form-group-default form-group-default-custom mt-2">
                                                    <button class="btn btn-info pt-1" type="submit"><i class="la la-search m-r-5"></i> Search</button>
                                                    <button class="btn btn-default" onclick="resetFilterForm()">Reset</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <table class="table" id="table" style="width:100% !important;">
                            <thead>
                                <tr>
                                    <th class="fit">No.</th>
                                    <th>Name</th>
                                    <th>Temperature</th>
                                    <th>Group</th>
                                    <th>Location</th>
                                    <th>Door</th>
                                    <th>Date</th>
                                    <th>Time</th>
                                    <th>Post Api Status</th>
                                    <th width="10%">Image Capture</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: "name", name: "name", searchable: true, render: function(data, type, row){
            return $("<div/>").html(data).text();
        }},   
        { data: "temperature", name: "temperature", searchable: true, render: function(data, type, row){
            return $("<div/>").html(data).text();
        }},   
        { data: "group", name: "group", searchable: true, 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: "door", name: "door", searchable: false, render: function(data, type, row){
            return $("<div/>").html(data).text();
        }},
        { data: "date", name: "date", searchable: false, render: function(data, type, row){
            return $("<div/>").html(data).text();
        }},
        { data: "time", name: "time", searchable: true, render: function(data, type, row){
            return $("<div/>").html(data).text();
        }},
        { data: "post_api_status", name: "post_api_status", searchable: false, render: function(data, type, row){
            return $("<div/>").html(data).text();
        }},
        { data: "image", name: "image", searchable: false, render: function(data, type, row){
            return $("<div/>").html(data).text();
        }},
    ],
    "dom": "Blfrtip",
    "buttons": [
        {
            text: '<i class="la la-edit m-r-5"></i> Manual Sync',
            className: 'btn btn-primary btn-sm',
            action: function ( e, dt, node, config ) {
                manualSync();
            }
        },
        {
            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);


$('body').on('submit','#form-search',function(e){

e.preventDefault();

var form = $("#form-search");

if(!form.valid()){
    return false;
}

var settings = {
    "processing": true,
    "serverSide": true,
    "deferRender": true,
    "ajax": form.attr('action')+"?"+form.serialize(),
    "columns": [
        { data: 'index', defaultContent: '', orderable: false, searchable: false, render: function (data, type, row, meta) {
            return meta.row + meta.settings._iDisplayStart + 1;
        }},        
        { data: "name", name: "name", searchable: false, render: function(data, type, row){
            return $("<div/>").html(data).text();
        }},   
        { data: "temperature", name: "temperature", searchable: false, render: function(data, type, row){
            return $("<div/>").html(data).text();
        }},   
        { data: "group", name: "group", 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: "door", name: "door", searchable: false, render: function(data, type, row){
            return $("<div/>").html(data).text();
        }},
        { data: "date", name: "date", searchable: false, render: function(data, type, row){
            return $("<div/>").html(data).text();
        }},
        { data: "time", name: "time", searchable: false, render: function(data, type, row){
            return $("<div/>").html(data).text();
        }},
        { data: "image", name: "image", searchable: false, render: function(data, type, row){
            return $("<div/>").html(data).text();
        }},
    ],
    "dom": "Blfrtip",
"buttons": [
    {
        text: '<i class="la la-edit m-r-5"></i> Manual Sync',
        className: 'btn btn-primary btn-sm',
        action: function ( e, dt, node, config ) {
            manualSync();
        }
    },
    {
        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": 20
};

table.dataTable(settings);

})

// search box for table
$('#search-table').keyup(function() {
    table.fnFilter($(this).val());
});

function resetFilterForm() {
    $('#form-search')[0].reset();
    $("#form-search").trigger("reset");
    $('#form-search select').select2().val("").trigger("change");
}

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

function addImage(id){
    var url = '{{ route("captureAddPerson", ":id") }}';
    url = url.replace(':id',id);

    $("#modal-div").load(url);
}

@if (session('status'))
    swal('Success!', 'Successfully Update', 'success');
@endif
</script>
@endpush