@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">Create New Channel</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">Create</li>
        </ol>
      </div>
    </div>
  </div>
</div>

<section class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">Configuration</h3>
          </div>
          <form action="{{ route('channel.store') }}" method="POST">
            @csrf
            <div class="card-body">
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="display_phone_number">Phone Number <span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('display_phone_number') is-invalid @enderror"
                      id="display_phone_number" name="display_phone_number" value="{{ old('display_phone_number') }}"
                      required>
                    @error('display_phone_number')
                    <span class="invalid-feedback">{{ $message }}</span>
                    @enderror
                  </div>

                  <div class="form-group">
                    <label for="name">Display Name <span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name"
                      placeholder="Project name" value="{{ old('name') }}" required>
                    @error('name')
                    <span class="invalid-feedback">{{ $message }}</span>
                    @enderror
                  </div>

                  <div class="form-group">
                    <label for="fb_business_id">Meta Business Manager ID <span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('fb_business_id') is-invalid @enderror"
                      id="fb_business_id" name="fb_business_id" value="{{ old('fb_business_id') }}" required>
                    @error('fb_business_id')
                    <span class="invalid-feedback">{{ $message }}</span>
                    @enderror
                  </div>

                  <div class="form-group">
                    <label for="wa_access_token">WA API Token <span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('wa_access_token') is-invalid @enderror"
                      id="wa_access_token" name="wa_access_token" value="{{ old('wa_access_token') }}" required>
                    @error('wa_access_token')
                    <span class="invalid-feedback">{{ $message }}</span>
                    @enderror
                  </div>

                  <div class="form-group">
                    <label for="wa_phone_number_id">WA Phone Number ID <span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('wa_phone_number_id') is-invalid @enderror"
                      id="wa_phone_number_id" name="wa_phone_number_id" value="{{ old('wa_phone_number_id') }}"
                      required>
                    @error('wa_phone_number_id')
                    <span class="invalid-feedback">{{ $message }}</span>
                    @enderror
                  </div>

                  <div class="form-group">
                    <label for="wa_waba_id">WA Business Account ID <span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('wa_waba_id') is-invalid @enderror" id="wa_waba_id"
                      name="wa_waba_id" value="{{ old('wa_waba_id') }}" required>
                    @error('wa_waba_id')
                    <span class="invalid-feedback">{{ $message }}</span>
                    @enderror
                  </div>

                  <div class="form-group">
                    <label for="es_domain">ES Domain</label>
                    <input type="text" class="form-control @error('es_domain') is-invalid @enderror" id="es_domain"
                      name="es_domain" value="{{ old('es_domain') }}">
                    @error('es_domain')
                    <span class="invalid-feedback">{{ $message }}</span>
                    @enderror
                  </div>

                  <div class="form-group">
                    <label for="es_api_token">ES API Token</label>
                    <input type="text" class="form-control @error('es_api_token') is-invalid @enderror"
                      id="es_api_token" name="es_api_token" value="{{ old('es_api_token') }}">
                    @error('es_api_token')
                    <span class="invalid-feedback">{{ $message }}</span>
                    @enderror
                  </div>
                </div>

                <div class="col-md-6">
                  <div class="form-group">
                    <label for="slack_webhook_url">Slack Webhook URL</label>
                    <input type="url" class="form-control @error('slack_webhook_url') is-invalid @enderror"
                      id="slack_webhook_url" name="slack_webhook_url" value="{{ old('slack_webhook_url') }}">
                    @error('slack_webhook_url')
                    <span class="invalid-feedback">{{ $message }}</span>
                    @enderror
                  </div>

                  <div class="form-group">
                    <label for="notify_emails">Notify Emails</label>
                    <input type="text" class="form-control @error('notify_emails') is-invalid @enderror"
                      id="notify_emails" name="notify_emails" placeholder="Emails for notifications (comma separated)"
                      value="{{ old('notify_emails') }}">
                    @error('notify_emails')
                    <span class="invalid-feedback">{{ $message }}</span>
                    @enderror
                    <small class="form-text text-muted">Separate multiple emails with commas</small>
                  </div>

                  <div class="form-group">
                    <label for="brand_name">Brand Name</label>
                    <input type="text" class="form-control @error('brand_name') is-invalid @enderror" id="brand_name"
                      name="brand_name" value="{{ old('brand_name') }}">
                    @error('brand_name')
                    <span class="invalid-feedback">{{ $message }}</span>
                    @enderror
                  </div>

                  <div class="form-group">
                    <label for="fallback_message">Fallback message incase of invalid input</label>
                    <textarea class="form-control @error('fallback_message') is-invalid @enderror" id="fallback_message"
                      name="fallback_message" rows="3"
                      placeholder="Invalid input, please try again">{{ old('fallback_message') }}</textarea>
                    @error('fallback_message')
                    <span class="invalid-feedback">{{ $message }}</span>
                    @enderror
                  </div>

                  <div class="form-group">
                    <label for="follow_up_minutes">Follow up after {X} minutes</label>
                    <input type="number" class="form-control @error('follow_up_minutes') is-invalid @enderror"
                      id="follow_up_minutes" name="follow_up_minutes" value="{{ old('follow_up_minutes', 30) }}"
                      min="0">
                    @error('follow_up_minutes')
                    <span class="invalid-feedback">{{ $message }}</span>
                    @enderror
                  </div>

                  <div class="form-group">
                    <label for="date_from">Campaign Start Date <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') }}" required>
                    @error('date_from')
                    <span class="invalid-feedback">{{ $message }}</span>
                    @enderror
                  </div>

                  <div class="form-group">
                    <label for="date_to">Campaign End Date</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>

            </div>

            <div class="card-footer">
              <button type="submit" class="btn btn-primary">
                <i class="fas fa-save"></i> Create Channel
              </button>
              <a href="{{ route('admin.select-channel') }}" class="btn btn-secondary">
                <i class="fas fa-times"></i> Cancel
              </a>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

@push('scripts')
<script>
  $(document).ready(function() {
  $('#add-short-link-pair').click(function() {
    var newPair = `
      <div class="short-link-pair mb-3">
        <div class="row">
          <div class="col-md-5">
            <input type="text" class="form-control" name="extra_short_link_slug[]" placeholder="Short Link Slug">
          </div>
          <div class="col-md-6">
            <input type="text" class="form-control" name="extra_short_link_message[]" placeholder="Short Link Message">
          </div>
          <div class="col-md-1">
            <button type="button" class="btn btn-danger btn-sm remove-pair">
              <i class="fas fa-trash"></i>
            </button>
          </div>
        </div>
      </div>
    `;
    $('#short-link-pairs').append(newPair);
  });

  $(document).on('click', '.remove-pair', function() {
    $(this).closest('.short-link-pair').remove();
  });
});
</script>
@endpush
@endsection