@extends('voucher.index')
@section('content')
<div class="card">
    <div class="card-body pb-0" style="background-color: #CAB8FF; border-radius: 6px;">
        <div class="card-px text-center pt-5 pb-5">
            <br>
            <div class="row">
                @foreach($data as $d)
                <div class="col-xl-4">
                    <div class="card h-175px bgi-no-repeat bgi-size-cover card-xl-stretch mb-5 mb-xl-8" style="background-color: #663259; background-position: calc(100% + 0.5rem) 100%;background-size: 100% auto;background-image:url('assets/media/svg/misc/taieri.svg')">
                        <div class="card-body d-flex flex-column justify-content-between">
                            <h3 class="text-white fw-bolder line-height-lg mb-5">{{$d->voucher_name}}
                            </h3>
                            <br>
                            @if($d->status_claim == 1)
                            <span class="text-white">Telah dilihat pada {{ \Carbon\Carbon::parse($d->date_claim)->format('d-m-y h:i:s')}}</span>
                            @endif
                            <div class="m-0">
                                @if($d->status_claim == 1)
                                <a href="{{route('voucher.detail_voucher', encrypt($d->id))}}" class="btn btn-info fw-bold px-6 py-3">Detail</a>
                                @else
                                <button class="btn btn-success fw-bold px-6 py-3" onclick="callFormOTP(this);" id="btn_{{$d->id}}" >Cek Voucher</button>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
                @if($jumlahVoucher == 0)
                    <center>
                        <h2 style="color:#6C32AD;">Anda tidak terdaftar sebagai pemenang, Tingkatkan performa anda</h2>
                    </center>
                @endif
            </div>           
        </div>
        @if($jumlahVoucher != 0)
        <div class="text-center px-5">
            <img src="assets/media/illustrations/sigma-1/8.png" alt="" class="mw-100 h-200px h-sm-225px" />
        </div>
        @endif
         @if($jumlahVoucher == 0)
        <div class="text-center px-5">
            <img src="assets/media/illustrations/sigma-1/12-dark.png" alt="" class="mw-100 h-200px h-sm-225px" />
        </div>
        @endif
    </div>
</div>
<div class="modal fade" tabindex="-1" id="modal-send-otp">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">REQUEST OTP : </h4>

                <!--begin::Close-->
                <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
                    <span class="svg-icon svg-icon-2x"></span>
                </div>
                <!--end::Close-->
            </div>

            <div class="modal-body">
                
            </div>    
        </div>
    </div>
</div>
<script type="text/javascript">
    function myFunction() {
      var copyText = document.getElementById("myInput");

      copyText.select();
      copyText.setSelectionRange(0, 99999);
      navigator.clipboard.writeText(copyText.value);

    }

    function callFormOTP(p)
    {
        var tmp = p.id.split('_');
        var post = '/'+ tmp[1];
        console.log(post);
        $.ajax({
            url:"{{ url('voucher/form_req_otp')}}" + post,
            type:'GET',
            data:post,
            success: function(row) 
            {
                $('.modal-title').html('Request OTP');
                $('#modal-send-otp').modal('show', {backdrop: 'static', keyboard: false});
                $('#modal-send-otp .modal-body').html(row);
            }
        });
    }
</script>
@endsection