@extends('layouts.master')
@section('title')
    LT-168 :: เลือกหวย
@endsection

@section('sub_title')
    เลือกหวย
@endsection

@section('content')
    <div id="main-lottery-list" class="row justify-content-center">
        @foreach ($lotteries as $lottery)
            {{-- <div class="col-sm-6 col-md-4 col-lg-3 d-flex">
                <div class="card w-100 position-relative">
                    <div class="card-body d-flex">
                        <div class="w-100">
                            <h1 class="text-center text-nowrap mb-4">{{ $lottery->name }}</h1>
                            <a href="{{ route('chooseLottery.choose', array_merge(['country' => $lottery->country], request()->query())) }}" class="btn btn-primary btn-block"><i class="fas fa-sign-in-alt mr-2 text-white-50"></i>ใช้ระบบ</a>
                        </div>
                    </div>
                </div>
            </div> --}}
            <div class="col-sm-6 col-md-4 col-lg-4 d-flex">
                <div class="card w-100 position-relative">
                    <div class="card-body d-flex">
                        <div class="w-100">
                            <h1 class="text-center text-nowrap mb-4">{{ $lottery->category_name }}</h1>
                            <a href="javascript:;" onclick="toggleLotteryList(this)" class="btn btn-info btn-block" data-lottery-list='{{ json_encode($lottery->lotteries) }}'><i class="fas fa-sign-in-alt mr-2 text-white-50"></i>ใช้ระบบ</a>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <div id="lottery-list" class="row justify-content-center lottery-list" style="display: none;">
            <div class="col-sm-6 col-md-4 col-lg-4 d-flex">
                <div class="card w-100 position-relative">
                    <div class="card-body d-flex">
                        <div class="w-100">
                            {{-- <h1 class="text-center text-nowrap mb-4">{{ $lottery->category_name }}</h1> --}}
                            <a href="" class="btn btn-info btn-block"><i class="fas fa-sign-in-alt mr-2 text-white-50"></i>ใช้ระบบ</a>
                        </div>
                    </div>
                </div>
            </div>
    </div>
    <div class="justify-content-center lottery-list" style="display: none;">
            <a href="javascript:;" onclick="back()" class="btn btn-danger btn-block"><i class="fas fa-arrow-left mr-2 text-white-50"></i>ย้อนกลับ</a>
    </div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', () => {
        @if ($errors->any())
            swal('ขออภัย', '{{ $errors->first() }}', 'error');
        @enderror
    });

    function toggleLotteryList(element)
    {
        const self = $(element);
        const target = $('#lottery-list');
        const lotteriesData = self.data('lottery-list');
        let html = ``;

        for (const k in lotteriesData) {
            let lotteryData = lotteriesData[k];
            console.log(lotteryData);
            html += `
            <div class="col-sm-6 col-md-4 col-lg-4 d-flex">
                <div class="card w-100 position-relative">
                    <div class="card-body d-flex">
                        <div class="w-100">
                            <h1 class="text-center text-nowrap mb-4">${lotteryData.name}</h1>
                            <a href="${lotteryData.url}" class="btn btn-primary btn-block"><i class="fas fa-sign-in-alt mr-2 text-white-50"></i>ใช้ระบบ</a>
                        </div>
                    </div>
                </div>
            </div>
            `;
        }

        target.html(html);
        self.closest('.row').fadeOut({
            complete: function () {
                target.fadeIn();
            }
        });
    }

    function back()
    {
        const self = $('#main-lottery-list');
        const target = $('#lottery-list');
        target.fadeOut({
            complete: function () {
                self.fadeIn();
            }
        });
    }
</script>
@endsection