@extends('layouts.app')

@section('title', 'Services')

@section('content')
@include('layouts.navbar')

<div class="bg-[#38247b] min-h-screen py-6 px-4">
        <div class="container mx-auto">
            <div class="mb-6">
            <select id="dayFilter" class="bg-yellow-500 text-[#38247b] font-bold uppercase border border-yellow-500 rounded-full p-2 ">
                <option value="">Filter by Day</option>
                @foreach ($days as $day)
                    <option value="{{ $day }}" {{ request('day') == $day ? 'selected' : '' }}>
                        {{ 'Day ' . $day }}
                    </option>
                @endforeach
            </select>
        </div>
       <div class="grid grid-cols-1 lg:grid-cols-3 xl:grid-cols-4">
                @foreach ($tickets as $ticket)
                    <div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xxl-3 text-center p-2">
                        <div id="downloadQR-{{ $ticket->qr_code }}">
                            <div class="card bg-white rounded-2xl">
                                <div class="card-header text-black bg-main-green font-semibold p-3">
                                    {{-- <img src="{{ asset('images/FAVICON.png') }}" width="50" alt=""> --}}
                                    {{ 'Day ' . $ticket->day }}
                                </div>
                                <div class="card-body flex justify-center">
                                    {!! QrCode::size(250)->generate($ticket->qr_code) !!}
                                </div>
                                <div class="card-header text-black bg-main-green p-4">
                                    Raffle #: {{ $ticket->qr_code }}
                                </div>
                                @if ($ticket->ticket_type != 'Online')
                                    <div class="card-header">
                                        {{ $ticket->ticket_type }}
                                    </div>
                                @endif
                            </div>
                        </div>

                        <button onclick="takeshot('{{ $ticket->qr_code }}')"
                            class="text-[#38247b] font-bold bg-yellow-500  rounded-full border-2 border-yellow-500 p-4 mt-2">
                            <i class='bx bxs-download' ></i> Download QR
                        </button>
                    </div>
                @endforeach
            </div>
    </div>
       
</div>
     <script src="{{ asset('js/html2canvas.min.js') }}"></script>
    <script src="{{ asset('js/FileSaver.min.js') }}"></script>

    <script type="text/javascript">
        // Ensure the function is available after the page loads
        document.addEventListener('DOMContentLoaded', function() {
            window.takeshot = function(param) {
                let div = document.getElementById('downloadQR-' + param);

                html2canvas(div).then(function(canvas) {
                    canvas.toBlob(function(blob) {
                        window.saveAs(blob, param + '.jpg');
                    });
                });
            }
        });
        document.getElementById('dayFilter').addEventListener('change', function() {
            let selectedDay = this.value;
            let url = new URL(window.location.href);
            url.searchParams.set('day', selectedDay);
            window.location.href = url.href;
        });
        @if (Request::get('purchased'))
            var myModal = new bootstrap.Modal(document.getElementById('myModal'));
            myModal.show();
        @endif
    </script>
    
    @include('layouts.footer')

@stop

@section('js')
   
@stop