@extends('layouts/contentLayoutMaster')

@section('title', 'Transaction')

@section('vendor-style')
  <!-- vendor css files -->
  <link rel="stylesheet" href="{{ asset(('vendors/css/extensions/jquery.rateyo.min.css'))}}">
@endsection
@section('page-style')
  <!-- Page css files -->
  <link rel="stylesheet" href="{{ asset(('css/base/plugins/extensions/ext-component-ratings.css')) }}">
@endsection

@section('content')
<section>
  <h2 class="page-title font-bolder text-primary mb-2" data-id={{$data['id']}}>{{ __('locale.transaction') }}</h2>
</section>

<section class="container">
  <div class="row">
    <div class="col-md-8">
      <div class="card">
        <div class="card-header">
          <div class="form-group">
            <label for="">Invoice No</label>
            <h3>{{$data['invoice_no']}}</h3>
          </div>
          <div class="form-group">
            @switch($data['status'])
              @case(1)
                <span class="badge badge-light-warning mr-2 float-right">{{ __('locale.waiting_for_payment') }}</span>
                  @break
  
              @case(2)
                <span class="badge badge-light-warning mr-2 float-right">{{ __('locale.waiting_for_payment') }}</span>
                  @break

              @case(3)
                <span class="badge badge-light-primary mr-2 float-right">{{ __('locale.waiting_verify_payment') }}</span>
                  @break

              @case(4)
                <span class="badge badge-light-primary mr-2 float-right">{{ __('locale.waiting_confirmation') }}</span>
                  @break

              @case(5)
                <span class="badge badge-light-success mr-2 float-right">{{ __('locale.order_confirmed') }}</span>
                  @break

              @case(6)
                <span class="badge badge-light-danger mr-2 float-right">{{ __('locale.canceled') }}</span>
                  @break

              @case(7)
                <span class="badge badge-light-success mr-2 float-right">{{ __('locale.ongoing') }}</span>
                  @break

              @case(8)
                <span class="badge badge-light-secondary mr-2 float-right">{{ __('locale.done') }}</span>
                  @break

              @case(9)
                <span class="badge badge-light-warning mr-2 float-right">{{ __('locale.in_complain') }}</span>
                  @break
    
            @endswitch
          </div>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-6 col-sm-6 col-md-4">
              <div class="form-group">
                <label for="">Client</label>
                <a href="{{ url('buddies/' . $data['user_id']) }}">
                  <div class="d-flex justify-content-left align-items-center">
                    <div class="avatar-wrapper">
                      <div class="avatar me-50 pointer-events-none">
                        <img src="{{asset('images/profile/thumb/' . $data['user_image'])}}" alt="Avatar" width="32" height="32">
                      </div>
                    </div>
                    <div class="d-flex flex-column">
                      <h6 class="user-name text-truncate mb-0 ml-50 text-primary">{{$data['user_name']}}</h6>
                    </div>
                  </div>
                </a>
              </div>
            </div>
            <div class="col-6 col-sm-6 col-md-4">
              <div class="form-group">
                <label for="">Buddy</label>
                <a href="{{ url('buddies/' . $data['buddy_id']) }}">
                  <div class="d-flex justify-content-left align-items-center">
                    <div class="avatar-wrapper">
                      <div class="avatar me-50">
                        <img src="{{asset('images/profile/thumb/' . $data['buddy_image'])}}" alt="Avatar" width="32" height="32">
                      </div>
                    </div>
                    <div class="d-flex flex-column">
                        <h6 class="user-name text-truncate mb-0 ml-50 text-primary">{{$data['buddy_name']}}</h6>
                    </div>
                  </div>
                </a>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label for="">Total</label>
                <p class="font-medium-5 font-weight-bolder text-primary mt-50">
                  Rp. <span class="total-price">{{ number_format(($data['total_price'] + $data['payment_code']), 0, ',', '.') }}</span>
                </p>
              </div>
            </div>
          </div>
          <hr class="dashed">
          <label for="">{{ __('locale.order_detail') }}</label>
          <h4 class="font-weight-bolder text-primary my-1">{{$data['service_name']}}</h4>
          <div class="row">
            <div class="col-6 col-sm-4 col-md-4">
              <p class="mb-50"><i data-feather="calendar" class="mb-25" height="18" width="18"></i> <span class="font-weight-bold text-primary">{{ \Carbon\Carbon::parse($data->date)->format('d M Y') }}</span></p>
            </div>
            <div class="col-6 col-sm-4 col-md-4">
              <p class="mb-50"><i data-feather="clock" class="mb-25" height="18" width="18"></i> <span class="font-weight-bold text-primary">{{\Carbon\Carbon::createFromFormat('H:i:s', $data['start_time'])->format('H:i')}} - {{\Carbon\Carbon::createFromFormat('H:i:s', $data['end_time'])->format('H:i')}}</span></p>
            </div>
            <div class="col-sm-4">
              <p class="mb-50"><i data-feather="users" class="mb-25" height="18" width="18"></i> <span class="font-weight-bold text-primary">{{ $data['participant'] }} {{ __('locale.participant') }}</span></p>
            </div>
          </div>
          <hr class="dashed">
          <label for="">{{ __('locale.location') }}</label>
          <p class="text-primary">{{$data['location']}}</p>
          <div id="map" data-lat="{{$data['location_lat']}}" data-lng="{{$data['location_long']}}" style="height: 400px"></div>
          <button class="btn btn-block btn-primary mt-1" data-toggle="modal" data-target="#modal-direction">{{ __('locale.get_direction') }}</button>
          @if ($user->id == $data->buddy_id)
            <hr class="dashed">
            <div class="d-flex mb-50">
              <div class="w-50">
                <p class="mb-0">{{ __('locale.total_price') }}</p>
                <p class="font-small-2 mb-0">( {{$data['duration']}} {{ __('locale.hour') }} x {{$data['participant']}} {{ __('locale.participant') }} )</p>
              </div>
              <div class="w-50 text-right">
                <p class="font-weight-bolder text-primary mb-0">Rp. {{ number_format(($data['total_price']), 0, ',', '.') }}</p>
              </div>
            </div>
            <div class="d-flex">
              <div class="w-50">
                <p class="mb-0">Fee ({{$data['fee_percent']}}%)</p>
              </div>
              <div class="w-50 text-right">
                <p class="font-weight-bolder text-primary mb-0">Rp. {{ number_format(($data['fee_price']), 0, ',', '.') }}</p>
              </div>
            </div>
            <div class="d-flex">
              <div class="w-50">
                <p class="mb-0">Cashback ({{$data['cashback_percent']}}%)</p>
              </div>
              <div class="w-50 text-right">
                <p class="font-weight-bolder text-primary mb-0">Rp. {{ number_format(($data['cashback_price']), 0, ',', '.') }}</p>
              </div>
            </div>
            <hr class="dashed">
            <div class="d-flex">
              <div class="w-50">
                <p class="font-weight-bolder mb-0">{{ __('locale.total_payment') }}</p>
              </div>
              <div class="w-50 text-right">
                <p class="font-weight-bolder text-primary mb-0">Rp. {{ number_format(($data['service_price']), 0, ',', '.') }}</p>
              </div>
            </div>
          @endif

          @if ($user->id == $data['user_id'])
            <hr class="dashed">
            <label for="">{{ __('locale.payment_detail') }}</label>
            <div class="d-flex">
              <div class="w-50">
                <p class="mb-0">{{ __('locale.payment_method') }}</p>
              </div>
              <div class="w-50 text-right">
                <p class="font-weight-bolder text-primary mb-0">{{$data['payment_name']}}</p>
              </div>
            </div>
            <hr class="dashed">
            <div class="d-flex mb-50">
              <div class="w-50">
                <p class="mb-0">{{ __('locale.total_price') }}</p>
                <p class="font-small-2 mb-0">( {{$data['duration']}} {{ __('locale.hour') }} x {{$data['participant']}} {{ __('locale.participant') }} )</p>
              </div>
              <div class="w-50 text-right">
                <p class="font-weight-bolder text-primary mb-0">Rp. {{ number_format(($data['total_price']), 0, ',', '.') }}</p>
              </div>
            </div>
            <div class="d-flex">
              <div class="w-50">
                <p class="mb-0">{{ __('locale.unique_code') }}</p>
              </div>
              <div class="w-50 text-right">
                <p class="font-weight-bolder text-primary mb-0">{{ number_format(($data['payment_code']), 0, ',', '.') }}</p>
              </div>
            </div>
            <hr class="dashed">
            <div class="d-flex">
              <div class="w-50">
                <p class="font-weight-bolder mb-0">{{ __('locale.total_payment') }}</p>
              </div>
              <div class="w-50 text-right">
                <p class="font-weight-bolder text-primary mb-0">Rp. {{ number_format(($data['total_price'] + $data['payment_code']), 0, ',', '.') }}</p>
              </div>
            </div>
          @endif

        </div>
      </div>
    </div>
    <div class="col-md-4">

      @if ($data['status'] == 2)
          <div class="card">
            <div class="card-body text-center">
              <span class="d-block mb-2">{{ __('locale.pay_before') }}</span>
              <span class="d-block counter-payment mb-2 text-primary font-large-1 font-weight-bolder" data-datetime="{{$data['booked_at']}}"></span>
              <span class="d-block mb-1">{{ __('locale.pay_before_max') }}</span>
              <span class="d-block max-date text-primary font-weight-bolder"></span>
            </div>
          </div>
      @endif

      @if ($data['status'] == 4 && Auth::user()->id != $data['user_id'])
          <div class="card">
            <div class="card-body text-center">
              <span class="d-block mb-2">{{ __('locale.confirm_before') }}</span>
              <span class="d-block counter-confirm mb-2 text-primary font-large-1 font-weight-bolder" data-datetime="{{$data['confirm_payment_at']}}"></span>
              <span class="d-block mb-1">{{ __('locale.confirm_before_max') }}</span>
              <span class="d-block max-date text-primary font-weight-bolder"></span>
            </div>
          </div>
      @endif

      @if (($data['status'] == 5 && \Carbon\Carbon::now()->gte(\Carbon\Carbon::parse($data->should_finish_at)->subDay()))
        || ($data['status'] == 7 && \Carbon\Carbon::now()->gte(\Carbon\Carbon::parse($data->should_finish_at)->subDay()))
      )
          <div class="card">
            <div class="card-body text-center">
              <span class="d-block mb-2">{{ __('locale.finish_before') }}</span>
              <span class="d-block counter-finish mb-2 text-primary font-large-1 font-weight-bolder" data-datetime="{{$data['should_finish_at']}}"></span>
              <span class="d-block mb-1">{{ __('locale.finish_at') }}</span>
              <span class="d-block font-weight-bolder mb-2 text-primary max-date"></span>
              <span class="d-block rounded border-warning font-small-3 mb-0 p-1 text-warning">{{ __('locale.finish_notice') }}</span>
            </div>
          </div>
      @endif

      <div class="card">
        <div class="card-body">
          <label for="">{{ __('locale.transaction_history') }}</label>
          <div class="row my-1">
            <div class="col-12">
              <div class="d-block height-200 overflow-auto">
                <ul class="timeline">
                  @foreach ($data['logs'] as $key => $item)
                    <li class="timeline-item">
                      @if ($key == 0)
                        <span class="timeline-point timeline-point-indicator"></span>
                      @else
                        <span class="timeline-point timeline-point-secondary timeline-point-indicator"></span>
                      @endif
                      <div class="timeline-event">
                        <div class="d-flex justify-content-between flex-sm-row flex-column mb-sm-0 mb-1">
                          <h6>{{$item['message']}}</h6>
                        </div>
                        <span class="timeline-event-time">{{ Carbon\Carbon::parse($item['created_at'])->format('d M Y, H:i') . " WIB"}}</span>
                      </div>
                    </li>
                  @endforeach
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>

      @if ($data['has_complained'] == 1)
        <div class="card">
          <div class="card-body">
            <label for="" class="mb-1">{{ __('locale.resolution_result') }}</label>
            <div class="d-flex justify-content-between">
              <h5 class="text-left">{{ __('locale.client') }}</h5>
              <h5 class="text-right">{{ number_format($data['complain_to_user'], 0, ',', '.') }}</h5>
            </div>
            <div class="d-flex justify-content-between">
              <h5 class="text-left">Buddy</h5>
              <h5 class="text-right">{{ number_format($data['complain_to_buddy'], 0, ',', '.') }}</h5>
            </div>
          </div>
        </div>
      @endif

      @if ($data['status'] == 8)
        @if ($user->id == $data['user_id'])
          @if ($data['has_review'])
            <div class="card">
              <div class="card-body">
                <label for="">{{ __('locale.review') }}</label>
                <div class="form-group my-3 text-center">
                  <div class="view-rating d-inline-block" data-rateyo-full-star="true" data-rating="{{$data->review->rating}}"></div>
                </div>
                <div class="form-group mb-2 text-center">
                  <p>{{$data->review->description}}</p>
                </div>
              </div>
            </div>
          @else
            <button class="btn btn-success bg-white btn-block btn-add-review" data-item="{{$data['id']}}" data-toggle="modal" data-target="#form-review">{{ __('locale.add_review') }}</button>
          @endif
        @endif
      @else
        <button class="btn btn-primary btn-block disabled" disabled>Chat</button>
        {{-- @if ($user->id == $data['user_id'])
          <button class="btn btn-primary btn-block btn-chat-buddy" data-item="{{$data['buddy_id']}}">Chat</button>
        @else
          <button class="btn btn-primary btn-block btn-chat-user" data-item="{{$data['user_id']}}">Chat</button>
        @endif --}}
      @endif

      @if ($user->id == $data['user_id'])
        @if ($data['status'] == 1)
          <div class="divider">
            <div class="divider-text">{{ __('locale.or') }}</div>
          </div>
          <button class="btn btn-success btn-block btn-continue-payment" data-item="{{$data['id']}}">{{ __('locale.continue_payment') }}</button>
          <button class="btn btn-outline-danger bg-white btn-block" data-item="{{$data['id']}}">{{ __('locale.cancel_order') }}</button>
        @endif
        @if ($data['status'] == 2)
          <div class="divider">
            <div class="divider-text">{{ __('locale.or') }}</div>
          </div>
          <button class="btn btn-success btn-block btn-confirm-payment" data-item="{{$data['id']}}">{{ __('locale.confirm_payment') }}</button>
          <button class="btn btn-outline-danger bg-white btn-block" data-toggle="modal" data-target="#form-cancel">{{ __('locale.cancel_order') }}</button>
        @endif
      @endif
      @if ($data['status'] == 4)
        @if ($user->id == $data['buddy_id'])
          <div class="divider">
            <div class="divider-text">{{ __('locale.or') }}</div>
          </div>
          <button class="btn btn-success btn-block btn-confirm-order" data-item="{{$data['id']}}">{{ __('locale.confirm_order') }}</button>
          <button class="btn btn-outline-danger bg-white btn-block" data-toggle="modal" data-target="#form-reject">{{ __('locale.reject_order') }}</button>
        @endif
      @endif
      @if ($data['status'] == 5)
        @if ($user->id == $data['user_id'])
          <div class="divider">
            <div class="divider-text">{{ __('locale.or') }}</div>
          </div>
          @if (\Carbon\Carbon::now()->gte(\Carbon\Carbon::parse($data->should_finish_at)->subDay()))
            <button class="btn btn-success btn-block btn-finish" data-item="{{$data['id']}}">{{ __('locale.finish') }}</button>
            <button class="btn btn-outline-danger bg-white btn-block btn-complain" data-item="{{$data['id']}}" data-toggle="modal" data-target="#form-complain">{{ __('locale.complain') }}</button>
          @else
            <button class="btn btn-success btn-block btn-start" data-item="{{$data['id']}}">{{ __('locale.start') }}</button>
          @endif
        @endif
      @endif
      @if ($data['status'] == 7)
        @if ($user->id == $data['user_id'])
          <div class="divider">
            <div class="divider-text">{{ __('locale.or') }}</div>
          </div>
          <button class="btn btn-success btn-block btn-finish" data-item="{{$data['id']}}">{{ __('locale.finish') }}</button>
          <button class="btn btn-outline-danger bg-white btn-block btn-complain" data-item="{{$data['id']}}" data-toggle="modal" data-target="#form-complain">{{ __('locale.complain') }}</button>
        @endif
      @endif

    </div>
  </div>
</section>

<section>
  <div class="modal fade text-left" id="form-cancel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel33" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header bg-white">
          <h4 class="modal-title" id="myModalLabel1">{{ __('locale.cancel_reason') }}</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group mb-0">
            <textarea data-length="140" class="form-control char-textarea input-cancel" rows="3" placeholder=""></textarea>
          </div>
          <small class="textarea-counter-value float-right"><span class="char-count">0</span> / 140 </small>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary  btn-cancel-order" data-item="{{$data['id']}}">{{ __('locale.send') }}</button>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="modal fade text-left" id="form-reject" tabindex="-1" role="dialog" aria-labelledby="myModalLabel33" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header bg-white">
          <h4 class="modal-title" id="myModalLabel1">{{ __('locale.reject_reason') }}</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group mb-0">
            <textarea data-length="140" class="form-control char-textarea input-reject" rows="3" placeholder=""></textarea>
          </div>
          <small class="textarea-counter-value float-right"><span class="char-count">0</span> / 140 </small>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary btn-reject-order" data-item="{{$data['id']}}">{{ __('locale.send') }}</button>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="modal fade text-left" id="form-complain" tabindex="-1" role="dialog" aria-labelledby="myModalLabel33" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header bg-white">
          <h4 class="modal-title" id="myModalLabel1">{{ __('locale.complain_detail') }}</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group mb-0">
            <textarea data-length="140" class="form-control char-textarea input-complain" rows="3" placeholder=""></textarea>
          </div>
          <small class="textarea-counter-value float-right"><span class="char-count">0</span> / 140 </small>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary btn-send-complain" data-item="">{{ __('locale.send') }}</button>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="modal fade text-left" id="form-review" tabindex="-1" role="dialog" aria-labelledby="myModalLabel33" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header bg-white">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="d-block text-center">
            <h4>{{ __('locale.add_review') }}</h4>
          </div>
          <div class="form-group my-3 text-center">
            <div class="add-rating d-inline-block" data-rateyo-full-star="true"></div>
          </div>
          <div class="form-group mb-0">
            <label for="textarea-counter">{{ __('locale.review') }}</label>
            <textarea data-length="140" class="form-control char-textarea input-review" rows="3" placeholder=""></textarea>
          </div>
          <small class="textarea-counter-value float-right"><span class="char-count">0</span> / 140 </small>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary btn-review" data-item="{{$data['id']}}">{{ __('locale.send') }}</button>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="modal fade text-left" id="modal-direction" tabindex="-1" role="dialog" aria-labelledby="modalDirection" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header bg-white">
          <span>{{ __('locale.get_direction') }}</span>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body d-flex justify-content-around">
          <a href="https://www.google.com/maps/search/?api=1&query={{$data['location_lat']}},{{$data['location_long']}}" class="d-inline-block text-center" target="_blank">
            <img src="{{asset('images/icon/icon-google-map.png')}}" alt="Google Map" width="80" height="80">
            <h6 class="user-name text-truncate text-primary">Google Map</h6>
          </a>
          <a href="http://waze.to/?ll={{$data['location_lat']}},{{$data['location_long']}}&navigate=yes" class="d-inline-block text-center" target="_blank">
            <img src="{{asset('images/icon/icon-waze.png')}}" alt="Waze" width="80" height="80">
            <h6 class="user-name text-truncate text-primary">Waze</h6>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

@endsection

@section('vendor-script')
  <!-- vendor files -->
  <script src="{{ asset(('vendors/js/extensions/jquery.rateyo.min.js')) }}"></script>
@endsection

@section('page-script')
  {{-- Page js files --}}
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDKvZ_NjSpqgCSD5BfCsc98lNTS2aHyYYo" async ></script>
  <script src="{{ asset(('js/scripts/member/transaction-detail.js')) }}"></script>
@endsection