@extends('layouts.main')

@section('content')
<!-- ===================================== Content Start ============================ -->
<span class="display-zero">{{ $Locale = LaravelLocalization::getCurrentLocale() }}</span>
<!-- ===================================== Content Start ============================ -->
    <style type="text/css">
        .banner-area{background:url('{!! asset(option('settings')) !!}') no-repeat;background-size:cover}
    </style>
    <section class="banner-area relative">
        <div class="overlay overlay-bg"></div>
        <div class="container">
            <div class="row  align-items-center banner-content">
                <div class="col-lg-5">
                    <h1 class="text-white">{!! __('main.Our_Causes') !!}</h1>
                    <p>{!! __('main.Causes_Content') !!}</p>
                </div>
            </div>
        </div>
    </section>
    <!--================ End banner Area =========================== -->
    <!--================ Start Popular Causes Area ================= -->
    <section class="popular-cause-area section-gap-top">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-6">
                    <div class="section-title">
                        <h2><span>{!! __('main.Popular') !!}</span> {!! __('main.Causes') !!}</h2>
                    </div>
                </div>
            </div>
            <div class="row">
            @foreach($Causes as $Cause)      
        <div class="col-lg-4 col-md-6">
            <div class="card single-popular-cause">
            <div class="card-body">
            <figure>
            @if(isset($Cause->ImageUpload->filename))
                <img class="card-img-top img-fluid" src="{!! asset($Cause->ImageUpload->filename) !!}">
            @else
            @endif
            </figure>
            <div class="card_inner_body">
            <!-- ===============================  Home  ============================================ -->
             @if(isset($Cause->Category->{'Title_'.$Locale}))                    
             <div class="tag">{!! $Cause->Category->{'Title_'.$Locale} !!}</div>
            @else
            <div class="tag">{!! __('main.No_Category') !!}</div>
            @endif
             <!-- ===============================  Home  =========================================== -->
            <h4 class="card-title">{!! substr($Cause->{'Title_'.$Locale}, 0, 190) !!}</h4>
            <div class="d-flex justify-content-between raised_goal">
             <script>
                function increase() {
                    let SPEED = 40;
                    // Retrieve the percentage value
                    let limit = parseInt(document.getElementById("value1").innerHTML, 10);
                    for(let i = 0; i <= limit; i++) {
                        setTimeout(function () {
                            document.getElementById("value1").innerHTML = i + "%";
                        }, SPEED * i);
                    }
                }
                increase();
             </script>   
            <div class="chart">
                <div class="bar"></div>
                <span id="value1">{!! $Cause->donate !!}</span>
            </div>  
            </div>
            <div class="d-flex justify-content-between donation align-items-center">
                <!-- ===============================  Home  ======================================== -->
                <a href="{!! url('Causes') !!}/{!! $Cause->slug !!}" class="primary-btn">
                <i class="fas fa-donate"></i> {!! __('main.Donate') !!}
                </a>
                <!-- ===============================  Home  ======================================== -->
            </div>
            </div>
            </div>
            </div>
            </div>
            @endforeach
            </div>
            <div class="row">
              {!! $Causes->links() !!}
            </div>
        </div>
    </section>
  <!--================ End Popular Causes Area ===================================== -->
    <div class="cta-area banner-area relative">
        <div class="overlay overlay-bg"></div>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <!--================ Start Popular Causes Area ================= -->
                    <p class="top_text">{!! __('main.Thanks_heart') !!}</p>
                    <h1 class="text-white">{!! __('main.Contribute_heart') !!}</h1>
                     <a href="{!! url('contacts_us') !!}" class="primary-btn primary-btn-log">{!! __('main.donation') !!}</a>
                     <!--================ Start Popular Causes Area =================-->
                </div>
            </div>
        </div>
    </div>
<!-- ===================================== Content End ============================ -->
@endsection