@extends('layout.app')
@section('content')
<header class="full-header">

  <div class="container dark">
    <div class="row justify-content-center ">
      <div class="col-8 text-center">
        <img src="{{asset('img/logo.png')}}" class="img-fluid" alt="">
      </div>

      <div id="search" class="col-12">
        <div class="md-form position-relative">
          <input class="form-control searchbar" type="text" placeholder="Search" aria-label="Search">
          <a href="#" class="searchbar-icon">
            <i class="fas fa-search"></i>
          </a>
          <div class="search-results">
            <ul id="searchList">
              
            </ul>
          </div>
        </div>
      </div>

      <div class="col-12 mt-4 text-center header-desc">
        <i>XYZcodes is your one-stop shop for saving online while supporting great causes. We provide thousands of up-to-date coupons, and a portion of all commissions earned support many non-profit organizations across the globe! Check out this month's featured non-profit organizations below;</i>
      </div>
      <div class="col-12 mt-4 text-center organization-title">
        <h3 class="h3">Featured Non-Profit Organizations</h3>
      </div>
    </div>
  </div>


  <div class="pt-5 pb-5 dark organizations ">
    <div class="container">
      <div class="owl-carousel d-flex justify-content-center">
        @foreach ($donations as $donation) 
        <div class="col text-center">
            <div class="row justify-content-center">
              <div class="o-thumb" style="background-image: url('{{asset('storage/'.$donation->logo)}}')">
              </div>
            </div>
            <div class="row  mt-3">
              <div class="col-12">
                <strong class="h3">{{$donation->name}}</strong>
              </div>
            </div>
            <div class="row  mt-3">
              <div class="col-12">
                <span class="light-text">
                  {{ Str::limit( $donation->description, 100)}}
                </span>
              </div>
            </div>
            <div class="row mt-3">
              <div class="col-12">
                <button href="#" style="background:transparent;border:0;" data-toggle="modal" data-target="#organization_{{$donation->id}}">
                  <strong>Read More</strong>
                </button>
              </div>
            </div>
        </div>

        
      @endforeach

    </div>
  </div>

  @foreach ($donations as $donation)
  <div class="modal fade" id="organization_{{$donation->id}}" tabindex="-1" role="dialog" aria-labelledby="organization_{{$donation->id}}label" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title text-dark m-auto" id="organization_{{$donation->id}}label">{{$donation->name}}</h5>

            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body text-dark text-center">
          {{$donation->description}}
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-dark m-auto" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
    
  @endforeach

</header>

<section data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-delay="50">
  <div class="container">
    <div class="row">
      <div class="col-12 p-4 text-center">
        <h1 class="h1">Today's Top Free Coupons and Promo Codes</h1>
        <hr>
      </div>
    </div>
    <div class="row">
      
          
      
      @foreach ($coupons as $coupon)<div class="col-12 col-md-6 col-lg-4 mb-5 ">
        <div class="card coupon">
          @if ($coupon['label'] != 0)
            <div class="label">
              <strong>{{$coupon['label']}}</strong>
              <span>OFF</span>
            </div>
          @endif
            
            <div class="no-gutters">
              <div class="col-12 pl-4 pr-4" style="background: #f6f6f6;" >
                <div class="c-img" onclick="window.location.href = '{{route('store' , $coupon['slug'])}}'" style="background-image:url({{asset('storage/'.$coupon['logo'])}});">

                </div>
              </div>
              <div class="col-12">
                <div class="card-body">
                  <h5 class="card-title text-center">{{$coupon['headline']}}</h5>
                  <p class="card-text text-center">{{$coupon['desc']}}</p>
                  <div class="text-right">
                    <small class="card-icons"><img src="{{asset('img/valid-icon.png')}}" width="18" alt=""> Verifed</small>
                    <small class="card-icons"><img src="{{asset('img/ex-icon.png')}}" width="15" alt=""> Exclusive</small>
                  </div>
                </div>
                <div class="card-footer text-center">
                  @if ($coupon['type'] == 'deal')
                    <a data-href="{{route('deal' , $coupon['id'])}}" data-id="" class="btn coupon-show" target="_blank">GET DEAL</a>
                  @else
                  <a href="javascript:void(0)" data-id="{{$coupon['id']}}" data-href="{{route('home')}}" data-affilate="{{$coupon['affilate']}}" class="btn coupon-show">REVEAL CODE</a>
                  @endif
                </div>
              </div>
            </div>
          </div>

      </div>
      @endforeach

  </div>

  </div>
</section>

<section class="subscribe mt-5" data-aos="fade-right" data-aos-duration="500" data-aos-easing="ease-in-out"
  data-aos-delay="50">
  <div class="container">
    <div class="row">
       <div class="col-12">
           <hr>
       </div>
      <div class="col-8 col-md-4 col-lg-3 text-center">
        <img src="{{asset('img/subs.png')}}" class="img-fluid" alt="">
      </div>
      <div class="col-12 col-md-9 mt-md-5 sub-content p-2 text-left">
        <div class="col-12">
          <span class="sub-title"><strong> Subscribe</strong> to our weekly newsletter!</span>
        </div>
        <div class="col-12  mb-md-3">
          <span class="sub-desc">
            Get coupons from your favorite retailers sent to your inbox at the beginning of every week. You can cancel
            anytime.
          </span>
        </div>
        <div class="col-12 col-md-8 float-left p-2">
          <input type="text" placeholder="example@mail.com" class="form-control">
        </div>
        <div class="col-12 float-left p-2 col-md-4">
          <a href="#" class="btn btn-block btn-dark">SUBSCRIBE</a>
        </div>
      </div>
    </div>


  </div>

</section>
@endsection