@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

                <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_sequences as $key => $sequence)
                                    <li>
                                        <input type="tel" min="1" value="{{ $sequence->winning_sequence }}" readonly>
                                    </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

            </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