@extends('layouts.customer')



@section('content')
    <div class="middle__content">
        <div class="card rounded-0 border-0">
            <div class="card-header bg-transparent">
                <h4 class="mb-0">Redeemed Reward Details</h4>
            </div>
            <div class="card-body">
                <div class="voucher-detail">
                    <div class="row">
                        <div class="col-12 col-lg-12">
                            <div class="voucher-img position-relative">
                                @php
                                    if($voucherDetails->redemptionVoucher->image && Storage::disk('public')->exists('voucher-image/'.$voucherDetails->redemptionVoucher->image)){
                                        $featuredImage = asset('storage/voucher-image/'.$voucherDetails->redemptionVoucher->image);
                                    }else{
                                        $featuredImage = asset('front/image/default-voucher-image.jpg');
                                    }
                                    $validity_dates = explode('-',$voucherDetails->redemptionVoucher->validity);
                                    
                                    $status = '';
                                    if($voucherDetails->redemptionVoucher->type != 1){
                                        if($voucherDetails->is_used == 1){            
                                            $status = 'Used';
                                        }else if(!is_null($voucherDetails->expiry_date) && $voucherDetails->expiry_date < date('Y-m-d')){ //13-06-2024
                                            $status = 'Expired';
                                        }
                                    }
                                @endphp
                                <img src="{{ $featuredImage }}" class="img-fluid" />
                            </div>

                            <div class="coupan-code my-5">
                                @if($voucherDetails->redemptionVoucher->type!=1)
                                    <h3>{{ $voucherDetails->redemptionVoucher->title ?? "" }}</h3>
                                    <ul class="list-inline d-flex flex-wrap justify-content-between">

                                        <li><b>Redeemed with</b> : {{ $voucherDetails->points ?? "0" }} {{ config('constants.points_name') }}</li>
                                        
                                        <li><b>Valid until</b> : {{ ($voucherDetails->expiry_date) ? date('d M Y',strtotime($voucherDetails->expiry_date  )) : date('d M Y',strtotime($voucherDetails->redemptionVoucher->to_date)) }}</li>
                                        {{-- <li><b>Valid until</b> : {{ ($voucherDetails->redemptionVoucher->to_date) ? date('d M Y',strtotime($voucherDetails->redemptionVoucher->to_date  )) : date('d M Y',strtotime($voucherDetails->expiry_date)) }}</li>--}}
                                    </ul>
                                    @if($status != "Expired")
                                        <div class="form-group d-flex coupan-code-inner mb-0">
                                            @if($voucherDetails->redemptionVoucher->type==0)
                                                <input type="text" class="form-control" value="{{ $voucherDetails->voucherCode->code ?? '' }}" id="voucherCode" readonly />
                                            @else
                                                <input type="text" class="form-control" value="{{ $voucherDetails->redemptionVoucher->code ?? '' }}" id="voucherCode" readonly />
                                            @endif
    
                                            @if($voucherDetails->is_used)
                                                <button type="button" class="btn disabled" data-toggle="tooltip" data-placement="top" title="Code used" disabled>Code Used</button>
                                            @else    
                                                <button type="button" id="copyBtn" onclick="myFunction()" class="btn"  data-toggle="tooltip" data-placement="top" title="Copy to clipboard">Copy Code</button>
                                            @endif
                                        </div>
                                    @endif
                                    @if($voucherDetails->is_used)
                                        <p class="paste-code">You have used this code</p>
                                    @elseif($status == "Expired")
                                        <p class="paste-code">This voucher has been expired</p>
                                    @else
                                        <p class="paste-code">Paste this code at the checkout page</p>
                                    @endif
                                    
                                @else
                                    <div class="voucher-light">
                                        <h4>{{ $voucherDetails->redemptionVoucher->title ?? "" }}</h4>
                                        {{--<p class="modal-para">{{ date('d-M-Y') }} </p>--}}
                                        Redeem Successfully</h5>                                        
                                        <div class="check-icon-voucher"><i class="fa fa-check"></i></div>
                                        <p class="modal-para mb-0">Redeemed with <b>{{ $voucherDetails->redemptionVoucher->points_to_pay ?? "0" }}</b> {{ config('constants.points_name') }}</p>
                                    </div>
                                @endif
                                
                            </div>  
                            
                            <div class="voucher-desc">
                                <h4>Description</h4>
                                 <p>{!! $voucherDetails->redemptionVoucher->description ?? "" !!}</p>
                            </div>

                            <div class="voucher-desc">
                                <h4>Terms & Conditions</h4>
                                <p>{!! $voucherDetails->redemptionVoucher->terms_conditions ?? "" !!}</p>
                                
                            </div>
                            
                            {{--<div class="how-to-use">
                                <a class="#" data-toggle="collapse" href="#collapseExample" role="button">How to Redeem:</a>

                                <div class="collapse show" id="collapseExample">

                                    <div class="card card-body border-0 p-0">

                                        {{ $voucherDetails->redemptionVoucher->how_to_use ?? "" }}

                                    </div>

                                </div>

                            </div>--}}
                            {{--<div class="highlights">

                                <h4>Highlight</h4>

                                <p>How to Redeem:</p>

                            </div>--}}

                            <div class="redeem-btn text-right">
                                @if($voucherDetails->redemptionVoucher->type==0 && $voucherDetails->expiry_date>=date('Y-m-d'))
                                    <a href="{{ $voucherDetails->redemptionVoucher->redirection_url ?? 'javascript:void(0)' }}" target="blank" data-record_id="{{ $voucherDetails->id }}" class="btn" id="">Use now</a>
                                    
                                @endif

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

@endsection



@section('scripts')
<script type="text/javascript" src="{{ asset('js/sweet-alert/sweetalert2@9.js') }}"></script>
    <script type="text/javascript">
        function myFunction() {
            $('#voucherCode').select();
            document.execCommand("copy");
            $('#copyBtn').attr('data-original-title','Copied to clipboard');
            $("#copyBtn").tooltip('show');
        }

        $(document).ready(function() {
            $('#copyBtn').tooltip({
                animation: true,
            });

            $(document).on('click','#voucherUseBtn',function(event){
                event.preventDefault();
                // alert('dfgfg');
                var thisElement = $(this);
                var record_id = $(this).data('record_id');
                var status = $(this).val();
                Swal.fire({
                    title: 'Are you sure',
                    text: "Do you want to use this voucher?",
                    icon: "question",
                    showCancelButton : true,
                })
                .then((result) => {
                    if(!result.isDismissed) {
                        $.ajax({
                            type: "POST",
                            url: "{{ route('customer.my-rewards.updateRewardUsedStatus') }}",
                            data:{ 
                                _token: "{{csrf_token()}}",
                                record_id:record_id,
                            },
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            success: function(response){
                                if(response.success){
                                    Swal.fire("Reward Used!", response.message, "success");
                                    window.open(thisElement.attr('href'), '_blank');
                                    /*window.location.href = thisElement.attr('href');*/
                                }else{
                                    Swal.fire("Error", response.message, "error");
                                }
                            },
                            error:function (response) 
                            {
                                console.log(response.responseText);
                                Swal.fire("Error",response.responseText.message,"error");
                            }
                       });
                    }else {
                       return false;
                    }
              });
            })
        });

    </script>



@endsection