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

<section class="body-section">
    <x-transient-message />
    <div class="content-width-container split-view">
        @include('left-split-view')
      <div class="primary-content-container">
        <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-details-container">
          <div class="my-account-form-block 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="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(hasActiveSubscription(Auth::user()->stripe_id))
                    <div class="subscription-links">
                      @can('upgrade-subscription')
                        @if (auth()->user()->can('3-up-pricing-page') || auth()->user()->can('single-pricing-page'))
                          <a href="/composer/pricing" class="cancel_subscription_link">
                              Update subscription
                          </a>
                        @endif
                      @endcan
                      @can('cancel-subscription')
                        <span class="cancel_subscription_link" onclick="cancelSubscription()">
                            <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>
          @if(!empty($subscriptionsData) && count($subscriptionsData))
            <div class="my-account-subscription-table">
                <div class="title-block-title">
                  <span>My Subscription Details</span>
                </div>
                <table class="table-stripe-subscription-details">
                    <thead class="subscription-details-table">
                        <tr>
                            @foreach ($tableColumns as $column)
                                <th class="subscription-details-table-head">{{ $column }}</th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($subscriptionsData as $index => $subscription)
                            <tr>
                                <td class="subscription-details-row-data">
                                    <span class="badge 
                                        @if($subscription['status'] === 'Active') badge-success
                                        @elseif($subscription['status'] === 'Scheduled') badge-info
                                        @else badge-secondary
                                        @endif">
                                        {{ $subscription['status'] }}
                                    </span>
                                </td>
                                <td class="subscription-details-row-data">{{ $subscription['next_payment'] }}</td>
                                <td class="subscription-details-row-data">
                                    {{ $subscription['article_unit'] . $subscription['social_post_unit'] . $subscription['interval'] }}
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
          @endif
        </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')