@extends('layout.app')
@section('title')
    {{ __('message.role_back') }}
@stop
@section('css')
    <link rel="stylesheet" type="text/css" href="{{asset("app-assets/vendors/css/forms/select/select2.min.css")}}">
    <link rel="stylesheet" type="text/css" href="{{asset("app-assets/css/calender.css")}}">

@endsection
@section('content')


    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-9 col-12 mb-2">
                <div class="row breadcrumbs-top">
                    <div class="col-12">
                        <h2 class="content-header-title float-left mb-0">{{ __('message.role_back') }}</h2>
{{--                        <div class="breadcrumb-wrapper">--}}
{{--                            <ol class="breadcrumb">--}}
{{--                                <li class="breadcrumb-item"><a href="{{route("dashboard")}}">{{ __('message.dashboard') }}</a>--}}
{{--                                </li>--}}
{{--                                <li class="breadcrumb-item active">{{ __('message.role_back') }}--}}
{{--                                </li>--}}
{{--                            </ol>--}}
{{--                        </div>--}}
                    </div>
                </div>
            </div>
        </div>

        <div class="content-body">
            <!-- users edit start -->
            <section class="app-user-edit website_select">
                <x-alert/>
                {{-- form for store clients --}}

                    <div class="card">

                        <div class="card-body">

                            <div class="row">
                                <div class="col-lg-4 col-md-12 col-sm-12">
                                    <section class="ftco-section">
                                        <div class="container">

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="calendar calendar-first" id="calendar_first">

                                                        <div class="calendar_weekdays"><div style="color: rgb(68, 68, 68);">{{__("message.role_back_calender")}}</div></div>
                                                        <div class="calendar_content">
                                                            @for($day = 1; $day <= 31; $day++)
                                                                <div class="past-date" id="past-{{ $day }}"> {{ $day }}</div>

                                                            @endfor
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </section>

                                </div>
                                {{-- client name --}}
                                {{-- client name --}}
                                <div class="col-lg-6 col-md-12 col-sm-12">
                                    <div class="form-group">
                                        <label for="name" class="form-label col-form-label">{{ __('message.apps') }}</label>

                                        <select class="select2 form-control form-control-lg" id="app_id" name="apps_id">
                                            <option value=""></option>
                                            @isset($apps)
                                                @foreach($apps as $app)
                                                    <option  value="{{$app->id}}">{{$app->name}}</option>
                                                @endforeach
                                            @endisset
                                        </select>
                                    </div>
                                </div>
                                {{-- end client name --}}
                                {{-- client name --}}
                                <div class="col-lg-12 col-md-12 col-sm-12 mt-5">
                                    <div class="table-responsive">
                                        <table class="table " id="rollback_table">
                                            <thead>
                                            <tr>
                                                <th>{{__("message.Current")}}</th>
                                                <th>{{__("message.Key")}}</th>
                                                <th>{{__("message.old_value")}}</th>
                                                <th>{{__("message.created")}}</th>

                                                <th>{{__("message.Actions")}}</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                {{-- end client name --}}
                            </div>

                            {{-- end form --}}

                        </div>
                    </div>


            </section>
            <!-- users edit ends -->
        </div>
    </div>
@endsection
@section("js")
    <!-- BEGIN: Page Vendor JS-->
    <script src="{{asset("app-assets/vendors/js/forms/select/select2.full.min.js")}}"></script>
    <!-- END: Page Vendor JS-->
    <!-- BEGIN: Page JS-->
    <script src="{{asset("app-assets/js/scripts/forms/form-select2.js")}}"></script>
    <!-- END: Page JS-->
    <script src="{{asset("app-assets/js/calender.js")}}"></script>
    <script src="https://unpkg.com/sweetalert2@7.18.0/dist/sweetalert2.all.js"></script>

    <script>
        $("#app_id").change(function(){
            $("#rollback_table tbody ").empty();
            $('.past-date').each(function() {
                if ($(this).hasClass('today')) {
                    $(this).removeClass('today');
                    $('.past-date input').remove();
                }
            });
            let app_id =  $("#app_id").val();
            let token = $('meta[name="csrf-token"]').attr('content');
            let _url = `{{route('role_back.history_of_app')}}`;
            $.ajax({
                type: 'GET',
                url: _url,
                data: {"_token": "{{ csrf_token() }}","id": app_id},
                success: function (resp) {
                    if (resp.success) {
                        if(resp.data !== null){
                            $.each(resp.data, function(key, value) {
                                $('#past-'+value.daysBack).addClass('today');
                                var input = document.createElement("input");

                                input.setAttribute("type", "hidden");

                                input.setAttribute("name", "date_of_active_calender");

                                input.setAttribute("value",value.date );

                             //append to form element that you want .
                                //console.log(value.daysBack);
                                document.getElementById('past-'+value.daysBack).appendChild(input);
                            })
                        }

                    } else {
                        swal.fire("sorry!", resp.message, "error");
                    }
                },
                error: function (resp) {
                    swal.fire("Error!", 'Something went wrong.', "error");
                }
            });
        });
    </script>
    <script>
        var elements = document.querySelectorAll('.past-date');
        for (var i = 0; i < elements.length; i++) {
            elements[i].addEventListener('click', function(event) {
                $("#rollback_table tbody ").empty();
                // Get the tag of the element that was clicked
                var input = event.target.querySelector('input');
                // Get the value of the input element
                var date = input.value;
                let app_id =  $("#app_id").val();
                let token = $('meta[name="csrf-token"]').attr('content');
                let _url = `{{route('role_back.data_history_of_app')}}`;
                $.ajax({
                    type: 'GET',
                    url: _url,
                    data: {"_token": "{{ csrf_token() }}","id": app_id,"date":date},
                    success: function (resp) {
                        if (resp.success) {
                            if(resp.data !== null){

                                $.each(resp.data, function(key, value) {
                                    $.ajax({
                                        type: 'GET',
                                        url: '{{route('role_back.old_data_history_of_app')}}',
                                        data: {"_token": "{{ csrf_token() }}","id": app_id,"key":value.key},
                                        success: function (process) {
                                            if (process.success) {
                                                if(process.data !== null){
                                                    let change_data = "";
                                                    $.each(process.data, function(key2, value2) {
                                                        if (value2.value != value.value){
                                                            change_data = "badge-danger";
                                                        }
                                                        const date = new Date(value.created_at);

                                                        const dateString = date.toLocaleDateString(); // "2/27/2023" (depending on your locale)
                                                        const timeString = date.toLocaleTimeString(); // "9:43:50 AM" (depending on your locale)

                                                        jQuery('#rollback_table tbody').append('<tr><td class="value '+change_data+'">'+value2.value+'</td><td>'+value.key+'</td> <td class="value">'+value.value+'</td> <td class="value">'+dateString+" " +timeString+'</td> <td><a onclick="rollback('+value.id+')" type="button" class="btn btn-gradient-primary">rollback</a></td></tr>');
                                                    })
                                                }

                                            }
                                        },

                                    });
                                })
                            }

                        } else {
                            swal.fire("sorry!", resp.message, "error");
                        }
                    },
                    error: function (resp) {
                        swal.fire("Error!", 'Something went wrong.', "error");
                    }
                });
            });
        }
    </script>
    <script>
        function rollback(id) {

                    let token = $('meta[name="csrf-token"]').attr('content');
                    let _url = `{{route('role_back.rollback')}}`;
                    $.ajax({
                        type: 'POST',
                        url: _url,
                        data: {"_token": "{{ csrf_token() }}","id": id},
                        success: function (resp) {
                            if (resp.success) {
                                swal.fire("Done!", resp.message, "success");
                            } else {
                                swal.fire("sorry!", resp.message, "error");
                            }
                        },
                        error: function (resp) {
                            swal.fire("Error!", 'Something went wrong.', "error");
                        }
                    });


        }
    </script>
@endsection