@extends('layouts.app')

@section('center')
    <link rel="stylesheet" href="{{asset('assets')}}/vendor/datepicker/css/classic.css" />
    <link rel="stylesheet" href="{{asset('assets')}}/vendor/datepicker/css/classic.date.css" />
    <link rel="stylesheet" href="{{asset('assets')}}/vendor/bs-select/bs-select.css" />
    <div class="row gutters">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <form action="{{route('extraLog')}}">
                <div class="row gutters">
                    <div class="col-xl-2 col-lg-2 col-md-2 col-sm-2">

                        <div class="form-group">
                            <label class="label">Device ID</label>
                            <select class="form-control selectpicker" data-live-search="true" class="form-control " name="DeviceId">
                                <option value=''>Select Device ID</option>
                                @foreach($tr_data as $k => $row)
                                    <option value="{{$row->global_device_id}}" @isset($_GET["DeviceId"])
                                        @if($_GET["DeviceId"]==$row->global_device_id) {{'selected'}} @endif
                                        @endisset>{{$row->global_device_id}}</option>
                                @endforeach

                            </select>
                        </div>



                    </div>

                    <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3">

                        <div class="form-group">
                            <label class="label">From Date</label>
                            <input type="datetime-local" class="form-control" name="from" placeholder="From"
                                   @isset($_GET["from"])
                                       value="{{$_GET['from']}}"
                                @endisset >
                        </div>

                    </div>

                    <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3">

                        <div class="form-group">
                            <label class="label">To Date</label>
                            <input type="datetime-local" class="form-control" name="to" placeholder="To"
                                   @isset($_GET["to"])
                                       value="{{$_GET['to']}}"
                                @endisset
                            >
                        </div>

                    </div>

                    <div class="col-xl-2 col-lg col-md-2 col-sm-2 col-12 ">
                        <div class="form-group">
                            <label class="label">&nbsp;</label>
                            <button type="submit" class="form-control btn btn-primary generate">Generate</button>
                        </div>

                    </div>
                </div>
            </form>
        </div>
        <!-- <div class="row gutters"> -->
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-2 col-12">
            <div class="table-container">
                <div class="table-responsive" style="max-height: 800px; overflow-y: auto;">
                    <table class="table m-0">
                        <thead style="position: sticky; top: 0; z-index: 1;">
                        <tr>
                            <th>#</th>
                            <th>Date Time</th>
                            <th>Server Time</th>
                            <th>Global Device ID</th>

                            <th>SI</th>
                            <th>BI</th>
                            <th>WI</th>
                            <th>WV</th>
                            <th>II</th>
                            <th>VI</th>
                            <th>SV</th>
                            <th>BV</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($data as $index => $row)
                            <tr>
                                <td>{{ $index + 1 + ($data->currentPage() - 1) * $data->perPage() }}</td>
                                <td>{{ $row->dtime }}</td>
                                <td>{{ $row->stime }}</td>
                                <td>{{ $row->global_device_id }}</td>

                                <td>{{ $row->si }}</td>
                                <td>{{ $row->bi }}</td>
                                <td>{{ $row->wi }}</td>
                                <td>{{ $row->wv }}</td>
                                <td>{{ $row->ii }}</td>
                                <td>{{ $row->vi }}</td>
                                 <td>{{ $row->sv }}</td>
                                <td>{{ $row->bv }}</td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="d-flex mt-3">
                    {{ $data->appends(request()->query())->links('pagination::bootstrap-4') }}
                </div>

            </div>

        </div>
    </div>

    @push('scripts')
        <script src="{{asset('assets')}}/vendor/datepicker/js/picker.js"></script>
        <script src="{{asset('assets')}}/vendor/datepicker/js/picker.date.js"></script>
        <script src="{{asset('assets')}}/vendor/datepicker/js/custom-picker.js"></script>
        <script src="{{asset('assets')}}/vendor/bs-select/bs-select.min.js"></script>
        <script src="{{asset('assets')}}/js/main.js"></script>
    @endpush
@endsection