@extends('sponsor.layouts.sponsor')
@section('title')
Sponsor | Add Event to Cart
@endsection

@section('styles')
<style type="text/css">
  @media only screen and (max-width: 768px){
    .cart-message {
      text-align: center!important;
    }
  }
</style>
@endsection

@section('content')
<!-- Content Header (Page header) -->
  <div class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1 class="m-0 text-dark">Event Details</h1>
        </div><!-- /.col -->
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="{{ route('sponsor.dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="#">Events</a></li> 
            <li class="breadcrumb-item"><a href="{{ route('sponsor.events.nearbyEvent') }}">Nearby Events</a></li>              
            <li class="breadcrumb-item active">Event Details</li>
          </ol>
        </div><!-- /.col -->
      </div><!-- /.row -->
    </div><!-- /.container-fluid -->
  </div>     

<section class="content">
  <span class="d-none" name="tz" id="tz"></span>
  <div class="row d-none">          
    <div class="col-md-12">
      <div class="card card-primary">
        @if ($errors->any())            
          <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
          </div>
        @endif
      </div>
    </div>
  </div>
  <!-- Default box -->
  <div class="card">

    <div class="card-header">
      <!-- <h3 class="card-title">&nbsp;</h3> -->
      <div class="row">
        <div class="col-md-10"></div>
        <div class="col-md-2 pb-md-0 pb-lg-2 pb-3">
          <a href="{{ route('sponsor.events.nearbyEvent.cart') }}" class="btn btn-dark col-sm-12 btn-lg btn-flat">
            <i class="fa fa-shopping-cart" aria-hidden="true"></i> 
            Cart(<span class="cart-item-count">{{ $sponsorCartCount??0 }}</span>)
          </a>
        </div>
      </div>
    </div>
    
    <div class="card-body">
      <div class="row">
        <div class="col-12 col-md-12 col-lg-12 order-2 order-md-1">
          <div class="row">
            <div class="col-12 col-sm-3">
              <div class="info-box bg-light">
                <div class="info-box-content">
                  <span class="info-box-text text-center text-muted">Event Date(s)</span>
                  <span class="info-box-number text-center text-muted mb-0">
                    @php
                        $event_date = 0;

                        $recordDetails['event_start_date'] = utcToLocalDateTime($user_timezone, $recordDetails['event_start_date']);
                        $recordDetails['event_end_date'] = utcToLocalDateTime($user_timezone, $recordDetails['event_end_date']);

                        if($recordDetails['type']==1) {
                          $event_date = date('M j, Y', strtotime($recordDetails['event_start_date']));
                        }
                        else if($recordDetails['type']==2) {
                          $event_date = date('M j, Y', strtotime($recordDetails['event_start_date'])).' - '.date('M j, Y', strtotime($recordDetails['event_end_date']));
                        }
                        else{
                          $event_date = "Not found";
                        }
                      @endphp
                      {{ $event_date }}
                  </span>
                </div>
              </div>
            </div>
            <div class="col-12 col-sm-3">
              <div class="info-box bg-light">
                <div class="info-box-content">
                  <span class="info-box-text text-center text-muted">Target Fund</span>
                  <span class="info-box-number text-center text-muted mb-0">
                    ${{ $recordDetails['target_fund']??0.00 }}
                  </span>
                </div>
              </div>
            </div>
            <div class="col-12 col-sm-3">
              <div class="info-box bg-light">
                <div class="info-box-content">
                  <span class="info-box-text text-center text-muted">Event Promotion Date(s)</span>
                  <span class="info-box-number text-center mb-0 blink_me text-primary">
                    @php
                      $recordDetails['promotion_start_date'] = utcToLocalDateTime($user_timezone, $recordDetails['promotion_start_date']);
                      $recordDetails['promotion_end_date'] = utcToLocalDateTime($user_timezone, $recordDetails['promotion_end_date']);
                    @endphp

                    {{ date('M j, Y', strtotime($recordDetails['promotion_start_date'])).' - '.date('M j, Y', strtotime($recordDetails['promotion_end_date'])) }}<span>
                </div>
              </div>
            </div>
            <div class="col-12 col-sm-3">
              <div class="info-box bg-light">
                <div class="info-box-content">
                  <span class="info-box-text text-center text-muted">Event Promotion Time</span>
                  <span class="info-box-number text-center text-muted mb-0">
                    @php
                      $pickup_time = 'Not found.';

                      if($recordDetails['is_all_day_pickup']==1) {
                        $pickup_time = "All day";
                      }
                      else if($recordDetails['is_all_day_pickup'] == 0) {
                        $recordDetails['promotion_start_time'] = utcToLocalDateTime($user_timezone, $recordDetails['promotion_start_time']);
                        $recordDetails['promotion_end_time'] = utcToLocalDateTime($user_timezone, $recordDetails['promotion_end_time']);

                        $pickup_time = date('h:ia', strtotime($recordDetails['promotion_start_time'])).' - '.date('h:ia', strtotime($recordDetails['promotion_end_time']));
                      }                         
                    @endphp
                    {{ $pickup_time }}
                  <span>
                </div>
              </div>
            </div>
          </div>

          <h5>Others information:</h5>
          <div class="row">
            <div class="col-md-12">
              <div class="row">
                <div class="col-md-12">
                  <div class="row">
                    <div class="col-md-3">
                    <label for="">Event ID</label></div>
                    <div class="col-md-9">
                    <p class="text-primary">{{ $recordDetails['event_ID']?$recordDetails['event_ID']:'Not found.' }}</p></div>
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-md-12">
                  <div class="row">
                    <div class="col-md-3">
                    <label for="">Event Name</label></div>
                    <div class="col-md-9">
                    <p class="">{{ $recordDetails['title']?$recordDetails['title']:'Not found.' }}</p></div>
                  </div>
                </div>
              </div>
              
              <div class="row">
                <div class="col-md-12">
                  <div class="row">
                    <div class="col-md-3">
                    <label for="">Event Location</label></div>
                    <div class="col-md-9">
                    <p class="text-primary">{{ $organizationDetails->address??'' }}</p></div>
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-md-12">
                  <div class="row">
                    <div class="col-md-3">
                    <label for="">Event Description</label></div>
                    <div class="col-md-9">
                    <p class="">{!! $recordDetails['description']??'Not found.' !!}</p></div>
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-md-12">
                  <div class="row">
                    <div class="col-md-3">
                    <label for="">Banner image</label></div>
                    <div class="col-md-9">
                      <p class="">
                        @php
                          $url = 'storage/images/events/web/'.$recordDetails['banner_image'];
                        @endphp

                        @if($recordDetails['banner_image']  && file_exists(public_path($url)))
                          <img src="{{ asset($url) }}" alt="Banner image" title="Banner image"  style="max-height: 145px; max-width: 145px;" >
                        @else
                          No image.  
                        @endif
                      </p>
                   </div>
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-md-12">
                  <div class="row">
                    <div class="col-md-8 col-sm-12 pb-md-0 pb-lg-2 pb-3 text-right align-middle cart-message">
                      <span></span>
                    </div>
                    <div class="col-md-2 text-right pb-md-0 pb-lg-2 pb-3">
                      <span class="btn btn-primary col-sm-12 btn-lg btn-flat add-event-button">
                        <i class="fa fa-shopping-cart" aria-hidden="true"></i>
                        Add to Cart
                      </span>
                    </div>
                    <div class="col-md-2 pb-md-0 pb-lg-2 pb-3">                    
                      <a href="{{ route('sponsor.events.nearbyEvent') }}" class="btn btn-default col-sm-12 btn-lg btn-flat">Add more Events</a>
                    </div>
                  </div>       
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>

    </div>
    <!-- /.card-body -->
  </div>
  <!-- /.card -->
  <button id="scrollTopBtn" class="scrollTopBtn" title="Go to top">Top</button>
</section>
    <!-- /.content -->
@endsection

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.28/moment-timezone-with-data.min.js"></script>
<script type="text/javascript">

  $(document).ready(function() {
    moment.tz.setDefault(moment.tz.guess()); // now we've set the default time zone
    $('#tz').text(moment.tz.guess());
  });
</script>
<script type="text/javascript">
  $(document).on('click', '.add-event-button', function (event) {       
            
        var serviceRow = "{{ Request::segment(5)??'' }}";
        var tz = $('#tz').text();
        $(".cart-message span").text('').show();

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
            }
        });
        $.ajax({
            url: baseUrl + 'sponsor/events/event/addToCart',
            method: 'post',
            dataType: 'json',
            data: {
                tz: tz,
                id: serviceRow,
                _token: $('meta[name="csrf_token"]').attr('content')                   
            },
            success: function (result) {
                if (result.success == true) {
                  $(".cart-message span").addClass( "text-success font-weight-bold" );
                  $(".cart-message span").html(result.message);
                  
                  var currentCartValue = parseInt($(".cart-item-count").text());
                  currentCartValue++;
                  $(".cart-item-count").text(currentCartValue);
                }
                else {
                  $(".cart-message span").addClass( "text-danger font-weight-bold" );
                  $(".cart-message span").html(result.message);                  
                }
            }
        });

        setTimeout(function () {
            $(".cart-message span").hide();
        }, 5000);
        
    });
</script>
@endsection