@extends('layouts.master')
@section('title')
    Cafe Games
@endsection

@section('css')
    <link href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" rel="stylesheet" type="text/css"/>
    <link href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css"/>
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1')
            Cafe Games
        @endslot
        @slot('title')
            List
        @endslot
    @endcomponent

    @include('partials.session')

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center flex-wrap">
                        <h1 class="card-title mb-0">Cafe Games</h1>

                            <div class="mt-2 w-100">
                                <div class="row align-items-center">
                                    <div class="col-md-6 mb-2 mb-md-0">
                                        <div class="text-dark small mb-1">
                                            <strong>Your Balance:</strong>
                                            {{ $userInfo ? number_format($userInfo['userBalance'], 2) : '0.00' }}
                                        </div>
                                        @if(auth()->user()->roles[0]->name == App\Models\User::SuperAdmin)
                                            <div class="text-dark small">
                                                <strong>Agent Balance:</strong>
                                                {{ $agentBalance ? number_format($agentBalance, 2) : '0.00' }}
                                            </div>
                                        @endif
                                        @if(isset($selectedRecharge->digital_asset_id) && !empty($selectedRecharge->digital_asset_id))
                                            <button class="btn btn-primary mt-2" type="button" id="rechargeBtn"
                                                    data-asset-id="{{ $selectedRecharge->digital_asset_id }}"
                                                    data-asset-name="{{ $selectedRecharge->digitalAsset->name }}">
                                                Recharge
                                            </button>
                                        @endif
                                        @if(isset($selectedRedeem->digital_asset_id_for_redeem) && !empty($selectedRedeem->digital_asset_id_for_redeem) && isset($userInfo['userBalance']) && $userInfo['userBalance'] > 0)
                                            <button class="btn btn-primary mt-2" type="button" id="redeemBtn"
                                                    data-asset-id="{{ $selectedRedeem->digital_asset_id_for_redeem }}"
                                                    data-asset-name="{{ $selectedRedeem->digitalAssetRedeem->name }}"
                                                    data-balance="{{ $userInfo['userBalance'] }}">
                                                Redeem
                                            </button>
                                        @endif
                                    </div>
                                    @if(auth()->user()->roles[0]->name == App\Models\User::SuperAdmin)
                                        <div class="col-md-3">
                                            <label for="recharge_asset" class="form-label">Select Asset For Recharge</label>
                                            <div class="d-inline-block" style="min-width: 100%;">
                                                <select class="form-control" id="recharge_asset" name="recharge_asset">
                                                    <option value="">Select an asset</option>
                                                    @foreach($assets as $asset)
                                                        <option
                                                            value="{{ $asset->id }}" {{ (isset($selectedRecharge) && !empty($selectedRecharge)) && $selectedRecharge->digital_asset_id == $asset->id ? 'selected' : ''}}>{{ $asset->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <label for="redeem_asset" class="form-label">Select Asset For Redeem</label>
                                            <div class="d-inline-block" style="min-width: 100%">
                                                <select class="form-control" id="redeem_asset" name="redeem_asset">
                                                    <option value="">Select an asset</option>
                                                    @foreach($assets as $asset)
                                                        <option
                                                            value="{{ $asset->id }}" {{ (isset($selectedRedeem) && !empty($selectedRedeem)) && $selectedRedeem->digital_asset_id_for_redeem == $asset->id ? 'selected' : ''}}>{{ $asset->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>

                    </div>

                <div class="card-body">
                    <div class="row">
                        @foreach ($games as $game)
                            <div class="col-md-3 col-12 mb-5">
                                <div class="image-container">
                                        @if (isset($game['gameLogo']))
                                            <img src="{{ $game['gameLogo'] }}" alt="thumbnail" class="w-100">
                                        @endif

                                    <div class="text-center">
                                            @can('Play FortunePanda Games')
                                                <a href="{{ route('games.fortune.play', ['kindId' => $game['kindId'], 'name' => $game['gameName']]) }}"
                                                   class="btn btn-sm"><i class="fa fa-2x fa-play"></i></a>
                                            @endcan
                                    </div>
                                </div>
                                <h5 class="text-center">
                                        {{ $game['gameName'] }}
                                </h5>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        $(document).on('click', '.play-game', function (event) {
            event.preventDefault();
            var gameId = $(this).data('id');
            var url = '{{ route("games.play", ":id") }}';
            url = url.replace(':id', gameId);

            fetch(url)
                .then(response => response.json())
                .then(data => {
                    window.location.href = data.url;
                })
                .catch(error => {
                    alert("Some thing went wrong please try again!");
                });
        });

        $(document).ready(function () {
            $('#recharge_asset').on('change', function () {
                let assetId = $(this).val();
                if (assetId) {
                    Swal.fire({
                        title: 'Processing...',
                        text: 'Saving selected asset.',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        didOpen: () => {
                            Swal.showLoading()
                        }
                    });

                    $.ajax({
                        url: "{{ route('panda.assets.save') }}",
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                            recharge_asset: assetId
                        },
                        success: function (response) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Success!',
                                text: 'Digital asset saved successfully.',
                                timer: 2000,
                                showConfirmButton: true
                            }).then(() => {
                                location.reload();
                            });
                        },
                        error: function (xhr) {
                            Swal.fire({
                                icon: 'error',
                                title: 'Oops...',
                                text: 'Something went wrong!',
                            });
                        }
                    });
                }
            });

            $('#redeem_asset').on('change', function () {
                let assetId = $(this).val();
                if (assetId) {
                    Swal.fire({
                        title: 'Processing...',
                        text: 'Saving selected asset.',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        didOpen: () => {
                            Swal.showLoading()
                        }
                    });

                    $.ajax({
                        url: "{{ route('panda.assets.save') }}",
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                            redeem_asset: assetId
                        },
                        success: function (response) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Success!',
                                text: 'Digital asset saved successfully.',
                                timer: 2000,
                                showConfirmButton: true
                            }).then(() => {
                                location.reload();
                            });
                        },
                        error: function (xhr) {
                            Swal.fire({
                                icon: 'error',
                                title: 'Oops...',
                                text: 'Something went wrong!',
                            });
                        }
                    });
                }
            });

            $('#rechargeBtn').on('click', function () {
                const assetName = $(this).data('asset-name');
                const digitalAssetId = $(this).data('asset-id');

                Swal.fire({
                    title: `Recharge from ${assetName}`,
                    html: `
                        <input id="rechargeQtyInput" type="number" class="form-control" placeholder="1 or more" min="1" style="width: 100%;">
                        `,
                    showCancelButton: true,
                    confirmButtonText: 'Recharge',
                    cancelButtonText: 'Cancel',
                    preConfirm: () => {
                        const qty = document.getElementById('rechargeQtyInput').value;
                        if (!qty || qty < 1) {
                            Swal.showValidationMessage('Please enter a valid quantity (1 or more).');
                            return false;
                        }
                        return qty;
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        const qty = result.value;

                        Swal.fire({
                            title: 'Processing...',
                            allowOutsideClick: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });

                        $.ajax({
                            url: "{{ route('panda.assets.recharge') }}",
                            type: "POST",
                            data: {
                                _token: "{{ csrf_token() }}",
                                digital_asset_id: digitalAssetId,
                                quantity: qty
                            },
                            success: function (response) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Recharged!',
                                    text: response.message,
                                    timer: 2000,
                                    showConfirmButton: true
                                }).then(() => {
                                    location.reload();
                                });
                            },
                            error: function (xhr) {
                                let msg = 'Something went wrong!';
                                if (xhr.responseJSON && xhr.responseJSON.message) {
                                    msg = xhr.responseJSON.message;
                                }
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Oops...',
                                    text: msg
                                });
                            }
                        });
                    }
                });
            });

            $('#redeemBtn').on('click', function () {
                const assetName = $(this).data('asset-name');
                const digitalAssetId = $(this).data('asset-id');
                const userBalance = $(this).data('balance');

                Swal.fire({
                    title: `Redeem to ${assetName}`,
                    html: `
            <div class="mb-2">Your balance: <strong>${userBalance}</strong></div>
            <div class="mb-2">On redeem you will receive ${assetName}</div>
            <div class="input-group">
                <input id="redeemQtyInput" type="number" class="form-control" placeholder="Amount to redeem"
                       min="0.01" max="${userBalance}" step="0.01" style="width: 70%;">
                <button class="btn btn-outline-secondary" type="button" id="maxBtn">Max</button>
            </div>
            `,
                    showCancelButton: true,
                    confirmButtonText: 'Redeem',
                    cancelButtonText: 'Cancel',
                    didOpen: () => {
                        document.getElementById('maxBtn').addEventListener('click', function() {
                            document.getElementById('redeemQtyInput').value = userBalance;
                        });
                    },
                    preConfirm: () => {
                        const qtyInput = document.getElementById('redeemQtyInput').value;
                        const qty = parseFloat(qtyInput);
                        if (isNaN(qty) || qty <= 0 || qty > userBalance) {
                            Swal.showValidationMessage(`Please enter a valid amount between 0.01 and ${userBalance}.`);
                            return false;
                        }
                        return qty;
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        const qty = result.value;

                        Swal.fire({
                            title: 'Processing...',
                            allowOutsideClick: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });

                        $.ajax({
                            url: "{{ route('panda.assets.redeem') }}",
                            type: "POST",
                            data: {
                                _token: "{{ csrf_token() }}",
                                digital_asset_id: digitalAssetId,
                                quantity: qty
                            },
                            success: function (response) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Redeemed!',
                                    text: response.message,
                                    timer: 2000,
                                    showConfirmButton: true
                                }).then(() => {
                                    location.reload();
                                });
                            },
                            error: function (xhr) {
                                let msg = 'Something went wrong!';
                                if (xhr.responseJSON && xhr.responseJSON.message) {
                                    msg = xhr.responseJSON.message;
                                }
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Oops...',
                                    text: msg
                                });
                            }
                        });
                    }
                });
            });
        });
    </script>
@endsection