@extends('layouts.admin-simple')

@section('content')
<div class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1 class="m-0">Connect WhatsApp</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="{{ route('admin.select-channel') }}">Channels</a></li>
          <li class="breadcrumb-item active">Connect</li>
        </ol>
      </div>
    </div>
  </div>
</div>

<section class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-8">

        @unless($configured)
        <div class="alert alert-warning">
          <h5><i class="icon fas fa-exclamation-triangle"></i> Embedded Signup is not configured</h5>
          Set <code>FB_APP_ID</code>, <code>FB_APP_SECRET</code> and <code>FB_ES_CONFIG_ID</code> in the
          environment, then reload this page. You can still
          <a href="{{ route('channel.create') }}">enter credentials manually</a>.
        </div>
        @else

        <div class="card @if($pending) d-none @endif" id="es-connect-card">
          <div class="card-header">
            <h3 class="card-title">Step 1 &mdash; Connect with Meta</h3>
          </div>
          <div class="card-body">
            <p>
              Sign in with the Facebook account that manages the business, and pick the WhatsApp
              number to connect. Nothing is saved here until you confirm the next step.
            </p>

            <div class="alert alert-danger d-none" id="es-error"></div>

            <button type="button" class="btn btn-primary" id="es-connect">
              <i class="fab fa-facebook mr-1"></i> Connect with Facebook
            </button>
            <span class="text-muted ml-2 d-none" id="es-working">
              <i class="fas fa-spinner fa-spin"></i> Talking to Meta&hellip;
            </span>

            <a href="{{ route('channel.create') }}" class="btn btn-link float-right">Enter credentials manually</a>
            <a href="{{ route('channel.connect.links', [], false) }}" class="btn btn-link float-right">Send a signup link</a>
          </div>
        </div>

        <div class="card @unless($pending) d-none @endunless" id="es-confirm-card">
          <div class="card-header">
            <h3 class="card-title">Step 2 &mdash; Confirm the channel</h3>
          </div>
          <form action="{{ route('channel.connect.store', [], false) }}" method="POST">
            @csrf
            <div class="card-body">

              <dl class="row mb-4">
                <dt class="col-sm-4">Phone number</dt>
                <dd class="col-sm-8" id="es-phone">{{ $pending['display_phone_number'] ?? '' }}</dd>
                <dt class="col-sm-4">Verified name</dt>
                <dd class="col-sm-8" id="es-verified">{{ $pending['verified_name'] ?? '' }}</dd>
                <dt class="col-sm-4">WhatsApp Business Account</dt>
                <dd class="col-sm-8" id="es-waba">{{ $pending['waba_name'] ?? '' }}</dd>
              </dl>

              <div class="form-group">
                <label for="name">Channel name <span class="text-danger">*</span></label>
                <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name"
                  value="{{ old('name', $pending['verified_name'] ?? '') }}" required>
                @error('name')
                <span class="invalid-feedback">{{ $message }}</span>
                @enderror
              </div>

              <div class="row">
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="date_from">Active from <span class="text-danger">*</span></label>
                    <input type="date" class="form-control @error('date_from') is-invalid @enderror" id="date_from"
                      name="date_from" value="{{ old('date_from', now()->toDateString()) }}" required>
                    @error('date_from')
                    <span class="invalid-feedback">{{ $message }}</span>
                    @enderror
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="date_to">Active until</label>
                    <input type="date" class="form-control @error('date_to') is-invalid @enderror" id="date_to"
                      name="date_to" value="{{ old('date_to') }}">
                    @error('date_to')
                    <span class="invalid-feedback">{{ $message }}</span>
                    @enderror
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="follow_up_minutes">Follow-up after (minutes)</label>
                    <input type="number" min="0" class="form-control @error('follow_up_minutes') is-invalid @enderror"
                      id="follow_up_minutes" name="follow_up_minutes" value="{{ old('follow_up_minutes') }}">
                    @error('follow_up_minutes')
                    <span class="invalid-feedback">{{ $message }}</span>
                    @enderror
                  </div>
                </div>
              </div>

              <p class="text-muted mb-0">
                On save, the app subscribes to this WhatsApp Business Account and registers the
                number. Anything that fails is reported and can be retried from Channel Preferences.
              </p>
            </div>
            <div class="card-footer">
              <button type="submit" class="btn btn-success">Create channel</button>
            </div>
          </form>
        </div>

        @endunless

      </div>
    </div>
  </div>
</section>
@endsection

@section('script')
@if($configured)
<script>
  // The popup partial hands the exchange result here: fill and reveal step 2.
  window.esConnected = function (data) {
    document.getElementById('es-phone').textContent = data.display_phone_number || '—';
    document.getElementById('es-verified').textContent = data.verified_name || '—';
    document.getElementById('es-waba').textContent = data.waba_name || '—';

    var name = document.getElementById('name');
    if (!name.value) {
      name.value = data.suggested_name || '';
    }

    document.getElementById('es-connect-card').classList.add('d-none');
    document.getElementById('es-confirm-card').classList.remove('d-none');
  };
</script>
@include('admin.channel.partials.es-popup', ['exchangeUrl' => route('channel.connect.exchange', [], false)])
@endif
@endsection