@extends('layouts.app7')
@section('title', 'Seat Map')
@section('content')
    @include('includes.alerts')
    <section id="about" data-stellar-background-ratio="0.5">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="row" style="margin-top: 25px; align-content: center; display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;">
                        {{__('text.company')}}: {{ $company }}<br>
                        {{__('text.bus')}} : {{ $bus }}<br>
                        Label : {{ $label }}<br>
                        {{__('text.departure')}} : {{ $departure }}<br>
                    </div>
                    <div class="row" style="margin-top: 25px; align-content: center; display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;">
                        <button class="btn-default" style="background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 6px;
  margin: 4px 4px;
  border-radius: 5px;"></button>{{__('text.available')}}
                        <button class="btn-default" style="background-color: #ffff61;
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 6px;
  margin: 4px 4px;
  border-radius: 5px;"></button>{{__('text.selected')}}
                        <button class="btn-default" style="background-color: #dd2c39;
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 6px;
  margin: 4px 4px;
  border-radius: 5px;"></button>{{__('text.taken')}}
                    </div>
                    <form method="get" enctype="multipart/form-data" action="#" class="wow fadeInUp" id="contact-form" role="form" data-wow-delay="0.8s">
                        @csrf
                        <div class="plane">
                            <div class="cockpit">
                                <h6>{{ $from }} - {{ $to }}<br>
                                    {{__('text.choose_seat')}}</h6>
                            </div>
                            <div class="exit exit--front fuselage"></div>
                            <input type="hidden" value="{{ $from }}" name="from"/>
                            <input type="hidden" value="{{ $to }}" name="to"/>
                            <input type="hidden" value="{{ $date }}" name="date"/>
                            <input type="hidden" value="{{ $returnDate ?? '' }}" name="rdate"/>
                            <input type="hidden" value="{{ $company }}" name="company"/>
                            <input type="hidden" value="{{ $bus }}" name="bus"/>
                            <input type="hidden" value="{{ $fare }}" name="fare"/>
                            <input type="hidden" value="{{ $departure }}" name="departure"/>
                            <input type="hidden" value="{{ $arrival }}" name="arrival"/>
                            <input type="hidden" value="{{ $hours }}" name="hours"/>
                            <input type="hidden" value="{{ $class }}" name="class"/>
                            <input type="hidden" value="{{ $schedule }}" name="schedule"/>
                            @php $view = 'v4seats.seat-map'; $bus = $busId; @endphp
                            @include($view)
                        </div>
                        <div class="row" style="margin-bottom: 10px; margin-top: 5px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center;">
                            <button type="submit" class="form-control" onclick="loadChartData();" style="background-color: #09496e; color: #f8f8f8; width: 200px; height: auto" id="cf-submit">{{__('text.proceed')}}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection