@extends('crudbooster::admin_template')
@push("bottom")
    <style>
        .panel-heading{
            padding: 8px 15px;
        }
    </style>
    <link rel="stylesheet" href="{{ asset('/css/application_backend.css') }}">

    <script type="text/javascript">
    $('#log_date_id').select2;
    </script>
@endpush

@section('content')
<!-- Your html goes here -->
<div class='panel panel-default'>
    <div class='panel-heading eap-box'>
        <div class="dark-color">
            <h4 style="display: inline-block;"><b><i class="fa fa-bullhorn text-danger"></i> Error Logs List Preview</b></h4>
            <div class="pull-right" style="top: 5px; position: relative">
                <p class="btn btn-info fa fa-bullhorn">
                    <b>Records</b>
                    <select name="log_date_id" onchange="log_change(this)" id="log_date_id" class="text-danger">
                        @forelse ($records['available_log_dates'] as $date)
                            <option value="{{$date}}" {{"laravel-".$date.".log" == $records['filename'] ? 'selected=true' : '' }}>
                                {{$date}}
                            </option>
                        @empty
                            <option >No Logs Found</option>
                        @endforelse
                    </select>
                </p>
            </div>
        </div>
    </div>

    <div class='panel-body'>
        @forelse ($records['logs'] as $count => $record)
        <div class="card">
            <div class="card-header">
                <p class="text-warning"><i class="fa fa-bug text-danger"></i>{{ ($count+1)."-" .' '.$record['timestamp'] }}</p>
            </div>
            <div class="card-body">
                <p >{{ $record['message'] }}</p>
            </div>
            <div class="card-footer">
                {{ $record['env'] }}<span class='text-danger'> Type : {{ $record['type']}}</span>
            </div>
        </div>

        @empty
            <p class="text-danger">No Error Found</p>
        @endforelse
    </div>
    <div class="panel-footer">
        @if(count($records['available_log_dates']) > 0)
            <div class="row">
                <button type="button" class="btn btn-danger float-right mr-5" onclick="deletelog(this)"><i class="fa fa-cut">&nbsp;</i><b>Delete Log</b></button>
            </div>
        @endif

    </div>
</div>


<script>
    function log_change(e) {
        $.ajax({
            type: "get",
            url: "{{ url('api/logs/logs_list/')}}"+'/'+$(e).val(),
            beforeSend: function(){
                swal({
                    title: `{{__('action.processing')}}`,
                    imageUrl: "{!! asset('/') !!}"+"ezgif.com-gif-maker.webp",
                    showConfirmButton: false,
                    allowOutsideClick: false,
                    confirm: true,
                    showLoaderOnConfirm: true,
                    width: '300px',
                    height: '180px'
                })
            },
            success: function(res) {
                window.location.href = "{{ url('api/logs/logs_list/')}}"+'/'+$(e).val()
            }
        });
    };

    function deletelog(e) {
        swal({
            title: "Are you sure ?",
            text: "You will not be able to recover this record data!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#ff0000",
            confirmButtonText: "Yes!",
            cancelButtonText: "No",
            closeOnConfirm: false
        },function(){
            location.href="{{ url('api/logs/log_delete/')}}"+'/'+$('#log_date_id').find('option:selected').val()
        });
    }
</script>
@endsection