@extends('layouts.master')
@section('title') Create Campaign @endsection
@section('css')
<link rel="stylesheet" type="text/css" href="{{ URL::asset('assets/libs/summernote/summernote.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{ URL::asset('assets/css/jquery.datetimepicker.min.css')}}">


@endsection
@section('content')
@component('common-components.breadcrumb')
@slot('title')@endslot
@endcomponent
<style>
  .error {
    font-weight: 500;
  }

  .success-msg,
  .error-msg {
    margin: 10px 0;
    padding: 10px;
    border-radius: 3px 3px 3px 3px;
  }

  .error-msg {
    color: #D8000C;
    background-color: #FFBABA;
  }

  .success-msg {
    color: #270;
    background-color: #DFF2BF;
  }

  .field-icon {
    float: right;
    margin-left: -25px;
    margin-top: -25px;
    position: relative;
    margin-right: 10px;
    z-index: 2;
  }

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Firefox */
  input[type=number] {
    -moz-appearance: textfield;
  }

  .tag {
    background: #556ee6;
    color: white;
    border-bottom: 1px solid #b3cee1;
    border-right: 1px solid #b3cee1;
    padding: 3px 4px 3px 4px;
    margin: 2px 2px 2px 0;
    text-decoration: none;
    font-size: 90%;
    line-height: 2.4;
    white-space: nowrap;
  }

  .tag:hover {
    background-color: #c4dae9;
    border-bottom: 1px solid #c4dae9;
    border-right: 1px solid #c4dae9;
    text-decoration: none;
  }

  .notes {
    font-weight: 600;
  }
</style>


<!-- For Error Messages -->
@if (Session::get('error'))
<div class="error-msg alert">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <i class="fa fa-times-circle"></i>
  {{ Session::get('error') }}
</div>
@endif

<!-- For Success Messages -->
@if (Session::get('success'))
<div class="success-msg alert">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <i class="fa fa-check"></i>
  {{ Session::get('success') }}
</div>
@endif

<!-- For Warning Messages -->



<div class="row">
  <div class="col-12">
    <div class="card mb-2">
      <div class="card-body">
        <h4 class="card-title mb-4">Create New Campaign </h4>
        <form name="frm1" id="frm1" class="needs-validation" method="post" enctype="multipart/form-data" action="{{route('campaign.store')}}" novalidate autocomplete="off">
          @csrf

          <div class="form-group row mb-4">
            <label for="projectname" class="col-form-label col-lg-2">Select Platform <span style="color:red;">*</span></label>
            <div class="col-lg-10">

              <select name="platform" id="platform" class="form-control" required>

                <!--  <option value="Facebook Campaign" @if (old('platform') == 'Facebook Campaign') selected="selected" @endif>Facebook Campaign</option> -->
                <option value="Facebook Post" @if (old('platform')=='Facebook Post' ) selected="selected" @endif >Facebook Post</option>
                <!--     <option value="Instagram"  @if (old('platform') == 'Instagram') selected="selected" @endif>Instagram</option> -->
              </select>
              @if($errors->has('platform'))
              <div class="error">{{ $errors->first('platform') }}</div>
              @endif
            </div>
          </div>

          <div id="facebook">

            <div class="form-group row mb-4">
              <label for="projectname" class="col-form-label col-lg-2">Title <span style="color:red;">*</span></label>
              <div class="col-lg-10">
                <input id="title" name="title" type="text" class="form-control" placeholder="Enter event title" value="{{old('title')}}">
                @if($errors->has('title'))
                <div class="error">{{ $errors->first('title') }}</div>
                @endif
              </div>
            </div>
            <div class="form-group row mb-4">
              <label for="projectname" class="col-form-label col-lg-2">Description <span style="color:red;">*</span></label>
              <div class="col-lg-10">
                <textarea class="form-control" id="description" name="description" placeholder="Enter event description">{{ old('description')  }}</textarea>
                @if($errors->has('description'))
                <div class="error">{{ $errors->first('description') }}</div>
                @endif
              </div>
            </div>


            <div class="form-group row mb-4">
              <label for="projectname" class="col-form-label col-lg-2">Date & Time <span style="color:red;">*</span> </label>
              <div class="col-lg-10">
                <input class="form-control" id="date_time" name="date_time" type="text" placeholder="Select Date and Time" value="{{ old('date_time') }}">
                @if($errors->has('date_time'))
                <div class="error">{{ $errors->first('date_time') }}</div>
                @endif
              </div>
            </div>

            <div class="form-group row mb-4">
              <label for="projectname" class="col-form-label col-lg-2">Facebook Event Cover Photo <span style="color:red;">*</span></label>
              <div class="col-lg-10">
                {{-- <input id="cover_photo" name="cover_photo" type="text" class="form-control" placeholder="Enter live image url" value="{{old('cover_photo')}}" > --}}
                <div class="custom-file mb-3">
                  <input type="file" name="cover_photo" class="image custom-file-input" id="cover_photo">
                  <label class="custom-file-label" for="customFile">Choose Cover Photo</label>
                </div>
                <img id="cover_photo_image" name="cover_photo_image" style="display:none;" class="facebook_cover_photo">
                <span id="facebook_cover_photo_error" class="error"></span>
                @if($errors->has('cover_photo'))
                <div class="error">{{ $errors->first('cover_photo') }}</div>
                @endif
              </div>
            </div>
          </div>
          <div id="facebook2" class="d-none">

            <div class="form-group row mb-4">
              <label for="projectname" class="col-form-label col-lg-2">Option<span style="color:red;">*</span></label>
              <div class="col-lg-10">
                <div class="form-check">
                  <input id="label1" class="form-check-input" type="radio" name="radio1" value="1">
                  <label for="label1" class="form-check-label">Existing Post</label>
                  <br>
                  <input id="label2" class="form-check-input" checked type="radio" name="radio1" value="2">
                  <label for="label2" class="form-check-label">New Post</label>
                </div>

              </div>
            </div>

            <div class="existing_post_div d-none">
              <div class="form-group row mb-4">
                <label for="projectname" class="col-form-label col-lg-2">Existing Facebook Posts<span style="color:red;">*</span></label>
                <div class="col-lg-10">
                  <select name="existing_posts" id="existing_posts" class="form-control" required>
                    <option value="">Select</option>
                    @foreach($camps as $row)
                    <option value="{{ $row['id'].','.$row['message']}} {{ $row['url'] != ""  ? ','.$row['url'] :  "" }}">{{ $row['message'] }}</option>
                    @endforeach
                  </select>
                  @if($errors->has('existing_posts'))
                  <div class="error">{{ $errors->first('existing_posts') }}</div>
                  @endif
                </div>
              </div>
            </div>


            <div class="form-group row mb-4">
              <label for="projectname" class="col-form-label col-lg-2">Title <span style="color:red;">*</span></label>
              <div class="col-lg-10">
                <input id="facebook_post_title" name="facebook_post_title" type="text" class="form-control" placeholder="Enter Title" value="{{old('facebook_post_title')}}">
                @if($errors->has('facebook_post_title'))
                <div class="error">{{ $errors->first('facebook_post_title') }}</div>
                @endif
              </div>
            </div>
            <div class="new_post_div d-none">
              <div class="form-group row mb-4">
                <label for="projectname" class="col-form-label col-lg-2">Facebook Image<span style="color:red;">*</span></label>
                <div class="col-lg-10">
                  {{-- <input id="facebook_image_url" name="facebook_image_url" type="text" class="form-control" placeholder="Enter Facebook post image url" value="{{old('facebook_image_url')}}" > --}}
                  <div class="custom-file mb-3">
                    <input type="file" name="facebook_image_url" class="image custom-file-input" id="facebook_image_url">
                    <label class="custom-file-label" for="customFile">Choose Facebook Image</label>
                  </div>
                  <img id="image1" name="image1" style="display:none;" class="image1">
                  <span id="image1_error" class="error"></span>
                  @if($errors->has('facebook_image_url'))
                  <div class="error">{{ $errors->first('facebook_image_url') }}</div>
                  @endif
                </div>
              </div>
            </div>
          </div>
          <div id="instagram" class="d-none">

            <div class="form-group row mb-4">
              <label for="projectname" class="col-form-label col-lg-2">Caption <span style="color:red;">*</span></label>
              <div class="col-lg-10">
                <input id="caption" name="caption" type="text" class="form-control" placeholder="Enter caption" value="{{old('caption')}}">
                @if($errors->has('caption'))
                <div class="error">{{ $errors->first('caption') }}</div>
                @endif
              </div>
            </div>

            <div class="form-group row mb-4">
              <label for="projectname" class="col-form-label col-lg-2">Image <span style="color:red;">*</span></label>
              <div class="col-lg-10">
                {{-- <input id="image_url" name="image_url" type="text" class="form-control" placeholder="Enter live image url" value="{{old('image_url')}}" > --}}

                <div class="custom-file mb-3">
                  <input type="file" name="image_url" class="image custom-file-input" id="image_url">
                  <label class="custom-file-label" for="customFile">Choose Image</label>
                </div>
                <img id="image2" name="image2" style="display:none;" class="image2">
                <span id="image2_error" class="error"></span>


                @if($errors->has('image_url'))
                <div class="error">{{ $errors->first('image_url') }}</div>
                @endif
              </div>
            </div>
          </div>

          <div class="form-group row mb-4">
            <label for="projectname" class="col-form-label col-lg-2">Word identifier <span style="color:red;">*</span></label>
            <div class="col-lg-10">
              <input id="word_identifier" name="word_identifier" type="text" class="form-control" placeholder="Provide a word identifier" value="{{old('word_identifier')}}">
              <span class="text-success notes">Word that triggers a donation in the comments.</span><br>
              <span class="text-success notes">Examples: "Donate","Give" </span>
              <div class="target" contenteditable="false"></div>
              @if($errors->has('word_identifier'))
              <div class="error">{{ $errors->first('word_identifier') }}</div>
              @endif
            </div>
          </div>
          <input type="hidden" id="last_platform" name="last_platform" value="{{ old('last_platform') }}">
          <div class="row justify-content-end">
            <div class="col-lg-10">
              <button type="submit" class="btn btn-primary create_admin"> Create Campaign </button>
              <a href="../campaign" class="btn btn-danger"> Back </a>
            </div>
          </div>
        </form>


      </div>
    </div>
  </div> <!-- end col -->
</div>
<!-- end row -->
@endsection
@section('script')

<script src="{{ URL::asset('assets/js/jquery.datetimepicker.full.min.js')}}"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js" integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/additional-methods.min.js" integrity="sha512-6S5LYNn3ZJCIm0f9L6BCerqFlQ4f5MwNKq+EthDXabtaJvg3TuFLhpno9pcm+5Ynm6jdA9xfpQoMz2fcjVMk9g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
  $(function() {
 $("#last_platform").val("Facebook Post");
        $("#facebook").addClass('d-none');
        $("#instagram").addClass('d-none');
        $("#facebook2").removeClass('d-none');
        $("#frm1").validate();
        $("input[id*=facebook_post_title]").rules("add", "required");
        $("input[id*=facebook_image_url]").rules("add", "required");
    $('#date_time').datetimepicker({
      format: "Y-m-d h:i:s",
      step: 10,
      validateOnBlur: false
    });
    $("form[name='frm1']").validate({
      rules: {
        platform: "required",
        word_identifier: "required",
      },
      messages: {
        platform: "Please provide a platform",
        word_identifier: "Please provide a word identifier",
      },
      submitHandler: function(form) {
        form.submit();
      }
    });
    $(document).on('change', '#platform', function() {
alert("jai");
      if ($(this).val() == 'Facebook Campaign') {
        $("#last_platform").val("Facebook Campaign");
        $("#facebook").removeClass('d-none');
        $("#frm1").validate();
        $("input[id*=title]").rules("add", "required");
        $("textarea[id*=description]").rules("add", "required");
        $("input[id*=date_time]").rules("add", "required");
        $("input[id*=cover_photo]").rules("add", "required");
        $("#instagram").addClass('d-none');
        $("#facebook2").addClass('d-none');
      } else if ($(this).val() == 'Facebook Post') {
        $("#last_platform").val("Facebook Post");
        $("#facebook").addClass('d-none');
        $("#instagram").addClass('d-none');
        $("#facebook2").removeClass('d-none');
        $("#frm1").validate();
        $("input[id*=facebook_post_title]").rules("add", "required");
        $("input[id*=facebook_image_url]").rules("add", "required");
      } else {

        $("#last_platform").val("Instagram");
        $("#instagram").removeClass('d-none');
        $("#frm1").validate();
        $("input[id*=caption]").rules("add", "required");
        $("input[id=image_url]").rules("add", "required");
        $("#facebook").addClass('d-none');
        $("#facebook2").addClass('d-none');
      }
    })

    var platform_val = $("#platform").val();
    if (platform_val == "Facebook Campaign") {

      $("#frm1").validate();
      $("input[id*=title]").rules("add", "required");
      $("textarea[id*=description]").rules("add", "required");
      $("input[id*=date_time]").rules("add", "required");
      $("input[id*=cover_photo]").rules("add", "required");
    } else if (platform_val == "Facebook Post") {
      $("#frm1").validate();
      $("input[id*=facebook_post_title]").rules("add", "required");
      $("input[id*=facebook_image_url]").rules("add", "required");
    } else {
      $("#frm1").validate();
      $("input[id*=title]").rules("remove", "required");
      $("textarea[id*=description]").rules("remove", "required");
      $("input[id*=date_time]").rules("remove", "required");
      $("input[id*=cover_photo]").rules("remove", "required");
    }
    var last = $("#last_platform").val();
    if (last == "Facebook Campaign") {
      $("#facebook").removeClass('d-none');
      $("#instagram").addClass('d-none');
      $("#frm1").validate();
      $("input[id*=title]").rules("add", "required");
      $("textarea[id*=description]").rules("add", "required");
      $("input[id*=date_time]").rules("add", "required");
      $("input[id*=cover_photo]").rules("add", "required");
      $("input[id*=caption]").rules("remove", "required");
      $("input[id*=image_url]").rules("remove", "required");
    } else if (last == "Facebook Post") {
      $("#facebook").addClass('d-none');
      $("#instagram").addClass('d-none');
      $("#facebook2").removeClass('d-none');
      $("#frm1").validate();
      $("input[id*=facebook_post_title]").rules("add", "required");
      $("input[id*=facebook_image_url]").rules("add", "required");

    } else if (last == "Instagram") {
      $("#instagram").removeClass('d-none');
      $("#facebook").addClass('d-none');
      $("#frm1").validate();
      $("input[id*=title]").rules("remove", "required");
      $("textarea[id*=description]").rules("remove", "required");
      $("input[id*=date_time]").rules("remove", "required");
      $("input[id*=cover_photo]").rules("remove", "required");
      $("input[id*=caption]").rules("add", "required");
      $("input[id*=image_url]").rules("add", "required");
    } else {
      $("#facebook").removeClass('d-none');
      $("#instagram").addClass('d-none');
      $("#frm1").validate();
      $("input[id*=title]").rules("add", "required");
      $("textarea[id*=description]").rules("add", "required");
      $("input[id*=date_time]").rules("add", "required");
      $("input[id*=cover_photo]").rules("add", "required");
    }

    $("#word_identifier").keyup(function(e) {
      tags = this.value.split(/\s+/);
      $(".target").html(""); //clear
      $.each(tags, function(ind, tag) {
        $(".target").append("<a href='#' class='tag'>" + tag + "</a>");
      });
    });

    var _URL = window.URL || window.webkitURL;
    $(document).on('change', '#cover_photo', function(e) {
      var file, img;

      let name = e.target.files[0].name;
      var ext = name.split('.').pop().toLowerCase();
      if ((file = this.files[0])) {
        if ($.inArray(ext, ['png', 'jpg', 'jpeg', 'svg', 'jfif']) == -1) {
          $("#facebook_cover_photo_error").text("Please upload a picture with this formats.e.g png,jpg,jpeg,svg,jfif");
          $("#cover_photo").val("");
          $("#cover_photo").val(null);
          $("#cover_photo_image").attr('src', '');
          $("#cover_photo_image").css('display', 'none');
        } else {
          img = new Image();
          img.onload = function() {
            $("#facebook_cover_photo_error").text("");
            $("#cover_photo_image").css("display", "block");
            $('#cover_photo_image').attr('src', img.src).height(250).width(250);

          }
          img.src = _URL.createObjectURL(file);
        }
      }
    });
    $(document).on('change', '#facebook_image_url', function(e) {
      var file, img;

      let name = e.target.files[0].name;
      var ext = name.split('.').pop().toLowerCase();
      if ((file = this.files[0])) {
        if ($.inArray(ext, ['png', 'jpg', 'jpeg', 'svg', 'jfif']) == -1) {
          $("#image1_error").text("Please upload a picture with this formats.e.g png,jpg,jpeg,svg,jfif");
          $("#facebook_image_url").val("");
          $("#facebook_image_url").val(null);
          $("#image1").attr('src', '');
          $("#image1").css('display', 'none');
        } else {
          img = new Image();
          img.onload = function() {
            $("#image1_error").text("");
            $("#image1").css("display", "block");
            $('#image1').attr('src', img.src).height(250).width(250);

          }
          img.src = _URL.createObjectURL(file);
        }
      }
    });

    $(document).on('change', '#image_url', function(e) {
      var file, img;

      let name = e.target.files[0].name;
      var ext = name.split('.').pop().toLowerCase();
      if ((file = this.files[0])) {
        if ($.inArray(ext, ['png', 'jpg', 'jpeg', 'svg', 'jfif']) == -1) {
          $("#image2_error").text("Please upload a picture with this formats.e.g png,jpg,jpeg,svg,jfif");
          $("#image_url").val("");
          $("#image_url").val(null);
          $("#image2").attr('src', '');
          $("#image2").css('display', 'none');
        } else {
          img = new Image();
          img.onload = function() {
            $("#image2_error").text("");
            $("#image2").css("display", "block");
            $('#image2').attr('src', img.src).height(250).width(250);

          }
          img.src = _URL.createObjectURL(file);
        }
      }
    });
    var rad_val = $('input[name="radio1"]:checked').val();
    if (rad_val == 2) {
      $(".new_post_div").removeClass('d-none');
      $(".existing_post_div").addClass('d-none');
    }
    $('input[type=radio][name=radio1]').change(function() {
      console.log($(this).val());
      if (this.value == 1) {
        $(".existing_post_div").removeClass('d-none');
        $(".new_post_div").addClass('d-none');
        $("#frm1").validate();
        $("input[id*=facebook_post_title]").rules("remove", "required");
        $("input[id*=facebook_image_url]").rules("remove", "required");

      } else if (this.value == 2) {
        $("input[id*=facebook_post_title]").rules("add", "required");
        $("input[id*=facebook_image_url]").rules("add", "required");
        $(".new_post_div").removeClass('d-none');
        $(".existing_post_div").addClass('d-none');
      }




    });
  });
</script>
@endsection