@extends('layouts/contentLayoutMaster')

@section('title', 'Resolution')

@section('page-style')
  <link rel="stylesheet" href="{{ asset(('css/base/pages/app-chat.css')) }}">
  <link rel="stylesheet" href="{{ asset(('css/base/pages/app-chat-list.css')) }}">
@endsection

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

<section>
  <div class="row">
    <div class="col-md-8">
      <div class="card chat-application chat-resolution content-area-wrapper" data-user={{auth()->user()->id}} data-group={{$data->id}}>
        <div class="card-body chat-app-window  @if ($data->status == 1) p-0 @endif">
          @if ($data->status == 0)
            <div class="alert alert-primary" role="alert">
              <div class="alert-body p-2">
                  <i data-feather="alert-circle"></i>
                  <span>{{ __('locale.response.resolution.waiting_response') }}</span>
              </div>
            </div>
          @endif
          @if ($data->status == 2)
            <div class="alert alert-success" role="alert">
              <div class="alert-body p-2">
                  <i data-feather="alert-circle"></i>
                  <span>{{$data->finish_reason}}</span>
              </div>
            </div>
          @endif
          @if ($data->status == 3)
            <div class="alert alert-warning" role="alert">
              <div class="alert-body p-2">
                  <i data-feather="alert-circle"></i>
                  <span>{{$data->reject_reason}}</span>
              </div>
            </div>
          @endif
          @if ($data->status == 1 || $data->status == 2)
            <div class="active-chat" data-chat="0">
              <div class="user-chats overflow-auto inbox">
                <div class="chats">
                </div>
              </div>
              @if ($data->status == 1)
                <form class="chat-app-form" action="javascript:void(0);">
                  <div class="input-group input-group-merge mr-1 form-send-message">
                    <input type="text" class="form-control message" placeholder="Type your message" />
                  </div>
                  <button type="button" class="btn btn-primary send waves-button" onclick="enterChat();">
                    <i data-feather="send" class="d-lg-none"></i>
                    <span class="d-none d-lg-block">{{ __('locale.send') }}</span>
                  </button>
                </form>
              @endif
            </div>
          @endif
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <div class="card-header pb-1">
          @switch($data['status'])
            @case(0)
              <span class="badge badge-light-warning">{{ __('locale.pending') }}</span>
                @break

            @case(1)
              <span class="badge badge-light-success">{{ __('locale.ongoing') }}</span>
                @break

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

            @case(3)
              <span class="badge badge-light-danger">{{ __('locale.canceled') }}</span>
                @break

          @endswitch
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col">
              <div class="form-group">
                <label for="">Invoice No</label>
                <h4 class="text-primary">{{$data->invoice_no}}</h4>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-6">
              <div class="form-group">
                <label for="">{{ __('locale.client') }}</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 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">
              <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>
          <div class="row">
            <div class="col-12">
              <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']), 0, ',', '.') }}</span>
                </p>
              </div>
            </div>
            <div class="col-12">
              <div class="form-group">
                <label for="">{{ __('locale.complain_reason') }}</label>
                <p class="mt-25 mb-0">{{$data->message}}</p>
              </div>
            </div>
            <div class="col-12">
              <a href="{{ url('member/transaction/' . $data->transaction_id) }}" class="btn btn-outline-primary btn-block my-1" data-item="{{$data->transaction_id}}">{{ __('locale.view_detail') }}</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

@endsection
@section('page-script')
  <script src="{{ asset(('js/scripts/member/resolution-detail.js')) }}"></script>
@endsection