@extends('layouts.contentLayoutMaster')
{{-- title --}}
@section('title','Input Groups')

@section('content')
<!-- Basic Inputs Groups start -->
<section id="basic-input-groups">
  <div class="row">
    <div class="col-12">
      <div class="card">
          <div class="card-header">
              <h4 class="card-title">Basic Input Groups</h4>
          </div>
          <div class="card-body">
            <p>Add span with <code>.input-group-text</code> class <b>before</b> <code>&lt;input&gt;</code> for input-group-prepend and add span with <code>.input-group-text</code> class <b>after</b> <code>&lt;input&gt;</code> for input-group-append.</p>
              <div class="row">
                  <div class="col-lg-4 mb-1">
                      <fieldset>
                        <div class="input-group">
                          <div class="input-group-prepend">
                            <span class="input-group-text" id="basic-addon1">@</span>
                          </div>
                          <input type="text" class="form-control" placeholder="Addon to Left" aria-describedby="basic-addon1">
                        </div>
                      </fieldset>
                  </div>
                  <div class="col-lg-4 mb-1">
                      <fieldset>
                        <div class="input-group">
                          <input type="text" class="form-control" placeholder="Addon To Right" aria-describedby="basic-addon2">
                          <div class="input-group-append">
                            <span class="input-group-text" id="basic-addon2">@example.com</span>
                          </div>
                        </div>
                      </fieldset>
                  </div>
                  <div class="col-lg-4 mb-1">
                      <fieldset>
                        <div class="input-group">
                          <div class="input-group-prepend">
                            <span class="input-group-text">$</span>
                          </div>
                          <input type="text" class="form-control" placeholder="Addon On Both Side" aria-label="Amount (to the nearest dollar)">
                          <div class="input-group-append">
                            <span class="input-group-text">.00</span>
                          </div>
                        </div>
                      </fieldset>
                  </div>
              </div>
          </div>
      </div>
    </div>
  </div>
</section>
<!-- Basic Inputs Groups end -->

<!-- Multiple Inputs start -->
<section id="multiple-inputs">
  <div class="row">
    <div class="col-12">
      <div class="card">
          <div class="card-header">
              <h4 class="card-title">Multiple Inputs</h4>
          </div>
          <div class="card-body">
            <p>While multiple <code>&lt;input&gt;</code>s are supported visually, validation styles are only available for input groups with a single <code>&lt;input&gt;</code>.</p>
              <div class="row">
                  <div class="col-12">
                      <fieldset>
                        <div class="input-group">
                          <div class="input-group-prepend">
                            <span class="input-group-text">First and last name</span>
                          </div>
                          <input type="text" aria-label="First name" class="form-control" placeholder="First Name">
                          <input type="text" aria-label="Last name" class="form-control" placeholder="Last Name">
                        </div>
                      </fieldset>
                  </div>
              </div>
          </div>
      </div>
    </div>
  </div>
</section>
<!-- Multiple Inputs end -->

<!-- Multiple addons start -->
<section id="multiple-addons">
  <div class="row">
    <div class="col-12">
      <div class="card">
          <div class="card-header">
              <h4 class="card-title">Multiple Addons</h4>
          </div>
          <div class="card-body">
            <p>Multiple add-ons are supported and can be mixed with checkbox and radio input versions.</p>
              <div class="row">
                  <div class="col-sm-6 mb-1">
                      <fieldset>
                        <div class="input-group">
                          <div class="input-group-prepend">
                            <span class="input-group-text">$</span>
                            <span class="input-group-text">0.00</span>
                          </div>
                          <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
                        </div>
                      </fieldset>
                  </div>
                  <div class="col-sm-6 mb-1">
                      <fieldset>
                        <div class="input-group">
                          <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
                          <div class="input-group-append">
                            <span class="input-group-text">$</span>
                            <span class="input-group-text">0.00</span>
                          </div>
                        </div>
                      </fieldset>
                  </div>
              </div>
          </div>
      </div>
    </div>
  </div>
</section>
<!-- Multiple addons end -->

<!-- Inputs Group Checkbox and Radio Buttons end -->
<section id="input-group-checkbox-radio">
  <div class="row">
    <div class="col-12">
      <div class="card">
          <div class="card-header">
              <h4 class="card-title">Input Groups with Checkboxes and Radios</h4>
          </div>
          <div class="card-body">
            <p>Input Groups can use with checkboxes and radio buttons also. For it add code for <code>.checkbox</code> class and <code>.radio</code> class respectively.</p>
              <div class="row">
                  <div class="col-sm-6 mb-1">
                      <fieldset>
                        <div class="input-group">
                          <div class="input-group-prepend">
                            <div class="input-group-text">
                              <div class="checkbox">
                                <input type="checkbox" class="checkbox__input" id="checkboxinput" name="checkbox">
                                <label for="checkboxinput"></label>
                              </div>
                            </div>
                          </div>
                          <input type="text" class="form-control" aria-label="Text input with checkbox">
                        </div>
                      </fieldset>
                  </div>
                  <div class="col-sm-6 mb-1">
                      <fieldset>
                        <div class="input-group">
                          <div class="input-group-prepend">
                            <div class="input-group-text">
                              <div class="radio">
                                <input type="radio" id="radioinput" name="radio">
                                <label for="radioinput"></label>
                              </div>
                            </div>
                          </div>
                          <input type="text" class="form-control" aria-label="Text input with radio button">
                        </div>
                      </fieldset>
                  </div>
              </div>
          </div>
      </div>
    </div>
  </div>
</section>
<!-- Inputs Group Checkbox and Radio Buttons end -->

<!-- Inputs Group Sizes -->
<section id="input-group-size">
  <div class="row">
    <div class="col-12">
      <div class="card">
          <div class="card-header">
              <h4 class="card-title">Input Groups with different sizes</h4>
          </div>
          <div class="card-body">
            <p>Add <code>.input-group-{lg/sm}</code> class to <code>.input-group</code> for Large/Small addon/prepend.</p>
              <div class="row">
                  <div class="col-sm-6 mb-1">
                      <fieldset>
                        <div class="input-group input-group-lg">
                          <div class="input-group-prepend">
                            <span class="input-group-text" id="sizing-addon1">@</span>
                          </div>
                          <input type="text" class="form-control" placeholder="Large Addon" aria-describedby="sizing-addon1">
                        </div>
                      </fieldset>
                  </div>
                  <div class="col-sm-6 mb-1">
                    <fieldset>
                      <div class="input-group input-group-sm">
                        <div class="input-group-prepend">
                          <span class="input-group-text" id="sizing-addon3">@example.com</span>
                        </div>
                        <input type="text" class="form-control" placeholder="Small Addon" aria-describedby="sizing-addon3">
                      </div>
                    </fieldset>
                  </div>
              </div>
          </div>
      </div>
    </div>
  </div>
</section>
<!-- Inputs Group Sizes end -->

<!-- Inputs Group with Buttons -->
<section id="input-group-buttons">
  <div class="row">
    <div class="col-12">
      <div class="card">
          <div class="card-header">
              <h4 class="card-title">Input Groups with Buttons</h4>
          </div>
          <div class="card-body">
            <p>Add span with <code>.input-group-btn</code> class and add button inside <b>before</b> or <b>after</b> <code>&lt;input&gt;</code>.</p>
              <div class="row">
                  <div class="col-md-6 mb-1">
                      <fieldset>
                        <div class="input-group">
                          <input type="text" class="form-control" placeholder="Button on right" aria-describedby="button-addon2">
                          <div class="input-group-append" id="button-addon2">
                            <button class="btn btn-primary" type="button">Go</button>
                          </div>
                        </div>
                      </fieldset>
                  </div>
                  <div class="col-md-6 mb-1">
                    <fieldset>
                      <div class="input-group">
                        <div class="input-group-prepend">
                          <button class="btn btn-primary" type="button"><i class="bx bx-search"></i></button>
                        </div>
                        <input type="text" class="form-control" placeholder="Button on both side" aria-label="Amount">
                        <div class="input-group-append">
                          <button class="btn btn-primary" type="button">Search !</button>
                        </div>
                      </div>
                    </fieldset>
                  </div>
              </div>
          </div>
      </div>
    </div>
  </div>
</section>
<!-- Inputs Group with Buttons end -->

<!-- Inputs Group with Dropdown -->
<section id="input-group-dropdown">
  <div class="row">
    <div class="col-12">
      <div class="card">
          <div class="card-header">
              <h4 class="card-title">Input Groups with Dropdown</h4>
          </div>
          <div class="card-body">
            <p>Add <code>&lt;button&gt;</code> with <code>.dropdown-toggle</code> class and add dropdown-menu after it to get input group with dropdown.</p>
              <div class="row">
                  <div class="col-md-6 mb-1">
                    <fieldset>
                      <div class="input-group">
                        <div class="input-group-prepend">
                          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Action
                          </button>
                          <div class="dropdown-menu">
                            <a class="dropdown-item" href="javascript:void(0);">Action</a>
                            <a class="dropdown-item" href="javascript:void(0);">Another action</a>
                            <a class="dropdown-item" href="javascript:void(0);">Something else here</a>
                            <div role="separator" class="dropdown-divider"></div>
                            <a class="dropdown-item" href="javascript:void(0);">Separated link</a>
                          </div>
                        </div>
                        <input type="text" class="form-control" placeholder="Dropdown on left">
                      </div>
                    </fieldset>
                  </div>
                  <div class="col-md-6 mb-1">
                    <fieldset>
                      <div class="input-group">
                        <div class="input-group-prepend">
                          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="bx bxs-pencil"></i>
                          </button>
                          <div class="dropdown-menu">
                            <a class="dropdown-item" href="javascript:void(0);">Action</a>
                            <a class="dropdown-item" href="javascript:void(0);">Another action</a>
                            <a class="dropdown-item" href="javascript:void(0);">Something else here</a>
                            <div role="separator" class="dropdown-divider"></div>
                            <a class="dropdown-item" href="javascript:void(0);">Separated link</a>
                          </div>
                        </div>
                        <input type="text" class="form-control" placeholder="Dropdown on both side" aria-label="Amount">
                        <div class="input-group-append">
                          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Action
                          </button>
                          <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="javascript:void(0);">Action</a>
                            <a class="dropdown-item" href="javascript:void(0);">Another action</a>
                            <a class="dropdown-item" href="javascript:void(0);">Something else here</a>
                            <div role="separator" class="dropdown-divider"></div>
                            <a class="dropdown-item" href="javascript:void(0);">Separated link</a>
                          </div>
                        </div>
                      </div>
                    </fieldset>
                  </div>
              </div>
          </div>
      </div>
    </div>
  </div>
</section>
<!-- Inputs Group with Dropdown end -->

<!-- Custom file input start -->
<section id="custom-file-input">
  <div class="row">
    <div class="col-12">
      <div class="card">
          <div class="card-header">
              <h4 class="card-title">Custom file input</h4>
          </div>
          <div class="card-body">
              <div class="row">
                  <div class="col-md-6 mb-1">
                    <fieldset>
                      <div class="input-group">
                        <div class="input-group-prepend">
                          <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
                        </div>
                        <div class="custom-file">
                          <input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
                          <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
                        </div>
                      </div>
                    </fieldset>
                  </div>
                  <div class="col-md-6 mb-1">
                    <fieldset>
                      <div class="input-group">
                        <div class="custom-file">
                          <input type="file" class="custom-file-input" id="inputGroupFile02">
                          <label class="custom-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">Choose file</label>
                        </div>
                        <div class="input-group-append">
                          <span class="input-group-text" id="inputGroupFileAddon02">Upload</span>
                        </div>
                      </div>
                    </fieldset>
                  </div>
              </div>
          </div>
      </div>
    </div>
  </div>
</section>
<!-- Custom file input end -->
@endsection