@extends('adminlte::page')

@section('title', 'Add New Campaign')

@section('content_header')
<div class="row">
  <div class="col-6">
    <h1>Add New Campaign</h1>
  </div> <!-- /.col -->
  <div class="col-6">
  </div> <!-- /.col -->
</div> <!-- /.row -->
@stop

@section('content')

@include('notifications')

<!-- form start -->
<form method="POST" action="/admin/campaigns" enctype="multipart/form-data" role="form">
  {{ csrf_field() }}

  <div class="row">
    <div class="col-md-8">
      <div class="card card-default">
        <div class="card-header">
          <h3 class="card-title">Campaign Details</h3>
        </div> <!-- /.card-header -->
        <div class="card-body">
          <div class="form-group">
            <label for="title">Campaign Title</label>
            <input type="text" name="title" class="form-control" id="title" placeholder="Type campaign title"
              value="{{ old('title') }}">
          </div>
          <div class="form-group">
            <label for="content">Campaign Content</label>
            <textarea name="content" id="content">{{ old('content') }}</textarea>
          </div>
          <div class="form-group">
            <label for="url">Campaign Link</label>
            <input type="text" name="url" class="form-control" id="url" placeholder="Type campaign url"
              value="{{ old('url') }}">
          </div>
        </div> <!-- /.card-body -->
      </div> <!-- /.card -->
    </div> <!-- /.col -->
    <div class="col-md-4">
      <div class="card card-default">
        <div class="card-header">
          <h3 class="card-title">Campaign Image</h3>
        </div> <!-- /.card-header -->
        <div class="card-body">
          @include('backend.components.media-input', ['value' => 'image', 'image' => ''])
        </div> <!-- /.card-body -->
      </div> <!-- /.card -->
      <div class="card card-default">
        <div class="card-body">
          <div class="form-group">
            <label for="categories">Category</label>
            <div class="form-group">
              <select name="categories[]" class="select2" id="categories" multiple="multiple"
                data-placeholder="Select Campaign Categories" style="width: 100%;">
                @foreach( $categories as $categroy )
                <option value="{{ $categroy->id }}">{{ $categroy->name }}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="form-group">
            <label for="status">Status</label>
            <select name="status" class="form-control" id="status" placeholder="Select blog status">
              <option value="active" selected="selected">Active</option>
              <option value="inactive">Inactive</option>
            </select>
          </div>
        </div> <!-- /.card-body -->
      </div> <!-- /.card -->

      <div class="card card-default">
        <div class="card-body">
          <button type="submit" name="saveCampaign" class="btn btn-flat btn-primary" id="saveCampaign"><i
              class="far fa-save"></i> Save</button>
          <a class="btn btn-flat btn-secondary float-right" href="/admin/campaigns"><i class="fas fa-share"></i>
            Back</a>
        </div> <!-- /.card-body -->
      </div> <!-- /.card -->
    </div> <!-- /.col -->
  </div> <!-- /.row -->
</form>
@stop
@section('plugins.jQuery-UI', true)
@section('plugins.Select2', true)
@section('plugins.Summernote', true)
@section('plugins.BootstrapSwitch', true)
@section('adminlte_js')
<script>
  // runs when the document is ready --> for media files
    $(document).ready(function() {
    getChosenFilesCount();
    showSelectedFilePreviewOnLoad();
  });
  $(function () {
    //Initialize Select2 Elements
    $('.select2').select2()

    $('#content').summernote({
      height: 300, // set editor height
    })
});
</script>
@stop