@extends('layouts.mobile')

@section('contents')
    @include('partials.mobile.navbar')
    <main class="form-signin w-100 m-auto">
        <div class="min-h-100 d-flex w-100 align-items-center">
            <div class="w-100">
                <form method="post" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" id="id" name="id" value="{{ session()->get('selling_id')}}" />
                    <input type="hidden" id="prize_id" name="prize_id" />
                    <div class="form-group mb-3 text-center">
                        @foreach ($data as $item)
                            <img src="{{ asset('images/prize/' . $item->image) }}" class="img" width="56" id="img{{$item->id }}" />
                        @endforeach
                    </div>
                    <div class="form-group mb-3">
                        <input type="text" class="form-control" readonly id="prize" />
                    </div>
                    <div class="form-group text-center mb-4">
                        <button class="btn btn-primary px-4 start" id="raffleTrigger" type="button">Acak</button>
                        <button class="btn btn-warning px-4 stop d-none" id="raffleTrigger" type="button">Berhenti</button>
                    </div>
                    <div class="bg-glass px-2 py-3 rounded-5 position-relative mb-4 px-3">
                        <label for="photo" class="text-left">
                            <span
                                class="btn btn-outline-light rounded-circle p-2 d-inline-block bg-light border-3 border-danger me-2">
                                <svg width="24" height="24" class="x-svg text-dark">
                                    <use xlink:href="#camera"></use>
                                </svg>
                            </span>
                            <span class="fw-bold">Take photo costumer & hadiah</span>
                            <input type="file" class="d-none x-file" accept="image/jpeg" capture="camera"
                                id="photo" name="photo" />
                        </label>
                    </div>
                    <div class="bg-glass px-2 py-3 rounded-5 position-relative mb-4 px-3">
                        <label for="ktp" class="text-left">
                            <span
                                class="btn btn-outline-light rounded-circle p-2 d-inline-block bg-light border-3 border-danger me-2">
                                <svg width="24" height="24" class="x-svg text-dark">
                                    <use xlink:href="#camera"></use>
                                </svg>
                            </span>
                            <span class="fw-bold">Take photo KTP</span>
                            <input type="file" class="d-none x-file" accept="image/jpeg" capture="camera"
                                id="ktp" name="ktp" />
                        </label>
                    </div>
                    <div class="form-group text-center">
                        <button class="btn btn-success px-4" type="submit">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </main>
@endsection

@push('scripts')
    <script>
        (() => {
            'use strick'
            const p = {!! json_encode($prize) !!}
            const l = {!! json_encode($data) !!}
            const t = document.querySelector('.start')
            const s = document.querySelector('.stop')

            let isStatus = false
            let index = 0

            const myLoop = (() => {
                let e = l.shift()
                document.querySelector('#prize_id').value = e.id
                document.querySelector('#prize').value = e.prize
                l.push(e)
                setTimeout(function() {
                    if (isStatus) {
                        myLoop()
                    }
                }, 200)
            })

            const start = (() => {
                index = 0
                isStatus = true;
                myLoop()
            })

            const pause = (() => {
                var i = p[Math.floor(Math.random() * p.length)]
                document.querySelector('#prize_id').value = i.id
                document.querySelector('#prize').value = i.prize
                isStatus = false;
            })

            const resume = (() => {
                isStatus = true;
                myLoop()
            })

            t.addEventListener('click', (e) => {
                start()
                t.classList.add('d-none')
                s.classList.remove('d-none')
            })

            s.addEventListener('click', (e) => {
                pause()
                t.classList.remove('d-none')
                s.classList.add('d-none')
            })

        })()
    </script>
@endpush