@extends('layouts/guest/masters.master')

@section('opengraph')
<!-- Search Engine Optimization by Rank Math - http://s.rankmath.com/home -->
@endsection

@section('tittle','VOICES AND BEATS [ EVENTS MANAGEMENT ] | BUY TICKET')

@section('content')  
 <div class="page-content">
  <div class="bg-cover bg-liveband-stage">
    <div class="h-64 flex items-center justify-center bg-black bg-opacity-50">
      <h1 class="text-lg md:text-2xl font-opensans-bold text-white text-center">
        HOME&nbsp;&nbsp;>&nbsp;&nbsp;EVENT&nbsp;&nbsp;>&nbsp;&nbsp;<span class="text-lime-500">BUY TICKET</span>
      </h1>
    </div>
   </div>

  <div class="flex justify-center py-5 px-3 md:p-10">
    <div class="w-full md:w-1/2 space-y-5">
       <div class="flex justify-center">
        <div class="flex space-x-5">
          <div class="h-16 w-16">
            <img class="h-full w-full  rounded-full" src="{{ asset('assets/images/logo.png') }}">
          </div>
          <div class="flex flex-col border-b border-lime-500">
            <div class="font-opensans-bold">
              <h1>{{ $event->tittle }}</h1>
            </div>
            <div class="text-sm flex-grow uppercase flex items-center">
              By Voices & Beats
            </div>
          </div>
         </div>
        </div> 

        @if(Session::has('message-error'))
          <div class="capitalize bg-red-600 rounded-sm p-2 text-center text-white text-sm font-opensans-bold">
            {{ Session::get('message-error') }}
          </div>
        @endif

        <div class="border border-gray-500 rounded-sm">
          <form action="{{ route('ticket_process' , $event->id) }}" method="post" enctype="multipart/form-data">
            @csrf
            <div class="p-3 md:p-5 space-y-4">
             <div class="flex flex-col md:flex-row space-y-4 md:space-x-5 md:space-y-0">
               <div class="flex-1 space-y-1">
                <label class="font-opensans-bold">First Name</label>
                <input type="text" name="firstname" class="border border-gray-300 bg-white w-full focus:outline-none p-1 rounded-sm @error('firstname') border-red-500 @enderror" value="{{old('firstname')}}">

                 @error('firstname')
                  <div class="text-red-500 text-sm font-opensans-bold">
                    {{$message}}
                  </div>
                 @enderror
               </div>

               <div class="flex-1 space-y-1">
                <label class="font-opensans-bold">Last Name</label>
                <input type="text" name="lastname" class="border border-gray-300 bg-white w-full focus:outline-none p-1 rounded-sm @error('lastname') border-red-500 @enderror" value="{{old('lastname')}}">

                @error('lastname')
                  <div class="text-red-500 text-sm font-opensans-bold">
                    {{$message}}
                  </div>
                @enderror
               </div>
             </div>  

             <div class="space-y-1">
               <label class="font-opensans-bold">Email</label>
               <input type="email" name="email" class="border border-gray-300 bg-white w-full focus:outline-none p-1 rounded-sm @error('email') border-red-500 @enderror" value="{{old('email')}}">

               @error('email')
                  <div class="text-red-500 text-sm font-opensans-bold">
                    {{$message}}
                  </div>
               @enderror
             </div>

             <div class="space-y-1">
               <label class="font-opensans-bold">Phone no.</label>
               <input type="text" name="phone" class="border border-gray-300 bg-white w-full focus:outline-none p-1 rounded-sm @error('phone') border-red-500 @enderror" value="{{old('phone')}}">

               @error('phone')
                  <div class="text-red-500 text-sm font-opensans-bold">
                    {{$message}}
                  </div>
               @enderror
             </div>
             
             <hr class="border border-lime-500">

             <div class="space-y-1">
              <label class="font-opensans-bold">Ticket Price</label>

              <div class="grid gap-2 md:grid-cols-2">
               @if($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','kids')->pluck('id')->first(),['early_price'])->pivot->early_price != null || $event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','kids')->pluck('id')->first(),['gate_price'])->pivot->gate_price != null ) 
                <div class="flex space-x-2 items-center">
                  @if(Carbon\Carbon::now()->addDays(6) <= $event->date && $event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','kids')->pluck('id')->first(),['early_price'])->pivot->early_price != null)
                    <div>
                      <input type="radio" name="price" value="{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','kids')->pluck('id')->first(),['early_image'])->pivot->early_image}},{{ $event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','kids')->pluck('id')->first())->tickets_given }},{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','kids')->pluck('id')->first(),['early_price'])->pivot->early_price}}" price="{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','kids')->pluck('id')->first(),['early_price'])->pivot->early_price}}">
                    </div>
                    <div class="flex space-x-2 items-center text-sm">
                      <label class="font-opensans-bold text-green-600">KIDS:</label>
                      <div class="font-opensans-bold text-red-500">
                        Ugx {{ number_format($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','kids')->pluck('id')->first(),['early_price'])->pivot->early_price) }} 
                      </div>
                    </div>      
                   @elseif($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','kids')->pluck('id')->first(),['gate_price'])->pivot->gate_price == null)
                    <div>
                      <input type="radio" name="price" value="{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','kids')->pluck('id')->first(),['early_image'])->pivot->early_image}},{{ $event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','kids')->pluck('id')->first())->tickets_given }},{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','kids')->pluck('id')->first(),['early_price'])->pivot->early_price}}" price="{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','kids')->pluck('id')->first(),['early_price'])->pivot->early_price}}">
                    </div>
                    <div class="flex space-x-2 items-center text-sm">
                      <label class="font-opensans-bold text-green-600">KIDS:</label>
                      <div class="font-opensans-bold text-red-500">
                        Ugx {{ number_format($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','kids')->pluck('id')->first(),['early_price'])->pivot->early_price) }}
                      </div>
                    </div>  
                   @else
                    <div>
                      <input type="radio" name="price" value="{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','kids')->pluck('id')->first(),['gate_image'])->pivot->gate_image}},{{ $event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','kids')->pluck('id')->first())->tickets_given }},{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','kids')->pluck('id')->first(),['gate_price'])->pivot->gate_price}}" price="{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','kids')->pluck('id')->first(),['gate_price'])->pivot->gate_price}}">
                    </div>
                    <div class="flex space-x-2 items-center text-sm">
                      <label class="font-opensans-bold text-green-600">KIDS:</label>
                      <div class="font-opensans-bold text-red-500">
                        Ugx {{ number_format($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','kids')->pluck('id')->first(),['gate_price'])->pivot->gate_price) }}
                      </div>
                    </div>     
                   @endif
                 </div>
                @endif 

               @if($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ordinary')->pluck('id')->first(),['early_price'])->pivot->early_price != null || $event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ordinary')->pluck('id')->first(),['gate_price'])->pivot->gate_price != null) 
                <div class="flex space-x-2 items-center">
                  @if(Carbon\Carbon::now()->addDays(6) <= $event->date && $event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ordinary')->pluck('id')->first(),['early_price'])->pivot->early_price != null)
                    <div>
                      <input type="radio" name="price" value="{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ordinary')->pluck('id')->first(),['early_image'])->pivot->early_image}},{{ $event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ordinary')->pluck('id')->first())->tickets_given }},{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ordinary')->pluck('id')->first(),['early_price'])->pivot->early_price}}" price="{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ordinary')->pluck('id')->first(),['early_price'])->pivot->early_price}}" checked>
                    </div>
                    <div class="flex space-x-2 items-center text-sm">
                      <label class="font-opensans-bold text-green-600">ORD:</label>
                      <div class="font-opensans-bold text-red-500">
                        Ugx {{ number_format($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ordinary')->pluck('id')->first(),['early_price'])->pivot->early_price) }}
                      </div>
                    </div>      
                   @elseif($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ordinary')->pluck('id')->first(),['gate_price'])->pivot->gate_price == null)
                    <div>
                      <input type="radio" name="price" value="{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ordinary')->pluck('id')->first(),['early_image'])->pivot->early_image}},{{ $event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ordinary')->pluck('id')->first())->tickets_given }},{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ordinary')->pluck('id')->first(),['early_price'])->pivot->early_price}}" price="{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ordinary')->pluck('id')->first(),['early_price'])->pivot->early_pricey}}" checked>
                    </div>
                    <div class="flex space-x-2 items-center text-sm">
                      <label class="font-opensans-bold text-green-600">ORD:</label>
                      <div class="font-opensans-bold text-red-500">
                        Ugx {{ number_format($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ordinary')->pluck('id')->first(),['early_price'])->pivot->early_price) }}
                      </div>
                    </div>  
                   @else
                    <div>
                      <input type="radio" name="price" value="{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ordinary')->pluck('id')->first(),['gate_image'])->pivot->gate_image}},{{ $event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ordinary')->pluck('id')->first())->tickets_given }},{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ordinary')->pluck('id')->first(),['gate_price'])->pivot->gate_price}}" price="{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ordinary')->pluck('id')->first(),['gate_price'])->pivot->gate_price}}" checked>
                    </div>
                    <div class="flex space-x-2 items-center text-sm">
                      <label class="font-opensans-bold text-green-600">ORD:</label>
                      <div class="font-opensans-bold text-red-500">
                        Ugx {{ number_format($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ordinary')->pluck('id')->first(),['gate_price'])->pivot->gate_price) }}
                      </div>
                    </div>     
                   @endif
                 </div>
                @endif

               @if($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','vip')->pluck('id')->first(),['early_price'])->pivot->early_price != null || $event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','vip')->pluck('id')->first(),['gate_price'])->pivot->gate_price != null) 
                <div class="flex space-x-2 items-center">
                  @if(Carbon\Carbon::now()->addDays(6) <= $event->date && $event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','vip')->pluck('id')->first(),['early_price'])->pivot->early_price != null)
                    <div>
                      <input type="radio" name="price" value="{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','vip')->pluck('id')->first(),['early_image'])->pivot->early_image}},{{ $event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','vip')->pluck('id')->first())->tickets_given }},{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','vip')->pluck('id')->first(),['early_price'])->pivot->early_price}}" price="{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','vip')->pluck('id')->first(),['early_price'])->pivot->early_price}}">
                    </div>
                    <div class="flex space-x-2 items-center text-sm">
                      <label class="font-opensans-bold text-green-600">VIP:</label>
                      <div class="font-opensans-bold text-red-500">
                        Ugx {{ number_format($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','vip')->pluck('id')->first(),['early_price'])->pivot->early_price) }}
                      </div>
                    </div>      
                   @elseif($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','vip')->pluck('id')->first(),['gate_price'])->pivot->gate_price == null)
                    <div>
                      <input type="radio" name="price" value="{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','vip')->pluck('id')->first(),['early_image'])->pivot->early_image}},{{ $event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','vip')->pluck('id')->first())->tickets_given }},{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','vip')->pluck('id')->first(),['early_price'])->pivot->early_price}}" price="{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','vip')->pluck('id')->first(),['early_price'])->pivot->early_price}}">
                    </div>
                    <div class="flex space-x-2 items-center text-sm">
                      <label class="font-opensans-bold text-green-600">VIP:</label>
                      <div class="font-opensans-bold text-red-500">
                        Ugx {{ number_format($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','vip')->pluck('id')->first(),['early_price'])->pivot->early_price) }}
                      </div>
                    </div>  
                   @else
                    <div>
                      <input type="radio" name="price" value="{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','vip')->pluck('id')->first(),['gate_image'])->pivot->gate_image}},{{ $event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','vip')->pluck('id')->first())->tickets_given }},{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','vip')->pluck('id')->first(),['gate_price'])->pivot->gate_price}}" price="{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','vip')->pluck('id')->first(),['gate_price'])->pivot->gate_price}}">
                    </div>
                    <div class="flex space-x-2 items-center text-sm">
                      <label class="font-opensans-bold text-green-600">VIP:</label>
                      <div class="font-opensans-bold text-red-500">
                        Ugx {{ number_format($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','vip')->pluck('id')->first(),['gate_price'])->pivot->gate_price) }}
                      </div>
                    </div>     
                   @endif
                 </div>
                @endif

              @if($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','table')->pluck('id')->first(),['early_price'])->pivot->early_price != null || $event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','table')->pluck('id')->first(),['gate_price'])->pivot->gate_price != null) 
                <div class="flex space-x-2 items-center">
                  @if(Carbon\Carbon::now()->addDays(6) <= $event->date && $event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','table')->pluck('id')->first(),['early_price'])->pivot->early_price != null)
                    <div>
                      <input type="radio" name="price" value="{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','table')->pluck('id')->first(),['early_image'])->pivot->early_image}},{{ $event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','table')->pluck('id')->first())->tickets_given }},{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','table')->pluck('id')->first(),['early_price'])->pivot->early_price}}" price="{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','table')->pluck('id')->first(),['early_price'])->pivot->early_price}}">
                    </div>
                    <div class="flex space-x-2 items-center text-sm">
                      <label class="font-opensans-bold text-green-600">TABLE:</label>
                      <div class="font-opensans-bold text-red-500">
                        Ugx {{ number_format($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','table')->pluck('id')->first(),['early_price'])->pivot->early_price) }}
                      </div>
                    </div>      
                   @elseif($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','table')->pluck('id')->first(),['gate_price'])->pivot->gate_price == null)
                    <div>
                      <input type="radio" name="price" value="{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','table')->pluck('id')->first(),['early_image'])->pivot->early_image}},{{ $event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','table')->pluck('id')->first())->tickets_given }},{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','table')->pluck('id')->first(),['early_price'])->pivot->early_price}}" price="{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','table')->pluck('id')->first(),['early_price'])->pivot->early_price}}">
                    </div>
                    <div class="flex space-x-2 items-center text-sm">
                      <label class="font-opensans-bold text-green-600">TABLE:</label>
                      <div class="font-opensans-bold text-red-500">
                        Ugx {{ number_format($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','table')->pluck('id')->first(),['early_price'])->pivot->early_price) }}
                      </div>
                    </div>  
                   @else
                    <div>
                      <input type="radio" name="price" value="{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','table')->pluck('id')->first(),['gate_image'])->pivot->gate_image}},{{ $event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','table')->pluck('id')->first())->tickets_given }},{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','table')->pluck('id')->first(),['gate_price'])->pivot->gate_price}}" price="{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','table')->pluck('id')->first(),['gate_price'])->pivot->gate_price}}">
                    </div>
                    <div class="flex space-x-2 items-center text-sm">
                      <label class="font-opensans-bold text-green-600">TABLE:</label>
                      <div class="font-opensans-bold text-red-500">
                        Ugx {{ number_format($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','table')->pluck('id')->first(),['gate_price'])->pivot->gate_price) }}
                      </div>
                    </div>     
                   @endif
                 </div>
                @endif

               @if($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ten for eight')->pluck('id')->first(),['early_price'])->pivot->early_price != null || $event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ten for eight')->pluck('id')->first(),['gate_price'])->pivot->gate_price != null) 
                <div class="flex space-x-2 items-center">
                  @if(Carbon\Carbon::now()->addDays(6) <= $event->date && $event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ten for eight')->pluck('id')->first(),['early_price'])->pivot->early_price != null)
                    <div>
                      <input type="radio" name="price" value="{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ten for eight')->pluck('id')->first(),['early_image'])->pivot->early_image}},{{ $event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ten for eight')->pluck('id')->first())->tickets_given }},{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ten for eight')->pluck('id')->first(),['early_price'])->pivot->early_price}}" price="{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ten for eight')->pluck('id')->first(),['early_price'])->pivot->early_price}}">
                    </div>
                    <div class="flex space-x-2 items-center text-sm">
                      <label class="font-opensans-bold text-green-600">TEN 4 EIGHT:</label>
                      <div class="font-opensans-bold text-red-500">
                        Ugx {{ number_format($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ten for eight')->pluck('id')->first(),['early_price'])->pivot->early_price) }}
                      </div>
                    </div>      
                   @elseif($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ten for eight')->pluck('id')->first(),['gate_price'])->pivot->gate_price == null)
                    <div>
                      <input type="radio" name="price" value="{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ten for eight')->pluck('id')->first(),['early_image'])->pivot->early_image}},{{ $event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ten for eight')->pluck('id')->first())->tickets_given }},{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ten for eight')->pluck('id')->first(),['early_price'])->pivot->early_price}}" price="{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ten for eight')->pluck('id')->first(),['early_price'])->pivot->early_price}}">
                    </div>
                    <div class="flex space-x-2 items-center text-sm">
                      <label class="font-opensans-bold text-green-600">TEN 4 EIGHT:</label>
                      <div class="font-opensans-bold text-red-500">
                        Ugx {{ number_format($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ten for eight')->pluck('id')->first(),['early_price'])->pivot->early_price) }}
                      </div>
                    </div>  
                   @else
                    <div>
                      <input type="radio" name="price" value="{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ten for eight')->pluck('id')->first(),['gate_image'])->pivot->gate_image}},{{ $event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ten for eight')->pluck('id')->first())->tickets_given }},{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ten for eight')->pluck('id')->first(),['gate_price'])->pivot->gate_price}}" price="{{$event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ten for eight')->pluck('id')->first(),['gate_price'])->pivot->gate_price}}">
                    </div>
                    <div class="flex space-x-2 items-center text-sm">
                      <label class="font-opensans-bold text-green-600">TEN 4 EIGHT:</label>
                      <div class="font-opensans-bold text-red-500">
                        Ugx {{ number_format($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ten for eight')->pluck('id')->first(),['gate_price'])->pivot->gate_price) }}
                      </div>
                    </div>     
                   @endif
                 </div>
                @endif
             </div>  
            </div> 

            <hr class="border border-lime-500">
            
            <div class="flex justify-between items-center">
             <div class="text-sm font-opensans-bold">
               TOTAL AMT : <span class="text-red-500" id="totalAmount">Ugx 0</span>
             </div>

             <div class="flex items-center space-x-2">
               <div id="decrement" class="decrement rounded-full flex items-center justify-center bg-lime-500 h-6 w-6 text-white text-sm cursor-pointer hover:bg-white hover:text-lime-500 hover:border hover:border-lime-500" onclick="decrementValue()">
                 <i class="fa fa-minus"></i>
               </div>
               <input type="text" name="qty" class="h-6 w-7 text-base font-opensans-bold text-center focus:outline-none" id="tickets" value="1" readonly="readonly">
               <div id="increment" class="increment rounded-full flex items-center justify-center bg-lime-500 h-6 w-6 text-white text-sm cursor-pointer hover:bg-white hover:text-lime-500 hover:border hover:border-lime-500"  onclick="incrementValue()">
                  <i class="fa fa-plus"></i>
               </div>
             </div>
            </div> 

             <hr class="border border-lime-500">
             
             <div class="flex justify-between items-center">

              {{-- To removed when momo-pay is ready --}}
              <div>
               <span class="font-opensans-bold text-white bg-gray-300  text-gray-600 w-full text-sm sm:text-base sm:w-36 rounded-md px-3 py-1 block text-center cursor-not-allowed">
                MOMO PAY
               </span>
              </div>
              {{--End to removed when momo-pay is ready --}} 

              {{-- 
               <div>
                 <input type="radio" name="payment_method" value="momo_pay" id="momo" hidden="true">
                  <button class="font-opensans-bold text-white bg-black text-white hover:bg-lime-500 w-full text-sm sm:text-base sm:w-36 rounded-md ">
                   <label for="momo" class="px-3 py-1 block">MOMO PAY</label> 
                  </button> 
               </div>
              --}} 
                
               <div>
                 <input type="radio" name="payment_method" value="flutter_wave" id="flutter_wave" hidden="true">
                  <button class="font-opensans-bold text-white bg-black text-white hover:bg-lime-500 w-full text-sm sm:text-base sm:w-36 rounded-md">
                   <label for="flutter_wave" class="px-3 py-1 block">FLUTTER WAVE</label> 
                  </button> 
               </div>  
             </div> 
            </div>
          </form>
        </div>
      
    </div>
  </div> 
 </div> 
@endsection

@section('script')
  <script>

    $('form input').keydown(function(e){
    if (e.keyCode == 13) {
      e.preventDefault();
      return false;
      }
    })

    $( document ).ready(function() {
      //Default state
      var defaultTicketPrice = $("input:radio[name=price]:checked");
      if (defaultTicketPrice.length>0) {
            ticketPrice(defaultTicketPrice);
      };

      function ticketPrice(selectedTicketPrice){

        var ticket_price = selectedTicketPrice.attr("price");
        var ticket = $('#tickets').val();

        var totalAmount = ticket_price * ticket;
        
        $('#totalAmount').html(totalAmount.toLocaleString());


      }

     $("input:radio[name=price]").bind('change','checked', function() {
        var selectedTicketPrice = $(this);
            ticketPrice(selectedTicketPrice);
      });
    })

    var increment = document.getElementById("increment");
    var decrement = document.getElementById("decrement");

    function incrementValue(){
      var defaultValue = $('#tickets').val();
      var defaultTicketPrice = $("input:radio[name=price]:checked").attr("price");

      if (defaultValue < 10){
        decrement.classList.remove('click-declined');
        defaultValue++;
      }

      else if (defaultValue == 10) {
        increment.classList.add('click-declined');
      }

      var incrementValue = defaultValue;
      $('#tickets').val(incrementValue);

      var incrementTotalAmount = defaultTicketPrice * incrementValue; 
      $('#totalAmount').html(incrementTotalAmount.toLocaleString());
    }


    function decrementValue(){
      var defaultValue = $('#tickets').val();
      var defaultTicketPrice = $("input:radio[name=price]:checked").attr("price");

      if (defaultValue > 1){
        increment.classList.remove('click-declined');
        defaultValue--;
      }

      else if (defaultValue == 1) {
        decrement.classList.add('click-declined');
      }

      var decrementValue = defaultValue;
      $('#tickets').val(decrementValue);

      var decrementTotalAmount = defaultTicketPrice * decrementValue; 
      $('#totalAmount').html(decrementTotalAmount.toLocaleString());
    }

  </script>
@endsection