@extends('layouts.app')

@section('title', 'My Account')

@section('content')
<div class="bz-bar">
  <div class="bz-wrap">
    <h1>My account</h1>
    <nav><a href="{{ route('home') }}">Home</a><i></i><span>Account</span></nav>
  </div>
</div>

<main class="container section acc-page">
  <div class="acc">
    {{-- sidebar --}}
    <aside class="acc-side">
      <div class="acc-user">
        <span class="acc-avatar" id="accAvatar">{{ mb_strtoupper(mb_substr($profile['first_name'] ?: $profile['email'], 0, 1)) }}</span>
        <div><b id="accName">{{ $profile['name'] }}</b><small>{{ $profile['email'] }}</small></div>
      </div>
      <nav class="acc-nav" id="accNav">
        <a href="{{ route('account.tab', 'dashboard') }}" data-tab="dashboard"@if ($tab === 'dashboard') class="on" @endif><svg viewBox="0 0 24 24"><rect x="4" y="4" width="7" height="7"/><rect x="13" y="4" width="7" height="7"/><rect x="4" y="13" width="7" height="7"/><rect x="13" y="13" width="7" height="7"/></svg>Dashboard</a>
        <a href="{{ route('account.tab', 'orders') }}" data-tab="orders"@if ($tab === 'orders') class="on" @endif><svg viewBox="0 0 24 24"><path d="M5 8h14l-1 12H6z"/><path d="M9 8V6a3 3 0 016 0v2"/></svg>My Orders <em id="navOrders"></em></a>
        <a href="{{ route('account.tab', 'addresses') }}" data-tab="addresses"@if ($tab === 'addresses') class="on" @endif><svg viewBox="0 0 24 24"><path d="M12 21s7-6 7-11a7 7 0 10-14 0c0 5 7 11 7 11z"/><circle cx="12" cy="10" r="2.500"/></svg>Addresses</a>
        <a href="{{ route('account.tab', 'wishlist') }}" data-tab="wishlist"@if ($tab === 'wishlist') class="on" @endif><svg viewBox="0 0 24 24"><path d="M12 20.500l-7.600-7.600a5 5 0 017.100-7.100l.5.5.5-.5a5 5 0 017.100 7.100z"/></svg>Wishlist <em id="navWish"></em></a>
        <a href="{{ route('account.tab', 'profile') }}" data-tab="profile"@if ($tab === 'profile') class="on" @endif><svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.400 3.600-7 8-7s8 2.600 8 7"/></svg>Profile &amp; password</a>
        <form data-ajax action="{{ route('logout') }}" method="POST"><button type="submit" class="acc-logout"><svg viewBox="0 0 24 24"><path d="M9 4H5v16h4M16 8l4 4-4 4M20 12H9"/></svg>Log out</button></form>
      </nav>
    </aside>

    {{-- panels --}}
    <section class="acc-main">
      {{-- dashboard --}}
      <div class="acc-panel{{ $tab === 'dashboard' ? ' on' : '' }}" id="p-dashboard"@if ($tab !== 'dashboard') hidden @endif>
        <h2>Hello, <span id="hiName">{{ $profile['first_name'] ?: $profile['name'] }}</span></h2>
        <p class="muted">From here you can follow your orders, manage your addresses and update your details.</p>
        <div class="acc-stats" id="stats"></div>
        <h3 class="acc-sub">Recent orders</h3>
        <div class="acc-tablewrap"><table class="acc-table" id="recentTable"></table></div>
      </div>

      {{-- orders --}}
      <div class="acc-panel{{ $tab === 'orders' ? ' on' : '' }}" id="p-orders"@if ($tab !== 'orders') hidden @endif>
        <h2>My orders</h2>
        <div class="acc-tablewrap"><table class="acc-table" id="ordersTable"></table></div>
      </div>

      {{-- addresses --}}
      <div class="acc-panel{{ $tab === 'addresses' ? ' on' : '' }}" id="p-addresses"@if ($tab !== 'addresses') hidden @endif>
        <h2>Addresses</h2>
        <div class="addr-head2"><p class="muted">Keep one billing address and as many shipping addresses as you need. Pick the one to deliver to at checkout.</p><button type="button" class="btn" data-add-addr="Shipping"><i class="fa-solid fa-plus"></i> Add shipping address</button></div>
        <div class="acc-tablewrap"><table class="acc-table" id="addrTable"></table></div>
      </div>

      {{-- wishlist --}}
      <div class="acc-panel{{ $tab === 'wishlist' ? ' on' : '' }}" id="p-wishlist"@if ($tab !== 'wishlist') hidden @endif>
        <h2>Wishlist</h2>
        <div class="acc-tablewrap"><table class="acc-table" id="wishTable"></table></div>
      </div>

      {{-- profile --}}
      <div class="acc-panel{{ $tab === 'profile' ? ' on' : '' }}" id="p-profile"@if ($tab !== 'profile') hidden @endif>
        <h2>Profile &amp; password</h2>
        <div class="acc-forms">
          <form class="acc-card" id="profileForm" novalidate>
            <h3>Your details</h3>
            <div class="two">
              <label class="field">First name<input name="first_name" value="{{ $profile['first_name'] }}"><small class="ferr"></small></label>
              <label class="field">Last name<input name="last_name" value="{{ $profile['last_name'] }}"><small class="ferr"></small></label>
            </div>
            <label class="field">Phone<input name="mobile" value="{{ $profile['mobile'] }}" inputmode="tel"><small class="ferr"></small></label>
            <label class="field">Email<input value="{{ $profile['email'] }}" disabled></label>
            <button class="btn">Save changes</button>
          </form>
          <form class="acc-card" id="passForm" novalidate>
            <h3>Change password</h3>
            <label class="field">Current password<input type="password" name="current_password" autocomplete="current-password"><small class="ferr"></small></label>
            <label class="field">New password<input type="password" name="password" autocomplete="new-password"><small class="ferr"></small></label>
            <label class="field">Confirm new password<input type="password" name="password_confirmation" autocomplete="new-password"></label>
            <button class="btn">Update password</button>
          </form>
        </div>
      </div>
    </section>
  </div>
</main>

{{-- order detail pop-up --}}
<div class="am-overlay" id="orderOverlay" hidden>
  <div class="am am-wide" role="dialog" aria-modal="true" aria-labelledby="odTitle">
    <div class="am-head"><h3 id="odTitle">Order</h3><button type="button" class="am-x" id="odClose" aria-label="Close"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></button></div>
    <div id="odBody"></div>
  </div>
</div>

{{-- edit address pop-up --}}
<div class="am-overlay" id="amOverlay" hidden>
  <div class="am" role="dialog" aria-modal="true" aria-labelledby="amTitle">
    <div class="am-head"><h3 id="amTitle">Edit address</h3><button type="button" class="am-x" id="amClose" aria-label="Close"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></button></div>
    <form id="amForm" novalidate>
      <input type="hidden" name="type"><input type="hidden" name="id">
      <div class="two">
        <label class="field">First name<input name="first_name"><small class="ferr"></small></label>
        <label class="field">Last name<input name="last_name"><small class="ferr"></small></label>
      </div>
      <div class="two">
        <label class="field">Phone<input name="phone" type="tel"><small class="ferr"></small></label>
        <label class="field">Email<input name="email" type="email"><small class="ferr"></small></label>
      </div>
      <label class="field">Address<input name="address"><small class="ferr"></small></label>
      <label class="field">Landmark <span class="muted">(optional)</span><input name="landmark"><small class="ferr"></small></label>
      <div class="two">
        <label class="field">City<input name="city"><small class="ferr"></small></label>
        <label class="field">State<select name="state_id"><option value="">Select state</option>@foreach ($states as $st)<option value="{{ $st['id'] }}">{{ $st['name'] }}</option>@endforeach</select><small class="ferr"></small></label>
      </div>
      <div class="two">
        <label class="field">PIN code<input name="postal_code" inputmode="numeric" maxlength="6"><small class="ferr"></small></label>
        <label class="field">Country<input value="India" disabled></label>
      </div>
      <div class="am-actions"><button type="button" class="btn light" id="amCancel">Cancel</button><button class="btn" id="amSave">Save address</button></div>
    </form>
  </div>
</div>
@endsection

@push('scripts')
@php
    $chatCfg = [
        'key' => config('reverb.apps.apps.0.key'),
        'port' => (int) config('reverb.apps.apps.0.options.port', 8080),
        'tls' => config('reverb.apps.apps.0.options.scheme', 'http') === 'https',
        'auth' => url('/broadcasting/auth'),
    ];
@endphp
<script>
var ACC = {
  tab: @json($tab),
  tabUrl: @json(url('/account')),
  orders: @json($orders),
  addresses: @json($addresses),
  chat: @json($chatCfg),
  urls: { address: @json(url('/account/addresses')), order: @json(url('/account/orders')), profile: @json(route('account.profile')), password: @json(route('account.password')) }
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pusher/8.4.0/pusher.min.js"></script>
<script src="{{ asset_v('js/account.js') }}"></script>
@endpush