@extends('layouts.main')

@section('page-id', '6037d3477f923a851e844852')

@section('body-class', 'pale-green')

@section('content')
  <div class="section transparent basket">
    <div class="wide-container">
      <div class="sheet sign-in account">
        <div class="account-desktop">
          <div class="mb-40">
            <div class="columns-align-center w-row">
              <div class="w-col w-col-4">
                <a href="{{ route('index') }}" class="orange-link">&lt; Back to shopping</a>
              </div>
              <div class="w-col w-col-8">
                <h1 class="h1-2 mt-0 mb-0">My Details</h1>
              </div>
            </div>
          </div>
          <div class="account-columns w-row">
            <div class="account-menu-wrapper w-col w-col-4">
              <ul role="list" class="account-links w-list-unstyled">
                <li class="account-link-item">
                  <a href="{{ route('account.overview') }}" class="account-link">Account Overview</a>
                </li>
                <li class="account-link-item">
                  <a href="{{ route('account.orders') }}" class="account-link">Online Orders</a>
                </li>
                <li class="account-link-item">
                  <a href="{{ route('account.details') }}" class="account-link w--current">My Details</a>
                </li>
                <li class="account-link-item">
                  <a href="{{ route('logout') }}" class="account-link" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">Log Out</a>
                  <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                    @csrf

                  </form>
                </li>
              </ul>
            </div>
            <div class="w-col w-col-8">
              <div class="account-overview-inner-wrapper no-bottom-border margin-bottom">
                <div class="account-overview-heading-wrapper">
                  <div>
                    <h2 class="account-overview-heading mb-10">Personal Details</h2>
                    <a href="{{ route('account.details.update') }}" class="black-link">Update your account information here.</a>
                  </div>
                  <a href="{{ route('account.details.addresses') }}" class="button w-button">View Address Book</a>
                </div>
              </div>
              <div class="account-overview-inner-wrapper no-bottom-border padding-top margin-bottom">
                <a href="{{ route('account.details.update') }}" class="edit-button">Edit</a>
                <p class="account-info"><span class="account-info-title">Name</span> {{ Auth::user()->first_name }} {{ Auth::user()->last_name }}</p>
                <p class="account-info"><span class="account-info-title">Phone Number</span> {{ Auth::user()->phone }}</p>
                <p class="account-info"><span class="account-info-title">Shipping Address</span> @if($shippingAddress) {{ $shippingAddress->line_1 }}<br>{!! $shippingAddress->line_2 ? $shippingAddress->line_2 . '<br>' : '' !!}{!! $shippingAddress->line_3 ? $shippingAddress->line_3 . '<br>' : '' !!}{{ $shippingAddress->city }}<br>{{ $shippingAddress->county }}<br>{{ $shippingAddress->postcode }}<br>{{$shippingAddress->country }} @else N/A @endif</p>
                <p class="account-info"><span class="account-info-title">Billing Address</span> @if ($billingAddress) {{ $billingAddress->line_1 }}<br>{!! $billingAddress->line_2 ? $billingAddress->line_2 . '<br>' : '' !!}{!! $billingAddress->line_3 ? $billingAddress->line_3 . '<br>' : '' !!}{{ $billingAddress->city }}<br>{{ $billingAddress->county }}<br>{{ $billingAddress->postcode }}<br>{{$billingAddress->country }} @else N/A @endif</p>
                <p class="account-info"><span class="account-info-title">Enterprise Type</span> {{ Auth::user()->enterprise_type_text }}</p>
                <p class="account-info"><span class="account-info-title">Marketing Opted In?</span> {{ Auth::user()->marketing_opt_in ? 'Yes' : 'No' }}</p>
              </div>
              <div class="account-overview-inner-wrapper padding-bottom">
                <h2 class="mb-40">Sign In Details</h2>
                <p><span class="account-info-title narrow">Email</span> <span class="sign-in-detail">{{ Auth::user()->email }}</span>
                  <a href="{{ route('account.details.change-email-address') }}">Edit</a>
                </p>
                <p><span class="account-info-title narrow">Password</span> <span class="sign-in-detail">●●●●●●</span>
                  <a href="{{ route('account.details.change-password') }}">Edit</a>
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="account-mobile">
          <a href="{{ route('account.overview') }}" class="account-back-link">&lt; Back</a>
          <div class="account-heading-wrapper no-bottom-border">
            <h1 class="h1-2 mt-0 mb-0">My Details</h1>
          </div>
          <div class="account-overview-inner-wrapper no-bottom-border margin-bottom">
            <div class="account-overview-heading-wrapper">
              <div>
                <h2 class="account-overview-heading mb-10">Personal Details</h2>
                <a href="{{ route('account.details.update') }}" class="black-link">Update your account information here.</a>
              </div>
              <a href="{{ route('account.details.addresses') }}" class="button account w-button">View Address Book</a>
            </div>
          </div>
          <div class="account-overview-inner-wrapper no-bottom-border padding-top margin-bottom">
            <div class="text-right-sm">
              <a href="{{ route('account.details.update') }}" class="edit-button">Edit</a>
            </div>
            <p class="account-info"><span class="account-info-title">Name</span> {{ Auth::user()->first_name }} {{ Auth::user()->last_name }}</p>
            <p class="account-info"><span class="account-info-title">Phone Number</span> {{ Auth::user()->phone }}</p>
            <p class="account-info"><span class="account-info-title">Shipping Address</span> @if($shippingAddress) {{ $shippingAddress->line_1 }}<br>{!! $shippingAddress->line_2 ? $shippingAddress->line_2 . '<br>' : '' !!}{!! $shippingAddress->line_3 ? $shippingAddress->line_3 . '<br>' : '' !!}{{ $shippingAddress->city }}<br>{{ $shippingAddress->county }}<br>{{ $shippingAddress->postcode }}<br>{{$shippingAddress->country }} @else N/A @endif</p>
            <p class="account-info"><span class="account-info-title">Billing Address</span> @if ($billingAddress) {{ $billingAddress->line_1 }}<br>{!! $billingAddress->line_2 ? $billingAddress->line_2 . '<br>' : '' !!}{!! $billingAddress->line_3 ? $billingAddress->line_3 . '<br>' : '' !!}{{ $billingAddress->city }}<br>{{ $billingAddress->county }}<br>{{ $billingAddress->postcode }}<br>{{$billingAddress->country }} @else N/A @endif</p>
            <p class="account-info"><span class="account-info-title">Enterprise Type</span> {{ Auth::user()->enterprise_type_text }}</p>
            <p class="account-info"><span class="account-info-title">Marketing Opted In?</span> {{ Auth::user()->marketing_opt_in ? 'Yes' : 'No' }}</p>
          </div>
          <div class="account-overview-inner-wrapper padding-bottom">
            <h2 class="mb-40">Sign In Details</h2>
            <p class="mb-sm-20"><span class="account-info-title narrow">Email</span> <span class="sign-in-detail">{{ Auth::user()->email }}</span>
              <a href="{{ route('account.details.change-email-address') }}">Edit</a>
            </p>
            <p><span class="account-info-title narrow">Password</span> <span class="sign-in-detail">●●●●●●</span>
              <a href="{{ route('account.details.change-password') }}">Edit</a>
            </p>
          </div>
        </div>
        <div class="account-faq-wrapper">
          <div class="account-faq-inner-wrapper">
            <h3 class="text-center mt-0 mb-60">Frequently Asked Questions</h3>
            <div class="orange-title mb-20">Orders &amp; Delivery</div>
            <div class="collapses">
              <div class="collapse">
                <div data-w-id="389e7e6a-09dd-909f-b667-6ceeab760cd2" class="collapse-header alt">
                  <div>Where do you deliver?</div><img src="{{ url('images/down-arrow.svg') }}" loading="lazy" style="-webkit-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);-moz-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);-ms-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0)" alt="" class="collapse-arrow">
                </div>
                <div style="display:none" class="collapse-body">
                  <p class="pb-20 mb-0">Scotland, England & Wales.</p>
                  <p class="pb-20 mb-0">Unfortunately, at this time we are unable to deliver to Northern Ireland or Republic of Ireland due to import restrictions. Please contact us for local distributors.</p>
                </div>
              </div>
              <div class="collapse">
                <div data-w-id="389e7e6a-09dd-909f-b667-6ceeab760cda" class="collapse-header alt">
                  <div>How do I track my order?</div><img src="{{ url('images/down-arrow.svg') }}" loading="lazy" style="-webkit-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);-moz-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);-ms-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0)" alt="" class="collapse-arrow">
                </div>
                <div style="display:none" class="collapse-body">
                  <p class="pb-20 mb-0">You will get a confirmation text from the courier to track your order. If you require any further information, call the office 01368 840655</p>
                </div>
              </div>
              <div class="collapse">
                <div data-w-id="389e7e6a-09dd-909f-b667-6ceeab760ce2" class="collapse-header alt">
                  <div>How long do I have to return an order?</div><img src="{{ url('images/down-arrow.svg') }}" loading="lazy" style="-webkit-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);-moz-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);-ms-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0)" alt="" class="collapse-arrow">
                </div>
                <div style="display:none" class="collapse-body">
                  <p class="pb-20 mb-0">We do not normally take returns, please see our terms & conditions for more detail.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection