@extends('layouts/app')
@section('css')
<style type="text/css" nonce="{{ csp_nonce() }}">
    .pre {
        white-space: pre-wrap;
    }
    .read-more-show{
        cursor:pointer;
        color: #ed8323;
    }
    .read-more-hide{
        cursor:pointer;
        color: #ed8323;
    }
    .hide_content{
        display: none;
    }
</style>
@stop
@section('content')
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item">Logs</li>
                    <li class="breadcrumb-item"><a href="{{route('logs.kioskAuditLog')}}">Kiosk Audit Logs</a></li>
                </ol>
            </div>
        </div>
    </div>
</div>
<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <form method="post" action="{{ route('logs.kioskAuditLog') }}" id="form">
                @csrf
                <div class="card">
                @if(Session::has('error'))
                <div class="alert alert-danger alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                    <h5><i class="icon fas fa-check"></i> Error!</h5>
                    {{ Session::get('error') }}
                    @php
                    Session::forget('error');
                    @endphp
                </div>
                @endif
                <div class="container mt-3">
                    <div class="card-tools">
                        <div class="input-group input-group-sm">
                            @if (Auth::user()->userIsHQBranchs())
                            <div class="col-sm">
                                <div class="form-group">
                                    <label class="control-label">Branch</label>
                                    <select id="branch" class="form-control mr-2" name="branch">
                                        <option value="">Select Branch</option>
                                        @foreach($branches as $branch)
                                        <option value="{{ $branch->id }}" @if(isset($_POST['branch']) && $branch->id == $_POST['branch']) selected="selected" @endif>{{ $branch->code }}</option>
                                        @endforeach
                                    </select>                        
                                </div>
                            </div>
                            <div class="col-sm">
                                    <div class="form-group">
                                    <label class="control-label">Kiosk</label>
                                    <select id="kiosk" class="form-control" name="kiosk">
                                        <option value="">Select Kiosk</option>
                                        @foreach($kiosks as $kiosk)
                                        <option value="{{ $kiosk->guid }}" @if(isset($_POST['kiosk']) && $kiosk->guid == $_POST['kiosk']) selected="selected" @endif>{{ $kiosk->device_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            @endif
                            <div class="col-sm">
                                <div class="form-group">
                                    <label class="control-label">From Date</label>
                                    <div class='input-group date datetimepicker' id='datetimepicker1'>
                                        <input type='date' value="{{ $_POST['date_from'] ?? date('Y-m-d', strtotime('-1 month')) }}"
                                            class="form-control" name="date_from" id="date_from" max="{{date('Y-m-d')}}"/>
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm">
                                <div class="form-group">
                                    <label class="control-label">To Date</label>
                                    <div class='input-group date datetimepicker' id='datetimepicker2'>
                                        <input type='date' value="{{ $_POST['date_to'] ?? date('Y-m-d') }}"
                                            class="form-control" name="date_to" id="date_to" max="{{date('Y-m-d')}}"/>
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm">
                                <div class="form-group">
                                    <label class="control-label">&nbsp;</label>
                                    <div>
                                    <button type="submit" class="btn btn-default">
                                        <i class="fas fa-search"></i>
                                    </button>
                                    {{-- <button id="clear-search" type="button" class="btn btn-default">
                                        <i class="fas fa-xmark"></i>
                                    </button> --}}
                                    <a href="{{ route('logs.kioskAuditLog') }}" class="btn btn-default">
                                        <i class="fas fa-times"></i>
                                    </a>
                                    <a href="{{ route('logs.downloadAllKioskAuditLog', ['branch' => $_POST['branch'] ?? '', 'kiosk' => $_POST['kiosk'] ?? '','date_from' => $_POST['date_from'] ?? '','date_to' => $_POST['date_to'] ?? '']) }}" class="btn btn-outline-success">
                                        <i class="fas fa-file-download"></i>
                                    </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body table-responsive p-0">
                    @if(!empty($logs))
                    <table class="table table-hover text-wrap">
                        <thead>
                            <tr>
                                <th>Download</th>
                                <th>Date</th>
                                <th>Branch</th>
                                <th>Kiosk Code</th>
                                <th>Kiosk Name</th>
                                <th>Audit Log</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($logs as $log)
                            <tr data-widget="expandable-table" aria-expanded="false">
                              <td>
                                <a href="{{ route('logs.downloadKioskAuditLog', ['kiosk_guid' => $log->kiosk_guid ?? '','date' => $log->date ?? '','branch_id' => $log->branch_id ?? '']) }}" class="btn btn-outline-success">
                                    <i class="fa fa-download"></i>
                                </a>
                              </td>
                              <td>{{ Carbon\Carbon::parse($log->date)->format('d/m/Y') }}</td>
                              <td>{{ $log->code }}</td>
                              <td>{{ $log->device_code  }}</td>
                              <td>{{ $log->device_name }}</td>
                              <td>
                              @if(strlen($log->audit_log) > 100)
                                <p class="pre">{{substr($log->audit_log,0,100)}}</p>
                                <span class="read-more-show hide_content">More<i class="fa fa-angle-down"></i></span>
                                <span class="read-more-content"><p class="pre">{{substr($log->audit_log,100,strlen($log->audit_log))}}</p>
                                <span class="read-more-hide hide_content">Less<i class="fa fa-angle-up"></i></span></span>
                              @else
                                  <p class="pre">{{$log->audit_log}}</p>
                              @endif
                              </td>
                            </tr>
                          @endforeach                            
                        </tbody>
                    </table>
                    @else
                    <p align="center">No data found</p>
                    @endif
                    <div class="card-footer clearfix ">
                        <div class="pagination pagination-sm m-0 float-right">
                            @if(!empty($logs))
                            {{ $logs->links('pages.pagination') }}
                            @endif
                        </div>
                    </div>
                </div>
              </div>
            </form>
        </div>
      </div>
    </div>
</div>
</div>
@endsection
@section('js')
<script nonce="{{ csp_nonce() }}">

    $('input[name="date_from"]').on('change', function() {
        var value =  $(this).val();

        var today = new Date();
        var tyear = today.getFullYear();
        var tmonth = (today.getMonth() + 1).toString().padStart(2, '0');
        var tday = today.getDate().toString().padStart(2, '0');

        var newDate = new Date(value);
        newDate.setMonth(newDate.getMonth() + 1);
        var year = newDate.getFullYear();
        var month = (newDate.getMonth() + 1).toString().padStart(2, '0');
        var day = newDate.getDate().toString().padStart(2, '0');

        var formattedDate = year + '-' + month + '-' + day;
        var tformattedDate = tyear + '-' + tmonth + '-' + tday;

        fdate = $('#date_from').val();
        edate = $('#date_to').val();

        if(new Date(formattedDate) > new Date(tformattedDate)) {
            $('#date_to').val(tformattedDate);
        }
        else if((new Date(edate) > new Date(formattedDate)) || (new Date(edate) < new Date(fdate))) {
            $('#date_to').val(formattedDate);
        }

        // $('#date_to').attr("min", value);
        $('#date_to').attr("max", tformattedDate);
    });

    $('input[name="date_to"]').on('change', function() {
        var value =  $(this).val();

        var newDate = new Date(value);
        newDate.setMonth(newDate.getMonth() - 1);
        var year = newDate.getFullYear();
        var month = (newDate.getMonth() + 1).toString().padStart(2, '0');
        var day = newDate.getDate().toString().padStart(2, '0');

        var formattedDate = year + '-' + month + '-' + day;

        fdate = $('#date_from').val();
        edate = $('#date_to').val();
        
        if((new Date(fdate) < new Date(formattedDate)) || (new Date(edate) < new Date(fdate))) {
            $('#date_from').val(formattedDate);
        }
    });

    // $("#clear-search").click(function() {
    //     $('#date_from').val('');
    //     $('#date_to').val('');
    //     $('#branch').prop('selectedIndex',0);
    //     $('#kiosk').prop('selectedIndex',0);
    // });

    $('.read-more-content').addClass('hide_content')
    $('.read-more-show, .read-more-hide').removeClass('hide_content')

    // Set up the toggle effect:
    $('.read-more-show').on('click', function(e) {
        $(this).next('.read-more-content').removeClass('hide_content');
        $(this).addClass('hide_content');
        e.preventDefault();
    });

    // Changes contributed
    $('.read-more-hide').on('click', function(e) {
        var p = $(this).parent('.read-more-content');
        p.addClass('hide_content');
        // Hide only the preceding "Read More"
        p.prev('.read-more-show').removeClass('hide_content');
        e.preventDefault();
    });
</script>
@stop