@extends('layouts.admin')


@section('content')
    <div class="page-header text-uppercase">
        <ul class="list-unstyled space-list m-0">
            <li>
                <p>{{ __('admin.admin_user_log') }}</p>

            </li>
            <li>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{ __('common.home') }}</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('admin.admin_user_log') }}</li>
                    </ol>
                </nav>
            </li>
        </ul>
    </div>
    <div class="admin-area-col">
        <div class="row employee-list-view">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 employee-list-full">
                <div class="round-white-bg box-shadow">
                    <div class="table-filters1 user_log_filter_div">
                        {!! Form::open(['route' => 'admin-user-log.index', 'method' => 'GET', 'class' => 'filter_form mt-3 col-md-12 mb-4']) !!}
                        <div class="row">
                            <div class="col-md-3 filters">
                                {!! Form::select('users[]', $users, isset($_GET['users']) ? $_GET['users'] : '', [
                                    'class' => 'form-control select2', 'multiple' => true
                                ]) !!}
                            </div>

                            <div class="col-md-3 filters filter_actions">
                                {{--<div class="btn-style">--}}
                                    {!! Form::submit(__('common.search'), ['class' => 'form-control btn btn-primary btn_sub width80']) !!}
                                {{--</div>--}}

                                {{--<div class="btn-style">--}}
                                    <a href="{{ route('admin-user-log.index') }}" class="form-control btn btn-primary text-center width80">{!! __('common.reset') !!}</a>
                                {{--</div>--}}
                            </div>
                        </div>
                        {!! Form::close() !!}
                    </div>
                    <div class="table-responsive admin_user_log">
                        <table id="dTable" data-sort="4" data-url="{{ route('admin-user-log.paginate') }}"
                            class="striped-table w-100 custom-datatable font13">
                            <thead>
                                <tr>
                                    <th width="10%" class="font-medium font13 no-sort">{{ __('common.sr-no') }}</th>
                                    <th class="font-medium font13">{{ __('admin.full_name') }}</th>
                                    <th class="font-medium font13">{{ __('admin.log_action') }}</th>
                                    <th class="font-medium font13">{{ __('admin.log_description') }}</th>
                                    <th class="font-medium font13">{{ __('admin.log_created_at') }}</th>
                                </tr>
                            </thead>
                            <tbody class="text-muted font-medium">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="modal fade" id="previewChangesModal" tabindex="-1" role="dialog" aria-labelledby="previewChangesModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="previewChangesModalLabel">Changes</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">

            </div>
          </div>
        </div>
      </div>
@section('script')
<script>
function showLogDetails(event) {
    const details = JSON.parse(event.getAttribute('data-details'));
    let table = "<div class='table-responsive'><table class='table table-bordered'><thead>";
    let thCount = 0;

    for (const key in details) {
        if (details.hasOwnProperty(key)) {
            const description = details[key];
            if (thCount === 0) {
                if(key != "variation"){
                  table += "<tr><th>Type</th><th>Change From</th><th colspan='8'>Change To</th></tr></thead><tbody>";
                }else{
                  table +="<tr>";
                  table +="<th>{{__('admin.type')}}</th>";
                  table +="<th>{{__('admin.option')}}</th>";
                  table +="<th title='{{__('admin.regular_price')}}'>'{{__('admin.regular_price_short')}}'</th>";
                  table +="<th title='{{__('admin.sale_price')}}'>'{{__('admin.sale_price_short')}}'</th>";
                  table +="<th title='{{__('admin.inside_price')}}'>'{{__('admin.inside_price_short')}}'</th>";
                  table +="<th title='{{__('admin.foodora_price')}}'>'{{__('admin.foodora_price_short')}}'</th>";
                  table +="<th>{{__('admin.sort')}}</th>";
                  table +="<th title='{{__('admin.night_meny_price')}}'>'{{__('admin.night_meny_price_short')}}'</th>";
                  table +="<th title='{{__('admin.night_meny_inside_price')}}'>'{{__('admin.night_meny_inside_price_short')}}'</th>";
                  table +="<th>'{{__('admin.reward')}}'</th>";
                  table +="</tr>";
                }
            }

            if(key != "variation"){
            let changeFrom = '';
            let changeTo = '';

            // Extract "changed from" and "changed to" values

            if (description.includes('changed from "')) {
                changeFrom = description.split('changed from "')[1].split('" to ')[0];
                changeTo = description.split('changed from "')[1].split('" to "')[1].slice(0, -1);
            }
            table += "<tr>";
            table += `<td>${toTitleCase(key)}</td>`;
            if(changeFrom || changeTo){
                if (isImagePath(changeFrom)) {
                    table += `<td>${getImageHTML(changeFrom, getImageBaseName(changeFrom))}</td>`;
                }else{
                    table += `<td>${changeFrom}</td>`;
                }
                if (isImagePath(changeTo)) {
                    table += `<td colspan='8'>${getImageHTML(changeTo, getImageBaseName(changeTo))}</td>`;
                } else {
                    table += `<td colspan='8'>${changeTo}</td>`;
                }
            }else{
                table += `<td colspan=2>${description}</td>`;
            }
            table += "</tr>";
            }else{
               for(const innerKey in description){
                 var v = description[innerKey];
                 console.log(v['variation_reward_points']);
                 table += "<tr>";
                 table += `<td>${toTitleCase(v['type'])}</td>`;
                 table += `<td>${v['option']}</td>`
                 table += `<td>${v['regular_price']}</td>`;
                 table += `<td>${v['sale_price']}</td>`;
                 table += `<td>${v['inside_price']}</td>`;
                 table += `<td>${v['foodora_price']}</td>`;
                 table += `<td>${v.hasOwnProperty('sort') ? v['sort'] : ''}</td>`;
                 table += `<td>${v.hasOwnProperty('night_meny_price') ? v['night_meny_price'] : ''}</td>`;
                 table += `<td>${v.hasOwnProperty('night_meny_inside_price') ? v['night_meny_inside_price'] : ''}</td>`;
                 table += `<td>${v.hasOwnProperty('variation_reward_points') ? v['variation_reward_points'] : ''}</td>`;
                 table += "</tr>";
               }
            }
            thCount++;
        }
    }

    table += "</tbody></table></div>";
    document.querySelector(".modal-body").innerHTML = table;
    $('#previewChangesModal').modal('show');
}
function isImagePath(path) {
    return /\.(jpg|jpeg|png|gif|bmp|tiff|svg|webp|ico)$/i.test(path);
}
function getImageHTML(path, altText) {
        const imagePath = `{{ asset('${path}') }}`;
        return `<img src="${imagePath}" alt="${altText}" width="100px" height="100px" onerror="this.onerror=null; this.outerHTML='<strong>${altText}<br>(Removed)</strong>';">`;
}
function toTitleCase(str) {
        return str
            .split('_') // Split the string by underscores
            .map(word => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize the first letter of each word
            .join(' '); // Join them back with spaces
}
function getImageBaseName(path) {
        const baseName = path.substring(path.lastIndexOf('/') + 1);
        return baseName.charAt(0).toUpperCase() + baseName.slice(1);
}
</script>
@endsection
@endsection