@extends('backend.master')

@section('title')
{{ ___('common.form_elements') }}
@endsection

@section('content')

<div class="page-content">

    {{-- bradecrumb Area S t a r t --}}
    <div class="page-header">
        <div class="row">
            <div class="col-sm-6">
                <h4 class="bradecrumb-title mb-1">{{ ___('common.form_elements') }}</h1>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">{{ ___('common.home') }}</a></li>
                    <li class="breadcrumb-item">{{ ___('common.form_elements') }}</li>
                </ol>
            </div>
            <div class="col-sm-6">
                <!-- Bookmark Start-->
                <div class="bookmark">
                    <ul>
                        <li><a href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-inbox"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg></a></li>
                        <li><a href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg></a></li>
                        <li><a href="javascript:void(0)" ><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-command"><path d="M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z"></path></svg></a></li>
                        <li><a href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layers"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg></a></li>
                        <li><a href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star bookmark-search"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg></a></li>
                    </ul>
                </div>
                <!-- Bookmark Ends-->
            </div>
        </div>
    </div>
    {{-- bradecrumb Area E n d --}}

    <div class="row">

      <div class="col-lg-6">
        <!-- Input tags start -->
        <!-- Libary: vendors/inputtags/tagsinput.css  -->
        <!-- Libary: vendors/inputtags/tagsinput.js  -->
        <div class="card ot-card ot-tags-input mb-20">
          <div class="card-header">
            <h4>{{ ___('common.input_tags') }}</h4>
          </div>
          <div class="card-body">
            <form>
              <div class="mb-3">
                <label class="form-label">{{ ___('common.basic') }}</label>
                <input type="text" class="form-control ot-input visually-hidden" data-role="tagsinput"
                  value="jQuery,Script,Net" />
              </div>
              <div class="mb-3">
                <label class="form-label">{{ ___('common.multi_select') }}</label>
                <select multiple="" data-role="tagsinput" class="visually-hidden">
                  <option value="Amsterdam" selected="selected">
                    Amsterdam
                  </option>
                  <option value="Washington" selected="selected">
                    Washington
                  </option>
                  <option value="Sydney" selected="selected">Sydney</option>
                  <option value="Beijing" selected="selected">Beijing</option>
                  <option value="Cairo" selected="selected">Cairo</option>
                </select>
              </div>
            </form>
          </div>
        </div>
        </div>
        <!-- Input tags end -->
        <div class="col-lg-6">
            <!-- Range Inputs start -->
            <div class="card ot-card mb-24">
              <div class="card-header">
                <h4>{{ ___('common.range_inputs') }}</h4>
              </div>
              <div class="card-body">
                <div class="mb-3">
                  <label for="customRange1" class="form-label">{{ ___('common.example_range') }}</label>
                  <input type="range" class="form-range" id="customRange1" />
                </div>
                <div class="mb-3">
                  <label for="disabledRange" class="form-label">{{ ___('common.disabled_range') }}</label>
                  <input type="range" class="form-range" id="disabledRange" disabled="" />
                </div>
                <div class="mb-3">
                  <label for="customRange2" class="form-label">{{ ___('common.example_range') }}</label>
                  <input type="range" class="form-range" min="0" max="5" id="customRange2" />
                </div>
              </div>
            </div>
            <!-- Range Inputs end -->
      </div>


      <div class="col-lg-6">
          <!-- Input Mask start -->
          <div class="card ot-card mb-24">
            <div class="card-header">
              <h4>{{ ___('common.input_mask') }}</h4>
            </div>
            <div class="card-body">
              <form>
                <div class="mb-3">
                  <label class="form-label">{{ ___('common.date') }}:</label>
                  <input type="date" class="form-control ot-input" />
                </div>
                <div class="mb-3">
                  <label class="form-label">{{ ___('common.date_time') }}:</label>
                  <input type="datetime-local" class="form-control ot-input" />
                </div>
                <div class="mb-3">
                  <label class="form-label">{{ ___('common.email') }}:</label>
                  <input type="email" class="form-control ot-input" placeholder="{{ ___('common.example_email') }}" />
                </div>
                <div class="mb-3">
                  <label class="form-label">{{ ___('common.password') }}:</label>
                  <input type="password" class="form-control ot-input" value="........" />
                </div>
                <div class="ot_fileUploader left-side mb-3">
                    <input class="form-control" type="text" placeholder="{{ ___('common.file_brouse') }}" readonly="" id="placeholder">
                    <button class="primary-btn-small-input" type="button">
                        <label class="btn btn-lg ot-btn-primary" for="fileBrouse">{{ ___('common.browse') }}</label>
                        <input type="file" class="d-none form-control" name="fileBrouse" id="fileBrouse">
                    </button>
                </div>
                <div class="mb-3">
                  <label class="form-label">{{ ___('common.month') }}:</label>
                  <input type="month" class="form-control ot-input" />
                </div>
                <div class="mb-3">
                  <label class="form-label">{{ ___('common.search') }}:</label>
                  <input type="search" class="form-control ot-input" />
                </div>
                <div class="mb-3">
                  <label class="form-label">{{ ___('common.tel') }}:</label>
                  <input type="tel" class="form-control ot-input" />
                </div>
                <div class="mb-3">
                  <label class="form-label">{{ ___('common.time') }}:</label>
                  <input type="time" class="form-control ot-input" />
                </div>
                <div class="mb-3">
                  <label class="form-label">{{ ___('common.url') }}:</label>
                  <input type="url" class="form-control ot-input" placeholder="{{ ___('common.example_url') }}" />
                </div>
                <div class="mb-3">
                  <label class="form-label">{{ ___('common.week') }}:</label>
                  <input type="week" class="form-control ot-input" />
                </div>
              </form>
            </div>
          </div>
          <!-- Input Mask end -->
      </div>

      <div class="col-lg-6">
          <!-- Text Inputs start -->
          <div class="card ot-card mb-24">
            <div class="card-header">
              <h4>{{ ___('common.text_inputs') }}</h4>
            </div>
            <div class="card-body">
              <input class="form-control ot-input form-control-lg mb-3" type="text" placeholder="{{ ___('common.form_control_lg') }}"
                aria-label=".form-control-lg example" />
              <input class="form-control ot-input mb-3" type="text" placeholder="{{ ___('common.default_input') }}"
                aria-label="default input example" />
              <input class="form-control ot-input form-control-sm mb-3" type="text" placeholder="{{ ___('common.form_control_sm') }}"
                aria-label=".form-control-sm example" />
              <input class="form-control ot-input mb-3" type="text" placeholder="{{ ___('common.disabled_input') }}"
                aria-label="Disabled input example" disabled="" />
              <input class="form-control ot-input mb-3" type="text" placeholder="{{ ___('common.disabled_readonly_input') }}"
                aria-label="Disabled input example" disabled="" readonly="" />
              <input class="form-control ot-input" type="text" placeholder="{{ ___('common.readonly_input_here') }}"
                aria-label="readonly input example" readonly="" />
            </div>
          </div>
          <!-- Text Inputs end -->
          <!-- Select Inputs start -->
          <div class="card ot-card mb-24">
              <div class="card-header">
                <h4>{{ ___('common.select_inputs') }}</h4>
              </div>
              <div class="card-body">
                <div class="row">
                  <div class="col-12">
                    <select class="nice-select niceSelect bordered_style wide mb-3">
                      <option selected="">{{ ___('common.open_this_select_menu') }}</option>
                      <option value="1">One</option>
                      <option value="2">Two</option>
                      <option value="3">Three</option>
                    </select>
                  </div>
                  <div class="col-12">
                    <select class="nice-select niceSelect bordered_style wide mb-3">
                      <option selected="">{{ ___('common.open_this_select_menu') }}</option>
                      <option value="1">One</option>
                      <option value="2">Two</option>
                      <option value="3">Three</option>
                    </select>
                  </div>

                  <div class="col-12">
                    <select class="nice-select niceSelect bordered_style wide mb-3" >
                      <option selected="">{{ ___('common.open_this_select_menu') }}</option>
                      <option value="1">One</option>
                      <option value="2">Two</option>
                      <option value="3">Three</option>
                    </select>
                  </div>
                </div>

              </div>
            </div>
            <!-- Select Input end -->

          <!-- select2  start -->
          <div class="card ot-card mb-24">
            <div class="card-header">
              <h4>{{ ___('common.select2_inputs') }}</h4>
            </div>

            <div class="card-body d-flex flex-column column-gap">
                <select class="form-select select2-input ot-input mb-3" aria-label="Default select example">
                    <option selected="">{{ ___('common.select2') }}</option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select>

                <select class="form-select select2-input-image ot-input mb-3" aria-label="Default select example">
                    <option selected="">{{ ___('common.select2_with_image') }}</option>
                    <option data-icon="flag-icon flag-icon-al" value="1">One</option>
                    <option data-icon="flag-icon flag-icon-aq" value="2">Two</option>
                    <option data-icon="flag-icon flag-icon-bn" value="3">Three</option>
                </select>
            </div>
          </div>
          <!-- select2  start -->

      </div>
      <div class="col-lg-6">
            <!-- File Inputs start -->
            <div class="card ot-card mb-24">
              <div class="card-header">
                <h4>{{ ___('common.file_inputs') }}</h4>
              </div>
              <div class="card-body">
                <div class="ot_fileUploader left-side mb-3">
                    <input class="form-control" type="text" placeholder="{{ ___('common.file_brouse') }}" readonly="" id="placeholder">
                    <button class="primary-btn-small-input" type="button">
                        <label class="btn btn-lg ot-btn-primary" for="fileBrouse">{{ ___('common.browse') }}</label>
                        <input type="file" class="d-none form-control" name="fileBrouse" id="fileBrouse">
                    </button>
                </div>
                <div class="ot_fileUploader left-side mb-3">
                    <input class="form-control" type="text" placeholder="{{ ___('common.file_brouse') }}" readonly="" id="placeholder2">
                    <button class="primary-btn-small-input" type="button">
                        <label class="btn btn-lg ot-btn-primary" for="fileBrouse2">{{ ___('common.browse') }}</label>
                        <input type="file" class="d-none form-control" name="fileBrouse2" id="fileBrouse2">
                    </button>
                </div>

                <div class="ot_fileUploader mb-3">
                    <input class="form-control" type="text" placeholder="{{ ___('common.file_brouse') }}" readonly="" id="placeholder3">
                    <button class="primary-btn-small-input" type="button">
                        <label class="btn btn-lg ot-btn-primary" for="fileBrouse3">{{ ___('common.browse') }}</label>
                        <input type="file" class="d-none form-control" name="fileBrouse3" id="fileBrouse3">
                    </button>
                </div>

                <div class="ot_fileUploader mb-3">
                    <input class="form-control" type="text" placeholder="{{ ___('common.file_brouse') }}" readonly="" id="placeholder4">
                    <button class="primary-btn-small-input" type="button">
                        <label class="btn btn-lg ot-btn-primary" for="fileBrouse4">{{ ___('common.browse') }}</label>
                        <input type="file" class="d-none form-control" name="fileBrouse4" id="fileBrouse4">
                    </button>
                </div>
              </div>
            </div>
            <!-- File Inputs end -->
      </div>

      <div class="col-lg-6">
          <!-- Checkbox AND radios start -->
          <div class="card ot-card mb-24">
            <div class="card-header">
              <h4>{{ ___('common.checkbox_and_radios') }}</h4>
            </div>
            <div class="card-body">
              <div class="input-check-radio">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />
                  <label class="form-check-label ms-3" for="flexCheckDefault">{{ ___('common.default_checkbox') }}</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked="" />
                  <label class="form-check-label ms-3" for="flexCheckChecked">{{ ___('common.checked_checkbox') }}</label>
                </div>
                <hr />
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1" />
                  <label class="form-check-label ms-3" for="flexRadioDefault1">{{ ___('common.default_radio') }}</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2"
                    checked="" />
                  <label class="form-check-label ms-3" for="flexRadioDefault2">{{ ___('common.default_checked_radio') }}</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled"
                    disabled="" />
                  <label class="form-check-label ms-3" for="flexRadioDisabled">{{ ___('common.disabled_radio') }}</label>
                </div>
                <hr />
                <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" />
                  <label class="form-check-label" for="flexSwitchCheckDefault">{{ ___('common.default_switch_checkbox_input') }}</label>
                </div>
                <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked="" />
                  <label class="form-check-label " for="flexSwitchCheckChecked">{{ ___('common.checked_switch_checkbox_input') }}</label>
                </div>
                <div class="form-check-danger form-check form-switch">
                  <input class="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDanger" checked="" />
                  <label class="form-check-label" for="flexSwitchCheckCheckedDanger">{{ ___('common.checked_switch_checkbox_input') }}</label>
                </div>
                <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled="" />
                  <label class="form-check-label" for="flexSwitchCheckDisabled">{{ ___('common.disabled_switch_checkbox_input') }}</label>
                </div>

              </div>
            </div>
          </div>
          <!-- Checkbox AND radios end -->
      </div>
    </div>
</div>

@endsection