@extends('backend.layouts.app')

@section( 'content' )

<style type="text/css">
   

    .owl-theme .owl-dots {
      margin-top: -20px;
      position: relative;
    }

    .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
      display: none;
    }
    .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot span {
      display: none;
    }
</style>
  @section('after-styles')

    <link rel="stylesheet" href="{{ asset('css/backend/party-booking/index.css') }}"  type="text/css" />
    <link rel="stylesheet" href="{{ asset('css/backend/party-booking/carousel/customize.css') }}"  type="text/css" />
    <link rel="stylesheet" href="{{ asset('css/backend/party-booking/carousel/owl-carousel.css') }}"  type="text/css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
  @endsection
  
  <div class="row justify-content-center">
    <div class="col-sm-12 col-md-12 col-lg-6 col-xl-5">
      <form action="" name="book_party_form" id="book_party_form">
          {{ csrf_field() }}

          <div class="col-12 mt-3 text-center">
            <img src='{{ asset("/uploads/brand/$brand_logo") }}' id="img-logo" alt="" height="70">
          </div>
          
          <div id="wizard">
            <!-- SECTION 1 -->
              <h4></h4>
              <section>
                <div class="">
                  @include('backend.booking.book_a_party.party-reservation')
                </div>
              </section> 

              <h4></h4>
              <section>
                  @include('backend.booking.book_a_party.party-details')
              </section>

              <h4></h4>
              <section>
                  @include('backend.booking.book_a_party.party-information')
              
              </section> 

              <h4></h4>
              <section>
                  @include('backend.booking.book_a_party.booking-submitted')
              </section>
          </div>
      </form>
    </div>
  </div> 
@endsection
  
@section('after-scripts')
    <script src="{{ asset( 'js/booking/owl-carousel.js' ) }}"></script>
    <script src="{{ asset('js/plugins/jquery-step/step.js') }}" type="text/javascript"></script>
    <script src="{{ asset( 'js/booking/book-a-party.js' ) }}"></script>
@endsection