@extends('layouts.appUi')

@section('title')
  เลือกรอบแทง{{ $lottery->name }}
@endsection

@section('customStyle')
<style>
    .lt-168-header{
        background: url('/assets/images/houy-card.png?v=5646321') !important;
        background-size: cover !important;
    }
    main.main-content {
        display: flex;
    }

    .custom-icon-wrapper {
        background: #064273;
        width: 48px;
        height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        color: #fff;
        font-size: 24px;
        margin-bottom: 14px;
    }
</style>
@endsection

@section('header')
  <div class="appHeader">
    <div class="left">
      <a href="javascript:;" onclick="goBack()" class="headerButton goBack">
        <ion-icon name="chevron-back-outline"></ion-icon>
      </a>
    </div>
    <div class="pageTitle d-flex pe-5 pe-sm-2">เลือกรอบแทง{{ $lottery->name }}
    </div>
    <div class="right">
        <button type="button" class="btn btn-icon btn-primary me-1"  data-bs-toggle="modal" data-bs-target="#depositActionSheet">
            <ion-icon name="arrow-up-outline" role="img" class="md hydrated"></ion-icon>
        </button>
        <button type="button" class="btn btn-icon btn-warning me-1" onclick="redirectBtn(this)" data-target-url="{{ route('appUi.transaction') }}">
            <ion-icon name="swap-vertical" role="img" class="md hydrated"></ion-icon>
        </button>
        <button type="button" class="btn btn-icon btn-success me-1 redirectBtn" onclick="redirectBtn(this)" data-target-url="{{ route('profile.betHistory') }}">
            <ion-icon name="cash-outline" role="img" class="md hydrated"></ion-icon>
        </button>
    </div>
  </div>
@endsection

@section('content')
<section class="pb-5 pt-4 w-100">
    <div class="container-fluid" style="max-width: 1400px;">
        @foreach ($errors->all() as $message)
        <div class="d-flex mb-4">
            <div class="m-auto alert alert-danger">{{ $message }}</div>
        </div>
        @endforeach

        <div class="row no-gutters justify-content-center">
            @foreach ($allRounds as $lotteryRound)
                <lottery-card class="py-2 px-sm-2 col-12 col-sm-6 col-lg-4 col-xl-3" 
                    hide-date="false"
                    optional-text="{{ $lotteryRound->round_name }}"
                    bet-url="{{ route('front.bet') }}"
                    lottery-code="{{ $lotteryRound->country }}"
                    many-rounds="false"
                    data-format="{{ $lottery->country === 'YK' ? '%H:%M:%S' : $lottery->counter_format }}"
                    force-close="{{ $lotteryRound->status ? 'false' : 'true' }}"
                    lottery-disabled="{{ $lotteryRound->memberCommission ? 'false' : 'true' }}"
                    background-image="{{ lotteryBg($lotteryRound->country) }}"
                    close-time="{{ $lotteryRound->close }}"
                    round-id="{{ $lotteryRound->id }}"
                    @if ($lottery->country !== 'YK')
                      open-time="{{ $lotteryRound->open }}"
                    @endif
                ></lottery-card>
            @endforeach
        </div>
    </div>
</section>
@endsection

@section('footer')
    @if (session('error'))
    <div class="modal fade dialogbox" id="error-dialog" data-bs-backdrop="static" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div id="alertDialog-icon" class="modal-icon text-danger">
                    <ion-icon name="alert"></ion-icon>
                </div>
                <div class="modal-header">
                    <h5 class="modal-title">ขออภัย</h5>
                </div>
                <div class="modal-body">
                    {{ session('error') }}
                </div>
                <div class="modal-footer">
                    <div class="btn-inline">
                        <a href="#" class="btn" data-bs-dismiss="modal">ปิด</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const errorDialog = document.getElementById('error-dialog');
            const errorModal = new bootstrap.Modal(errorDialog);
            errorModal.show();
        });
    </script>
    @endif
@endsection

@section('script')
<script src="{{ asset('assets/js/lottery.js?v=0.0.7') }}"></script>
<script src="{{ asset('assets/js/lottery-card.js?v=2.0.15') }}"></script>
<script>
    function redirectBtn(el)
    {
        const target = $(el).data('target-url');
        window.location.href = target;
    }
</script>
@endsection