@extends('eventManagement.layouts.master')
@section('content')
<style>
  .checked {
      color: orange;
  }

  .text-center {
      text-align: center;
  }

  a {
      color: tomato;
      text-decoration: none;
  }

  a:hover {
      color: #2196f3;
  }

  pre {
      display: block;
      padding: 9.5px;
      margin: 0 0 10px;
      font-size: 13px;
      line-height: 1.42857143;
      color: #333;
      word-break: break-all;
      word-wrap: break-word;
      background-color: #F5F5F5;
      border: 1px solid #CCC;
      border-radius: 4px;
  }

  .header {
      padding: 20px 0;
      position: relative;
      margin-bottom: 10px;

  }

  .header:after {
      content: "";
      display: block;
      height: 1px;
      background: #eee;
      position: absolute;
      left: 30%;
      right: 30%;
  }

  .header h2 {
      font-size: 3em;
      font-weight: 300;
      margin-bottom: 0.2em;
  }

  .header p {
      font-size: 14px;
  }



  #a-footer {
      margin: 20px 0;
  }

  .new-react-version {
      padding: 20px 20px;
      border: 1px solid #eee;
      border-radius: 20px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

      text-align: center;
      font-size: 14px;
      line-height: 1.7;
  }

  .new-react-version .react-svg-logo {
      text-align: center;
      max-width: 60px;
      margin: 20px auto;
      margin-top: 0;
  }





  .success-box {
      margin: 50px 0;
      padding: 10px 10px;
      border: 1px solid #eee;
      background: #f9f9f9;
  }

  .success-box img {
      margin-right: 10px;
      display: inline-block;
      vertical-align: top;
  }

  .success-box>div {
      vertical-align: top;
      display: inline-block;
      color: #888;
  }



  /* Rating Star Widgets Style */
  .rating-stars ul {
      list-style-type: none;
      padding: 0;

      -moz-user-select: none;
      -webkit-user-select: none;
  }

  .rating-stars ul>li.star {
      display: inline-block;

  }

  /* Idle State of the stars */
  .rating-stars ul>li.star>i.fa {
      font-size: 1.5em;
      /* Change the size of the stars */
      color: #ccc;
      /* Color on idle state */
  }

  /* Hover state of the stars */
  .rating-stars ul>li.star.hover>i.fa {
      color: #FFCC36;
  }

  /* Selected state of the stars */
  .rating-stars ul>li.star.selected>i.fa {
      color: #FF912C;
  }

</style>
<section class="section">
    <ul class="breadcrumb breadcrumb-style ">
     
      <li class="breadcrumb-item">
        <a href="#">
          <i data-feather="home"></i></a>
      </li>
      <li class="breadcrumb-item">Booking</li>
     
    </ul>
    <div class="section-body">
      <div class="row">
        <div class="col-12">
          <div class="card">
            <div class="card-header">
              <h4>Booking</h4>
                @if(session('success'))
                    <div class="alert alert-success">{{session('success')}}</div>