@extends('layouts.app')
@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Book Event</h4>
                    <p class="card-title-desc"></p>
                    @php 
                        if( $event !=false ){
                            $data = (object) [];
                            $data->price = $event->per_seat_cost;
                            $data->number_of_seats = 1;
                            $data->total_amount = $event->per_seat_cost*1;
                        }
                    @endphp
                    {{ Form::model($data ?? '', ['route'=>['bookings.store'],'files' => 'true', 'class' => '', 'id' => 'submit-form', 'autocomplete' => 'off']) }}

                       <div class="row mb-4">
                            <div class="col-md-12">
                                <label class="col-sm-12 col-form-label">User</label>
                                <div class="col-sm-12">
                                    <select class="form-control select2-ajax-usernames" name="user_id">
                                        @if(isset($user) && $user != false)
                                            <option selected value="{{$user->id}}">{{$user->name}} ({{$user->id}})</option>
                                        @endif
                                    </select>
                                </div>    
                            </div>    

                            <div class="col-md-6">
                                <label class="col-sm-12 col-form-label">Select Event</label>
                                <div class="col-sm-12">
                                    <select class="form-control select2-ajax-events" name="event_id" data-events="valid">
                                        @if(isset($event) && $event != false)
                                            <option selected value="{{$event->id}}">{{$event->title}}</option>
                                        @endif
                                    </select>
                                </div>    
                            </div>  

                            <div class="col-md-2">
                                <label class="col-sm-12 col-form-label">Book Seats</label>
                                <div class="col-sm-12">
                                    {{Form::number('number_of_seats',null,['class'=>'form-control','placeholder'=>'No. of seats'])}}
                                </div>
                            </div>                              
                            <div class="col-md-2">
                                <label class="col-sm-12 col-form-label">Ticket Price</label>
                                <div class="col-sm-12">
                                    {{Form::number('price',null,['class'=>'form-control','placeholder'=>'Ticket Price','readonly'=>'readonly'])}}
                                </div>
                            </div>                              
                            <div class="col-md-2">
                                <label class="col-sm-12 col-form-label">Total Amount </label>
                                <div class="col-sm-12">
                                    {{Form::number('total_amount',null,['class'=>'form-control','placeholder'=>'Total Amount','readonly'=>'readonly','disabled'=>'disabled'])}}
                                </div>
                            </div>  

                            <div class="col-md-6">     
                                <label class="col-sm-12 col-form-label">Booking Date</label>                       
                                <div class="col-sm-12">
                                    {{Form::text('booking_date',null,['class'=>'form-control datepicker','placeholder'=>'Select booking date'])}}
                                </div>    
                            </div>    

                            <div class="col-md-3">
                                <label class="col-sm-12 col-form-label">Start Time</label>
                                <div class="col-sm-12">
                                    {{Form::text('start_time',null,['class'=>'form-control timepicker','placeholder'=>'Start Time'])}}
                                </div>
                            </div>            

                            <div class="col-md-3">
                                <label class="col-sm-12 col-form-label">End Time</label>
                                <div class="col-sm-12">
                                    {{Form::text('end_time',null,['class'=>'form-control timepicker','placeholder'=>'End Time'])}}
                                </div>
                            </div>     
                       </div>     
                        <input type="hidden" name="id" value="{{$data->id ?? ''}}">
                        <div class="d-flex flex-wrap gap-2">
                            <button type="submit" class="btn btn-primary waves-effect waves-light" id="submit-btn">Submit</button>
                            <a href="{{url()->previous()}}" class="btn btn-secondary waves-effect">Back</a>
                        </div>        
                    {{Form::close()}}
                   
                </div>
            </div>
        </div> <!-- end col -->
    </div> 
</div>
@endsection


<script src="https://js.stripe.com/v3/"></script>

<script type="text/javascript">
    var stripe = Stripe('{{env('STRIPE_PUBLISH_KEY')}}');
    var elements = stripe.elements();

    // Custom styling can be passed to options when creating an Element.
    var style = {
      base: {
        // Add your base input styles here. For example:
        fontSize: '16px',
        color: '#32325d',
      },
    };

    // Create an instance of the card Element.
    var card = elements.create('card', {style: style});

    // Add an instance of the card Element into the `card-element` <div>.
    card.mount('#card-element');



    var form = document.getElementById('payment-form');
    form.addEventListener('submit', function(event) {
      event.preventDefault();

      stripe.createToken(card).then(function(result) {
        if (result.error) {
          // Inform the customer that there was an error.
          var errorElement = document.getElementById('card-errors');
          errorElement.textContent = result.error.message;
        } else {
          // Send the token to your server.
          stripeTokenHandler(result.token);
        }
      });
    });    

</script>