@extends('layouts.default')
{{-- Page title --}}
@section('title')
    Forms @parent
@stop
{{-- page level styles --}}
@section('header_styles')
    <!-- page vendors -->
    <link href="{{ asset('vendors/jasny-bootstrap/css/jasny-bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
    <!--end of page vendors -->
@stop
@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">

        <div aria-label="breadcrumb" class="card-breadcrumb">
            <h1>Forms</h1>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Content</a></li>
                <li class="breadcrumb-item active" aria-current="page">Forms</li>
            </ol>
        </div>
        <div class="separator-breadcrumb border-top"></div>
    </section>
    <!-- content start  -->
    <section class="content">
        <div class="row">
            <!--row starts-->
            <div class="col-md-12 col-lg-6 col-sm-12 col-12">
                <!--lg-6 starts-->

                <!--basic form starts-->
                <div class="my-3">
                    <div class="card p-0" id="hidepanel1">
                        <div class="card-header bg-primary text-white">
                            <h3 class="card-title d-inline">
                                Basic Form 1
                            </h3>
                            <span class="float-end">
                                <i class="fa fa-chevron-up clickable"></i>
                                <i class="fa fa-times removepanel clickable"></i>
                            </span>
                        </div>
                        <div class="card-body">
                            <form action="#">
                                <!-- CSRF Token -->
                                <!-- Name input-->
                                <div class="row mb-3">
                                    <label class="col-md-3 col-lg-3 col-12 col-form-label" for="name">Name</label>
                                    <div class="col-md-9 col-lg-9 col-12">
                                        <input id="name" name="name" type="text" placeholder="Your name"
                                            class="form-control">
                                    </div>
                                </div>
                                <!-- Email input-->
                                <div class="row mb-3">
                                    <label class="col-md-3 col-lg-3 col-12 col-form-label" for="email">Your
                                        E-mail</label>
                                    <div class="col-md-9 col-lg-9 col-12">
                                        <input id="email" name="email" type="text" placeholder="Your email"
                                            class="form-control">
                                    </div>
                                </div>
                                <!-- Message body -->
                                <div class="row mb-3">
                                    <label class="col-md-3 col-lg-3 col-12 form-label" for="message">Your
                                        message</label>
                                    <div class="col-md-9 col-lg-9 col-12">
                                        <textarea class="form-control resize_vertical" id="message" name="message"
                                            placeholder="Please enter your message here..." rows="5"></textarea>
                                    </div>
                                </div>
                                <!-- Form actions -->
                                <div class="row">
                                    <div class="col-md-12  col-sm-12 col-12  col-lg-12 text-end">
                                        <button type="submit" class="btn btn-primary">Submit</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!--basic form 2 starts-->
                <div class="my-3">
                    <div class="card p-0" id="hidepanel2">
                        <div class="card-header bg-info text-white">
                            <h3 class="card-title d-inline">
                                Basic Form 2
                            </h3>
                            <span class="float-end">
                                <i class="fa fa-chevron-up clickable"></i>
                                <i class="fa fa-times removepanel clickable"></i>
                            </span>
                        </div>
                        <div class="card-body">
                            <form action="#">
                                <!-- CSRF Token -->
                                <input type="hidden" name="_token" value="{{ csrf_token() }}" />
                                <fieldset>
                                    <!-- Name input-->
                                    <div class="row mb-3">
                                        <label class="col-md-3 col-lg-3 col-12 col-form-label" for="name1">E-mail
                                            Address</label>
                                        <div class="col-md-9 col-lg-9 col-12">
                                            <input id="name1" name="name" type="text"
                                                placeholder="Enter your Email" class="form-control">
                                        </div>
                                    </div>
                                    <!-- Email input-->
                                    <div class="row mb-3">
                                        <label class="col-md-3 col-lg-3 col-12 col-form-label"
                                            for="password">Password</label>
                                        <div class="col-md-9 col-12 col-lg-9">
                                            <input id="password" name="password" type="password"
                                                placeholder="Enter your Password" class="form-control">
                                        </div>
                                        <div class="form-check ms-3">
                                            <input type="checkbox" class="form-check-input" id="customCheckin">
                                            <label class="form-check-label" for="customCheckin">Stay signed in</label>
                                        </div>
                                    </div>
                                    <!-- Form actions -->
                                    <div class="row my-2">
                                        <div class="col-md-3"></div>
                                        <div class="col-md-9 col-lg-9 col-12">
                                            <button type="submit" class="btn btn-info">Sign
                                                in</button>
                                        </div>
                                    </div>
                                </fieldset>
                            </form>
                        </div>
                        <!--panel body ends-->
                    </div>
                </div>
                <!--input form starts-->
                <div class="my-3">
                    <div class="card p-0" id="hidepanel5">
                        <div class="card-header bg-warning text-white">
                            <h3 class="card-title d-inline">
                                Form Inputs
                            </h3>
                            <span class="float-end">
                                <i class="fa fa-chevron-up clickable"></i>
                                <i class="fa fa-times removepanel clickable"></i>
                            </span>
                        </div>
                        <div class="card-body">
                            <form role="form">
                                <div class="input-group mb-3">
                                    <span class="input-group-text">@</span>
                                    <input type="text" class="form-control" placeholder="User name">
                                </div>
                                <div class="input-group mb-3">
                                    <input type="text" class="form-control">
                                    <span class="input-group-text image_radius">.00</span>
                                </div>
                                <div class="input-group mb-3">
                                    <span class="input-group-text">
                                        <i class="fas fa-euro-sign"></i>
                                    </span>
                                    <input type="text" class="form-control" placeholder="Font Awesome Icon">
                                </div>
                                <div class="input-group mb-3">
                                    <span class="input-group-text">$</span>
                                    <input type="text" class="form-control">
                                    <span class="input-group-text Form image_radius">.00</span>
                                </div>
                                <div class="input-group mb-3">
                                    <input type="text" class="form-control">
                                    <span class="input-group-btn">
                                        <button class="btn btn-secondary image_radius" type="button">
                                            <i class="fa-solid fa-magnifying-glass"></i>
                                        </button>
                                    </span>
                                </div>
                                <div class="fileinput fileinput-new" data-provides="fileinput">
                                    <div class="fileinput-preview thumbnail border" data-trigger="fileinput">
                                    </div>
                                    <div>
                                        <span class="btn btn-file px-0">
                                            <span class="fileinput-new btn btn-secondary ">Select image</span>
                                            <span class="fileinput-exists btn btn-secondary">Change</span>
                                            <input type="file" name="..."></span>
                                        <a href="#" class="btn btn-secondary fileinput-exists color_a"
                                            data-bs-dismiss="fileinput">Remove</a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12 col-lg-6 col-12 my-3">
                <div class="card p-0" id="hidepanel6">
                    <div class="card-header bg-success text-white">
                        <h3 class="card-title d-inline text-white">
                            Form Controls
                        </h3>
                        <span class="float-end">
                            <i class="fa fa-chevron-up clickable"></i>
                            <i class="fa fa-times removepanel clickable"></i>
                        </span>
                    </div>
                    <div class="card-body">
                        <form role="form" id="form_controls">
                            <div class="mb-3">
                                <label for="input">Text Input</label>
                                <input class="form-control" id="input">
                                <p class="form-text">Example block-level help text here.</p>
                            </div>
                            <div class="mb-3">
                                <label for="input2">Text Input with Placeholder</label>
                                <input class="form-control" placeholder="Enter text" id="input2">
                            </div>
                            <div class="mb-3">
                                <label>Static Control</label>
                                <p class="form-control-static">email@example.com</p>
                            </div>
                            <div class="mb-3">
                                <label for="area">Text area</label>
                                <textarea class="form-control resize_vertical" id="area" rows="3"></textarea>
                            </div>
                            <div class="mb-3">
                                <label>Checkboxes</label>
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" id="customCheck1">
                                    <label class="form-check-label" for="customCheck1">Laravel</label>
                                </div>
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" id="customCheck2">
                                    <label class="form-check-label" for="customCheck2">Html</label>
                                </div>
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" id="customCheck3">
                                    <label class="form-check-label" for="customCheck3">Javascript</label>
                                </div>
                            </div>
                            <div class="mb-3">
<label class="me-30px">Inline Checkboxes</label>
                                <div class="form-check form-check-inline">
                                    <input type="checkbox" class="form-check-input" id="incustomCheck1">
                                    <label class="form-check-label" for="incustomCheck1">Php</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input type="checkbox" class="form-check-input" id="incustomCheck2">
                                    <label class="form-check-label" for="incustomCheck2">Bootstrap</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input type="checkbox" class="form-check-input" id="incustomCheck3">
                                    <label class="form-check-label" for="incustomCheck3">Jquery</label>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label>Radio Buttons</label>
                                <div class="form-check">
                                    <input type="radio" id="customRadio1" name="customRadio" class="form-check-input">
                                    <label class="form-check-label" for="customRadio1">Home</label>
                                </div>
                                <div class="form-check">
                                    <input type="radio" id="customRadio2" name="customRadio" class="form-check-input">
                                    <label class="form-check-label" for="customRadio2">Calender</label>
                                </div>
                                <div class="form-check">
                                    <input type="radio" id="customRadio3" name="customRadio" class="form-check-input">
                                    <label class="form-check-label" for="customRadio3">Contact</label>
                                </div>
                            </div>
                            <div class="mb-3">
<label class="me-30px">Inline Radio Buttons</label>
                                <div class="form-check form-check-inline">
                                    <input type="radio" id="incustomRadio1" name="customRadio"
                                        class="form-check-input">
                                    <label class="form-check-label" for="incustomRadio1">Excellent</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input type="radio" id="incustomRadio2" name="customRadio"
                                        class="form-check-input">
                                    <label class="form-check-label" for="incustomRadio2">Good</label>
                                </div>

                            </div>
                            <div class="mb-3">
                                <label for="select1">Select</label>
                                <select class="form-select" id="select1">
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="multi">Multiple Selects</label>
                                <select multiple class="form-select" id="multi">
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="multi">Custom Selects</label>
                                <select class="form-select" id="inputGroupSelect01">
                                    <option selected>Choose...</option>
                                    <option value="1">One</option>
                                    <option value="2">Two</option>
                                    <option value="3">Three</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="formFileMultiple" class="form-label">Custom files input example</label>
                                <div class="input-group custom-file-button"> <input type="file" class="form-control"
                                        id="formFileMultiple" multiple>
                                    <label class="input-group-text" for="formFileMultiple">Browse</label>
                                </div>
                            </div>


                            <button type="submit" class="btn btn-success">Submit Button</button>
                            <button type="reset" class="btn btn-secondary" id="reset">Reset
                                Button</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 col-lg-6 col-12 my-3">
                {{-- New feature floating labels  --}}
                <div class="my-3">
                    <div class="card p-0" id="hidepanel5">
                        <div class="card-header bg-success text-white">
                            <h3 class="card-title d-inline">
                                Floating Labels
                            </h3>
                            <span class="float-end">
                                <i class="fa fa-chevron-up clickable"></i>
                                <i class="fa fa-times removepanel clickable"></i>
                            </span>
                        </div>
                        <div class="card-body">
                            <div class="form-floating mb-3">
                                <input type="text" class="form-control " id="username" name="name"
                                    placeholder="">
                                <label for="Username">User Name</label>
                            </div>
                            <div class="form-floating mb-3">
                                <input type="email" class="form-control placeholder-col" id="floatingInputValue"
                                    placeholder="">
                                <label for="floatingInputValue">Your Email</label>
                            </div>
                            <div class="form-floating mb-3">
                                <input type="password" class="form-control placeholder-col" id="floatingPassword"
                                    placeholder="">
                                <label for="floatingPassword">Password</label>
                            </div>
                            <button type="button" class="btn btn-success">Sign-in</button>
                        </div>
                    </div>
                </div>
                <div class="card p-0">
                    <div class="card-header bg-danger text-white">
                        <h3 class="card-title d-inline text-white">
                            Validation State
                        </h3>
                        <span class="float-end">
                            <i class="fa fa-chevron-up clickable"></i>
                            <i class="fa fa-times removepanel clickable"></i>
                        </span>
                    </div>
                    <div class="card-body">
                        <form class="row">
                            <div class="col-md-12 mb-3">
                                <label for="validationServer01" class="form-label">First name</label>
                                <input type="text" class="form-control is-valid" id="validationServer01"
                                    value="Mark" required>
                                <div class="valid-feedback">
                                    Looks good!
                                </div>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label for="validationServer02" class="form-label">Last name</label>
                                <input type="text" class="form-control is-valid" id="validationServer02"
                                    value="Otto" required>
                                <div class="valid-feedback">
                                    Looks good!
                                </div>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label for="validationServerUsername" class="form-label">Username</label>
                                <div class="input-group has-validation">
                                    <span class="input-group-text" id="inputGroupPrepend3">@</span>
                                    <input type="text" class="form-control is-invalid" id="validationServerUsername"
                                        aria-describedby="inputGroupPrepend3 validationServerUsernameFeedback" required>
                                    <div id="validationServerUsernameFeedback" class="invalid-feedback">
                                        Please choose a username.
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label for="validationServer03" class="form-label">City</label>
                                <input type="text" class="form-control is-invalid" id="validationServer03"
                                    aria-describedby="validationServer03Feedback" required>
                                <div id="validationServer03Feedback" class="invalid-feedback">
                                    Please provide a valid city.
                                </div>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label for="validationServer04" class="form-label">State</label>
                                <select class="form-select is-invalid" id="validationServer04"
                                    aria-describedby="validationServer04Feedback" required>
                                    <option selected disabled value="">Choose...</option>
                                    <option>...</option>
                                </select>
                                <div id="validationServer04Feedback" class="invalid-feedback">
                                    Please select a valid state.
                                </div>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label for="validationServer05" class="form-label">Zip</label>
                                <input type="text" class="form-control is-invalid" id="validationServer05"
                                    aria-describedby="validationServer05Feedback" required>
                                <div id="validationServer05Feedback" class="invalid-feedback">
                                    Please provide a valid zip.
                                </div>
                            </div>
                            <div class="col-12 mb-3">
                                <div class="form-check">
                                    <input class="form-check-input is-invalid" type="checkbox" value=""
                                        id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
                                    <label class="form-check-label" for="invalidCheck3">
                                        Agree to terms and conditions
                                    </label>
                                    <div id="invalidCheck3Feedback" class="invalid-feedback">
                                        You must agree before submitting.
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <button class="btn btn-primary" type="submit">Submit form</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-12 col-lg-6 col-12 my-3">
                <div class="card p-0" id="hidepanel3">
                    <div class="card-header bg-secondary ">
                        <h3 class="card-title d-inline">
                            Disabled Fieldsets
                        </h3>
                        <span class="float-end">
                            <i class="fa fa-chevron-up clickable"></i>
                            <i class="fa fa-times removepanel clickable"></i>
                        </span>
                    </div>
                    <div class="card-body">
                        <form role="form">
                            <fieldset disabled>
                                <div class="mb-3">
                                    <label for="disabledSelect">Disabled input</label>
                                    <input class="form-control" id="disabledInput" type="text"
                                        placeholder="Disabled input" disabled>
                                </div>
                                <div class="mb-3">
                                    <label for="disabledSelect">Disabled select menu</label>
                                    <select id="disabledSelect" class="form-control" disabled>
                                        <option disabled>Disabled select</option>
                                    </select>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="" id="disdefaultCheck"
                                        disabled>
                                    <label class="form-check-label" for="disdefaultCheck">
                                        Disabled checkbox
                                    </label>
                                </div>

                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="exampleRadios"
                                        id="disexampleRadios" value="option3" disabled>
                                    <label class="form-check-label" for="disexampleRadios">
                                        Disabled radio
                                    </label>
                                </div>
                                <button type="submit" class="btn my-2 btn-secondary">Disabled
                                    Button</button>
                            </fieldset>
                        </form>
                    </div>
                </div>

                <div class="card p-0" id="hidepanel2">
                    <div class="card-header bg-success text-white">
                        <h3 class="card-title d-inline">
                            Basic Form With File
                        </h3>
                        <span class="float-end">
                            <i class="fa fa-chevron-up clickable"></i>
                            <i class="fa fa-times removepanel clickable"></i>
                        </span>
                    </div>
                    <div class="card-body">
                        <form action="#">
                            <!-- Name input-->
                            <div class="row mb-3">
                                <label class="col-md-3 col-lg-3 col-12 form-label" for="name122">Name</label>
                                <div class="col-md-9 col-lg-9 col-12">
                                    <input id="name122" name="name" type="text" placeholder="Your name"
                                        class="form-control">
                                </div>
                            </div>
                            <!-- Email input-->
                            <div class="row mb-3">
                                <label class="col-md-3 col-lg-3 col-12 form-label" for="email1">Your
                                    E-mail</label>
                                <div class="col-md-9 col-lg-9 col-12">
                                    <input id="email1" name="email" type="text" placeholder="Your email"
                                        class="form-control">
                                </div>
                            </div>
                            <!-- Message body -->
                            <div class="row mb-3">
                                <label class="col-md-3 col-lg-3 col-12 form-label" for="message1">Your
                                    message</label>
                                <div class="col-md-9 col-lg-9 col-12">
                                    <textarea class="form-control resize_vertical" id="message1" name="message"
                                        placeholder="Please enter your message here..." rows="5"></textarea>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label class="col-md-3 col-lg-3 col-12 form-label" for="exampleFormControlFile1">Example
                                    File</label>
                                <div class="col-md-9 col-lg-9 col-12">
                                    <input type="file" class="form-control" id="exampleFormControlFile1">
                                </div>
                            </div>
                            <!-- Form actions -->
                            <div class="row">
                                <div class="col-md-12  col-sm-12 col-12  col-lg-12 text-end">
                                    <button type="submit" class="btn btn-success">Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </section>

@stop
@section('footer_scripts')
    <!--   page level js ----------->
    <script src="{{ asset('vendors/jasny-bootstrap/js/jasny-bootstrap.min.js') }}"></script>
    <script src="{{ asset('js/pages/formlayout.js') }}"></script>
    <!-- end of page level js -->
@stop