@extends('templates.member')
@section('content')
    <style>
        .f-36 {
            font-size: 25px;

        }

        .avatar {
            width: 2rem;
            height: 2rem;
            line-height: 2rem;
            display: inline-block;
            background: no-repeat center/cover;
            position: relative;
            text-align: center;
            color: #fff;
            font-weight: 600;
            vertical-align: bottom;
            font-size: .875rem;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .avatar-xl {

            width: 4rem;
            height: 4rem;
            line-height: 4rem;
            font-size: 1.75rem;
        }

        hr {
            margin: 0.2rem 0;
        }
    </style>
    <script>
        function exp(deadline) {
            document.getElementById("exp").innerHTML = "Retrieving Data...";
            var deadline = new Date(deadline).getTime();
            var x = setInterval(function() {
                var now = new Date().getTime();
                var t = deadline - now;
                var days = Math.floor(t / (1000 * 60 * 60 * 24));
                var hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
                var seconds = Math.floor((t % (1000 * 60)) / 1000);
                var filtertimer =
                    (days == 0 ? "" : days + " Days ") +
                    (hours == 0 ? "" : hours + " Hour ") +
                    (minutes == 0 ? "" : minutes + " Mins ");
                var myEle = document.getElementById("exp");
                if (myEle) {
                    document.getElementById("exp").innerHTML = filtertimer;
                } else {
                    clearInterval(x);
                }
                if (t < 0) {
                    clearInterval(x);
                    document.getElementById("exp").innerHTML =
                        "Your Usage Time Has Ended";
                }
            }, 1000);
        }


        function available(deadline) {
            document.getElementById("available").innerHTML = "Retrieving Data...";
            var deadline = new Date(deadline).getTime();
            var x = setInterval(function() {
                var now = new Date().getTime();
                var t = deadline - now;
                var days = Math.floor(t / (1000 * 60 * 60 * 24));
                var hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
                var seconds = Math.floor((t % (1000 * 60)) / 1000);
                var filtertimer =
                    (days == 0 ? "" : days + " Days ") +
                    (hours == 0 ? "" : hours + " Hour ") +
                    (minutes == 0 ? "" : minutes + " Mins ") +
                    seconds +
                    " Sec ";
                var myEle = document.getElementById("available");
                if (myEle) {
                    document.getElementById("available").innerHTML = filtertimer;
                } else {
                    clearInterval(x);
                }
                if (t < 0) {
                    clearInterval(x);
                    document.getElementById("available").innerHTML =
                        '<span class="badge bg-success" style="font-size: 18px">Available</span>';
                }
            }, 1000);
        }
    </script>
    @php
        $config = App\Models\Config::first();
    @endphp
    <div class="row">
        <div class="col-lg-4 col-md-6">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="avtar bg-light-primary"><i class="fa-solid fa-clock-rotate-left f-36"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <p class="mb-1">Expired Time</p>
                            <div class="d-flex align-items-center justify-content-between" id="exp">
                                @if ($member->status == 'Waiting')
                                    Expiration time not found
                                @else
                                    <script>
                                        exp("{{ $member->expired_at }}");
                                    </script>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="avtar bg-light-primary"><i class="fa-brands fa-keycdn f-36"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <p class="mb-1">Available Reset </p>
                            <div class="d-flex align-items-center justify-content-between">
                                @if ($member->limit > 0)
                                    <span class="badge bg-success" style="font-size: 12px">{{ $member->limit }}x</span>
                                @else
                                    <span class="badge bg-danger" style="font-size: 12px">Not Available</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="avtar bg-light-primary"><i class="fa-solid fa-circle-user f-36"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <p class="mb-1">Status</p>
                            <div class="d-flex align-items-center justify-content-between">
                                @if ($member->expired_at ?? $member->expire_at > date('Y-m-d H:i:s'))
                                    <span class="text-dark mt-1"><span class="badge bg-success"
                                            style="font-size:12px">Aktif</span></span>
                                @elseif ($member->status == 'Waiting')
                                    <span class="text-dark mt-1"><span class="badge bg-warning"
                                            style="font-size:12px">Waiting</span></span>
                                @else
                                    <span class="text-dark mt-1"><span class="badge bg-danger"
                                            style="font-size:12px">Expired</span></span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if (session()->has('success'))
        <div class="alert alert-success">
            {!! session()->get('success') !!}
        </div>
    @elseif (session()->has('error'))
        <div class="alert alert-danger">
            <li>{!! session()->get('error') !!}</li>
        </div>
    @endif
    @php
    $config = json_decode(DB::table('configs')->first()->konfigurasi_features,true);
    $features = json_decode($member->features,true);
    @endphp
    <div class="row">

        <div class="col-xl-3 col-lg-5 col-md-12">
            <div class="card ">
                <div class="card-header fw-bold p-3">Features</div>
                <div class="card-body">
                    <form action="{{ route('proses.features') }}" method="POST">
                        @foreach ($config as $key => $value)
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" {{ isset($features[$key]) == true ? ($features[$key] == true ?'checked' : null) : null }}
                                    name="data[{{ $key }}]" id="{{ $key }}">
                                <label class="form-check-label"
                                    for="{{ $key }}">{{ ucwords(Str::replace('_', ' ', $key))}}</label>
                            </div>
                        @endforeach
                        <hr>
                        @csrf
                        <small class="text-danger">*Checklist fitur yang anda ingin aktifkan</small>
                        <div class="d-grid btn-block">
                            <button class="btn btn-primary btn-sm">Save</button>
                        </div>

                    </form>
                </div>
            </div>
        </div>
        <div class="col-lg-5">
            <form class="card" action="{{ url('member/redeem-voucher') }}" method="POST" disabled>
                @csrf
                <div class="card-header fw-bold p-3">Redeem Voucher</div>
                <div class="card-body">
                    <div class="form-group">
                        <label class="form-label">Vouchers</label>
                        <input type="text" class="form-control" id="voucher" name="voucher"
                            placeholder="{{ env('APP_NAME_VIP') }}-XXXXX-XXXXX">
                    </div>
                    <div class="d-grid gap-2 mt-2">
                        <button type="submit" id="actionbutton" name="order " class="btn btn-primary btn-block"> Claim
                        </button>
                    </div>
                    <div class="border pt-0 mt-2">
                        <ul class="text-warning mt-2">
                            <li>Note:</li>
                            <li>Masukan voucher yang telah di berikan oleh admin/reseller kalian!</li>
                        </ul>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-lg-4">
            @php
                $games = App\Models\Game::where('code', $member->games)->first();
            @endphp
            @if ($games->serial == 'Yes')
                <div class="card">
                    <div class="card-header fw-bold p-3">Change Serial
                    </div>
                    <div id="cardCollpase5" class="collapse show">
                        <div class="card-body">
                            <form action="{{ url('member/change-serial') }}" method="post">
                                @csrf
                                <label for="">Serial</label>
                                <input type="text" name="serial" id="serial" class="form-control"
                                    value="{{ $member->serial }}" readonly>
                                <label for="" class="mt-2">New Serial</label>
                                <input type="text" name="newserial" id="newserial" class="form-control"
                                    placeholder="Masukkan serial baru">

                                <div style="display:block; float:right; margin-bottom:1rem;" class="mt-2">
                                    @if ($games->serial == 'serial')
                                        @if ($member->available_reset_at < date('Y-m-d H:i:s'))
                                            <button type="submit" class="btn btn-primary">Submit</button>
                                        @else
                                            <button class="btn btn-primary" disabled>Submit</button>
                                        @endif
                                    @else
                                        @if ($member->available_reset < date('Y-m-d H:i:s'))
                                            <button type="submit" class="btn btn-primary">Submit</button>
                                        @else
                                            <button class="btn btn-primary" disabled>Submit</button>
                                        @endif
                                    @endif
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            @else
                @if ($member->expired_at > date('Y-m-d H:i:s'))
                    <div class="card">
                        <div class="card-header fw-bold p-3">Reset Devices
                        </div>
                        <div class="card-body">
                            <label>List Device</label>
                            @php
                                $count = App\Models\DeviceID::where('member_id', $member->member_id)->count();
                                $latest = App\Models\DeviceID::where('member_id', $member->member_id)
                                    ->latest()
                                    ->first();
                            @endphp
                            <textarea name="device" style="font-size: 16px;" id=" device" rows="" cols="5"
                                placeholder="Tidak ada devices" class="form-control" disabled>