@extends('layouts/layoutMaster')

@section('title', 'Customer Profile')

@section('vendor-style')
<link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-checkboxes-jquery/datatables.checkboxes.css')}}">
<link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css')}}">
<link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css')}}">
<link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css')}}">
<link rel="stylesheet" href="{{asset('assets/vendor/libs/select2/select2.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/formvalidation/dist/css/formValidation.min.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/animate-css/animate.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/sweetalert2/sweetalert2.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/dropzone/dropzone.css')}}" />

@endsection

<!-- Page -->
@section('page-style')
<link rel="stylesheet" href="{{asset('assets/vendor/css/pages/page-profile.css')}}" />
@endsection


@section('vendor-script')
<script src="{{asset('assets/vendor/libs/dropzone/dropzone.js')}}"></script>

<script src="{{asset('assets/vendor/libs/moment/moment.js')}}"></script>
<script src="{{asset('assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js')}}"></script>
<script src="{{asset('assets/vendor/libs/select2/select2.js')}}"></script>
<script src="{{asset('assets/vendor/libs/formvalidation/dist/js/FormValidation.min.js')}}"></script>
<script src="{{asset('assets/vendor/libs/formvalidation/dist/js/plugins/Bootstrap5.min.js')}}"></script>
<script src="{{asset('assets/vendor/libs/formvalidation/dist/js/plugins/AutoFocus.min.js')}}"></script>
<script src="{{asset('assets/vendor/libs/cleavejs/cleave.js')}}"></script>
<script src="{{asset('assets/vendor/libs/cleavejs/cleave-phone.js')}}"></script>
<script src="{{asset('assets/vendor/libs/sweetalert2/sweetalert2.js')}}"></script>
@endsection

@section('page-script')
<script src="{{asset('assets/js/forms-file-upload.js')}}"></script>
@endsection

@section('content')
<h4 class="fw-bold py-3 mb-4">
  <span class="text-muted fw-light">Customer Profile</span>
</h4>
<!-- Header -->
<div class="row">
  <div class="col-12">
    <div class="card mb-4">
      <div class="user-profile-header-banner">
        <img src="{{ asset('assets/img/pages/profile-banner.png') }}" alt="Banner image" class="rounded-top">
      </div>
      <div class="user-profile-header d-flex flex-column flex-sm-row text-sm-start text-center mb-4">
        <div class="flex-shrink-0 mt-n2 mx-sm-0 mx-auto">

        @if($customer->profile_image_path !== null)
        <img src="{{ asset('images/customer/kyc/' . $customer->profile_image_path) }}" alt="user image" class="rounded-circle" style="width: 80px; height: 80px;">
        @else
        @endif
        </div>
        <div class="flex-grow-1 mt-3 mt-sm-5">
          <div class="d-flex align-items-md-end align-items-sm-start align-items-center justify-content-md-between justify-content-start mx-4 flex-md-row flex-column gap-4">
            <div class="user-profile-info">
              <h4>{{$customer->first_name." ".$customer->last_name}}</h4>
              <ul class="list-inline mb-0 d-flex align-items-center flex-wrap justify-content-sm-start justify-content-center gap-2">
             
                <li class="list-inline-item">
                  <i class='ti ti-calendar'></i> {{\Carbon\Carbon::parse($customer->created_at)->isoFormat('MMMM Do YYYY, h:mm:ss a')}}
                </li>
              </ul>
            </div>

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

    <!-- Include the notifications partial -->
    @include('notifications')
<!--/ Header -->
<div class="d-flex justify-content-center">

  <button type="button" data-bs-target="#updateCustomerFloat" data-bs-toggle="modal" class="btn btn-primary">Update Float</button>
  <button type="button" data-bs-target="#addCollectiontTracking" data-bs-toggle="modal" class="btn btn-primary">Reset PIN</button>
  

</div>
</div>
<!-- User Profile Content -->
<div class="row">
  <div class="col-xl-4 col-lg-5 col-md-5">
    <!-- About User -->
    <div class="card mb-4">
      <div class="card-body">
        <small class="card-text text-uppercase">About</small>
        <ul class="list-unstyled mb-4 mt-3">
          <li class="d-flex align-items-center mb-3"><i class="ti ti-user"></i><span class="fw-bold mx-2">First Name:</span> <span>{{$customer->first_name}} {{$customer->last_name}}</span></li>
          <li class="d-flex align-items-center mb-3"><i class="ti ti-user"></i><span class="fw-bold mx-2">Last Name:</span> <span>{{$customer->last_name}}</span></li>
          <li class="d-flex align-items-center mb-3"><i class="ti ti-crown"></i><span class="fw-bold mx-2">NRC:</span> <span>{{$customer->nrc}}</span></li>
          <li class="d-flex align-items-center mb-3"><i class="ti ti-crown"></i><span class="fw-bold mx-2">Gender:</span> <span>{{$customer->gender}}</span></li>
          <li class="d-flex align-items-center mb-3"><i class="ti ti-crown"></i><span class="fw-bold mx-2">Username:</span> <span>{{$customer->user->username}}</span></li>
        </ul>
        <small class="card-text text-uppercase">Contacts</small>
        <ul class="list-unstyled mb-4 mt-3">
          <li class="d-flex align-items-center mb-3"><i class="ti ti-phone-call"></i><span class="fw-bold mx-2">Contact:</span> <span>{{$customer->phone_number}}</span></li>
          <li class="d-flex align-items-center mb-3"><i class="ti ti-mail"></i><span class="fw-bold mx-2">Email:</span> <span>{{$customer->email}}</span></li>
        </ul>
       


        </ul>
      </div>
    </div>
    <!--/ About User -->
  </div>
  <div class="col-xl-8 col-lg-7 col-md-7">
    <!--/ Activity Timeline -->
    <div class="row">
      <!-- Connections -->
      <div class="col-lg-12 col-xl-8">
        <div class="card card-action mb-6">
          <div class="card-header align-items-center">
            <div class="card-body">
              <p class="card-text text-uppercase">Overview</p>
              <ul class="list-unstyled mb-0">
                <li class="d-flex align-items-center mb-3"><i class="ti ti-check"></i><span class="fw-bold mx-2">Total Played Games:</span> <span>{{$customer->user->account->total_played_games}}</span></li>
                <li class="d-flex align-items-center mb-3"><i class="ti ti-check"></i><span class="fw-bold mx-2">Current Pending Tickets:</span> <span>{{$customer->user->pendingTickets->count()}}</span></li>
                <li class="d-flex align-items-center mb-3"><i class="ti ti-layout-grid"></i><span class="fw-bold mx-2">Total Played Amount:</span> <span>ZMW {{$customer->user->account->total_played_amount}}</span></li>
                <li class="d-flex align-items-center mb-3"><i class="ti ti-check"></i><span class="fw-bold mx-2">Total Won Games:</span> <span>ZMW {{$customer->user->account->total_won_games}}</span></li>
                <li class="d-flex align-items-center mb-3"><i class="ti ti-layout-grid"></i><span class="fw-bold mx-2">Current Balance:</span> <span>ZMW {{$customer->user->account->current_balance}}</span></li>
              </ul>
            </div>
          </div>

        </div>
      </div>
      <!--/ Connections -->
    </div>
    <!-- Customers table -->
    <div class="card mb-4">
      <div class="card-datatable table-responsive">
        <table class="datatables-customer-loans table border-top">
          <thead>
            <tr>
              <th></th>
              <th></th>
              <th>Game Type</th>
              <th>Game Date</th>
              <th>Amount Paid</th>
              <th>Status</th>
              <th>Action</th>
            </tr>
          </thead>
        </table>
      </div>
    </div>
    <!--/ Customers table -->
  </div>
</div>
<script>
  var customerID = "{{ $customer->user_id }}";
</script>
@include('_partials/_modals/customers/modal-float-manager')

@include('_partials/_modals/customers/modal-reset-pin')

@endsection