@extends('layout.mainlayout')
@section('content')

    <div class="page-wrapper cardhead">
        <div class="content">

            <!-- Page Header -->
            <div class="page-header">
                <div class="row">
                    <div class="col-sm-12">
                        <h3 class="page-title">Sortable JS</h3>
                    </div>
                </div>
            </div>
            <!-- /Page Header -->

        <div class="row">
            <!-- Flat Picker -->
            <div class="col-12 mb-6">
                <div class="card">
                    <h5 class="card-header">Flatpickr</h5>
                    <div class="card-body">
                        <div class="row">
                            <!-- Date Picker-->
                            <div class="col-md-6 col-12 mb-6">
                                <label for="flatpickr-date" class="form-label">Date Picker</label>
                                <input type="text" class="form-control" placeholder="YYYY-MM-DD" id="flatpickr-date" />
                            </div>
                            <!-- /Date Picker -->

                            <!-- Time Picker-->
                            <div class="col-md-6 col-12 mb-6">
                                <label for="flatpickr-time" class="form-label">Time Picker</label>
                                <input type="text" class="form-control" placeholder="HH:MM" id="flatpickr-time" />
                            </div>
                            <!-- /Time Picker -->

                            <!-- Datetime Picker-->
                            <div class="col-md-6 col-12 mb-6">
                                <label for="flatpickr-datetime" class="form-label">Datetime Picker</label>
                                <input
                                    type="text"
                                    class="form-control"
                                    placeholder="YYYY-MM-DD HH:MM"
                                    id="flatpickr-datetime" />
                            </div>
                            <!-- /Datetime Picker-->

                            <!-- Multiple Dates Picker-->
                            <div class="col-md-6 col-12 mb-6">
                                <label for="flatpickr-multi" class="form-label">Multiple Dates Picker</label>
                                <input type="text" class="form-control" placeholder="YYYY-MM-DD HH:MM" id="flatpickr-multi" />
                            </div>
                            <!-- /Multiple Dates Picker-->

                            <!-- Range Picker-->
                            <div class="col-md-6 col-12 mb-6">
                                <label for="flatpickr-range" class="form-label">Range Picker</label>
                                <input
                                    type="text"
                                    class="form-control"
                                    placeholder="YYYY-MM-DD to YYYY-MM-DD"
                                    id="flatpickr-range" />
                            </div>
                            <!-- /Range Picker-->

                            <!-- Human Friendly Date Picker-->
                            <div class="col-md-6 col-12 mb-6">
                                <label for="flatpickr-human-friendly" class="form-label">Human Friendly Date Picker</label>
                                <input
                                    type="text"
                                    class="form-control"
                                    placeholder="Month DD, YYYY"
                                    id="flatpickr-human-friendly" />
                            </div>
                            <!-- /Human Friendly Date Picker-->

                            <!-- Disabled Range-->
                            <div class="col-md-6 col-12 mb-md-0 mb-6">
                                <label for="flatpickr-disabled-range" class="form-label">Disabled Range</label>
                                <input
                                    type="text"
                                    class="form-control"
                                    placeholder="YYYY-MM-DD"
                                    id="flatpickr-disabled-range" />
                            </div>
                            <!-- /Disabled Range-->

                            <!-- Inline Picker-->
                            <div class="col-md-6 col-12">
                                <label for="flatpickr-inline" class="form-label">Inline Picker</label>
                                <input type="text" class="form-control mb-1" placeholder="YYYY-MM-DD" id="flatpickr-inline" />
                            </div>
                            <!-- /Inline Picker-->
                        </div>
                    </div>
                </div>
            </div>
            <!-- /Flatpickr -->

            <!-- Bootstrap Datepicker -->
            <div class="col-12 mb-6">
                <div class="card">
                    <h5 class="card-header">Bootstrap Datepicker</h5>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 col-12 mb-6">
                                <label for="bs-datepicker-basic" class="form-label">Basic</label>
                                <input type="text" id="bs-datepicker-basic" placeholder="MM/DD/YYYY" class="form-control" />
                            </div>
                            <div class="col-md-6 col-12 mb-6">
                                <label for="bs-datepicker-format" class="form-label">Format</label>
                                <input type="text" id="bs-datepicker-format" placeholder="DD/MM/YYYY" class="form-control" />
                            </div>
                            <div class="col-md-6 col-12 mb-6">
                                <label for="dateRangePicker" class="form-label">Date Range</label>
                                <div class="input-group input-daterange" id="bs-datepicker-daterange">
                                    <input type="text" id="dateRangePicker" placeholder="MM/DD/YYYY" class="form-control" />
                                    <span class="input-group-text">to</span>
                                    <input type="text" placeholder="MM/DD/YYYY" class="form-control" />
                                </div>
                            </div>
                            <div class="col-md-6 col-12 mb-6">
                                <label for="bs-datepicker-disabled-days" class="form-label">Disabled Days</label>
                                <input
                                    type="text"
                                    id="bs-datepicker-disabled-days"
                                    placeholder="MM/DD/YYYY"
                                    class="form-control" />
                            </div>
                            <div class="col-md-6 col-12 mb-6">
                                <label for="bs-datepicker-multidate" class="form-label">Multidate</label>
                                <input
                                    type="text"
                                    id="bs-datepicker-multidate"
                                    placeholder="MM/DD/YYYY, MM/DD/YYYY"
                                    class="form-control" />
                            </div>
                            <div class="col-md-6 col-12 mb-6">
                                <label for="bs-datepicker-options" class="form-label">Options</label>
                                <input type="text" id="bs-datepicker-options" placeholder="MM/DD/YYYY" class="form-control" />
                            </div>
                            <div class="col-md-6 col-12 mb-md-0 mb-6">
                                <label for="bs-datepicker-autoclose" class="form-label">Auto Close</label>
                                <input
                                    type="text"
                                    id="bs-datepicker-autoclose"
                                    placeholder="MM/DD/YYYY"
                                    class="form-control" />
                            </div>
                            <div class="col-md-6 col-12">
                                <label class="form-label">Inline</label>
                                <div id="bs-datepicker-inline"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /Bootstrap Datepicker -->

            <!-- Bootstrap Daterangepicker -->
            <div class="col-12 mb-6">
                <div class="card">
                    <h5 class="card-header">Bootstrap Daterange Picker</h5>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 col-12 mb-6">
                                <label for="bs-rangepicker-basic" class="form-label">Basic</label>
                                <input type="text" id="bs-rangepicker-basic" class="form-control" />
                            </div>
                            <div class="col-md-6 col-12 mb-6">
                                <label for="bs-rangepicker-single" class="form-label">Single Picker</label>
                                <input type="text" id="bs-rangepicker-single" class="form-control" />
                            </div>
                            <div class="col-md-6 col-12 mb-6">
                                <label for="bs-rangepicker-time" class="form-label">With Time Picker</label>
                                <input type="text" id="bs-rangepicker-time" class="form-control" />
                            </div>
                            <div class="col-md-6 col-12 mb-6">
                                <label for="bs-rangepicker-range" class="form-label">Ranges</label>
                                <input type="text" id="bs-rangepicker-range" class="form-control" />
                            </div>
                            <div class="col-md-6 col-12 mb-md-0 mb-6">
                                <label for="bs-rangepicker-week-num" class="form-label">Week Numbers</label>
                                <input type="text" id="bs-rangepicker-week-num" class="form-control" />
                            </div>
                            <div class="col-md-6 col-12">
                                <label for="bs-rangepicker-dropdown" class="form-label">Month & Year Dropdown</label>
                                <input type="text" id="bs-rangepicker-dropdown" class="form-control" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /Bootstrap Daterangepicker -->

            <!-- jQuery Timepicker -->
            <div class="col-12 mb-6">
                <div class="card">
                    <h5 class="card-header">jQuery Timepicker</h5>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 col-12 mb-6">
                                <label for="timepicker-basic" class="form-label">Basic</label>
                                <input type="text" id="timepicker-basic" placeholder="HH:MMam" class="form-control" />
                            </div>
                            <div class="col-md-6 col-12 mb-6">
                                <label for="timepicker-min-max" class="form-label">Min-Max</label>
                                <input type="text" id="timepicker-min-max" placeholder="HH:MMam" class="form-control" />
                            </div>
                            <div class="col-md-6 col-12 mb-6">
                                <label for="timepicker-disabled-times" class="form-label">Disabled Times</label>
                                <input
                                    type="text"
                                    id="timepicker-disabled-times"
                                    placeholder="HH:MMam"
                                    class="form-control" />
                            </div>
                            <div class="col-md-6 col-12 mb-6">
                                <label for="timepicker-format" class="form-label">Format</label>
                                <input type="text" id="timepicker-format" placeholder="HH:MM:SS" class="form-control" />
                            </div>
                            <div class="col-md-6 col-12 mb-md-0 mb-6">
                                <label for="timepicker-step" class="form-label">Step</label>
                                <input type="text" id="timepicker-step" placeholder="HH:MMam" class="form-control" />
                            </div>
                            <div class="col-md-6 col-12">
                                <label for="timepicker-24hours" class="form-label">24 Hours Format</label>
                                <input type="text" id="timepicker-24hours" placeholder="20:00:00" class="form-control" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /jQuery Timepicker -->

            <!-- Color Picker -->
            <div class="col-12">
                <div class="card">
                    <h5 class="card-header">Color Picker</h5>
                    <div class="card-body">
                        <div class="row">
                            <div class="classic col col-sm-3 col-lg-2">
                                <p>Classic</p>
                                <div id="color-picker-classic"></div>
                            </div>
                            <div class="monolith col col-sm-3 col-lg-2">
                                <p>Monolith</p>
                                <div id="color-picker-monolith"></div>
                            </div>
                            <div class="nano col col-sm-3 col-lg-2">
                                <p>Nano</p>
                                <div id="color-picker-nano"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /Color Picker-->
        </div>

        </div>
    </div>

    @component('components.modal-popup')
    @endcomponent

@endsection