@extends('layouts.app')
@section('content')
<style>
    .line {
        position: relative;
        display: inline-block;
        padding: 20px 0 30px;
        border-bottom: none;
    }

    .numbers {
        align-items: center;
        display: flex;
    }

    .numbers ul {
        margin-bottom: 0px;
    }

    .numbers ul,
    .numbers li {
        position: relative;
        list-style-type: none;
        display: inline-block;
    }

    .numbers ul:first-child {
        margin-right: 0px;
    }

    .numbers input {
        border: none;
        border-radius: 8px;
        padding: 5px;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        width: 70px;
        height: 70px;
        margin: 0 2px;
    }
    .error-div{
        margin-bottom: 1rem !important
    }
    .btn.btn-primary{
        width: auto;
        padding: 10px 18px;
        font-size: 14px;
        font-weight: 600;
        background: #FFFFFF;
        border: 1px solid #FFFFFF;
        color: #0f0c29;
    }
    .btn.btn-primary:hover{
        background: transparent;
        border: 1px solid #FFFFFF;
        color: #ffffff;
    }
    input#winAmount {
    padding: 6px 15px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    outline: none;
}
</style>
<div class="container">
    <div class="col-md-8 mx-auto">
        <div class="card mt-4" style="background-image: linear-gradient(to right, #0f0c29, #302b63, #24243e);">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div class="w-100 text-center">
                        <h1 class="mb-0" style="font-weight: 600; font-size: 1.5rem; color: #fff;">CLAIM TICKET WIN AMOUNT</h1>
                    </div>
                </div>
                <style>
                    .numbers input,
                    .numbers input:focus {
                        border: 1px solid var(--pg) !important;
                        outline: none !important;
                    }
                </style>
                @php
                $matchedAmounts = [];
                @endphp

                @foreach($ticket_sequence as $ticketDetail)
                <div class="ticket-number-wrap d-flex align-items-center justify-content-center">
                    <span class="card-title" style="display: inline-block; color: var(--primary);;margin-right: 10px; color: #fff;">TICKET NO : </span>
                    <div class="ticket-number-box">
                        <div class="line" data-index="0">
                            <div class="numbers">
                                <ul class="p-0">
                                    @foreach($ticket_sequence[$loop->index] as $sequence)
                                    <li>
                                        <input type="tel" min="1" value="{{ $sequence[$loop->index]->winning_sequence }}" readonly>
                                    </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 text-center">
                    @php
                    $countStatusOne = 0; // Initialize the count variable for each ticket detail
                    @endphp
                    @foreach($ticket_sequence[$loop->index] as $sequence)
                    @if($sequence->status == 1)
                    {{-- Add any logic or display for status 1 records here --}}
                    @php
                    $countStatusOne++; // Increment the count for each status 1 record
                    @endphp
                    @endif
                    @endforeach
                    @if($countStatusOne > 0)
                    @foreach($result_check as $result)
                    @if($result->number_range == $countStatusOne)
                    <p style="color: #fff; font-size: 14px">{{ $result->description }}</p>
                    @php
                    $matchedAmounts[] = $result->amount;
                    @endphp
                    {{-- Add any logic or display for the matching result_check here --}}
                    @endif
                    @endforeach
                    @else
                    <p style="color: #fff;">Sorry, no numbers matched. You Lost!</p>
                    @endif
                </div>
                @endforeach
            </div>
        </div>
    </div>
    
    
    
                        @php
                        $totalAmount = array_sum($matchedAmounts);
                        @endphp
                        <div class="card mt-3 border-0" style="background: transparent;">
                            <div class="card-body">
                                <div class="row">
                                        <form action="" id="form">
                                            {{ csrf_field() }}
                                            <div class="row justify-content-center">
                                                <div class="col-md-7 text-center mb-3">
                                                    <input type="hidden" value="{{$ticket->id}}" id="ticket_id">
                                                    <label for="form-control" style=" color: #fff;margin-right:10px;">Win Amount</label>
                                                    @foreach ($amount as $amnt)
                                                        @if ($amnt > 0)
                                                            <input type="number" id="winAmount" value="{{$amnt}}" class="text-white" readonly>
                                                        @else
                                                            <input type="number" id="winAmount" value="0" readonly>
                                                        @endif
                                                    @endforeach
                                                </div>
                                                <div class="col-md-7 text-center mb-3">
                                                    <input type="radio" name="payment_method" style="margin-right:2px;" id="wallet" value="wallet">
                                                    <label for="wallet" style=" color: #fff; margin-right:10px;">Add to User Wallet</label>
                                                    <input type="radio" name="payment_method" style="margin-right:2px;" id="cash" value="cash">
                                                    <label for="cash" style=" color: #fff;">Get Cash</label>
                                                </div>
                                                <div class="col-md-7 text-center">
                                                    <div class="error-div text-danger" style="display: none; color: #fff;">Please select one checkbox.</div>
                                                </div>
                                                <div class="col-md-7 text-center">
                                                    <input type="button" class="btn btn-primary claim" value="Complete">
                                                </div>
                                            </div>
                                        </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
              </div>
        </div>
    </div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.19/dist/sweetalert2.min.css">

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.19/dist/sweetalert2.min.js"></script>
<script>
   $(document).ready(function() {
    // var Url =  "{{ route('admin.win-ticket-lists') }}";
        // Attach an event handler to the button's click event
        $('.claim').on('click', function() {
            // Check which radio button is selected
            var paymentMethod = $("input[name='payment_method']:checked").val();

            // Retrieve the win amount and ticket ID
            var winAmount = $('#winAmount').val();
            var ticketId = $('#ticket_id').val();

            // Check if a payment method is selected
            if (paymentMethod) {
                // Create an object to hold the data for the AJAX request
                var dataToSend = {
                    "_token": "{{ csrf_token() }}",
                    "amount": winAmount,
                    "payment_method": paymentMethod,
                    "ticketId": ticketId
                };

                // Send the AJAX request to the server
                $.ajax({
                    type: "POST",
                    url: "{{ route('user.add-amount-to-wallet') }}", // Replace with your server's endpoint URL
                    data: dataToSend,
                    success: function(response) {
                        // Handle the success response from the server
                        console.log(response);

                        // Show SweetAlert with success message
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: response.message,
                        }).then(function() {
                            // Redirect to the "win-ticket-lists" route after the SweetAlert is closed
                            // window.location.replace(Url);
                            window.location = "{{ route('user.my-account.ticket') }}";
                        });
                    },
                    error: function(xhr, status, error) {
                        // Handle the error response from the server
                        console.error(error);

                        // Show SweetAlert with error message
                        Swal.fire({
                            icon: 'error',
                            title: 'Error!',
                            text: 'An error occurred. Please try again later.',
                        });
                    }
                });
            } else {
                // Show an error message if no payment method is selected
                Swal.fire({
                    icon: 'error',
                    title: 'Error!',
                    text: 'Please select a payment method (Wallet or Cash).',
                });
            }
        });
    });
</script>
@endsection