@extends('front.layout.app')
@section('content')
<style>
    body.modal-open {
        overflow: hidden !important;
        position: fixed;
        width: 100%;
    }
</style>
<div class="innerBan">
    @if(isset($banner['commentary_page_section_show_hide']) && $banner['commentary_page_section_show_hide'] === 0)
    <img src="{{ asset('admin/images/' . ($banner['commentry_banner_image'] ?? '')) }}" class="w-100 h-100" alt="">
    @else
        <h2 class="text-dark">Banner Image Not Found</h2>
     @endif
    <div class="overlay">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-12">
                    <h2>{{ $banner['commentry_banner_name'] ?? '' }}</h2>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End: Main Slider -->


<section class="commentry-sec">
    <div class="container">
        @foreach ($commentries as $index => $commentry)
        <div class="row  mb-3 my-5
         {{-- align-items-center  --}}
        {{-- {{ $index % 2 == 0 ? '' : 'flex-row-reverse' }} --}}
         ">
            <div class="col-md-6">
                <figure>
                    <img src="{{ asset('admin/images/' . $commentry->image) }}" class="img-fluid" alt="">
                </figure>
                                @if (!empty($commentry->excel_sheet))
                        <a href="{{ asset('admin/images/' . $commentry->excel_sheet) }}" target="_blank" class="btn btn-primary mt-4">
                            Download File
                        </a>

                @endif


            </div>
            <div class="col-md-6">
                <div class="commentcntnt commentrymodal-content">
                    <h2>{{ $commentry->name }}</h2>
                    <p>{!! $commentry->description !!}</p>
                </div>
            </div>

            @endforeach
        </div>
    </div>
</section>

<!-- Modal -->
<div class="commentrymodal modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
    aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content border-0">
            <div class="modal-header border-0 m-0 p-0">
            </div>
            <div class="commentrymodal-content modal-body p-0">
                <ul>
                    <li>You will experience regret. We will sell too early, buy too late, sell too much, too little,
                        etc.</li>
                    <li>Risk management is critically important.</li>
                    <li>Cash is King.</li>
                    <li>Leverage is for REDUCING risk.</li>
                    <li>Price is all that matters.</li>
                    <li>This is NOT personalized advice. This is an investment blog providing ideas and in no manner
                        providing individualized advice. The goal is profit and long-term growth of capital.
                        However, anything can happen in this world at any time. Please don’t invest money that you
                        need for other purposes. You are in complete control of your own investment decisions.
                        Please do your own due diligence.</li>
                    <li>We use a proprietary form of technical analysis based on investment sentiment. In most cases
                        this is the only form of analysis we consider in making investment decisions. We are asking
                        the basic question, “Where is price going based on investor sentiment and behavior?”</li>
                    <li>We are here to make money and not comment on the state of the world.</li>
                </ul>
                <a href="#" data-dismiss="modal" class="themeBtn mt-3">Accept</a>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')

<script>



    $(document).ready(function () {
        $('#exampleModalCenter').on('show.bs.modal', function () {
            $('body').addClass('modal-open');
        });

        $('#exampleModalCenter').on('hidden.bs.modal', function () {
            $('body').removeClass('modal-open');
        });

        $('#exampleModalCenter').modal({
            backdrop: 'static',
            keyboard: false
        });
    });

</script>


@endsection