@extends('client.layouts.app')

@section("content")
    <div class="wrapper">
      <div class="content-header">
        <div class="container">
          <div class="pt-4">
            <h2 class="title before:bg-[url('../images/icon01.png')]">打卡紀錄</h2>
          </div>
        </div>
      </div>
      <div class="bg-gary">
        <div class="grid grid-cols-2 lg:grid-cols-3 lg:w-fit lg:mx-auto [&amp;&gt;div]:py-4 [&amp;&gt;div]:border-[#cccccc] lg:[&amp;&gt;div]:py-8 [&amp;&gt;div&gt;div]:w-fit [&amp;&gt;div&gt;div]:mx-auto lg:[&amp;&gt;div&gt;div]:w-auto lg:[&amp;&gt;div&gt;div]:px-12 [&amp;_h4]:font-medium 2xl:[&amp;_h4]:text-2xl [&amp;_p]:text-3xl [&amp;_p]:font-black  [&amp;_p]:text-[#999999] md:[&amp;_p]:text-5xl 2xl:[&amp;_p]:text-6xl [&amp;_small]:text-[70%] [&amp;_small]:font-bold">
          <div class="border-r lg:border-none">
            <div>
              <h4>起始里程</h4>
              @if( $client->mileage != null || $client->mileage != '' || isset($client->mileage) )
              <p>{{$client->mileage}} <small>KM</small></p>
              @else
              <p>尚未輸入 <small>KM</small></p>
              @endif
            </div>
          </div>
          <div class="lg:border-l lg:border-r">
            <div>
              <h4>最新里程</h4>
              @if( $client->mileage != null || $client->mileage != '' || isset($client->mileage) )
              <p>{{$client->mileage_end}} <small>KM</small></p>
              @else
              <p>尚未輸入 <small>KM</small></p>
              @endif
            </div>
          </div>
          <div class="col-span-2 border-t lg:col-span-1 lg:border-none">
            <div>
              <h4>累積里程</h4>

              @if( $client->mileage != null || $client->mileage != '' || isset($client->mileage) )
              <p><span class="text-[#cc0033]">{{$client->mileage_end - $client->mileage }}</span>  <small>KM</small></p>
              @else
              <p><span class="text-[#cc0033]">尚未輸入</span> <small>KM</small></p>
              @endif
            </div>
          </div>
        </div>
      </div>
      <div class="content-inner">
        <div class="container">
              <div class="py-8">
                <h2 class="border-l-[6px] border-[#cc0033] pl-2 text-2xl font-medium leading-[1.2] mb-4 2xl:text-4xl 2xl:border-l-[12px] 2xl:pl-4">北部景點</h2>
                <ul class="lg:grid lg:grid-cols-2 lg:gap-x-7">
                      @foreach($zone1 as $k => $v)
                      <li class="bg-white my-4 shadow-md lg:my-3">
                        <div class="grid grid-cols-2 lg:grid-cols-[204px_1fr] 2xl:grid-cols-[294px_1fr]">
                          <div class="text-center flex items-center">
                            <div class="w-full px-4 md:[&amp;_.btn]:max-w-[180px] md:[&amp;_.btn]:mx-auto lg:px-[24px] lg:[&amp;_.btn]:max-w-full">
                                                            @if(count($client->$test))
                              <h3 class="text-xl font-bold text-[#cc0033] mb-3 lg:text-left lg:h-[4em] 2xl:text-3xl">{{$v->name}}</h3><a class="btn btn-gary !block !px-4" href="#">已完成打卡</a>
                              @else
                              <h3 class="text-xl font-bold text-[#cc0033] mb-3 lg:text-left lg:h-[4em] 2xl:text-3xl">{{$v->name}}</h3><a class="btn btn-red !block !px-4" href="/upload/{{$v->id}}">前往打卡</a>
                              @endif
                            </div>
                          </div>
                          <div class="p-2 pl-0">
                            <iframe class="w-full min-h-[200px] 2xl:min-h-[224px]" src="{{$v->map}}" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                          </div>
                        </div>
                      </li>
                      @endforeach
                </ul>
              </div>
              <div class="py-8">
                <h2 class="border-l-[6px] border-[#cc0033] pl-2 text-2xl font-medium leading-[1.2] mb-4 2xl:text-4xl 2xl:border-l-[12px] 2xl:pl-4">中部景點</h2>
                <ul class="lg:grid lg:grid-cols-2 lg:gap-x-7">
                      @foreach($zone2 as $k => $v)
                      <li class="bg-white my-4 shadow-md lg:my-3">
                        <div class="grid grid-cols-2 lg:grid-cols-[204px_1fr] 2xl:grid-cols-[294px_1fr]">
                          <div class="text-center flex items-center">
                            <div class="w-full px-4 md:[&amp;_.btn]:max-w-[180px] md:[&amp;_.btn]:mx-auto lg:px-[24px] lg:[&amp;_.btn]:max-w-full">
                                                            @if(count($client->$test))
                              <h3 class="text-xl font-bold text-[#cc0033] mb-3 lg:text-left lg:h-[4em] 2xl:text-3xl">{{$v->name}}</h3><a class="btn btn-gary !block !px-4" href="#">已完成打卡</a>
                              @else
                              <h3 class="text-xl font-bold text-[#cc0033] mb-3 lg:text-left lg:h-[4em] 2xl:text-3xl">{{$v->name}}</h3><a class="btn btn-red !block !px-4" href="/upload/{{$v->id}}">前往打卡</a>
                              @endif
                            </div>
                          </div>
                          <div class="p-2 pl-0">
                            <iframe class="w-full min-h-[200px] 2xl:min-h-[224px]" src="{{$v->map}}" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                          </div>
                        </div>
                      </li>
                      @endforeach
                </ul>
              </div>
              <div class="py-8">
                <h2 class="border-l-[6px] border-[#cc0033] pl-2 text-2xl font-medium leading-[1.2] mb-4 2xl:text-4xl 2xl:border-l-[12px] 2xl:pl-4">南部景點</h2>
                <ul class="lg:grid lg:grid-cols-2 lg:gap-x-7">
                      @foreach($zone3 as $k => $v)
                      <li class="bg-white my-4 shadow-md lg:my-3">
                        <div class="grid grid-cols-2 lg:grid-cols-[204px_1fr] 2xl:grid-cols-[294px_1fr]">
                          <div class="text-center flex items-center">
                            <div class="w-full px-4 md:[&amp;_.btn]:max-w-[180px] md:[&amp;_.btn]:mx-auto lg:px-[24px] lg:[&amp;_.btn]:max-w-full">
                                                            @if(count($client->$test))
                              <h3 class="text-xl font-bold text-[#cc0033] mb-3 lg:text-left lg:h-[4em] 2xl:text-3xl">{{$v->name}}</h3><a class="btn btn-gary !block !px-4" href="#">已完成打卡</a>
                              @else
                              <h3 class="text-xl font-bold text-[#cc0033] mb-3 lg:text-left lg:h-[4em] 2xl:text-3xl">{{$v->name}}</h3><a class="btn btn-red !block !px-4" href="/upload/{{$v->id}}">前往打卡</a>
                              @endif
                            </div>
                          </div>
                          <div class="p-2 pl-0">
                            <iframe class="w-full min-h-[200px] 2xl:min-h-[224px]" src="{{$v->map}}" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                          </div>
                        </div>
                      </li>
                      @endforeach
                </ul>
              </div>
              <div class="py-8">
                <h2 class="border-l-[6px] border-[#cc0033] pl-2 text-2xl font-medium leading-[1.2] mb-4 2xl:text-4xl 2xl:border-l-[12px] 2xl:pl-4">東部景點</h2>
                <ul class="lg:grid lg:grid-cols-2 lg:gap-x-7">
                      @foreach($zone4 as $k => $v)
                      <li class="bg-white my-4 shadow-md lg:my-3">
                        <div class="grid grid-cols-2 lg:grid-cols-[204px_1fr] 2xl:grid-cols-[294px_1fr]">
                          <div class="text-center flex items-center">
                            <div class="w-full px-4 md:[&amp;_.btn]:max-w-[180px] md:[&amp;_.btn]:mx-auto lg:px-[24px] lg:[&amp;_.btn]:max-w-full">
                                                            @if(count($client->$test))
                              <h3 class="text-xl font-bold text-[#cc0033] mb-3 lg:text-left lg:h-[4em] 2xl:text-3xl">{{$v->name}}</h3><a class="btn btn-gary !block !px-4" href="#">已完成打卡</a>
                              @else
                              <h3 class="text-xl font-bold text-[#cc0033] mb-3 lg:text-left lg:h-[4em] 2xl:text-3xl">{{$v->name}}</h3><a class="btn btn-red !block !px-4" href="/upload/{{$v->id}}">前往打卡</a>
                              @endif
                            </div>
                          </div>
                          <div class="p-2 pl-0">
                            <iframe class="w-full min-h-[200px] 2xl:min-h-[224px]" src="{{$v->map}}" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                          </div>
                        </div>
                      </li>
                      @endforeach
                </ul>
              </div>
          <div class="text-center pb-4">
            <h2 class="text-lg font-medium 2xl:text-2xl">目前累積</h2><strong class="text-[#cc0033] text-5xl font-black lg:text-5xl 2xl:text-6xl">
              
              {{ count($client->client_detail) }}

            </strong>
          </div>
        </div>
      </div>
    </div>

@endsection

@section("script")
<script type="text/javascript">
    @include("partials.message")
</script>
@stop