@extends('front.app')
@section('content')
    <section class="wrapper bg-soft-primary">
        <div class="container  pt-10 pb-15 pt-md-14">
            <div class="row gx-lg-8 gx-xl-12 gy-10 mb-5 align-items-center">
                <div class="col-md-10 offset-md-1 offset-lg-0 col-lg-5 text-center text-lg-start order-2 order-lg-0"
                    data-cues="slideInDown" data-group="page-title" data-delay="600">
                    <h1 class="display-1 mb-5 mx-md-n5 mx-lg-0">{{ trans('module.transport_title') }}</h1>
                </div>
            </div>
        </div>
        <!-- /.container -->
    </section>
    <section class="wrapper bg-light">
        <div class="container py-14 py-md-16">

            <ul class="nav nav-tabs nav-tabs-basic">
                @foreach($lines as $line)
                  @if($loop->index == 0)
                    <li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab{{$line->id}}">{{$line->title}}</a> </li>
                  @else
                    <li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab{{$line->id}}">{{$line->title}}</a> </li>
                  @endif
                @endforeach
            </ul>
              <!-- /.nav-tabs -->
              <div class="tab-content mt-0 mt-md-5">
                @foreach($lines as $line)
                  @if($loop->index == 0)
                    <div class="tab-pane fade show active" id="tab{{$line->id}}">
                  @else
                    <div class="tab-pane fade" id="tab{{$line->id}}">
                  @endif
                      <div class="row">
                          <div class="col-xl-12 mx-auto">
                            <div class="card">
                              <div class="row gx-0">
                                <div class="col-lg-6 align-self-stretch">
                                  <div class="map map-full rounded-top rounded-lg-start">
                                    <show-map :payload="{{@$line->transport_stations}}" :multiple="true"></show-map> 
                                  </div>
                                  <!-- /.map -->
                                </div>
                                <!--/column -->
                                <div class="col-lg-6">
                                  <div class="p-10 p-md-11 p-lg-14">
                                    <div class="d-flex flex-row">
                                      <div>
                                        <div class="icon text-primary fs-28 me-4 mt-n1"> <i class="uil uil-location-pin-alt"></i> </div>
                                      </div>
                                      <div class="align-self-start justify-content-start">
                                        <h5 class="mb-1">Statii:</h5>
                                        <p>
                                          @foreach($line->transport_stations_away as $station)
                                            {{$station->title}} -
                                          @endforeach         
                                          Intoarcere
                                          @foreach($line->transport_stations_back as $station)
                                            - {{$station->title}}
                                          @endforeach
                                          - Baza
                                        </p>
                                      </div>
                                    </div>
                                    <!--/div -->
                                    <div class="d-flex flex-row">
                                      <div>
                                        <div class="icon text-primary fs-28 me-4 mt-n1"> <i class="uil uil-clock"></i> </div>
                                      </div>
                                      <div>
                                        <h5 class="mb-1">Interval</h5>
                                        <p>
                                          @foreach($line->transport_stations_away as $station)
                                            {{$station->pivot->times ?? 'N/A'}} -
                                          @endforeach         
                                          Intoarcere
                                          @foreach($line->transport_stations_back as $station)
                                            - {{$station->pivot->times ?? 'N/A'}}
                                          @endforeach
                                          - Baza
                                        </p>
                                      </div>
                                    </div>
                                    <!--/div -->
                            
                                    <!--/div -->
                                  </div>
                                  <!--/div -->
                                </div>
                                <!--/column -->
                              </div>
                              <!--/.row -->
                            </div>
                            <!-- /.card -->
                          </div>
                          <!-- /column -->
                        </div>
                        <!-- /section -->      
                  </div>
                @endforeach


                <!--/.tab-pane -->
                <!-- <div class="tab-pane fade" id="tab2">
                  aaaaaa
                </div> -->
                <!--/.tab-pane -->
                <!-- <div class="tab-pane fade" id="tab3">
                  aaaaasdasdasda
                </div> -->
                <!--/.tab-pane -->
              </div>
              <!-- /.tab-content -->
        </div>
        <!-- /.container -->
    </section>
@endsection