@php use Illuminate\Support\Facades\Crypt; @endphp
@extends("frontend.main")
@section("content")
    @inject("Carbon",Illuminate\Support\Carbon::class)
    <div class="row mt-2">
        <div class="col-md-12 shadow rounded border p-2 mb-3">
            <p class="text-center mb-0">Đơn vị: CPU - vCore | RAM - GB | SSD - GB</p>
        </div>
        <div class="col border shadow rounded p-2">
            <div class="title text-center font-weight-bold fs-4">Thông tin cấu hình</div>
            <div class="box-element mt-3 border-dash p-3 mb-3">
                <div class="row">
                    <div class="col-md-6">
                        IP
                    </div>
                    <div class="col-md-6">
                        @if($product->IpAddress && $product->IpAddress->ip)
                            {{ $product->IpAddress->ip }}
                        @else
                            No Data
                        @endif
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        Port
                    </div>
                    <div class="col-md-6">
                        {{ $product->port }}
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        User
                    </div>
                    <div class="col-md-6">
                        {{ $product->user }}
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        Password
                    </div>
                    <div class="col-md-6">
                        {{ $product->password ? SignRSA::DecryptFunc($product->password) : "" }}
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        Hệ điều hành
                    </div>
                    <div class="col-md-6">
                        @if( $product->Os && $product->Os->OsGroup)
                            {{$product->Os->OsGroup->name}} {{ $product->Os->version }}
                        @endif

                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        Cấu hình (CPU - RAM - SSD):
                    </div>
                    <div class="col-md-6">
                        {{$information->cpu}} - {{$information->ram}} - {{$information->disk}}
                    </div>
                </div>
            </div>
        </div>
        @if($addon)
            <div class="col shadow rounded border p-2">
                <div class="title text-center font-weight-bold fs-4">Dịch vụ bổ sung</div>
                <div class="box-element mt-3 border-dash p-3 mb-3">
                    @foreach($addon as $_key => $_item)
                        <div class="row">
                            <div class="col-md-6">
                                Addon {{strtoupper($_key)}}
                            </div>
                            <div class="col-md-6">
                                {{$_item}}
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif
        <div class="col shadow rounded border p-2">
            <div class="title text-center font-weight-bold fs-4">Thông tin thanh toán</div>
            <div class="box-element mt-3 border-dash p-3">
                <div class="row">
                    <div class="col-md-6">
                        Ngày đăng ký
                    </div>
                    <div class="col-md-6">
                        {{ $Carbon::parse($product->created_at)->format('d/m/Y') }}
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        Thanh toán lần đầu
                    </div>
                    <div class="col-md-6">
                        {{ number_format($product->first_payment,0,',','.') }} đ
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        Thanh toán định kỳ
                    </div>
                    <div class="col-md-6">
                        {{ number_format($product->next_payment,0,',','.') }} đ
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        Hạn sử dụng
                    </div>
                    <div class="col-md-6">
                        @if($Carbon::now()->diffInDays($Carbon::parse($product->next_due_date),false) > 0)
                            <span class="badge bg-success"> Còn {{$Carbon::now()->diffInDays($Carbon::parse($product->next_due_date),false)}} ngày</span>
                        @else
                            <span class="badge bg-danger">Hết hạn</span>
                        @endif

                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        Ngày hết hạn
                    </div>
                    <div class="col-md-6">
                        {{ $Carbon::parse($product->next_due_date)->format('d/m/Y') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col ps-0">
            <div
                data-bs-toggle="modal" data-bs-target="#renew"
                class="rounded shadow p-3 btn w-100 d-flex align-items-center justify-content-center  ">
                <div><img src="{{ asset('template/assets/icon/cashless-payment.png') }}"
                          style="width: 40px; margin-right: 20px" alt="Reset password"></div>
                <div>Gia hạn dịch vụ</div>
            </div>
        </div>
        <div class="col pe-0">
            <div
                onclick="loadPanel()"
                class="rounded shadow p-3 d-flex align-items-center justify-content-center btn w-100">
                <div><img src="{{ asset('template/assets/icon/reload_panel.png') }}"
                          style="width: 40px; margin-right: 20px" alt="Plesk Logo"></div>
                <div>Reload Panel</div>
            </div>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-md-12 col-lg-12 p-0">
            <div class="border align-items-center text-center p-2 rounded shadow">
                <div class="system-status text-center justify-content-center d-flex align-items-center">
                </div>
            </div>
        </div>
    </div>
    <div class="append-action mt-2">
    </div>
    <div class="modal fade" id="modal-lg">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Configuration for create VPS</h4>
                    <button type="button" class="close btn" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form action="{{ route('service.reinstall') }}" method="post">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" name="type" value="4">
                        <input type="hidden" name="product" value="{{$product->id}}">
                        <input type="hidden" name="userid" value="{{auth('users')->id()}}">
                        <input type="hidden" class="form-action" name="action" value="create">
                        <input type="hidden" name="host_id"
                               value="{{ $product->IpAddress ? $product->IpAddress->ModuleHost_id : "" }}">
                        {{--Os Group--}}
                        <div class="form-group row">
                            <label class="col-md-3" for="os_group_id">Os Group</label>
                            <div class="col-md-9">
                                <select class="custom-select form-select" id="os_group_id" name="os_group_id">
                                    <option value="0">---------</option>
                                </select>
                            </div>
                        </div>

                        {{--Os ID--}}
                        <div class="form-group mt-3 row">
                            <label class="col-md-3" for="os_version">Os Version</label>
                            <div class="col-md-9">
                                <select class="custom-select form-select" id="os_version" name="os_version">
                                    <option value="0">---------</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save changes</button>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    @include("form.renew")
@endsection
@push('viewStyles')
    <link rel="stylesheet" href="{{ asset('css/sweetalert.css') }}">
@endpush
@push('viewScripts')
    <script type="text/javascript">
        window.onload = loadPanel();
        function loadPanel() {
            $('.append-action').empty()
            $('.system-status').empty().append('<span class="badge me-2 fs-5 text-warning">Đang load panel</span><div style="width: 30px; height: 30px; margin-left: 10px" class="spinner-border text-warning" role="status"><span class="visually-hidden">Loading...</span></div>')

            $.post('{{ route('api.GetVirtualMachineStatus') }}', {
                vmware_id: '{{ $product->vmware_id }}',
                product_id: {{ $product->id }}
            })
                .done(function (response) {
                    let status = '';
                    let action = '';
                    if (response.expiry === false && response.error === false) {

                        if (response.pending) {
                            status = `<span class="badge me-2 fs-5 text-danger">Đang khởi tạo</span><div style="width: 30px; height: 30px; margin-left: 10px" class="spinner-border text-danger" role="status"><span class="visually-hidden">Loading...</span></div>`;
                        } else if (response.message.operations_ready === false) {

                            status = `<span class="badge me-2 fs-5 text-danger">Máy chủ không hoạt động</span>`;

                            action = response.data;

                        } else {

                            status = `<span class="badge me-2 fs-5 text-success">Đang hoạt động</span><img src="{{ asset('template/assets/file/loading.svg') }}" style="width: 50px" alt="running">`;

                            action = response.data;
                        }

                    }
                    if (response.expiry === true && response.error === false) {
                        status = `<span class="badge me-2 fs-5 text-danger">Hết hạn sử dụng</span>`;

                    }
                    $('.system-status').empty().append(status)
                    $('.append-action').empty().append(action)
                })
                .catch(function (error) {
                    console.log(error)
                })
        }

        window.Echo.private('Panel.Status.{{ auth('users')->id() }}' )
            .listen('.Panel.Status.Event', (response) => {
                toastr.success(response.message,'Thành công!');
                loadPanel()
            });
        const APIServiceAction = '{{ route('service.action') }}';
        const APIGetOsGroup = '{{ route('api.user.getOsGroup') }}';
        const APIGetSnapshot = '{{ route('api.user.GetSnapshot') }}';
        const APIServiceSnapShot = '{{ route('service.snapshot') }}';
        const APIGetProductAddon = '{{ route('api.user.GetAddonProduct') }}';
        const APICartAddon = '{{ route('cart.addon') }}';
        const APIRenewService = '{{ route('api.user.RenewService') }}';
        const APIGetVersion = '{{ route('api.user.GetVersionOs') }}';
    </script>
    <script src="{{ asset('js/sweetalert.min.js') }}"></script>
@endpush