@extends('frontend.layouts.app')

@section('content')

@if( isset( $preview->preview_data ) )

@php  
  $fundrazier = json_decode( $preview->preview_data ); 
  $province = \App\Models\Province::find($fundrazier->province_id); 
  $provinces = \App\Models\Province::get(); 
@endphp
<!-- Fundraise Detail Page Content Section Start -->
<div class="fundraise-detail-page-section">
  <div class="container">
    <div class="box">
      <div class="row">
        <div class="col-lg-3 col-md-6 ">
          <div class="image">
              @if(isset($fundrazier->overview_image))
                <img src="{{asset('fundrazier/'.$fundrazier->overview_image )}}" class="img-fluid" alt="{!!$fundrazier->overview_image!!}">
              @else
                <img src="{{asset('site-settings/logo16240014531624292244.png')}}" class="img-fluid" alt="Event Image">
              @endif
          </div>
          <div class="social-icon">
            <ul>
              @if(isset($fundrazier->facebook_url))
                <li><a href="{!!esc_url($fundrazier->facebook_url)!!}"><i class="fa fa-facebook-f"></i></a></li>
              @endif
              @if(isset($fundrazier->twitter_url))
                <li><a href="{!!esc_url($fundrazier->twitter_url)!!}"><i class="fa fa-twitter"></i></a></li>
              @endif
              @if(isset($fundrazier->pinterest_url))
                <li><a href="{!!esc_url($fundrazier->pinterest_url)!!}"><i class="fab fa-pinterest-p"></i></a></li>
              @endif
              @if(isset($fundrazier->instagram_url))
                <li><a href="{!!esc_url($fundrazier->instagram_url)!!}"><i class="fa fa-instagram"></i></a></li>
              @endif
            </ul>
          </div>
        </div>
        <div class="col-lg-6 col-md-12 order-lg-2 order-md-3 mt-4 mt-lg-0">
          <div class="title">
            <h2>{!!$fundrazier->title!!}</h2>
          </div>
          <div class="description">
            {!!$fundrazier->overview_description!!}
          </div>
        </div>
        <div class="col-lg-3 col-md-6 order-lg-3 colcenter">
          <div class="expire-sidebar">
          <div class="expire">
            <p>Fundraiser Start Date</p>
            <p><b>{!!date('F j, Y',strtotime($fundrazier->fundrazier_start_date))!!}</b></p>
          </div>
          <div class="expire">
            <p>Fundraiser End Date</p>
            <p><b>{!!date('F j, Y',strtotime($fundrazier->fundrazier_end_date))!!}</b></p>
          </div>
          <div class="right-btn site-btn">
            @if(isset($fundrazier->fundrazier_buy_ticker) && $fundrazier->fundrazier_buy_ticker != '0')
              <a href="#buyricketinfo" id="buyricket-btn">Buy Ticket</a>
            @endif
            <a href="#fundraiserIfno"  id="fundraiser-info-btn">More Info</a>
          </div>
        </div>
        </div>  
      </div>
      <div id="fundraiserIfno">
        <nav>
          <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
            <a class="nav-item nav-link active" id="nav-MessageFundraiser-tab" data-toggle="tab" href="#nav-MessageFundraiser" role="tab" aria-controls="nav-MessageFundraiser" aria-selected="true">Message to Fundraiser</a>
            @if(isset($fundrazier->fundrazier_buy_ticker) && $fundrazier->fundrazier_buy_ticker != '0')
              <a class="nav-item nav-link nav-buyricket-tab11" id="nav-buyricket-tab" data-toggle="tab" href="#nav-buyricket" role="tab" aria-controls="nav-buyricket" aria-selected="false">Purchase your tickets through Local Buzz Ticket Sales</a>
            @endif
          </div>
        </nav>
        <div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
          <div class="tab-pane fade show active" id="nav-MessageFundraiser" role="tabpanel" aria-labelledby="nav-MessageFundraiser-tab">
            <div class="row">
              <div class="col-lg-6 col-md-8 left">
                <form>
                  <div class="form-row">
                    <div class="form-group col-md-6">
                      <label for="inputName">Name</label>
                      <input type="text" class="form-control" id="inputName" placeholder="Name">
                    </div>
                    <div class="form-group col-md-6">
                      <label for="inputEmail">Email</label>
                      <input type="email" class="form-control" id="inputEmail" placeholder="Email">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="inputPhone">Phone</label>
                    <input type="text" class="form-control" id="inputPhone" placeholder="123 456 789">
                  </div>
                  <div class="form-group">
                    <label for="inputAddress">Address</label>
                    <input type="text" class="form-control" id="inputAddress" placeholder="Street, Address">
                  </div>
                  <div class="form-row">
                    <div class="form-group col-md-5">
                      <label for="inputCity">City</label>
                      <input type="text" class="form-control" id="inputCity" placeholder="City">
                    </div>
                    <div class="form-group col-md-4">
                      <label for="inputState">Province</label>
                      <select id="inputState" class="form-control">
                        <option selected>Choose...</option>
                        @if(isset($provinces) && count($provinces) > 0)
                          @foreach($provinces as $prov)
                            <option value="{!!$prov->id!!}">{!!$prov->name!!}</option>
                          @endforeach
                        @endif
                      </select>
                    </div>
                    <div class="form-group col-md-3">
                      <label for="inputZip">Postal Code</label>
                      <input type="text" class="form-control" id="inputZip" placeholder="Postal Code">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="message">Your Message</label>
                    <textarea class="form-control" id="message" rows="3" placeholder="Write Message Here..."></textarea>
                  </div>
                  <a href="#" class="btn btn-warning">Send Message</a>
                </form>
              </div>
              <div class="col-lg-6 col-md-4 right">
                <div class="image">
                  @if($fundrazier->featured_image)
                    <img src="{{asset('fundrazier/'.$fundrazier->featured_image)}}">
                  @endif
                </div>
                <div class="title">
                  <p>{!!$fundrazier->fundrazier_logo_title!!}</p>
                </div>
                <div class="contact-info">
                  <p><i class="fas fa-mobile-alt" aria-hidden="true"></i> {!!$fundrazier->phone!!}</p>
                  <p><i class="fas fa-envelope" aria-hidden="true"></i> {!!$fundrazier->email!!}</p>
                  <p><i class="fas fa-home" aria-hidden="true"></i>  {{$fundrazier->street_Address}}, {{$fundrazier->city.','}}  {{$province->name}}, {{$fundrazier->postal_code}}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="nav-buyricket" role="tabpanel" aria-labelledby="nav-buyricket-tab">
           <div class="buyticket-form">
            <div class="row">
              <div class="col-md-6 left">
                    <form>
              <div class="form-row">
                <div class="form-group col-md-6">
                  <input type="text" class="form-control" id="inputFname" placeholder="First Name">
                </div>
                 <div class="form-group col-md-6">
                  <input type="text" class="form-control" id="inputFname" placeholder="Last Name">
                </div>
              </div>
              <div class="form-row">
                <div class="form-group col-md-6">
                  <input type="number" class="form-control" id="inputNumber" placeholder="Phone Number">
                </div>
                <div class="form-group col-md-6">
                  <input type="email" class="form-control" id="inputEmail" placeholder="Email">
                </div>
              </div>
              <div class="form-group">
                <input type="text" class="form-control" id="inputAddress" placeholder="Street, Address">
              </div>
              <div class="form-row">
                <div class="form-group col-md-5">
                  <input type="text" class="form-control" id="inputCity" placeholder="City">
                </div>
                <div class="form-group col-md-4">
                  <select id="inputState" class="form-control">
                    <option selected>Choose...</option>
                    @if(isset($provinces) && count($provinces) > 0)
                      @foreach($provinces as $prov)
                        <option value="{!!$prov->id!!}">{!!$prov->name!!}</option>
                      @endforeach
                    @endif
                  </select>
                </div>
                <div class="form-group col-md-3">
                  <input type="text" class="form-control" id="inputZip" placeholder="Postal Code">
                </div>
                <div class="form-group col-md-12">
                        <div class="input-group">
                          <!-- <input type="button" value="-" class="button-minus" data-field="quantity"> -->
                          <input type="number" step="1" max="" value="1" name="quantity" class="quantity-field">
                          <!-- <input type="button" value="+" class="button-plus" data-field="quantity"> -->
                        </div>
                      </div>
                <div class="form-group col-md-12">
                  <input type="text" class="form-control" id="inputEmail" placeholder="Email" value="{!!$fundrazier->title!!}" disabled="disabled">
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-warning"><i class="fas fa-ticket-alt" aria-hidden="true"></i> Buy Ticket</button>
              </div>
            </form>
              </div>
              <div class="col-md-6 right">
                 <div class="image">
                   @if($fundrazier->featured_image)
                    <img src="{{asset('fundrazier/'.$fundrazier->featured_image)}}">
                  @endif
                </div>
                <div class="title">
                   <p>{!!$fundrazier->fundrazier_logo_title!!}</p>
                </div>
              <!--   <div class="contact-info">
                   <p><i class="fas fa-mobile-alt" aria-hidden="true"></i> {!!$fundrazier->phone!!}</p>
                  <p><i class="fas fa-envelope" aria-hidden="true"></i> {!!$fundrazier->email!!}</p>
                  <p><i class="fas fa-home" aria-hidden="true"></i>  {{$fundrazier->city.','}}  {{$province->name}}, {{$fundrazier->postal_code}}</p>
                </div> -->
              </div>
            </div>
         
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-12 col-md-12">
        <div class="text-center" style="margin-top:20px;">  
            <a href="{{route('preview.fundrazier-ad.countinue')}}" class="btn btn-primary">Continue Fundraiser Post</a>
            <a href="{{route('post-ad')}}?editAdPost={{$preview->id}}" class="btn btn-secondary">Edit Fundraiser</a>
        </div>
      </div>
    </div>

  </div>
</div>
</div>
<!-- Fundraise Page Content Section Start -->


@endif


@endsection

@section('scripts')

<script type="text/javascript">
   $("#fundraiser-info-btn").on('click',function(){
      $("#fundraiserIfno").show();
      $("#nav-tab a").removeClass('active');
      $("#nav-tab a").hide();
      $("#nav-tabContent .tab-pane").removeClass('show active');
      $("#nav-MessageFundraiser-tab").addClass('active');
      $("#nav-MessageFundraiser-tab").show();
      $("#nav-MessageFundraiser").addClass('show active');
  });

  $("#buyricket-btn").on('click',function(){
      $("#fundraiserIfno").show();
      $("#nav-tab a").removeClass('active');
      $("#nav-tab a").hide();
      $("#nav-tabContent .tab-pane").removeClass('show active');
      $(".nav-buyricket-tab11").addClass('active');
      $(".nav-buyricket-tab11").show();
      $("#nav-buyricket").addClass('show active');
  });

  if(window.location.hash) {
    var hashElement = $('a[href='+window.location.hash+']').attr('id');
    $("#"+hashElement).trigger('click');
  }
</script>

@endsection