@section('page_title')
    {{ "Composer - My Account" }}
@endsection
@include('header')

@if (session('success'))
    <div class="alert alert-success">
        <div class="alert-text">{{ session('success') }}</div>
    </div>
@endif
@if (session('error'))
    <div class="alert alert-error">
        <div class="alert-text">{{ session('error') }}</div>
    </div>
@endif



<section class="body-section">
  <div class="transient-message"></div>
    <div class="content-width-container split-view">
      @include('left-split-view')
      <div class="primary-content-container">
        {{-- <div class="max-w-content"> --}}
          {{-- <div class="body-outer-wrapper"> --}}
            <div class="body-main body-main-minimal">
              <div class="body-main-head-container">
                <div class="body-main-title-block">
                  <h1 class="body-main-title">My Account</h1>
                  <div class="body-main-description">Account access and account holder information.</div>
                </div>
              </div>
              {{-- <div class="title-block">
                <div class="title-block-title">
                  <div>My Account</div>
                  <div class="title-block-description">Account access and account holder information.<br></div>
                </div>
              </div> --}}
              <div class="my-account-split-outer">
                <div class="my-account-left-outer">
                  <div class="my-account-split-container">
                    <div class="my-account-form-container">
                      <div class="input-form w-form">
                        <form id="email-form-2" action="{{ route('update-profile') }}" name="email-form-2" data-name="Email Form 2" method="POST" data-wf-page-id="654a84cf5f752bcc00b636a9" data-wf-element-id="1e4cb673-2407-c036-d3d6-56bb0426aa02" onsubmit="return confirmSubmit()">
                            {{ csrf_field() }}
                            <label for="name">Full Name</label><input type="text" class="@error('name') is-invalid @enderror text-input-form w-input" maxlength="256" name="name" data-name="Name" placeholder="" id="name" value="{{  $userDetails->name }}">
                            @error('name')
                            <div class="alert alert-danger">{{$message}}</div>
                            @enderror

                            <label for="email">Email</label>
                            <p class="my-account-email">{{  $userDetails->email }}</p>

                            @if(Auth::user()->user_role == 3)
                              <label for="email">Company Name</label><input type="text" class="@error('company_name') is-invalid @enderror text-input-form w-input" maxlength="256" name="company_name" data-name="" placeholder="" id="company_name" value="{{ old($userDetails->companies[0]->company_name, $userDetails->companies[0]->company_name)}}">
                              @error('company_name')
                              <div class="alert alert-danger">{{$message}}</div>
                              @enderror
                              <label for="email-2">Company URL</label><input type="text" class="@error('company_url') is-invalid @enderror text-input-form w-input" maxlength="256" name="company_url" data-name="" placeholder="https://" id="company_url" value="{{old($userDetails->companies[0]->url,$userDetails->companies[0]->url)}}">
                              @error('company_url')
                              <div class="alert alert-danger">{{$message}}</div>
                              @enderror
                              <label for="zapier_webhook_url">Zapier Webhook URL</label>
                              <input type="text" class="form-control @error('zapier_webhook_url') is-invalid @enderror" maxlength="256" name="zapier_webhook_url" id="zapier_webhook_url" placeholder="https://" value="{{ $userDetails->zapier_webhook_url }}">
                              @error('zapier_webhook_url')
                                  <div class="alert alert-danger">{{ $message }}</div>
                              @enderror
                            @endif

                            <label for="mobile-number">Mobile Number</label>
                            <input type="number" class="@error('mobile_number') is-invalid @enderror text-input-form w-input" maxlength="256" name="mobile_number" data-name="Mobile Number" placeholder="e.g. 888-555-1212" id="mobile-number" value="{{$userDetails->mobile_number}}">
                            @error('mobile_number')
                              <div class="alert alert-danger">{{$message}}</div>
                            @enderror

                            <!--
                            <label for="solution-offering">About Your Business</label> <span id="charCounter" style="font-size: 11px; margin-left: 20px;">0 / 1000</span>
                            <textarea class="form-control @error('solution_offering') is-invalid @enderror my-account-email" rows="4" id="solution_offering" name="solution_offering" placeholder="Describe what your company does, how you impact your customers, and who your target audiance is." oninput="updateCharacterCounter()">{{$userDetails->companies[0]->solution_offering}}</textarea>
                            @error('solution_offering')
                        

                              <div class="alert alert-danger">{{$message}}</div>
                            @enderror
                            -->

                            <label for="password">Current Password</label>
                            <input type="password" class="@error('password') is-invalid @enderror text-input-form w-input" maxlength="256" name="current_password" data-name="Name" placeholder="" id="current_password" autocomplete="off">
                            @error('current_password')
                              <div class="alert alert-danger">{{$message}}</div>
                            @enderror

                            <label for="password">New Password</label>
                            <input type="password" class="@error('password') is-invalid @enderror text-input-form w-input" maxlength="256" name="password" data-name="Name" placeholder="" id="password" autocomplete="off">
                            @error('password')
                              <div class="alert alert-danger">{{$message}}</div>
                            @enderror

                            <div class="confirm-password-container" id="confirm-password-container">
                              <label for="email">Confirm New Password</label>
                              <input type="password" class="@error('confirm_password') is-invalid @enderror text-input-form w-input" maxlength="256" name="confirm_password" data-name="" placeholder="" id="confirm_password" autocomplete="off">
                              @error('confirm_password')
                                <div class="alert alert-danger">{{$message}}</div>
                              @enderror
                            </div>

                            @if(auth()->user()->subscription('default') && auth()->user()->subscription('default')->ends_at === null)
                              <div class="subscription-links">
                                @can('upgrade-subscription')
                                  <a href="/composer/pricing" class="cancel_subscription_link">
                                      Update subscription
                                  </a>
                                @endcan
                                @can('cancel-subscription')
                                  <span class="cancel_subscription_link" onclick="cancelSubscription({{auth()->user()->subscription('default')->id}})">
                                      <input type="hidden" id="_token" value="{{ csrf_token() }}">
                                      Cancel subscription
                                  </span>
                                @endcan
                              </div>
                            @endif
                            @cannot('Restrict-to-update-account-details')
                              <div class="gen-flow-cta-container">
                                  <div class="gen-flow-button-block">
                                      <button type="submit" class="button button-shadow purple-gradient w-inline-block">
                                          <div class="button-label white-text">Save Changes</div>
                                      </button>
                                  </div>
                              </div>
                            @endcannot
                        </form>
                        <div class="w-form-done">
                          <div>Thank you! Your submission has been received!</div>
                        </div>
                        <div class="w-form-fail">
                          <div>Oops! Something went wrong while submitting the form.</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
          {{-- </div> --}}
        {{-- </div> --}}
      </div>
    </div>
    <!-- Model code for generate partner link -->
    <div id="plan-change-request-box" class="modal">
      <form class="modal-content" action="#">
        <div class="container">
          <span onclick="window.location.reload();" class="close" title="Close">x</span>
          <h5> Your subscription has been cancelled. You can continue using the service until the end of your billing period. You can subscribe again any time by visiting My Articles</h5>
        </div>
      </form>
    </div>
</section>

<script>
function updateCharacterCounter() {
    var textArea = document.getElementById('solution_offering');
    var charCounter = document.getElementById('charCounter');
    var maxLength = 1000;
    var currentLength = textArea.value.length;

    if (currentLength > maxLength) {
        textArea.value = textArea.value.substring(0, maxLength);
        currentLength = maxLength;
    }

    charCounter.textContent = currentLength + ' / ' + maxLength;
}

// Initialize the character counter when the window loads
window.onload = function() {
    updateCharacterCounter();
}
</script>

@include('footer')