@extends('frontend.layouts.layout_page')

@section("style")
    
@endsection
@section('pageTitle')
<title>{{trans('panel.site_title')}} details</title>
@endsection

@section('content')

<div class="event_details">
  <section class="small_banner1 burger">
    <div class="ccontainer">
      <div class="crow g-0">
        <div class="ccol ccol-md-6 ccol-sm-8 mx-auto">
            <div class="banner_txt">
              <div class=""><a href="#" class="cbtn cbtn-bdr-light back-btn text-white">Back</a></div>
              <h3 class="text-white mt-3">Get your tickets <a href="javascript:;" class="gobottom ml-1"><img src="images/arrow_white_back.svg" alt="img" class="img-svg" /></a></h3>
            </div>

          <div class="bannerslider__content">
            <div class="banner_txt">
              <a href="javascript:;" class="text-white small">Sept 10, 2022</a>
              <h3 class="text-white mr-2">Lizzo</h3>
              <p class="text-white mt-0">w/ special guest Jacob Collier</p>
            </div>
            <img src="images/img.png" alt="img" class="w-100" />
          </div>
        </div>
      </div>
    </div>
    <div class="bg_strip3"><img src="images/bg_strip7.svg" alt="image" class="img-svg" /></div>
    <div class="bg_strip2"><img src="images/bg_strip5.svg" alt="image" class="img-svg" /></div>
  </section>

  <section style="padding-top: 0;">      
    <div class="burger_b">  
      <div class="ccontainer">
        <div class="crow">
          <div class="ccol ccol-lg-6 mx-auto">
            <div class="profile_list">
              <div class="d-flex flex-justify-center">
                <div class="">
                  <a href="javascript:;" class="text-strong text-black px-1"><span class="profile_img mr-1"><img src="images/profile.png" /></span><span class="text text-underline">Lizzo</span></a>
                </div>
                <div class="">
                  <a href="javascript:;" class="text-strong text-black px-1"><span class="profile_img mr-1"><img src="images/dwayne.png" /></span><span class="text text-underline">Jacob Collier</span></a>
                </div>
              </div>
            </div>
            <div class="grid_section text-center">
              <div class="crow flex-justify-center">
                <div class="ccol ccol-sm-4">
                  <span class="box_circle age mr-05">21+</span> <strong>21 or older</strong>, valid ID required
                </div>
                <div class="ccol ccol-sm-4">
                  <span class="ticket_xs mr-05">3h</span> This ticket requires <strong>three service hours</strong>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="crow mt-2 flex-justify-center ticket_area">
          <div class="ccol ccol-md-3 ccol-sm-4">
            <div class="ticket ticket_lg">
              <!-- <img src="images/ticket.svg" alt="ticket" class="img-svg" /> -->
              <div class="ticket_cnt">
                <div class="mb-auto">
                  <h3>3 hours</h3>
                  <p>Cash in <strong>three hours</strong> of community service to get a free ticket to this event.</p>
                </div>
                <div>
                  <a href="checkout.php" class="cbtn cbtn-secondary arrow cbtn-block text-left">Get my ticket </a>
                </div>
              </div>
            </div>
          </div>
          <div class="ccol ccol-md-3 ccol-sm-4">
            <h3 class="heading_2 mb-1">Lizzo @ The Andrew Brady Music Center</h3>
            <ul class="list">
              <li> <span class="check_warning"></span> Outdoor event</li>
              <li> <span class="check_primary"></span> Doors at <strong>TIME</strong></li>
              <li> <span class="check_info"></span> Show at <strong>TIME</strong></li>
              <li> <span class="check_dark"></span> 25 Race St, Cincinnati, OH 45202</li>
            </ul>
          </div>
        </div>

        <div class="crow mt-2 flex-justify-center">
          <div class="ccol ccol-md-6 ccol-sm-8">
            <hr />
            <h2 class="heading_1">About the venue</h2>
            <p class="mb-0">{{trans('panel.site_title')}} is a non-profit music festival aimed at connecting the community through service, art, and music. {{trans('panel.site_title')}} is a non-profit music festival aimed at connecting the community through service, art, and music. {{trans('panel.site_title')}} is a non-profit music festival aimed at connecting the community through service, art, and music.</p>
            <a href="javascript:;" class="text-primary small text-strong">Prohibited items 🡢</a>
            <h4 class="mt-3">See the seating chart</h4>
            <img src="images/floor_plan.png" alt="floor_plan" class="w-100" />
          </div>
        </div>

        <div class="crow mt-2 flex-justify-center">
          <div class="ccol ccol-md-6 ccol-sm-8">
            <hr />
            <h2 class="heading_1">Ticket info</h2>
            <p>{{trans('panel.site_title')}} is a non-profit music festival aimed at connecting the community through service, art, and music. {{trans('panel.site_title')}} is a non-profit music festival aimed at connecting the community through service, art, and music. {{trans('panel.site_title')}} is a non-profit music festival aimed at connecting the community through service, art, and music.</p>
          </div>
        </div>

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

@endsection
@section('scripts')
  <script>
    $(document).ready(function() {
      $(".inner_nav a").removeClass("active")
      $("#details").addClass("active");
    });
  </script>

  <script type="text/javascript">
    $(document).ready(function() {
      $(".accordion h2").click(function() {
        $(this).toggleClass("open");
        var id = this.id; 
        $(".accordion-content").each(function() {
          if ($("#" + id).next()[0].id != this.id) {
            $(this).slideUp("slow");
            $('.detail-row').each(function(){
              if($(this).attr('id') != id){
                //alert($(this).html());
                $(this).removeClass('open');
              }
            });
            
          }
        });
        $(this).next().slideToggle();
      });
    });
  </script>
@endsection