@extends('layouts.app')

@section('content')
<script src="//cdn.ckeditor.com/4.14.1/standard/ckeditor.js"></script>
<div class="container"> <div class="row justify-content-center"> <div class="col-md-12"> <div class="card"> <div
    class="card-header">Add Coupon</div>

    <div  class="card-body">
        <form action="{{route('coupons.store')}}" method="post">
            @csrf
            <div class="mb-3">
                <label for="title" class="form-label">Coupon Title</label>
                <input type="text" required class="form-control" id="title" name="title" value="">
            </div>
            <div class="mb-3">
                <label for="content" class="form-label">Coupon Content</label>
                <textarea id="body" name="body" class="form-control"
                                            rows="20" cols="80" ></textarea>
            </div>
            <div class="mb-3">
                <label for="coupon_type" class="form-label">Coupon Type</label>
                <select required class="form-control" id="coupon_type" name="coupon_type">
                    <option  value="code">Code</option>
                    <option value="sale">Deal</option>
                    <option  value="print">Printable</option>
                </select>
            </div>
            <div class="mb-3 coupon_code_div">
                <label for="coupon_type_code" class="form-label">Coupon Code</label>
                 <input type="text" class="form-control" id="coupon_type_code" name="coupon_type_code" value="">
            </div>
              <div class="mb-3"> 
                <label for="destination_url"  class="form-label">Coupon URL</label>
                 <input type="text" class="form-control" id="destination_url" name="destination_url" value="">
            </div>
            <div class="mb-3">
                <label for="expires" class="form-label">Expires</label>
                 <input type="datetime-local" class="form-control" id="expires" name="expires" value="">
            </div>
            <div class="mb-3">
                <label for="start_on" class="form-label">Start Date</label>
                 <input type="datetime-local" class="form-control" id="start_on" name="start_on" value="">
            </div>
            <div class="mb-3">
                <label for="coupon_save" class="form-label">Discount Value</label>
                 <input type="text" class="form-control" id="coupon_save" name="coupon_save" value="">
            </div>
              <div class="mb-3">
                <label for="free_shipping" class="form-label">Free Shiping Coupon</label>
                 <input type="checkbox" class="" id="free_shipping" name="free_shipping"  value="on">
            </div>
            <div class="mb-3">
                <label for="exclusive" class="form-label">Exclusive Coupon</label>
                 <input type="checkbox" class="" id="exclusive" name="exclusive"  value="on">
            </div>
            <div class="mb-3">
                <label for="used" class="form-label">Number Coupon Used</label>
                 <input type="text" class="form-control" id="used" name="used" value="">
            </div>
             <div class="mb-3">
                <label for="views" class="form-label">Number Views</label>
                 <input type="text" class="form-control" id="views" name="views" value="">
            </div>
            <div class="mb-3">
                <label for="vote_up" class="form-label">Vote Up</label>
                 <input type="text" class="form-control" id="vote_up" name="vote_up" value="">
            </div>
            <div class="mb-3">
                <label for="vote_down" class="form-label">Vote Down</label>
                 <input type="text" class="form-control" id="vote_down" name="vote_down" value="">
            </div>
             <div class="mb-3 p-3 border">
                <label for="category" class="form-label">Categories</label>
                <select id="category" multiple class="form-control" name="category[]">
                 
                </select><br>
<br>
<input id="new-category" type="text" />
<button type="button" class="btn btn-sm btn-info" id="btn-add-category">Add New</button>
                
            </div>
            <div class="mb-3">
                <label for="store" class="form-label">Stores</label>
                <select id="store" multiple required class="form-control" name="store[]">
                     
                </select>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
</div>
</div>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>

    $("#coupon_type").on("change",function(){
        alert($(this).val());
        if($(this).val()=='code')
        {
            $(".coupon_code_div").show();
        }else{
            $(".coupon_code_div").hide();
        }
    });
    
    CKEDITOR.replace( 'body',{
        height:380
    });
    $('#category').select2({
  multiple:true,        
  ajax: {
    url: "{{route('coupons.search-category')}}",
    data: function (params) {
      var query = {
        search: params.term,
        page: params.page || 1
      }

      // Query parameters will be ?search=[term]&page=[page]
      return query;
    }
  }
});
        $('#store').select2({
  multiple:true,        
  ajax: {
    url: "{{route('coupons.search-store')}}",
    data: function (params) {
      var query = {
        search: params.term,
        page: params.page || 1
      }

      // Query parameters will be ?search=[term]&page=[page]
      return query;
    }
  }
});
 $("#btn-add-category").on("click", function(){
        var cat = $("#new-category").val();
         $.ajax({
        headers: {
            'X-CSRF-TOKEN': "{{ csrf_token() }}"
        },
        url : "{{ route('coupons.add-category') }}",
        data : {'cat' : cat},
        type : 'GET',
        dataType : 'json',
        success : function(result){
            if(result.success==true)
            {
            var newcategory = new Option(result.term_name,result.term_id, true, true);
             $("#category").append(newcategory).trigger('change');
             $("#new-category").val("");
            }else{
             alert("This category already exists, Please search & select from above dropdown.");        
             $("#new-category").val("");   
            }
        }
    });
     
    }); 
 </script> 
@endsection