@extends('admin.layout.master')
@section('content')
<div class="app-content  my-3 my-md-5">
  <div class="side-app">
    <div class="page-header">
      <ol class="breadcrumb">
        <li class="breadcrumb-item ">
          <a href="{{route('admin.test_series_manager.list')}}">Package Management</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
          Test Series Manager
        </li>
      </ol>
    </div>
    <!-- MAIN BODY CONTENT -->
    <h1>Add Test Package</h1>
    @if(Session::has('errors'))
        <div class="alert alert-danger" style="background: none; border: none;">
          <ul class="form_validation_error">
                  @foreach ($errors->all() as $error)
                      <li  style="color: #f00">{{ $error }}</li>
                  @endforeach
              </ul>
        </div>
    @endif

    <!-- Add test Package -->
    <form action="{{route('admin.test_series_manager.save')}}" method="post" id="package_test_add_frm">
    {{csrf_field()}}
      <div class="card">
        <div class="card-body">
          <div class="row">

            <div class="col-md-12 col-lg-12">
              <div class="form-group">
                <label for="packageName" class="form-label"
                  >Package Name <span class="text-danger">*</span></label
                >
                <input type="text" id="packageName" name="packageName" class="form-control form_input" placeholder="Enter a suitable Package Name" maxlength = "50"/>
              </div>
            </div>

            <div class="col-md-6 col-lg-6">
              <div class="form-group">
                <label for="examName" class="form-label">Internal Coaching<span class="text-danger">*</span>
                  <img src="{{asset('admin/images/info.svg')}}" class="fa fa-info" data-toggle="tooltip"
                    data-placement="right" alt="info"/></label>
                <select class="form-control form_input" name="internal_coaching" id="internal_coaching">
                        <option value="" >Internal Coaching</option>
                        @if($internalCoaching)
                          @foreach($internalCoaching as $internel)
                              <option value="{{$internel->id}}">{{$internel->coaching_name}}</option>
                          @endforeach
                        @endif
                </select>
              </div>
            </div>

            <div class="col-md-4 col-lg-6">
              <div class="form-group">
                <label for="examType" class="form-label">Exam Type<span class="text-danger">*</span><img src="{{asset('admin/images/info.svg')}}" class="fa fa-info" data-toggle="tooltip"
                    data-placement="right" title="Specify the type of exam you want to conduct. For E.g. SSC, Railway etc." alt="info"/></label>
                <select class="js-ExamType form-control form_input" multiple="multiple" name="examType[]" id="examType" onchange="getExamNameVal(this)">
                  <!-- @if(!$examTypes->isEmpty())
                    <option value="" disabled>--Select--</option>
                    @foreach($examTypes as $types)
                        <option value="{{$types->id}}">{{$types->exam_type}}</option>
                    @endforeach
                  @else
                    <option value="" disabled>--Select--</option>
                  @endif -->
                </select>
              </div>
            </div>


            

            <div class="col-md-4 col-lg-6">
              <div class="form-group">
                <label for="examName" class="form-label">Exam Name<span class="text-danger">*</span>
                  <img src="{{asset('admin/images/info.svg')}}" class="fa fa-info" data-toggle="tooltip"
                    data-placement="right" title="Specify a name for your exam. For E.g. CGL, CHSL" alt="info"/></label>
                <select class="js-ExamType form-control form_input"  multiple="multiple" name="examName[]" id="examName">
                  
                </select>
              </div>
            </div>

            <!-- <div class="col-md-6 col-lg-6">
              <div class="form-group">
                <label for="subject" class="form-label">Subject<span class="text-danger">*</span></label>
                <select class="js-ExamType form-control form_input" multiple="multiple" name="examSubject[]" id="examSubject">
                </select>
              </div>
            </div> -->

            <div class="col-md-4 col-lg-6">
              <div class="form-group">
                <label for="subject" class="form-label"
                  >Package Language<span class="text-danger">*</span></label>
                <select class="js-ExamType form-control form_input" multiple="multiple" name="packageLanguage[]" id="packageLanguage">
                  <option value="1" data-badge="">English</option>
                  <option value="2" data-badge="">Hindi</option>
                </select>
              </div>
            </div>

            <div class="col-md-12 col-lg-12">
              <div class="form-group">
                <label for="packageDetails" class="form-label"
                  >Package Details<span class="text-danger">*</span
                  ><span class=" package-details-info text-primary pull-right fs-12 font-book"
                    >Add details (maximum 4 lines,)</span
                  ></label>
                <div id="packageDetails">
                  <div id="pack">
                    <input class="form-control form_input" type="text" name="packageDetails[]" list="packSelect" maxlength = "50" placeholder="Add appropriate Package details">
                    <datalist id="packSelect">
                      
                    </datalist>

                    <a href="javascript:void(0)" class="action-btn md first-minus pointer-none" id="minus"><img src="{{asset('admin/images/bin.svg')}}" alt=""></a>
                   </div>
                
                    <!-- <button type="button" class="btn btn-outline-dark btn-pill text-dark pull-right font-medium first-minus" id="minus"><i class="fa fa-minus mr-2"></i></button>
                   </div> -->

                </div>
                <input type="hidden" name="exam_names[]" id="exam_names">
              </div>
            </div>

            <div class="col-md-12 col-lg-12 mb-6">
              <button type="button" class="btn btn-outline-dark btn-pill text-dark pull-right font-medium" id="add_more">           
                <i class="fa fa-plus mr-2"></i> Add More
              </button>
            </div>
            
            <div class="col-md-12 col-lg-12">
              <div class="form-group">
                <label for="packageFeatures" class="form-label"
                  >Package Features<span class="text-danger">*</span
                  ><span class=" package-details-info text-primary pull-right fs-12 font-book"
                    >Add features (minimum 3 lines, maximum 8 lines)</span
                  ></label>
                <div id="packageFeatures">
                  <div id="feature_pack">
                    <input class="form-control form_input packageFeatures" type="text" name="packageFeatures[]" list="packFeatureSelect" maxlength = "50" placeholder="Add appropriate Package Features">
                    <datalist id="packFeatureSelect">
                      
                    </datalist>

                    <a href="javascript:void(0)" class="action-btn md first-minus-feature pointer-none-feature minus_feature" id="minus_feature"><img src="{{asset('admin/images/bin.svg')}}" alt=""></a>
                   </div>
                
                    <!-- <button type="button" class="btn btn-outline-dark btn-pill text-dark pull-right font-medium first-minus" id="minus"><i class="fa fa-minus mr-2"></i></button>
                   </div> -->

                </div>
              </div>
            </div>

            <div class="col-md-12 col-lg-12">
            <button type="button" class="btn btn-outline-dark btn-pill text-dark pull-right font-medium" id="add_more_feature">           
              <i class="fa fa-plus mr-2"></i> Add More
            </button>
            </div>

            <div class="col-md-12 col-lg-12 mt-7">
              <label for="examName" class="form-label"
                >Package Validity<span class="text-danger">*</span>
                <img src="{{asset('admin/images/info.svg')}}" class="fa fa-info" data-toggle="tooltip"
                  data-placement="right" title="Specify Duration for the selected Package" alt="info"/></label>
            </div>

            <div class="col-md-12 col-lg-8 mt-3">
              <div class="row">
                <div class="col-md-6 col-lg-6">
                  <div class="form-group">
                  <label class="form-label radio-input-label fs-12">Set Validity</label>
                  <div class="radio-input-group">
                    <label class="custom-control custom-radio">
                      <input type="radio" class="custom-control-input" name="set_validity" value="0"
                        checked id="set_validity" />
                      <span class="custom-control-label"></span>
                    </label>
                    <div class="input-group input-prefix">
                      <input type="text" class="form-control" name="validity" id="validity" />
                      <span class="verify" id="primary_span">
                      <span class="text-warning" style="color:#a59999 !important">Day(s)</span>
                      </span>
                    </div>
                  </div>
                  </div>
                </div>
                <div class="col-md-6 col-lg-6">
                  <div class="form-group">
                  <lable class="form-label radio-input-label fs-12">Set Expiry</lable>
                  <div class="radio-input-group">
                    <label class="custom-control custom-radio">
                      <input type="radio" class="custom-control-input" name="set_validity" id="set_expiry" value="1" />
                      <span class="custom-control-label"></span>
                    </label>
                    <div class="input-group">
                      <div class="input-group-prepend">
                        <div class="input-group-text">
                          <i class="fa fa-calendar tx-16 lh-0 op-6"></i>
                        </div>
                      </div>
                      <input class="form-control" placeholder="DD-MM-YYYY" type="text" name="expiry_date" id="expiry_dates"/>
                    </div>
                  </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-md-12 col-lg-12 package-image">
              <label for="" class="form-label">Package Image <span class="text-danger">*</span><span><p id="imagecheck"></p></span></label>
              <div class="row">
                <div class="col-md-6 col-lg-6">
                  <div class="form-group form_input_pic">
                    <div class="img-wrapper">
                      <label for="uploadFile" >                        
                        <img src="{{asset('admin/images/no-picture.png')}}" alt="" />
                      </label>
                    </div>
                    <input type="file" class="d-none" id="uploadFile" name="uploadFile"/>
                    <div id="myProgress" style="display: none;">
                      <div id="myBar"></div>
                    </div>
                  </div>
                </div>
                <div class="col-md-6 col-lg-6">
                  <div class="form-group">
                    <h6 class="img-title">
                      Upload an image to describe your test package for students to understand better.
                    </h6>
                    <p class="img-size-desc">
                      Recommended Size: 1024px to 576px.
                    </p>
                    <p class="img-size-desc">
                      Supported Formats: JPG, JPEG, PNG.
                    </p>

                    <label class="btn btn-primary btn-pill btn-streach fs-14 upload_file">
                      Upload File</label>
                    <input type="hidden" name="filename" id="filename">
                    <label for="removeUploadFile" class="btn btn-outline-secondary btn-streach fs-14 ml-3 btn-pill" id="remove_uploadFile">
                      <input type="button" class="d-none"/>
                      Remove File
                    </label>

                  </div>
                </div>
              </div>
            </div>

            <!-- <div class="col-md-6 col-lg-6">
              <div class="form-group">
                <label for="subject" class="form-label">Add Faculty<span class="text-danger">*</span></label>
                <select class="js-ExamType form-control form_input" multiple="multiple" name="examFaculty[]" id="examFaculty"> 
                </select>
              </div>
            </div> -->
            <!-- <div class="col-md-6 col-lg-6">
              <div class="form-group">
                <label for="subject" class="form-label"
                  >Package Language<span class="text-danger">*</span></label>
                <select class="js-ExamType form-control form_input" multiple="multiple" name="packageLanguage[]" id="packageLanguage">
                  <option value="1" data-badge="">English</option>
                  <option value="2" data-badge="">Hindi</option>
                </select>
              </div>
            </div> -->

            <div class="accordion-content col-lg-12">
              <div class="panel-group1" id="accordion2">
                <div class="panel panel-default mb-4">
                  <div class="panel-heading1 ">
                    <h4 class="panel-title1">
                      <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour" aria-expanded="false">Price Settings</a>
                    </h4>
                  </div>
                  <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-expanded="false">
                    <div class="panel-body">
                      <div class="row">

                        <div class="col-md-6 col-lg-6 pp">
                          <label for="examName" class="form-label">Product Price<span class="text-danger">*</span>
                            <img src="{{asset('admin/images/info.svg')}}" class="fa fa-info" data-toggle="tooltip" data-placement="right" title="Total Price of the selected package"
                            alt="info"/>
                          </label>
                          <div class="input-group">
                            <div class="input-group-prepend">
                              <div class="input-group-text">
                                <i class="fa fa-rupee lh-0 op-6"></i>
                              </div>
                            </div>
                            <!-- input-group-prepend -->
                            <input class="form-control" placeholder="" type="text" id="productPriceInput" value="" name="productPriceInput">
                            <span class="pass_name text-primary mt-2 ml-2"></span>
                            
                          </div>
                          

                          <label for="examName" class="form-label  mt-6 param-remove">Discounted Price<span class="text-danger">*</span>
                            <img src="{{asset('admin/images/info.svg')}}" class="fa fa-info" data-toggle="tooltip" data-placement="right" title="Decreased price visible to Students"
                            alt="info"/></label>
                          <div class="input-group param-remove">
                            <div class="input-group-prepend">
                              <div class="input-group-text">
                                <i class="fa fa-rupee lh-0 op-6"></i>
                              </div>
                            </div>
                            <!-- input-group-prepend -->
                            <input class="form-control" placeholder="" type="text" id="discountPriceInput" name="discountPriceInput" readonly />
                          </div>


                          <label for="examName" class="form-label mt-6 param-remove onlyone" style="display: none;">Share &amp; Unlock Discounted Price<span class="text-danger">*</span>
                            <img src="{{asset('admin/images/info.svg')}}" class="fa fa-info"
                              data-toggle="tooltip" data-placement="right" title="Total Discounted Price after Student shares package with specific number of people."
                              alt="info"/></label>
                          <div class="input-group param-remove onlyone" style="display: none;">
                            <div class="input-group-prepend">
                              <div class="input-group-text">
                                <i class="fa fa-rupee lh-0 op-6"></i>
                              </div>
                            </div>
                            <!-- input-group-prepend -->
                            <input class="form-control" id="unlockDiscountPriceInput" placeholder="" type="text" name="unlockDiscountPriceInput" />
                          </div>
                        </div>


                        

                        <div class="col-md-6 col-lg-6">
                          <div class="more-options">
                            <label for="" class="form-label"
                              >More Options</label
                            >
                            <ul>
                              @if(!$saleTypes->isEmpty())
                              @foreach($saleTypes as $sale)
                              <li>
                                <input type="hidden" name="sale_type" id="sale_type">
                                <label class="custom-control custom-radio">
                                  <input type="radio" class="custom-control-input sale_type" name="example_radios" value="{{$sale->id}}" id="{{$sale->id}}" data-id="{{$sale->id}}" onclick="saleType(this)" @if($sale->default_value == 1) checked @endif/>
                                  <span class="custom-control-label">
                                    {{$sale->sale_name}}
                                    <img src="{{asset('admin/images/info.svg')}}" class="fa fa-info"
                                      data-toggle="tooltip" data-placement="right" title="{{$sale->tooltip}}" alt="info" width="12"/></span>
                                </label>
                              </li>
                              @endforeach
                              @endif
                              
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- panel 2 -->
                <div class="panel panel-default mb-4">
                  <div class="panel-heading1 ">
                    <h4 class="panel-title1">
                      <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseFive" aria-expanded="false">Seo Option</a>
                    </h4>
                  </div>
                  <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-expanded="false">
                    <div class="panel-body">
                      <div class="form-group">
                        <label for="" class="form-label">Seo Title <img src="{{asset('admin/images/info.svg')}}" class="fa fa-info" data-toggle="tooltip" data-placement="right"
                        title="This title is SEO-Specific and should be similar to the original package title, which will help you to rank higher on google search results." alt="info" width="12"/></label>
                        <input type="text" class="form-control" placeholder="Package title will be selected as default if left blank." name="seo_title" />
                      </div>
                      <div class="form-group">
                        <label for="" class="form-label"
                          >Description</label>
                        <textarea class="form-control" id="seo_desc" cols="" rows="5" placeholder="Add a description in less than 160 characters" name="seo_desc" maxlength="160"></textarea>
                      </div>
                      
                      <div class="form-group">
                        <label for="" class="form-label">Keywords <img src="{{asset('admin/images/info.svg')}}" class="fa fa-info" data-toggle="tooltip" data-placement="right"
                        title="Anything searched on a search engine, whether a single word or a phrase, is considered a keyword." alt="info" width="12"/></label>
                        <input type="text" class="form-control" placeholder="IBPS Test, RRB NTPC Mock Test, SBI PO Test Etc." name="seo_keywords" />
                      </div>
                    
                  </div>
                </div>
                <!-- Panel 2 end -->
              </div>
            </div>

          </div>
         <div class="test-footer col-md-12">
          <a href="{{route('admin.test_series_manager.list')}}"><button type="button" class="btn btn-outline-primary btn-pill btn-streach font-book ml-3 mt-6 fs-14">Cancel</button></a>
          <button class="btn btn-primary btn-streach font-book mt-6 fs-14 test_package_add_submit">Create</button>
          </div>
        </div>
      </div>
    </form>
    <!-- //Add test Package -->
    <!--// MAIN BODY CONTENT -->
  </div>
</div>
@endsection
@section('scripts')
<script type="text/javascript">
  $("#expiry_dates").datepicker({ dateFormat: 'dd-mm-yy', maxDate: "+548d", minDate: "+14d"});
  var edit_select = 0;
</script>
<script type="text/javascript" src="{{asset('js/test_package_manager.js?v='.time())}}"></script>
<style type="text/css">
  #myProgress {
  width: 50%;
  height: 20px;
  background-color: #a7b4c9;
  border-radius: 10px;
  overflow: hidden;
}

#myBar {
  width: 1%;
  height: 20px;
  background: linear-gradient(90deg, #fe5d6f 0%, #fc8f2d 100%);
  text-align: center;
  color: #fff;
}
</style>
@endsection