@extends('layouts/layoutMaster')

@section('title', 'Add Main Sub Categories')

<!-- Vendor Styles -->
@section('vendor-style')
@vite([
  'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
  'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
  'resources/assets/vendor/libs/select2/select2.scss',
  'resources/assets/vendor/libs/animate-css/animate.scss',
  'resources/assets/vendor/libs/flatpickr/flatpickr.scss',
  'resources/assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.scss',
  'resources/assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.scss',
  'resources/assets/vendor/libs/jquery-timepicker/jquery-timepicker.scss',
  'resources/assets/vendor/libs/pickr/pickr-themes.scss'
])
@endsection
<!-- Vendor Scripts -->
@section('vendor-script')
@vite([
  'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
  'resources/assets/vendor/libs/select2/select2.js',
  'resources/assets/vendor/libs/jquery-repeater/jquery-repeater.js',
  'resources/assets/vendor/libs/moment/moment.js',
  'resources/assets/vendor/libs/flatpickr/flatpickr.js',
  'resources/assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.js',
  'resources/assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.js',
  'resources/assets/vendor/libs/jquery-timepicker/jquery-timepicker.js',
  'resources/assets/vendor/libs/pickr/pickr.js'
])
@endsection

<!-- Page Scripts -->
@section('page-script')
@vite([
  'resources/assets/js/tables-datatables-advanced.js',
  'resources/assets/js/forms-selects.js',
  'resources/assets/js/forms-extras.js',
  'resources/assets/js/forms-pickers.js'
])
<script>
 function showHide(elem) {
    if(elem.selectedIndex !== 0) {
         //hide the divs
         for(var i=0; i < divsO.length; i++) {
             divsO[i].style.display = 'none';
        }
        //unhide the selected div
        document.getElementById(elem.value).style.display = 'block';
    }
    else {
      document.getElementById(elem.value).style.display = 'none';
  }
}
 
window.onload=function() {
    //get the divs to show/hide
    divsO = document.getElementById("formValidationCategoryType").getElementsByClassName('show-hide');
};
</script>
@endsection
@section('content')

<!-- Ajax Sourced Server-side -->
<div class="card mb-3">
  <h5 class="card-header">Add Main Sub Categories</h5>
  <div class="card-body">
  <div class="add-cat">
  <div class="row">
  <div class="col-lg-6 mb-4">
  <label class="form-label" for="formValidationCategory">Choose Main Category</label>
  <select id="formValidationCategory" name="formValidationCategory" class="select2 form-select" data-allow-clear="true">
          <option value="">Choose Main Category</option>
              <option value="CH">Chennai</option>
              <option value="BA">Bangalore</option>
            </select>
</div>
  <div class="col-lg-6 mb-4">
  <label class="form-label" for="formValidationHospital">Sort Order</label>
  <input class="form-control typeahead" type="number" placeholder="Sort Order" id="formValidationHospital" name="formValidationHospital" autocomplete="off" />
</div>
<div class="col-lg-6 mb-4">
<label class="form-label" for="formValidationHospital">Sub Category Name</label>
<input class="form-control typeahead" type="text" placeholder="Enter Sub Category Name" id="formValidationHospital" name="formValidationHospital" autocomplete="off" /> 
</div>
<div class="col-lg-6 mb-4">
  <label class="form-label" for="formValidationCategoryType">Type Of Sub Category</label>
  <select id="formValidationCategoryType" name="formValidationCategoryType" class="select2 form-select" data-allow-clear="true" onchange="showHide(this)">
             <option value="0">Choose Type Of Sub Category</option>
              <option value="type1">Checkbox</option>
              <option value="type2">Radio Input</option>
              <option value="type3">Multi Select Icons & Text</option>
              <option value="type4">Multi-Image & Text</option>
              <option value="type5">Textbox Input</option>
              <option value="type6">Date Picker</option>
              <option value="type7">TextArea Input</option>
              <option value="type8">Multi-Image & Text Input with Sorting</option>
              <option value="type9">Search Tag Input</option>
              <option value="type10">Google Map Input</option>
            </select>
</div>
</div>
<div class="row" id="type1">
<div class="col-lg-6 mb-4">
<h5>Checkbox Input</h5>
<label class="form-label" for="formValidationHospital">Checkbox Options</label>
<input class="form-control typeahead" type="text" placeholder="Enter options" id="formValidationHospital" name="formValidationHospital" autocomplete="off" /> 
<small class="text-muted">Enter multiple options seperated by Comma (,) eg: option1, option2, option3...</small>
</div>
</div>
<div class="row" id="type2">
<div class="col-lg-6 mb-4">
<h5>Radio Input</h5>
<label class="form-label" for="formValidationHospital">Checkbox Options</label>
<input class="form-control typeahead" type="text" placeholder="Enter options" id="formValidationHospital" name="formValidationHospital" autocomplete="off" /> 
<small class="text-muted">Enter multiple options seperated by Comma (,) eg: option1, option2, option3...</small>
</div>
</div>
<div class="row" id="type3">
<h5>Multi Select Icons and Text</h5>
<small class="text-muted mb-3">Allowed file type : PNG and SVG</small>
<div class="form-repeater">
          <div data-repeater-list="group-a">
            <div data-repeater-item>
              <div class="row">
                <div class="mb-3 col-lg-6 col-xl-5 col-12 mb-0">
                  <label class="form-label" for="form-repeater-1-1">Icon</label>
                  <input class="form-control" type="file" id="formFile">
                </div>
                <div class="mb-3 col-lg-6 col-xl-5 col-12 mb-0">
                  <label class="form-label" for="form-repeater-1-1">Name</label>
                  <input type="text" id="form-repeater-1-1" class="form-control" placeholder="Enter Name" />
                </div>
                <div class="mb-3 col-lg-12 col-xl-2 col-12 d-flex align-items-center mb-0 mt-3">
                <button class="btn btn-label-danger btn-remove me-3" data-repeater-delete>
                    <i class="ti ti-trash"></i>
                  </button>
                <button class="btn btn-primary btn-add" data-repeater-create>
              <i class="ti ti-plus"></i>
            </button>
                </div>
              </div>
            </div>
          </div>
</div>
</div>
<div class="row" id="type4">
<h5>Multi Select Image and Text</h5>
<small class="text-muted mb-3">Allowed file type : JPG, PNG and SVG</small>
<div class="form-repeater">
          <div data-repeater-list="group-a">
            <div data-repeater-item>
              <div class="row">
                <div class="mb-3 col-lg-6 col-xl-5 col-12 mb-0">
                  <label class="form-label" for="form-repeater-1-1">Image</label>
                  <input class="form-control" type="file" id="formFile">
                </div>
                <div class="mb-3 col-lg-6 col-xl-5 col-12 mb-0">
                  <label class="form-label" for="form-repeater-1-1">Name</label>
                  <input type="text" id="form-repeater-1-1" class="form-control" placeholder="Enter Name" />
                </div>
                <div class="mb-3 col-lg-12 col-xl-2 col-12 d-flex align-items-center mb-0 mt-3">
                <button class="btn btn-label-danger btn-remove me-3" data-repeater-delete>
                    <i class="ti ti-trash"></i>
                  </button>
                <button class="btn btn-primary btn-add" data-repeater-create>
              <i class="ti ti-plus"></i>
            </button>
                </div>
              </div>
            </div>
          </div>
</div>
</div>
<div class="row" id="type5">
<div class="col-lg-6 mb-4">
<h5>Text Input</h5>
<input class="form-control typeahead" type="text" placeholder="Enter text input" id="formValidationHospital" name="formValidationHospital" autocomplete="off" /> 
</div>
</div>
<div class="row" id="type6">
<div class="col-lg-6 mb-4">
<h5>Textarea Input</h5>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</div>
<div class="row" id="type7">
<div class="col-lg-6 mb-4">
<h5>Datepicker</h5>
<input type="text" class="form-control" placeholder="YYYY-MM-DD" id="flatpickr-date" />
</div>
</div>
<div class="row" id="type8">
<h5>Multi-Image & Text Input with Sorting</h5>
<small class="text-muted mb-3">Allowed file type : JPG, PNG and SVG</small>
<div class="form-repeater">
          <div data-repeater-list="group-a">
            <div data-repeater-item>
              <div class="row">
                <div class="mb-3 col-lg-6 col-xl-4 col-12 mb-0">
                  <label class="form-label" for="form-repeater-1-1">Image</label>
                  <input class="form-control" type="file" id="formFile">
                </div>
                <div class="mb-3 col-lg-6 col-xl-4 col-12 mb-0">
                  <label class="form-label" for="form-repeater-1-1">Name</label>
                  <input type="text" id="form-repeater-1-1" class="form-control" placeholder="Enter Name" />
                </div>
                <div class="mb-3 col-lg-6 col-xl-2 col-12 mb-0">
                  <label class="form-label" for="form-repeater-1-1">Position</label>
                  <input type="number" id="form-repeater-1-1" class="form-control" placeholder="Enter Name" />
                </div>
                <div class="mb-3 col-lg-12 col-xl-2 col-12 d-flex align-items-center mb-0 mt-3">
                <button class="btn btn-label-danger btn-remove me-3" data-repeater-delete>
                    <i class="ti ti-trash"></i>
                  </button>
                <button class="btn btn-primary btn-add" data-repeater-create>
              <i class="ti ti-plus"></i>
            </button>
                </div>
              </div>
            </div>
          </div>
</div>
</div>
<div class="row" id="type9">
<div class="col-lg-6 mb-4">
<h5>Search Tag Input</h5>
<div class="input-group input-group-merge">
          <span class="input-group-text" id="basic-addon-search31"><i class="ti ti-search"></i></span>
          <input type="text" class="form-control" placeholder="Search..." aria-label="Search..." aria-describedby="basic-addon-search31" />
        </div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<button type="button" class="btn btn-primary waves-effect mt-4" id="success">Submit</button> 
</div>
</div>
</div>
</div>
</div>
</div>

@endsection