@extends('admin.layouts.app')

@section('content')
    <div class=" content-body default-height">
        <div class="container-fluid">
            <div class="page-titles">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">@lang('admin.dashboard')</a></li>
                    <li class="breadcrumb-item active"><a href="{{route('admin.reports.activityLogs')}}">@lang('activities.logs')</a></li>
                </ol>
            </div>
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4>@lang('activities.logs')</h4>
                    </div>
                    <div class="card-body">
                        <!-- Add a form for filtering -->
                        <form method="get" action="" class="d-flex">
                            @csrf
                            <div class="input-group me-2">
                                <select class="form-select select2" name="log_name" aria-label="Filter by Log Name" data-placeholder="@lang('activities.select_log_name')">
                                    <option value="">@lang('activities.select_log_name')</option>
                                    @foreach ($logsName as $name)
                                        <option value="{{ $name }}" @if(request()->input('log_name') == $name) selected @endif>{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="input-group me-2">
                                <input type="text" class="form-control" id="date-range"
                                    name="date_range" placeholder="@lang('activities.date_search')"
                                    value="{{ request()->input('date_range') }}"readonly>
                            </div>
                            <div class="input-group me-2">
                                <input type="text" class="form-control" name="keyword" autocomplete="off"
                                    value="{{ request()->input('keyword') }}" placeholder="@lang('admin.search')">
                            </div>   
                            <button type="submit" class="btn btn-primary">@lang('activities.filter')</button>
                        </form>

                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>@lang('activities.log_name')</th>
                                        <th>@lang('activities.causer_id')</th>
                                        <th>@lang('activities.subject_id')</th>
                                        {{-- <th>@lang('activities.subject_type')</th> --}}
                                        <th>@lang('activities.description')</th>
                                        <th>@lang('activities.properties')</th>
                                        <th>@lang('activities.created_at')</th>
                                    </tr>
                                </thead>
                                <tbody id="logTableBody">
                                    @foreach ($logs as $log)
                                        <tr>
                                            <td>{{ $log->log_name }}</td>
                                            <td>{{ $log->causer->name ?? '' }}
                                            </td>
                                            <td>{{ $log->subject_id }}</td>
                                            {{-- <td>{{ $log->subject_type }}</td> --}}
                                            <td class="description">{{ $log->description }}</td>
                                            <td class="properties">
                                                <div class="properties">
                                                    @if(isset($log->properties))
                                                        @foreach ( json_decode($log->properties, true) as $type => $data)
                                                            @if ($type === 'old')
                                                                    <hr>
                                                                    <div class="separator">old</div>
                                                            @endif
                                                            @if(isset($data) && is_array($data))
                                                                @foreach ($data as $key => $value)
                                                                        {{ var_export($key,true) }}: {{ var_export($value,true) }}<br>
                                                                @endforeach
                                                            @else
                                                                {{ $type }}: {{ $data }}<br>
                                                            @endif
                                                            @if ($type === 'old')
                                                                <hr>
                                                                <div class="separator">new</div>
                                                            @endif
                                                        @endforeach
                                                    @endif
                                                </div>
                                                {{-- {{ dump($log->properties)}} --}}
                                                {{-- {{ var_export($log->properties)}} --}}
                                            </td>
                                            <td>{{ $log->created_at->format('d-m-Y H:i:s') }}</td>
                                    @endforeach
                                </tbody>
                            </table>
                            {{ $logs->links('vendor.pagination.custom') }}
                            <style>
                                .separator {
                                    text-align: center;
                                    margin-top: -10px;
                                }
                                pre.sf-dump{
                                    z-index: 1!important;
                                }
                                .properties {
                                    max-width: 400px;
                                    overflow: auto;
                                    max-height: 200px;
                                    /* height: 150px; */
                                    /* display: flow; */
                                }
                                .description{
                                    max-width: 300px;
                                    overflow: auto;
                                    max-height: 260px;
                                    /* height: 260px; */
                                }
                            </style>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
<style>
    .select2-container--default .select2-selection--multiple, .select2-container--default .select2-selection--single {
      min-height: 56px;
      border: 1px solid #E6E6E6;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow, .select2-container--default .select2-selection--single .select2-selection__arrow {
      top: 16px;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
      line-height: 52px;
    }
    .select2-results__options li {
        font-size: 14px;
        padding-top: 5px;
        padding-bottom: 5px;
    }
  </style>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker@3.1.0/daterangepicker.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker@3.1.0/daterangepicker.min.js"></script>
<script>
    $(document).ready(function() {
        $('.select2').select2();

        $('#date-range').daterangepicker({
                autoUpdateInput: false,
                timePicker: true,
                locale: {
                    format: 'DD/MM/YYYY h:mm A'
                },
                timePickerIncrement: 30,
                showDropdowns: true
            });

            $('#date-range').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('DD/MM/YYYY h:mm A') + ' - ' + picker.endDate.format(
                    'DD/MM/YYYY h:mm A'));
            });
        // // Assuming you're using jQuery for simplicity
        // $('#filterForm').on('submit', function(e) {
        //     e.preventDefault();
        //     var formData = $(this).serialize();
        //     $.ajax({
        //         type: 'GET',
        //         url: "{{ route('admin.reports.activityLogs.filter') }}",
        //         data: formData,
        //         success: function(response) {
        //             // Update the table with the filtered data
        //             $('#logTableBody').empty(); // Clear the existing rows
        //             $.each(response.logs, function(index, log) {
        //                 // Convert the datetime string to a Date object
        //                 var created_at = new Date(log.created_at);
        //                 created_at = created_at.toLocaleString().replace(/\//g, '-');
        //                // Format properties data
        //         // Format properties data
        //         var propertiesHtml = '';
        //         $.each(log.properties, function(key, value) {
        //             propertiesHtml += key + ': ' + JSON.stringify(value) + '<br>';
        //         });
        //                 var rowHtml = `
        //                     <tr>
        //                         <td>${log.log_name}</td>
        //                         <td>${log.causer_name}</td>
        //                         <td>${log.subject_type}</td>
        //                         <td>${log.description}</td>
        //                         <td class="properties">${propertiesHtml}</td>
        //                         <td>${created_at}</td>
        //                     </tr>`;
        //                 $('#logTableBody').append(rowHtml);
        //             });

        //             // Update pagination links
        //             $('.pagination').html(generatePaginationLinks(response));

        //             // Optional: You can also update other UI elements such as showing total records count, etc.
        //         },
        //         error: function(xhr, status, error) {
        //             console.error(error);
        //         }
        //     });
        // });

        // // Function to generate pagination links
        // function generatePaginationLinks(paginator) {
        //     var paginationHtml = '<nav aria-label="Page navigation example">';
        //     paginationHtml += '<ul class="pagination justify-content-center">';

        //     if (paginator.current_page === 1) {
        //         paginationHtml += '<li class="page-item disabled">';
        //     } else {
        //         paginationHtml += '<li class="page-item">';
        //     }
        //     paginationHtml += '<a class="page-link" href="#" tabindex="-1">Previous</a></li>';

        //     for (var i = 1; i <= paginator.last_page; i++) {
        //         if (i === paginator.current_page) {
        //             paginationHtml += '<li class="page-item active">';
        //         } else {
        //             paginationHtml += '<li class="page-item">';
        //         }
        //         paginationHtml += '<a class="page-link" href="#" data-page="' + i + '">' + i + '</a></li>';
        //     }

        //     if (paginator.current_page === paginator.last_page) {
        //         paginationHtml += '<li class="page-item disabled">';
        //     } else {
        //         paginationHtml += '<li class="page-item">';
        //     }
        //     paginationHtml += '<a class="page-link" href="#" rel="next">Next</a></li>';

        //     paginationHtml += '</ul></nav>';

        //     return paginationHtml;
        // }

        // // Handle pagination links click
        // $(document).on('click', '.pagination a', function(e) {
        //     e.preventDefault();
        //     var page = $(this).data('page'); // Get the page number from the data attribute
        //     var formData = $('#filterForm').serialize() + '&page=' +
        //     page; // Add page parameter to form data
        //     $.ajax({
        //         type: 'GET',
        //         url: "{{ route('admin.reports.activityLogs.filter') }}",
        //         data: formData,
        //         success: function(response) {
        //             // Update the table with the new page's data
        //             $('#logTableBody').html(''); // Clear the existing rows
        //             response.logs.forEach(function(log) {
        //                 // Convert the datetime string to a Date object
        //                 var created_at = new Date(log.created_at);
        //                 created_at = created_at.toLocaleString();
        //                 var propertiesString = JSON.stringify(log.properties);
        //                 var rowHtml = `
        //                 <tr>
        //                     <td>${log.log_name}</td>
        //                     <td>${log.causer_name}</td>
        //                     <td>${log.subject_type}</td>
        //                     <td>${log.description}</td>
        //                     <td class="properties">${propertiesString}</td>
        //                     <td>${created_at}</td>
        //                 </tr>`;
        //                 $('#logTableBody').append(rowHtml);
        //             });

        //             // Update pagination links
        //             $('.pagination').html(generatePaginationLinks(response));
        //         },
        //         error: function(xhr, status, error) {
        //             console.error(error);
        //         }
        //     });
        // });
    });
</script>
@endpush