@extends('organizations.layouts.default')
@section('content')
    <main>
        <div class="mx-auto max-w-screen-2xl p-4 md:p-2 2xl:p-4 ">
        <div class="bg-white p-2">
            @if (auth()->user()->memberable->verification_status == 1)
                <div class="w-full max-w-4xl py-4">
                    <div class="bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 w-full">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <i class="bi bi-info-circle-fill"></i>
                            </div>
                            <div class="ml-3">
                                <p class="text-sm">
                                    <strong>Info:</strong> Your account is not verified yet. Please <a href="#"
                                        class="text-blue-500 underline hover:text-blue-700">click here</a>
                                         to verify your account and get reward.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
            <!-- start -->
            @if($resCoupons->count() > 0)
            <div class="p-2">Please use the below active and valid coupon code to post your notice.</div>
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 grid-rows-1 gap-3">
                @foreach ($resCoupons as $rec)
                @php
                    $status = 'Copy';
                    if($rec->redeem_date!=""){
                        $status = 'Used';
                    }else if($rec->expiry_date->isPast()){
                        $status = 'Expired';
                    }
                @endphp
                <div class="container  bg-gradient-to-r from-indigo-500 to-brandBlue text-white p-4 rounded-lg shadow-lg max-w-md mx-auto">
                    <div class="text-2xl font-bold mb-2">{{ $rec->remarks }}</div>
                    <div class="text-lg mb-2">Get <span class="text-brandOrange font-bold">{{ $rec->coupon_pct }}% OFF</span> !</div>
                    <div class="text-base mb-2">Use coupon code:</div>
                    <div class="bg-white text-gray-800 rounded-lg px-2 py-2 flex items-center justify-between">
                        <span class="text-xl text-brandOrange font-semibold" id="textToCopy_{{$rec->id}}">{{ $rec->coupon_code }}</span>
                        @if($status == 'Copy')
                        <button id="btn_textToCopy_{{$rec->id}}" class="bg-brandBlue text-white px-3 py-1 rounded hover:bg-brandOrange focus:outline-none focus:ring-2 focus:ring-blue-500" onclick="copyCode('textToCopy_{{$rec->id}}','')">Copy</button>
                        @else
                        <button id="btn_textToCopy_{{$rec->id}}" class="bg-brandBlue opacity-35 text-white px-3 py-1 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"></button>
                        @endif

                    </div>
                    <div class="text-xs mt-2">
                        <p>Valid for <span class="font-semibold">one notice</span>. Expire at :{{$rec->expiry_date->format('Y M d')}}</p>
                        <p>Terms and conditions apply.</p>
                    </div>
                </div>
                @endforeach
            </div>
            @endif
            <!-- End -->
        </div>
        </div>
    </main>

    <script>
         @if($resCoupons->count() > 0)
        function copyCode(textToCopy){
            const textToCopyText = document.getElementById(textToCopy).innerText;
            navigator.clipboard.writeText(textToCopyText).then(function() {
                console.log('Text copied to clipboard');
                document.getElementById('btn_'+textToCopy).innerText = 'Copied!'
            }).catch(function(error) {
                console.error('Error copying text: ', error);
            });
        }
        @endif
    </script>

@endsection