<!doctype html>
<html lang="en" itemscope itemtype="http://schema.org/WebPage">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title> {{ $general->sitename(__($pageTitle)) }}</title>

    @include('partials.seo')

    <!--CSS -->
    <link rel="stylesheet" href="{{ asset('assets/global/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/global/css/all.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/global/css/line-awesome.min.css') }}">
    <link rel="stylesheet" href="{{asset($activeTemplateTrue.'css/magnific-popup.min.css')}}">
    <link rel="stylesheet" href="{{asset($activeTemplateTrue.'css/owl.min.css')}}">
    <link rel="stylesheet" href="{{asset($activeTemplateTrue.'css/main.css')}}">
    <link rel="stylesheet" href="{{asset($activeTemplateTrue.'css/custom.css')}}">
    <link rel="stylesheet" href="{{ asset($activeTemplateTrue.'css/color.php?color1='.$general->base_color)}}">

    @stack('style-lib')

    @stack('style')
</head>
<body>

    <div class="preloader">
        <div class="ball"></div>
    </div>
    <a href="javascript:void(0)" class="scrollToTop"><i class="las la-angle-up"></i></a>

    @include($activeTemplate.'partials.header')
        @yield('content')
    @include($activeTemplate.'partials.footer')

    <!-- Prediction Modal -->
    <div class="modal cmn--modal fade" id="predictModal">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title col text-center match-name"></h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <form class="final-bet-submit" action="{{route('user.bet.store')}}" method="POST">
            <div class="modal-body">
                    @csrf
                    <input type="hidden" name="option_id">
                    <div class="predict-content">
                        <h6 class="subtitle betting-details"></h6>


                        <div class="form-group text-start">
                            <div class="row">
                                <div class="form-group">
                                    <label for="amount" class="mb-2">@lang('Enter Bet Amount')</label>
                                    <div class="input-group">
                                        <input type="number" step="any" id="invest-amount" name="invest_amount" min="{{ $general->min_limit }}" max="{{ $general->max_limit }}" class="form-control form--control" required>
                                        <span class="input-group-text">{{__($general->cur_text)}}</span>
                                    </div>

                                    <div>
                                        @lang('Minimum Limit') : <b class="text--info">{{__($general->cur_sym)}}{{getAmount($general->min_limit)}} - {{__($general->cur_sym)}}{{getAmount($general->max_limit)}}</b>
                                    </div>

                                    <div>
                                        @lang('Maximum Limit') : <b class="text--info">{{__($general->cur_sym)}}{{getAmount($general->min_limit)}} - {{__($general->cur_sym)}}{{getAmount($general->max_limit)}}</b>
                                    </div>

                                    <h6 class="mt-2 text-center">
                                        @lang('You will get') <span class="text--success" id="return-amount">0.00 {{__($general->cur_text)}}</span> @lang('if you win')
                                    </h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-lg bg--danger text--white border-0 fz--16" data-bs-dismiss="modal">@lang('Close')</button>
                    <button type="submit" class="btn btn-lg btn--success border-0 fz--16">@lang('Proceed')</button>
                </div>
            </form>
          </div>
        </div>
    </div>

    <div class="modal cmn--modal fade" id="loginModal">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title col text-center" >@lang('Login Required')</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="predict-content">
                    <h6 class="subtitle">
                        @lang('Placing Bet Requires Login')
                    </h6>
                    <div class="be-in-limit">
                        <span>@lang('If you are already with us then please ')</span> <span><a href="{{route('user.login')}}" class="text--base">@lang('login')</a></span> <span>@lang('otherwisw')</span> <span><a href="{{route('user.register')}}" class="text--base">@lang('register')</a></span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-lg bg--danger text--white border-0 fz--16" data-bs-dismiss="modal">@lang('Close')</button>
              <a href="{{route('user.login')}}" class="btn btn-lg btn--success border-0 fz--16">@lang('Login')</a>
            </div>
          </div>
        </div>
    </div>



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="{{ asset('assets/global/js/jquery-3.6.0.min.js') }}"></script>
    <script src="{{asset('assets/global/js/bootstrap.min.js')}}"></script>
    <script src="{{asset($activeTemplateTrue.'js/rafcounter.min.js')}}"></script>
    <script src="{{asset($activeTemplateTrue.'js/magnific-popup.min.js')}}"></script>
    <script src="{{asset($activeTemplateTrue.'js/owl.min.js')}}"></script>
    <script src="{{asset($activeTemplateTrue.'js/yscountdown.min.js')}}"></script>
    <script src="{{asset($activeTemplateTrue.'js/main.js')}}"></script>

    @stack('script-lib')

    @stack('script')

    @include('partials.plugins')

    @include('partials.notify')


    <script>
        (function ($) {
            "use strict";

            $(".langSel").on("change", function() {
                window.location.href = "{{route('home')}}/change/"+$(this).val() ;
            });

            var investRate = 0;
            var returnRate = 0;
            var investAmount = 0;

            $(document).on("click", ".bet-info", function() {
                var modal = $('#predictModal');
                var resource = $(this).data('resource');
                var question = $(this).data('question');
                var matchName = $(this).data('match');
                var betDetails = `<span class="text--base">${question}</span> <br><small>@lang('You are betting for ')${resource.name}</small>`;
                modal.find("input[name='option_id']").val(resource.id);
                investRate = resource.dividend;
                returnRate = resource.divisor;
                investAmount = modal.find('#invest-amount').val();
                returnAmount(investAmount);
                modal.find('.betting-details').html(betDetails);
                modal.find('.match-name').text(matchName);
            });


            $(document).on("input", "#invest-amount", function() {
                investAmount = $(this).val();
                returnAmount(investAmount);
            });

            function returnAmount(investAmount){
                var returnAmount = (parseFloat(investAmount).toFixed(2) / parseFloat(investRate).toFixed(2)) * parseFloat(returnRate).toFixed(2);
                if (returnAmount) {
                    $(document).find('#return-amount').text(parseFloat(returnAmount).toFixed(2) + ' {{__($general->cur_text)}}');
                }else{
                    $(document).find('#return-amount').text('0.00 {{__($general->cur_text)}}');
                }
            }

            // --- JQUERY HIGH VISIBILITY LOGO BADGE ---
            $(document).ready(function() {
                $('img[src*="logo"]').each(function() {
                    var $img = $(this);
                    if ($img.parent().hasClass('logo-glass-badge') || $img.attr('src').includes('favicon')) return;
                    $img.wrap('<span class="logo-glass-badge"></span>');
                });
            });

        })(jQuery);
    </script>

    <style>
        /* --- DYNAMIC HIGH VISIBILITY LOGO STYLE --- */
        .logo-glass-badge {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.96) !important;
            border-radius: 12px !important;
            padding: 6px 18px !important;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.5) !important;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
            margin: 4px auto !important;
        }
        .logo-glass-badge:hover {
            background: #ffffff !important;
            transform: translateY(-2px) scale(1.03) !important;
            box-shadow: 0 8px 25px rgba(59, 130, 246, 0.35) !important;
        }
        .logo-glass-badge img {
            max-height: 48px !important;
            width: auto !important;
            background: transparent !important;
            padding: 0 !important;
            box-shadow: none !important;
            filter: none !important;
        }
    </style>

</body>
</html>
