@extends('template.main-apps')

@section('content')
<div class="page-content">
    <!--about start-->
    <section id="about" class="p-0 pos-r">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 ml-auto mr-auto">
                    <div class="owl-carousel owl-theme" data-items="1" data-autoplay="true">
                        @if($project->images->first())
                        @foreach($project->images as $i)
                        <div class="item mx-3 my-3">
                            <div class="img-box box-shadow">
                                <div class="box-loader"> <span></span>
                                <span></span>
                                <span></span>
                                </div>
                                <img class="img-center" src="{{ $i->image ? asset('media/' . $i->image) : asset('soft/images/banner/03.jpg') }}" alt="{{ \App\Http\Controllers\TemplateController::checkALtMedia($i->image) }}">
                            </div>
                        </div>
                        @endforeach
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--about end-->
    <!--tab start-->

<section class="pos-r o-hidden">
    <div class="bg-animation">
      <img class="zoom-fade" src="{{ asset('soft/images/pattern/03.png') }}" alt="">
    </div>
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <div class="tab style-2">
            <!-- Nav tabs -->
            <nav>
              <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <a class="nav-item nav-link active" id="nav-tab1" data-toggle="tab" href="#tab1-1" role="tab" aria-selected="true"> <i class="flaticon-data"></i> 
                  <h5>{{ $project->detail->title_1 }}</h5>
                </a> <a class="nav-item nav-link" id="nav-tab2" data-toggle="tab" href="#tab1-2" role="tab" aria-selected="false"><i class="flaticon-research"></i> <h5>{{ $project->detail->title_2 }}</h5></a>
                <a class="nav-item nav-link" id="nav-tab3" data-toggle="tab" href="#tab1-3" role="tab" aria-selected="false"><i class="flaticon-analytics"></i> <h5>{{ $project->detail->title_3 }}</h5></a>
                <a class="nav-item nav-link" id="nav-tab4" data-toggle="tab" href="#tab1-4" role="tab" aria-selected="false"><i class="flaticon-objective"></i> <h5>{{ $project->detail->title_4 }}</h5></a>
              </div>
            </nav>
            <!-- Tab panes -->
            <div class="tab-content" id="nav-tabContent">
              <div role="tabpanel" class="tab-pane fade show active" id="tab1-1">
                <div class="row align-items-center">
                  <div class="col-lg-6 col-md-12">
                    <img class="img-fluid" src="{{ $project->detail->image_1 ? asset('media/' . $project->detail->image_1) : asset('soft/images/svg/04.svg') }}" alt="{{ \App\Http\Controllers\TemplateController::checkALtMedia($project->detail->image_1) }}">
                  </div>
                  <div class="col-lg-6 col-md-12 md-mt-5">
                    <h4 class="mb-4">{!! $project->detail->big_title_1 !!}</h4>
                    <p class="mb-4">{!! $project->detail->small_title_1 !!}</p>
                    <ul class="custom-li list-unstyled list-icon-2 d-inline-block">
                    @php
                        $point_1 = json_decode($project->detail->point_1, true);
                    @endphp
                    @if($point_1)
                    @for($i = 0; $i <= count($point_1) - 1; $i++)
                        <li>{{ $point_1[$i] }}</li>
                    @endfor
                    @endif
                    </ul>
                  </div>
                </div>
              </div>
              <div role="tabpanel" class="tab-pane fade" id="tab1-2">
                <div class="row align-items-center">
                  <div class="col-lg-6 col-md-12">
                  <img class="img-fluid" src="{{ $project->detail->image_2 ? asset('media/' . $project->detail->image_2) : asset('soft/images/svg/05.svg') }}" alt="{{ \App\Http\Controllers\TemplateController::checkALtMedia($project->detail->image_2) }}">
                  </div>
                  <div class="col-lg-6 col-md-12 md-mt-5">
                    <h4 class="mb-4">{!! $project->detail->big_title_2 !!}</h4>
                    <p class="mb-4">{!! $project->detail->small_title_2 !!}</p>
                    <ul class="custom-li list-unstyled list-icon-2 d-inline-block">
                        @php
                        $point_2 = json_decode($project->detail->point_2, true);
                        @endphp
                        @if($point_2)
                        @for($i = 0; $i <= count($point_2) - 1; $i++)
                            <li>{{ $point_2[$i] }}</li>
                        @endfor
                        @endif
                    </ul>
                  </div>
                </div>
              </div>
              <div role="tabpanel" class="tab-pane fade" id="tab1-3">
                <div class="row align-items-center">
                  <div class="col-lg-6 col-md-12">
                    <img class="img-fluid" src="{{ $project->detail->image_3 ? asset('media/' . $project->detail->image_3) : asset('soft/images/svg/06.svg') }}" alt="{{ \App\Http\Controllers\TemplateController::checkALtMedia($project->detail->image_3) }}">
                  </div>
                  <div class="col-lg-6 col-md-12 md-mt-5">
                    <h4 class="mb-4">{!! $project->detail->big_title_3 !!}</h4>
                    <p class="mb-4">{!! $project->detail->small_title_3 !!}</p>
                    <ul class="custom-li list-unstyled list-icon-2 d-inline-block">
                        @php
                        $point_3 = json_decode($project->detail->point_3, true);
                        @endphp
                        @if($point_3)
                        @for($i = 0; $i <= count($point_3) - 1; $i++)
                            <li>{{ $point_3[$i] }}</li>
                        @endfor
                        @endif
                    </ul>
                  </div>
                </div>
              </div>
              <div role="tabpanel" class="tab-pane fade" id="tab1-4">
                <div class="row align-items-center">
                  <div class="col-lg-6 col-md-12">
                    <img class="img-fluid" src="{{ $project->detail->image_4 ? asset('media/' . $project->detail->image_4) : asset('soft/images/svg/07.svg') }}" alt="{{ \App\Http\Controllers\TemplateController::checkALtMedia($project->detail->image_4) }}">
                  </div>
                  <div class="col-lg-6 col-md-12 md-mt-5">
                    <h4 class="mb-4">{!! $project->detail->big_title_4 !!}</h4>
                    <p class="mb-4">{!! $project->detail->small_title_4 !!}</p>
                    <ul class="custom-li list-unstyled list-icon-2 d-inline-block">
                        @php
                        $point_4 = json_decode($project->detail->point_4, true);
                        @endphp
                        @if($point_4)
                        @for($i = 0; $i <= count($point_4) - 1; $i++)
                            <li>{{ $point_4[$i] }}</li>
                        @endfor
                        @endif
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</section>

<section id="blog" class="pos-r o-hidden">
  <div class="container">
    <div class="row text-center">
      <div class="col-lg-8 col-md-12 ml-auto mr-auto">
        <div class="section-title">
          <div class="title-effect title-effect-2">
            <div class="ellipse"></div> <i class="la la-btc"></i>
          </div>
          <h2 class="title">Related Projects</h2>
        </div>
      </div>
    </div>
    <div class="row">
      @if(!empty($related_projects))
      @php
          $no = 1;
      @endphp
      @foreach($related_projects as $r)
      <div class="col-lg-4 col-md-12 {{ $no > 1 ? 'md-mt-5' : '' }}">
        <div class="post">
          <div class="post-image">
            <img class="img-fluid w-100" src="{{ $r->image ? asset('media/' . $r->image) : asset('soft/images/blog/01.jpg')  }}" alt="{{ \App\Http\Controllers\TemplateController::checkALtMedia($r->image) }}" style="height:175px !important;">
          </div>
          <div class="post-desc">
            <div class="post-title">
              <h4><a href="{{ route('template.apps.project-detail', ['slug' => $r->slug]) }}">{{ $r->title }}</a></h4>
            </div>
          </div>
        </div>
      </div>
      @php
          $no++;
      @endphp
      @endforeach
      @endif
    </div>
  </div>
</section>
  
  <!--tab end-->
</div>
@endsection