@extends('layouts.admin')
@section('content')

<!-- [ page-header ] start -->
<div class="page-header">
    <div class="page-header-left d-flex align-items-center">
         <div class="d-md-none d-flex align-items-center me-2">
            <a href="javascript:void(0)" class="" id="setting-toggle">
                <i class="feather-align-right fs-20"></i>
            </a>
        </div>
        <div class="page-header-title">
            <h5 class="m-b-10">Settings</h5>
        </div>
        <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="index.php">Home</a></li>
            <li class="breadcrumb-item">Settings</li>
        </ul>
    </div>
    <div class="page-header-right ms-auto">
        <div class="page-header-right-items">
            <div class="d-flex d-md-none">
                <a href="javascript:void(0)" class="page-header-right-close-toggle">
                    <i class="feather-arrow-left me-2"></i>
                    <span>Back</span>
                </a>
            </div>
            <div class="d-flex align-items-center gap-2 page-header-right-items-wrapper">

            </div>
        </div>
        <!-- <div class="d-md-none d-flex align-items-center">
            <a href="javascript:void(0)" class="page-header-right-open-toggle">
                <i class="feather-align-right fs-20"></i>
            </a>
        </div> -->
    </div>
</div>
<!-- [ page-header ] end -->
<!-- [ Main Content ] start -->
<div class="main-content">
    <div class="row">
        <!-- table start -->
        <div class="col-lg-12">
            <div class="card stretch stretch-full">
                <div class="card-body p-0">
                    <div class="d-flex">
                        @include('admin.includes.setting-sidebar')
                        <!-- Right Content Column -->
                        <div class="w-100 p-4">
                            <div class="tab-content">
                                <!-- Chat Settings Tab -->
                                <div class="tab-pane fade show active" id="chat" role="tabpanel">
                                    <h4 style="border-bottom:1px solid #ccc; padding-bottom:12px;margin-bottom:35px">Chat Migration</h4>

                                     <div class="main-migration">
                                                                            <button type="button" class="btn btn-primary migrate  mt-4">Chat Migration</button>
                                                                         </div>
                                </div>

                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- table end -->
</div>
<img src="{{ asset('default/loading.gif') }}" class="loading" />

<style type="text/css">
    .loading {
        position: absolute;
        width: 100px;
        top: 45%;
        left: 49%;
        display: none;
    }
</style>
@endsection
@push('scripts')
<script>
    $(document).on('click', '.migrate', function() {
        $(".migrate").attr("disabled", true);
        $(".loading").show();
        $.ajax({
            type: "GET",
            url: "{{ route('moveChatOldToNew') }}",
            dataType: "json",
            success: function(response) {
                if (response.status == true) {
                    $(".main-migration").html("<div class='alert alert-success alert-block'>Migration Done Successfully!</div>");
                    $(".loading").hide();
                }
            }
        });
    });
</script>
@endpush