@extends('layouts/app')
@section('css')
    <style type="text/css" nonce="{{ csp_nonce() }}">
        .pagination-pagination-sm {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }

        .pagination-pagination-sm .left-section {
            display: flex;
            align-items: center;
        }

        .btn {
            margin: 2px;
            /* Add some margin for spacing */
        }

        .time-input{
            width: 130px;
        }

        @media (max-width: 576px) {
            .pagination-pagination-sm {
                flex-direction: column;
                align-items: flex-end;
            }

            .pagination-pagination-sm .left-section {
                order: 2;
                /* Move the left section to the bottom on smaller screens */
                margin-top: 10px;
                /* Add some margin for spacing on smaller screens */
            }
        }

        .input-size {
            width: 130px;
        }

        ,
        .table tbody tr {
            max-height: 50px;
            /* Set your desired fixed height */
            overflow: hidden;
        }        ,
    </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.magnumApiResponseLog') }}">Magnum API 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.magnumApiResponseLog') }}" id="form">
                        @csrf
                        <div class="card">
                            @if (Session::has('message'))
                                <div class="alert alert-success alert-dismissible">
                                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                    <h5><i class="icon fas fa-check"></i> Success!</h5>
                                    {{ Session::get('message') }}
                                    @php
                                        Session::forget('message');
                                    @endphp
                                </div>
                            @endif
                            @if(Session::has('error'))
                            <div class="alert alert-danger">
                                <h5><i class="icon fas fa-x"></i> Errors!</h5>
                                @foreach(Session::get('error') as $err)
                                {{ $err }}<br>
                                @endforeach
                                @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 kiosk" 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 time-input">
                                                <label class="control-label">From Time</label>
                                                <div class="d-flex">
                                                    <select name="hour_from" class="form-control">
                                                        @foreach ($hours as $hour)
                                                            <option value="{{ $hour }}" @if(isset($_POST['hour_from']) && $_POST['hour_from'] == $hour)) selected="selected" @endif>{{ $hour }}</option>
                                                        @endforeach
                                                    </select>

                                                    <select name="minute_from" class="form-control">
                                                        @foreach ($minutes as $minute)
                                                            <option value="{{ $minute }}" @if(isset($_POST['minute_from']) && $_POST['minute_from'] == $minute)) selected="selected" @endif>{{ $minute }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm">
                                            <div class="form-group time-input">
                                                <label class="control-label">To Time</label>
                                                <div class="d-flex">
                                                    <select name="hour_to" class="form-control">
                                                        @foreach ($hours as $hour)
                                                            <option value="{{ $hour }}" @if(isset($_POST['hour_to']) && $_POST['hour_to'] == $hour)) selected="selected" @endif>{{ $hour }}</option>
                                                        @endforeach
                                                    </select>

                                                    <select name="minute_to" class="form-control">
                                                        @foreach ($minutes as $minute)
                                                            <option value="{{ $minute }}" @if(isset($_POST['minute_to']) && $_POST['minute_to'] == $minute)) selected="selected" @endif>{{ $minute }}</option>
                                                        @endforeach
                                                    </select>
                                                </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>
                                                    <a href="{{ route('logs.magnumApiResponseLog') }}"
                                                        class="btn btn-default">
                                                        <i class="fas fa-times"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body table-responsive p-0">
                                @if (count($logs))
                                    <table class="table table-hover text-wrap">
                                        <thead>
                                            <tr>
                                                <th>Updated At</th>
                                                <th>Branch</th>
                                                <th>Kiosk Code</th>
                                                <th>Kiosk Name</th>
                                                <th>Request Payload</th>
                                                <th>Response Payload</th>
                                                <th>Response</th>
                                                <th>Request URL</th>
                                                <th>Request IP</th>
                                                <th>User</th>
                                                <th>Method</th>
                                                <th>Response Time</th>
                                                <th>Agent</th>
                                                <th>Module</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($logs as $log)
                                                <tr data-widget="expandable-table" aria-expanded="false" style="height:100px;">
                                                    <td>{{ $log->updated_at->format('d/m/Y H:i:s') }}</td>
                                                    <td>{{ $log->code }}</td>
                                                    <td>{{ $log->device_code }}</td>
                                                    <td>{{ $log->device_name }}</td>
                                                    <td>{{ $log->request_payload }}</td>
                                                    <td>{{ $log->response_payload }}</td>
                                                    <td>{{ $log->response_code }}</td>
                                                    <th>{{ $log->request_url }}</th>
                                                    <th>{{ $log->request_ip }}</th>
                                                    <td>{{ $log->user_id }}</td>
                                                    <th>{{ $log->method }}</th>
                                                    <th>{{ $log->response_time }}</th>
                                                    <th>{{ $log->agent }}</th>
                                                    <th>{{ $log->module }}</th>
                                                    </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                @else
                                    <p align="center">No data found</p>
                                @endif                                
                                @if (!empty($logs))
                                    <div class="card-body">
                                        <div class="card-footer clearfix ">
                                            <div class="pagination-pagination-sm">
                                                <div class="left-section">
                                                    <button type="submit" class="btn btn-primary">
                                                        Go to
                                                    </button>
                                                    <input type='number'
                                                        value="{{ isset($_GET['page_no']) ? $_GET['page_no'] : (isset($_POST['page_no']) ? $_POST['page_no'] : '') }}"
                                                        class="btn btn-default toastsDefaultFullImage input-size"
                                                        name="page_no" placeholder="Page no" />

                                                    <input type='number'
                                                        value="{{ isset($_GET['per_page']) ? $_GET['per_page'] : (isset($_POST['per_page']) ? $_POST['per_page'] : '') }}"
                                                        class="btn btn-default toastsDefaultFullImage input-size"
                                                        name="per_page" placeholder="Per page" />
                                                </div>
                                                <div class="pagination-container">
                                                    {{ $logs->appends(['per_page' => request('per_page'), 'page' => request('page')])->links('pagination::bootstrap-4') }}
                                                </div>


                                            </div>

                                        </div>
                                        <div class="text-muted mt-3">
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection
@section('js')
    <script nonce="{{ csp_nonce() }}">
        function validate_time(){
            var dateFrom = $('input[name="date_from"]').val();
            var dateTo = $('input[name="date_to"]').val();
            var hourFrom = $('select[name="hour_from"]').val();
            var minuteFrom = $('select[name="minute_from"]').val();
            var hourTo = $('select[name="hour_to"]').val();
            var minuteTo = $('select[name="minute_to"]').val();

            var currentDate = new Date();
            var hours = currentDate.getHours().toString().padStart(2, '0');
            var minutes = currentDate.getMinutes().toString().padStart(2, '0');
            var currentTime = hours+':'+minutes;

            var timeFrom = hourFrom+':'+minuteFrom;
            var timeTo = hourTo+':'+minuteTo;

            var timeFromDateTime = new Date(dateFrom + ' ' + timeFrom);
            var timeToDateTime = new Date(dateTo + ' ' + timeTo);

            if (timeFromDateTime > currentDate) {
                $('select[name="hour_from"]').val(hours);
                $('select[name="minute_from"]').val(minutes);
            }

            if (timeToDateTime > currentDate){
                $('select[name="hour_to"]').val(hours);
                $('select[name="minute_to"]').val(minutes);
            }

            if (timeToDateTime <= timeFromDateTime) {
                $('select[name="hour_to"]').val($('select[name="hour_from"]').val());
                $('select[name="minute_to"]').val($('select[name="minute_from"]').val());
            }
        }

        $('select[name="hour_from"]').on('change', function() {
           validate_time();
        });

        $('select[name="minute_from"]').on('change', function() {
           validate_time();
        });

        $('select[name="hour_to"]').on('change', function() {
           validate_time();
        });

        $('select[name="minute_to"]').on('change', function() {
           validate_time();
        });
        
        $('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);

            validate_time();
        });

        $('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);
            }

            validate_time();
        });

        $('select[name="branch"]').on('change', function() {
            var branch = $(this).val();
            $.ajax({
                type: 'get',
                url: '{{ route('logs.getKioskForBranch') }}',
                data: {
                    'branch_id': branch
                },
                dataType: 'json',
                success: function(data) {
                    $('select[name="kiosk"]').empty();
                    $('select[name="kiosk"]').html('<option value="">Select Kiosk</option>');
                    $.each(data, function(key, value) {
                        $('select[name="kiosk"]').append('<option value="' + value.guid +
                            '" {{ '+ value.guid +' == ($_POST['kiosk'] ?? '') ? 'selected' : '' }}>' +
                            value.device_code + '</option>');
                    });
                }
            });
        });
        $(document).on('click', '.pagination-container a.page-link', function(event) {
            event.preventDefault();
            var url = $(this).attr('href');
            if (!$(this).parent().hasClass('active')) {
                $.ajax({
                    url: url,
                    type: 'GET',
                    success: function(data) {
                        var $newContent = $(data).find('.card-body.table-responsive.p-0').html();
                        $('.card-body.table-responsive.p-0').html($newContent);
                        var $newPagination = $(data).find('.pagination-container').html();
                        $('.pagination-container').html($newPagination);
                        $('html, body').animate({
                            scrollTop: $('.card-body.table-responsive.p-0').offset().top
                        }, 500);
                    },
                });
            }
        });
    </script>
@stop