@extends($activeTemplate . 'layouts.' . $layout)

@php
    $pick_arr = ['pick_3', 'pick_4'];
    
    $pick = $_GET['pick'] ?? null;
    
    if ($pick == 3) {
        $pick_arr = ['pick_3'];
    }
    
    else if ($pick == 4) {
        $pick_arr = ['pick_4'];
    }
@endphp

@push('style')
<style>
    .inner-hero.bg_img {
        display: none;
    }

    .numbers_picker {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }
    
    .number_box {
        width: 55px;
        height: 55px;
        line-height: 55px;
        border-radius: 50%;
        background-color: transparent;
        border: 1px solid #c91d29;
        color: #c91d29;
        cursor: pointer;
        text-align: center;
        font-size: 18px;
    }
    
    .number_box:hover {
        background-color: #c91d29;
        color: #fff;
    }
    
    .main_area {
        min-height: 400px; 
        background: #f3f5f7;
    }
    
    #number_input {
        font-size: 30px; 
        line-height: 0 !important;
    }
    
    .clock {
        flex-wrap: nowrap;
        gap: 10px;
    }
    
    @media (max-width: 768px) {
        .number_box {
            height: 50px;
            line-height: 50px;
            font-size: 16px;
        }
        
        .main_area {
            min-height: 50px;
            margin-top:25px;
        }
        
        #number_input {
            font-size: 20px; 
        }
    }
</style>
@endpush

@section('content')
    <section class="pt-2 pb-100">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="lottery-details-header p-3">
                        <div class="thumb d-none"><img  src="{{ getImage(getFilePath('lottery') . '/' . @$phase->lottery->image, getFileSize('lottery')) }}" alt="image"></div>
                        <div class="content text-center">
                           {{-- <h3 class="game-name mb-0">
                                @if ($pick == 3)
                                    Pick 3
                                @elseif ($pick == 4)
                                    Pick 4
                                @else    
                                    {{ __($phase->lottery->name) }}
                                @endif
                            </h3> --}}
                            <div>
                                <img src='{{ asset("assets/images/pick_$pick.png") }}' width="120px" />
                            </div>
                            <div class="clock" data-clock="{{ showDateTime($phase->draw_date, 'Y/m/d H:i:s') }}" data-title="@lang('The lottery is expired')"></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!--New Design-->
            @if ($phase->available)
                <form class="submit-form mt-2" method="post" action="{{ route('user.buy.ticket') }}">
                    @csrf
                    <input name="lottery_id" type="hidden" value="{{ $phase->lottery->id }}">
                    <input name="phase_id" type="hidden" value="{{ $phase->id }}">
                    <input name="type" type="hidden" value="Straight">
                    
                    <div class="card">
                        <div class="card-body lottery-details-body">
                            <div class="row">
                                <div class="col-md-5">
                                    @foreach ($pick_arr as $key => $value)
                                        <div class="form-check-inline d-none">
                                            <input class="form-check-input" type="radio" value="{{ $value }}" id="{{ $value }}" name="number_pick" @if($key == 0) checked @endif>
                                            <label class="form-check-label" for="{{ $value }}">
                                                <img src='{{ asset("assets/images/$value.png") }}' width="100px" />
                                            </label>
                                        </div>
                                    @endforeach
                                    <!--<div class="form-check-inline">
                                        <input class="form-check-input" type="radio" value="pick_3" id="pick_3" name="number_pick" checked>
                                        <label class="form-check-label" for="pick_3">
                                            <img src="{{ asset('assets/images/pick_3.png') }}" width="120px" />
                                        </label>
                                    </div>
                                    
                                    <div class="form-check-inline">
                                        <input class="form-check-input" type="radio" value="pick_4" id="pick_4" name="number_pick">
                                        <label class="form-check-label" for="pick_4">
                                            <img src="{{ asset('assets/images/pick_4.png') }}" width="120px" />
                                        </label>
                                    </div>-->
                                    
                                    <div class="mt-0 type_btn">
                                        <button class="btn btn-md btn-outline--success btn--success" type="button">Straight</button>
                                        <button class="btn btn-md btn-outline--success" type="button">Box</button>
                                        <button class="btn btn-md btn-outline--success" type="button">Str / Box</button>
                                    </div>
                                </div>
                                
                                <div class="col-md-5">
                                    <div class="border main_area">
                                        <table class="table table-bordere text-center" id="lottery_table">
                                            <tbody>
                                                <!--<tr>
                                                    <input class="numVal" name="number[]" type="hidden">
                                                    <td>1</td>
                                                    <td>2569</td>
                                                    <td>50</td>
                                                    <td>Straight</td>
                                                </tr>-->
                                            </tbody>
                                            <tfoot>
                                                <tr style="background: #fff;">
                                                    <td width="10%">-</td>
                                                    <td width="45%">
                                                        <input type="text" id="number_input" class="form-control text-center py-1" disabled />
                                                    </td>
                                                    <td width="20%">
                                                        {{ __($general->cur_sym) }}{{ __(showAmount($phase->lottery->price)) }}
                                                    </td>
                                                    <td width="20%" id="number_type" colspan="2">Straight</td>
                                                </tr>
                                                <tr class="d-none">
                                                    <td colspan="5">
                                                        <button type="button" class="btn btn--info btn-md addMore">New List</button>
                                                    </td>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                                
                                <div class="col-md-2">
                                    <button type="button" class="btn btn-lg btn--base w-100 generate mb-3 mt-md-0 mt-3">@lang('Quick Pick')</button>
                                    <div class="numbers_picker">
                                        <div class="number_box" data-number="1">1</div>
                                        <div class="number_box" data-number="2">2</div>
                                        <div class="number_box" data-number="3">3</div>
                                        <div class="number_box" data-number="4">4</div>
                                        <div class="number_box" data-number="5">5</div>
                                        <div class="number_box" data-number="6">6</div>
                                        <div class="number_box" data-number="7">7</div>
                                        <div class="number_box" data-number="8">8</div>
                                        <div class="number_box" data-number="9">9</div>
                                        <div class="number_box" data-number="remove"><i class="fa fa-trash-alt"></i></div>
                                        <div class="number_box" data-number="0">0</div>
                                        <div class="number_box" data-number="clear">Clear</div>
                                    </div>
                                    <button type="button" class="btn btn-lg btn--base w-100 mt-2 sendBtn">@lang('Send')</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            @else
                <div class="lottery-details-body">
                    <div class="top-part">
                        <div class="w-100">
                            <h4> @lang('All Tickets are sold') </h4>
                        </div>
                    </div>
                </div>
            @endif
            <!--New Design End-->
            
            
            <div class="row mt-5">
                <div class="col-lg-12">

                {{--    @if ($phase->available)
                        @auth
                            <form class="submit-form" method="post" action="{{ route('user.buy.ticket') }}">
                                @csrf
                                <input name="lottery_id" type="hidden" value="{{ $phase->lottery->id }}">
                                <input name="phase_id" type="hidden" value="{{ $phase->id }}">
                                <input name="type" type="hidden" value="Box">

                                <div class="lottery-details-body">
                                    <div class="top-part">
                                        <div class="left">
                                            <h4>@lang('Available Ticket'): {{ __($phase->available) }}</h4>
                                            <h4 class="mt-2">@lang('Price'):
                                                {{ __($general->cur_sym) }}{{ __(showAmount($phase->lottery->price)) }}</h4>
                                        </div>
                                        <div class="middle">
                                            <div class="balance">@lang('Balance'):
                                                {{ __($general->cur_sym) }}{{ showAmount(auth()->user()->balance) }}</div>
                                        </div>
                                        <div class="right">
                                            
                                        </div>
                                    </div>
                                    <div class="body-part">
                                        
                                        <div class="row">
                                            <div class="col-xl-6 col-md-6 border">
                                                <div class="mt-2">
                                                    <div class="form-check-inline">
                                                        <input class="form-check-input" type="radio" value="pick_3" id="pick_3" name="number_pick" checked>
                                                        <label class="form-check-label" for="pick_3">
                                                            <img src="{{ asset('assets/images/pick_3.png') }}" width="100px" />
                                                        </label>
                                                    </div>
                                                    
                                                    <button class="btn btn-md btn-outline--base addMore" data-parent="pick_3_tickets" type="button"><i class="la la-plus"></i> @lang('Add New')</button>
                                                </div>

                                                <div class="my-2 type_btn">
                                                    <button class="btn btn-sm btn-outline--success" type="button">Straight</button>
                                                    <button class="btn btn-sm btn-outline--success" type="button">Box</button>
                                                    <button class="btn btn-sm btn-outline--success" type="button">Str / Box</button>
                                                </div>
                                                <br/>
                                                
                                                <div class="row gy-4" id="pick_3_tickets" data-length="3"></div>
                                            </div>
                                            
                                            <div class="col-xl-6 col-md-6 border">
                                                <div class="mt-2">
                                                    <div class="form-check-inline">
                                                        <input class="form-check-input" type="radio" value="pick_4" id="pick_4" name="number_pick">
                                                        <label class="form-check-label" for="pick_4">
                                                            <img src="{{ asset('assets/images/pick_4.png') }}" width="100px" />
                                                        </label>
                                                    </div>
                                                    
                                                    <button class="btn btn-md btn-outline--base addMore" data-parent="pick_4_tickets" disabled type="button"><i class="la la-plus"></i> @lang('Add New')</button>
                                                </div>
                                                
                                                <div class="my-2 type_btn">
                                                    <button class="btn btn-sm btn-outline--success" type="button">Straight</button>
                                                    <button class="btn btn-sm btn-outline--success" type="button">Box</button>
                                                    <button class="btn btn-sm btn-outline--success" type="button">Str / Box</button>
                                                </div>
                                                <br/>
                                                <div class="row gy-4" id="pick_4_tickets" data-length="4"></div>
                                            </div>
                                        </div>
                                        
                                        <div class="row gy-4" id="tickets">
                                            <div class="col-xl-4 col-md-6">
                                                <div class="ticket-card">
                                                    <div class="ticket-card__header">
                                                        <h4>@lang('Your Ticket Number')</h4>
                                                    </div>
                                                    <div class="ticket-card__body elements">
                                                        <input class="numVal" name="number[]" type="hidden">
                                                        <div class="numbers uniqueNumbers mb-4">
                                                            <span>0</span>
                                                            <span>0</span>
                                                            <span>0</span>
                                                        </div>

                                                        <div class="select_numbers">
                                                            <div class="select_number_box" data-number="0">0</div>
                                                            <div class="select_number_box" data-number="1">1</div>
                                                            <div class="select_number_box" data-number="2">2</div>
                                                            <div class="select_number_box" data-number="3">3</div>
                                                            <div class="select_number_box" data-number="4">4</div>
                                                        </div>
                                                        <div class="select_numbers">
                                                            <div class="select_number_box" data-number="5">5</div>
                                                            <div class="select_number_box" data-number="6">6</div>
                                                            <div class="select_number_box" data-number="7">7</div>
                                                            <div class="select_number_box" data-number="8">8</div>
                                                            <div class="select_number_box" data-number="9">9</div>
                                                        </div>
                                                        
                                                        <button class="btn btn-md btn--base w-100 generate" type="button">@lang('Generate Random')</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div> 
                                        
                                    </div>
                                    <div class="footer-part gap-3">
                                        <div class="left">
                                            <p>
                                                @lang('1 Draw with') <span class="qnt">1</span> @lang('ticket') : <span class="qnt">1</span> x {{ getAmount($phase->lottery->price) }} {{ __($general->cur_text) }}
                                            </p>
                                            <p class="mt-2">@lang('Total Amount') : <span
                                                    class="tam">{{ getAmount($phase->lottery->price) }}</span>
                                                <span>{{ $general->cur_text }}</span>
                                            </p>
                                        </div>
                                        <div class="right">
                                            @auth
                                                <button class="btn btn-md btn-outline--base buyBtn" type="button"><i
                                                        class="la la-shopping-bag"></i> @lang('Buy Now')</button>
                                            @endauth
                                        </div>
                                    </div>
                                </div><!-- lottery-details-body end -->
                            </form>
                        @else
                            <div class="lottery-details-body">
                                <div class="top-part">
                                    <div class="left">
                                        <h4>@lang('Available Ticket'): {{ __($phase->available) }}</h4>
                                        <h4 class="mt-2">@lang('Price'):
                                            {{ __($general->cur_sym) }}{{ __(showAmount($phase->lottery->price)) }}</h4>
                                    </div>
                                </div>
                                <div class="footer-part gap-3">
                                    <div class="middle">
                                        <h4>@lang('Please log in to purchase lottery tickets')</h4>
                                    </div>
                                    <div class="right">
                                        <a href="{{ route('user.login') }}"><button class="btn btn-md btn-outline--base" type="button"><i class="la la-user"></i> @lang('Login')</button></a>
                                    </div>
                                </div>
                            </div>
                        @endauth
                    @else
                        <div class="lottery-details-body">
                            <div class="top-part">
                                <div class="w-100">
                                    <h4> @lang('All Tickets are sold') </h4>
                                </div>
                            </div>
                        </div>
                    @endif --}}
                    
                    <div class="lottery-details-instruction">
                        <ul class="nav nav-tabs cumtom--nav-tabs" id="myTab" role="tablist">
                            <!--<li class="nav-item" role="presentation">
                                <button class="nav-link px-4" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">@lang('Instruction')</button>
                            </li>-->
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active px-4" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">@lang('Win Bonuses')</button>
                            </li>
                            @auth
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link px-4" id="profile-tab" data-bs-toggle="tab" data-bs-target="#history" type="button" role="tab" aria-controls="history" aria-selected="false">@lang('Purchased Tickets')</button>
                                </li>
                            @endauth
                        </ul>
                        <div class="tab-content mt-4" id="myTabContent">
                            <div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
                                <div class="d-block">
                                    <h3 class="mb-3">@lang('Introduction')</h3>
                                    @php echo $phase->lottery->instruction @endphp
                                </div>
                                <div class="mt-4">
                                        <h4>@lang('Available Ticket'): {{ __($phase->available) }}</h4>
                                    
                                    <h4 class="mt-2">@lang('Price'): {{ __($general->cur_sym) }}{{ __(showAmount($phase->lottery->price)) }}</h4>
                                    
                                    <h4 class="mt-2">@lang('Balance'): {{ __($general->cur_sym) }}{{ showAmount(auth()->user()->balance) }}</h4>
                                </div>
                                
                                <div class="mt-4">
                                    <p>
                                        @lang('1 Draw with') <span class="qnt">1</span> @lang('ticket') : <span class="qnt">1</span> x {{ getAmount($phase->lottery->price) }} {{ __($general->cur_text) }}
                                    </p>
                                    
                                    <p class="mt-2">
                                        @lang('Total Amount') : <span class="tam">{{ getAmount($phase->lottery->price) }}</span>
                                        <span>{{ $general->cur_text }}</span>
                                    </p>
                                </div>
                            </div>
                            <div class="tab-pane fade show active" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                                <div class="table-responsive--md">
                                    <table class="level-table custom--table table">
                                        <thead>
                                            <tr>
                                                <th class="text-uppercase">@lang('Winners')</th>
                                                <th class="text-uppercase">@lang('Win Bonus')</th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                            @foreach ($phase->lottery->bonuses as $bonus)
                                                <tr>
                                                    <td class="">@lang('Winner')- {{ $bonus->level }}</td>
                                                    <td class="">{{ $bonus->amount }}
                                                        {{ __($general->cur_text) }}
                                                    </td>
                                                </tr>
                                            @endforeach

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            @auth
                                <div class="tab-pane fade" id="history" role="tabpanel" aria-labelledby="history-tab">
                                    <div class="table-responsive--md">
                                        <table class="level-table custom--table table">
                                            <thead>
                                                <tr>
                                                    <th>@lang('S.N.')</th>
                                                    <th>@lang('Phase Number')</th>
                                                    <th>@lang('Ticket')</th>
                                                    <th>@lang('Type')</th>
                                                    <th>@lang('Number Pick')</th>
                                                    <th>@lang('Result')</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse(@$tickets as $ticket)
                                                    <tr>
                                                        <td>{{ $tickets->firstItem() + $loop->index }}</td>
                                                        <td>@lang('Phase ' . $ticket->phase->phase_number)</td>
                                                        <td> {{ $ticket->ticket_number }}</td>
                                                        <td> {{ $ticket->type }}</td>
                                                        <td> {{ $ticket->number_pick }}</td>
                                                        <td>
                                                            @php
                                                                echo $ticket->statusBadge;
                                                            @endphp
                                                        </td>
                                                    @empty
                                                        <td class="text-center rounded-bottom" colspan="100%">{{ __($emptyMessage) }}</td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                        <div class="d-flex justify-content-center mt-3">
                                            @if ($tickets->hasPages())
                                                {{ paginateLinks($tickets) }}
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endauth

                        </div>
                    </div>
                </div>
            </div><!-- row end -->
            
            <br/><br/>
            @include($activeTemplate . 'sections.recent_winners')
        </div>
    </section>

    <!-- Modal -->
    @include($activeTemplate . 'partials.ticket_confirmation_modal')

    <!-- lottery details section end -->
@endsection

@push('script')
    <script type="text/javascript">
        $(document).ready(function(){
            addMoreBtn();
            
            $(document).on("change", "input[name=number_pick]", function() {
                $('#lottery_table tbody').html('');
                $("#number_input").val('');
                addMoreBtn();
            })
            
            $(document).on("click", ".type_btn button", function() {
                let text = $(this).text();
                
                $(this).closest(".type_btn").find("button").removeClass('btn--success');
                $(this).addClass('btn--success');
                
                $("#number_type").text(text);
                $("input[name=type]").val(text);
            })
            
            $(document).on("click", ".generate", function() {
                let random_number = Math.floor(1000000000 + Math.random() * 9000000000);
                let number_pick = $("input[name=number_pick]:checked").val();
                
                if (number_pick == "pick_3") {
                    random_number = Math.floor(Math.random() * 900) + 100;
                }
                else if (number_pick == "pick_4") {
                    random_number = Math.floor(Math.random() * 9000) + 1000;
                }
                
                $('#number_input').val(random_number);
                
                // hit click when number complete
                triggerClick();
            })
            
            $(".numbers_picker .number_box").click(function(){
                let number = $(this).data('number');
                let number_pick = $("input[name=number_pick]:checked").val();
                let number_input_value = $("#number_input").val();
                
                // clear
                if (number == 'clear') {
                    $("#number_input").val('');
                    return;
                }
                
                // remove
                if (number == 'remove') {
                    $("#number_input").val(number_input_value.slice(0, -1));
                    return;
                }
                
                // number_pick
                if (number_pick == "pick_3" && number_input_value.length >= 3) {
                    return;
                } 
                else if (number_pick == "pick_4" && number_input_value.length >= 4) {
                    return;
                }
                
                // insert number
                $("#number_input").val(`${number_input_value}${number}`);
                
                // hit click when number complete
                triggerClick();
            })
            
            $('.addMore').click(function() {
                let number_pick = $("input[name=number_pick]:checked").val();
                let number = $("#number_input").val();
                let type = $("input[name=type]").val();
                let price = parseFloat({{ $phase->lottery->price }});
                
                if (!number) {
                    notify('error', 'Please enter ticket number.');
                    return;
                }
                
                if (!type) {
                    notify('error', 'Please enter type.');
                    return;
                }
                
                if (number_pick == "pick_3" && number.length < 3) {
                    notify('error', 'Please enter 3 digit ticket number.');
                    return;
                } 
                
                if (number_pick == "pick_4" && number.length < 4) {
                    notify('error', 'Please enter 4 digit ticket number.');
                    return;
                } 
                
                let tr_length = Number($('#lottery_table tbody tr').length);
                
                $('#lottery_table tbody').append(`
                    <tr>
                        <input class="numVal" name="number[]" type="hidden" value="${number}">
                        <input name="number_type[]" type="hidden" value="${type}">
                        <input name="number__pick[]" type="hidden" value="${number_pick}">
                        
                        <td>${tr_length + 1}</td>
                        <td>${number}</td>
                        <td>${price}</td>
                        <td>${type}</td>
                        <td width="5%">
                            <i class="fa fa-trash-alt text-danger" onclick="deleteTicket(this)"></i>
                        </td>
                    </tr>
                `);
                
                $('#number_input').val('');
                addMoreBtn();
            })
            
            $('.sendBtn').click(function() {
                let ticket_length = $(document).find(".numVal").length;
                
                if (!ticket_length || ticket_length <= 0) {
                    notify('error', 'Please select atleast 1 ticket.');
                    return;
                }
                
                $(this).closest("form").submit();
            })
        })
        
        function addMoreBtn() {
            let count = $('#lottery_table tbody tr').length;
            let available = {{ $phase->available }}
            
            if (count >= available) {
                $('.addMore').addClass('d-none');
            } else {
                $('.addMore').removeClass('d-none');
            }
        }
        
        function deleteTicket(e) {
            $(e).closest("tr").remove();
            addMoreBtn();
            
            $('#lottery_table tbody tr').each(function(i, v){
                $(v).find("td:first").text(i+1);
            })
        }
        
        function triggerClick() {
            let val = $("#number_input").val();
            let pick = $("#number_pick").val();
            
            if (val.length == 3 && pick == 'pick_3') {
                $('.addMore').click();
            }
            else if (val.length == 4 && pick == 'pick_4') {
                $('.addMore').click();
            }
        }
    </script>
@endpush
