@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" enctype="multipart/form-data">
    {{csrf_field()}}
      <div class="card">
        <div class="card-body">
          <div class="row">

            <div class="col-md-6 col-lg-6">
              <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="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="">--Select--</option>
                  @endif
                </select>
              </div>
            </div>

            <div class="col-md-6 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-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 = "20" placeholder="Add appropriate Package details">
                    <datalist id="packSelect">
                      @if(!$packageDetail->isEmpty())
                      @foreach($packageDetail as $pack)
                      <option value="{{$pack->details}}"></option>
                      @endforeach
                      @endif
                    </datalist>
                    <button type="button" class="btn btn-outline-dark btn-pill text-dark pull-right font-medium first-minus" id="minus" style="display: none;"><i class="fa fa-minus mr-2"></i></button>
                   </div>
                <br>
                <input type="hidden" id="pack_details" value="{{$packageDetail}}">
                </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">           
              <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>
                    <input type="text" class="form-control" name="validity" id="validity" />
                    <span>Day(s)</span>
                  </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 fc-datepicker" 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" style="color: red; display: none;"></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">
                      @if(NULL)
                        <img src="{{asset('admin/images/no-picture.png')}}" alt="" />
                      @else
                        <img src="{{asset('admin/images/no-picture.png')}}" alt="" />
                      @endif
                    </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 for="uploadFile" class="btn btn-primary btn-pill btn-streach fs-14">
                      <input type="file" class="d-none form_input" id="uploadFile" name="uploadFile"/>
                      Upload File</label>
                    
                    <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">
                          <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">
                          </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" />
                          </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>
                                <label class="custom-control custom-radio">
                                  <input type="radio" class="custom-control-input sale_type" name="example_radios" value="{{$sale->id}}" 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"></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">
          <button class="btn btn-primary btn-streach font-book mt-6 fs-14 test_package_add_submit">Create</button>
          <a href="{{route('admin.test_series_manager.list')}}"><button class="btn btn-outline-primary btn-pill btn-streach font-book ml-3 mt-6 fs-14">Cancel</button></a>
          </div>
        </div>
      </div>
    </form>
    <!-- //Add test Package -->
    <!--// MAIN BODY CONTENT -->
  </div>
</div>
@endsection
@section('scripts')
<script type="text/javascript" src="{{asset('js/test_package_manager.js')}}"></script>
@endsection