<?php include('partials/html.php'); ?>

<head>
    <?php $title = "Form Picker"; include('partials/title-meta.php'); ?>

    <!-- Daterangepicker Plugin CSS -->
    <link rel="stylesheet" href="assets/plugins/daterangepicker/daterangepicker.css" type="text/css">

    <!-- Colorpickr Plugin CSS -->
    <link rel="stylesheet" href="assets/plugins/pickr/classic.min.css"> <!-- 'classic' theme -->
    <link rel="stylesheet" href="assets/plugins/pickr/monolith.min.css"> <!-- 'monolith' theme -->
    <link rel="stylesheet" href="assets/plugins/pickr/nano.min.css"> <!-- 'nano' theme -->

    <?php include('partials/head-css.php'); ?>
</head>

<body>
    <!-- Begin page -->
    <div class="wrapper">

        <?php include('partials/menu.php'); ?>

        <!-- ============================================================== -->
        <!-- Start Main Content -->
        <!-- ============================================================== -->

        <div class="content-page">

            <div class="container-fluid">
                <?php $subtitle = "Forms"; $title = "Pickers"; include('partials/page-title.php'); ?>


                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header d-block">
                                <h4 class="card-title mb-1">Flatpickr</h4>
                                <p class="text-muted mb-0">
                                    Lightweight, powerful javascript datetimepicker with no dependencies
                                </p>
                            </div>

                            <div class="card-body">
                                <h4 class="card-title fs-sm fw-bold mb-4"> Datepicker</h4>
                                <!-- Basic -->
                                <div class="row g-4">
                                    <div class="col-lg-6">
                                        <h5>Basic</h5>
                                        <p class="text-muted mb-0">Set <code>data-provider="flatpickr" data-date-format="d M, Y"</code>.</p>
                                    </div>
                                    <div class="col-lg-6">
                                        <input type="text" class="form-control" data-provider="flatpickr" data-date-format="d M, Y">
                                    </div>
                                </div>

                                <div class="my-4 border-top border-dashed"></div>

                                <!-- DateTime -->
                                <div class="row g-4">
                                    <div class="col-lg-6">
                                        <h5>DateTime</h5>
                                        <p class="text-muted mb-0">Set <code>data-provider="flatpickr" data-date-format="d.m.y" data-enable-time</code>.</p>
                                    </div>
                                    <div class="col-lg-6">
                                        <input type="text" class="form-control" data-provider="flatpickr" data-date-format="d.m.y" data-enable-time>
                                    </div>
                                </div>

                                <div class="my-4 border-top border-dashed"></div>

                                <!-- Human-Friendly Dates -->
                                <div class="row g-4">
                                    <div class="col-lg-6">
                                        <h5>Human-Friendly Dates</h5>
                                        <p class="text-muted mb-0">Set <code>data-provider="flatpickr" data-altFormat="F j, Y"</code>.</p>
                                    </div>
                                    <div class="col-lg-6">
                                        <input type="text" class="form-control flatpickr-input" data-provider="flatpickr" data-altFormat="F j, Y">
                                    </div>
                                </div>

                                <div class="my-4 border-top border-dashed"></div>

                                <!-- MinDate and MaxDate -->
                                <div class="row g-4">
                                    <div class="col-lg-6">
                                        <h5>MinDate and MaxDate</h5>
                                        <p class="text-muted mb-0">Set <code>data-provider="flatpickr" data-date-format="d M, Y" data-minDate="..." data-maxDate="..."</code>.</p>
                                    </div>
                                    <div class="col-lg-6">
                                        <input type="text" class="form-control" data-provider="flatpickr" data-date-format="d M, Y" data-minDate="25 12, 2021" data-maxDate="29 12,2021" placeholder="Select Date">
                                    </div>
                                </div>

                                <div class="my-4 border-top border-dashed"></div>

                                <!-- Default Date -->
                                <div class="row g-4">
                                    <div class="col-lg-6">
                                        <h5>Default Date</h5>
                                        <p class="text-muted mb-0">Set <code>data-provider="flatpickr" data-date-format="d M, Y" data-default-date="..."</code>.</p>
                                    </div>
                                    <div class="col-lg-6">
                                        <input type="text" class="form-control" data-provider="flatpickr" data-date-format="d M, Y" data-default-date="25 12,2021">
                                    </div>
                                </div>

                                <div class="my-4 border-top border-dashed"></div>

                                <!-- Disabling Dates -->
                                <div class="row g-4">
                                    <div class="col-lg-6">
                                        <h5>Disabling Dates</h5>
                                        <p class="text-muted mb-0">Set <code>data-provider="flatpickr" data-disable-date="..."</code>.</p>
                                    </div>
                                    <div class="col-lg-6">
                                        <input type="text" class="form-control" data-provider="flatpickr" data-date-format="d M, Y" data-disable-date="15 12,2021">
                                    </div>
                                </div>

                                <div class="my-4 border-top border-dashed"></div>

                                <!-- Selecting Multiple Dates -->
                                <div class="row g-4">
                                    <div class="col-lg-6">
                                        <h5>Selecting Multiple Dates</h5>
                                        <p class="text-muted mb-0">Set <code>data-provider="flatpickr" data-multiple-date="true"</code>.</p>
                                    </div>
                                    <div class="col-lg-6">
                                        <input type="text" class="form-control" data-provider="flatpickr" data-date-format="d M, Y" data-multiple-date="true">
                                    </div>
                                </div>

                                <div class="my-4 border-top border-dashed"></div>

                                <!-- Range -->
                                <div class="row g-4">
                                    <div class="col-lg-6">
                                        <h5>Range</h5>
                                        <p class="text-muted mb-0">Set <code>data-provider="flatpickr" data-range-date="true"</code>.</p>
                                    </div>
                                    <div class="col-lg-6">
                                        <input type="text" class="form-control" data-provider="flatpickr" data-date-format="d M, Y" data-range-date="true">
                                    </div>
                                </div>

                                <div class="my-4 border-top border-dashed"></div>

                                <!-- Week Numbers -->
                                <div class="row g-4">
                                    <div class="col-lg-6">
                                        <h5>Week Numbers</h5>
                                        <p class="text-muted mb-0">Set <code>data-provider="flatpickr" data-week-number</code>.</p>
                                    </div>
                                    <div class="col-lg-6">
                                        <input type="text" class="form-control" data-provider="flatpickr" data-date-format="d M, Y" data-week-number>
                                    </div>
                                </div>

                                <div class="my-4 border-top border-dashed"></div>

                                <!-- Inline -->
                                <div class="row g-4">
                                    <div class="col-lg-6">
                                        <h5>Inline</h5>
                                        <p class="text-muted mb-0">Set <code>data-provider="flatpickr" data-inline-date="true"</code>.</p>
                                    </div>
                                    <div class="col-lg-6">
                                        <input type="text" class="form-control" data-provider="flatpickr" data-date-format="d M, Y" data-default-date="25 01,2021" data-inline-date="true">
                                    </div>
                                </div>

                            </div><!-- end card-body -->

                            <div class="border-top border-dashed"></div>

                            <div class="card-body">
                                <h4 class="card-title fs-sm fw-bold mb-4">Timepicker</h4>

                                <!-- Timepicker -->
                                <div class="row g-4">
                                    <div class="col-lg-6">
                                        <h5>Timepicker</h5>
                                        <p class="text-muted mb-0">Set <code>data-provider="timepickr" data-time-basic="true"</code> attribute.</p>
                                    </div>
                                    <div class="col-lg-6">
                                        <input type="text" class="form-control" data-provider="timepickr" data-time-basic="true" id="timepicker-example" placeholder="Select Time">
                                    </div>
                                </div>

                                <div class="my-4 border-top border-dashed"></div>

                                <!-- 24-hour Time Picker -->
                                <div class="row g-4">
                                    <div class="col-lg-6">
                                        <h5>24-hour Time Picker</h5>
                                        <p class="text-muted mb-0">Set <code>data-provider="timepickr" data-time-hrs="true"</code> attribute.</p>
                                    </div>
                                    <div class="col-lg-6">
                                        <input type="text" class="form-control" data-provider="timepickr" data-time-hrs="true" id="timepicker-24hrs" placeholder="Select Time">
                                    </div>
                                </div>

                                <div class="my-4 border-top border-dashed"></div>

                                <!-- Time Picker w/ Limits -->
                                <div class="row g-4">
                                    <div class="col-lg-6">
                                        <h5>Time Picker w/ Limits</h5>
                                        <p class="text-muted mb-0">Set <code>data-provider="timepickr" data-min-time="Min.Time" data-max-time="Max.Time"</code> attribute.</p>
                                    </div>
                                    <div class="col-lg-6">
                                        <input type="text" class="form-control" data-provider="timepickr" data-min-time="13:00" data-max-time="16:00" placeholder="Select Time">
                                    </div>
                                </div>

                                <div class="my-4 border-top border-dashed"></div>

                                <!-- Preloading Time -->
                                <div class="row g-4">
                                    <div class="col-lg-6">
                                        <h5>Preloading Time</h5>
                                        <p class="text-muted mb-0">Set <code>data-provider="timepickr" data-default-time="Your Default Time"</code> attribute.</p>
                                    </div>
                                    <div class="col-lg-6">
                                        <input type="text" class="form-control" data-provider="timepickr" data-default-time="16:45">
                                    </div>
                                </div>

                                <div class="my-4 border-top border-dashed"></div>

                                <!-- Inline -->
                                <div class="row g-4">
                                    <div class="col-lg-6">
                                        <h5>Inline</h5>
                                        <p class="text-muted mb-0">Set <code>data-provider="timepickr" data-time-inline="Your Default Time"</code> attribute.</p>
                                    </div>
                                    <div class="col-lg-6">
                                        <input type="text" class="form-control" data-provider="timepickr" data-time-inline="11:42">
                                    </div>
                                </div>

                            </div><!-- end card-body -->
                        </div><!-- end card -->

                        <div class="card">
                            <div class="card-header d-block">
                                <h4 class="card-title mb-1">Date Range Picker</h4>
                                <p class="text-muted mb-0">
                                    A versatile JavaScript component for selecting date ranges, single dates, and times with ease.
                                    Perfect for forms and dashboards, it supports calendar views, time pickers, and predefined ranges.
                                </p>
                            </div>

                            <div class="card-body">
                                <div class="alert alert-warning alert-dismissible fade show" role="alert">
                                    <strong>Note:</strong> This is a jQuery-based plugin, so you need to include jQuery for it to work.
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>

                                <!-- Example 1: Date Range -->
                                <div class="row g-3">
                                    <div class="col-lg-6">
                                        <h5>Date Range</h5>
                                        <p class="text-muted mb-0">Select a custom date range from the calendar.</p>
                                    </div>
                                    <div class="col-lg-6">
                                        <input type="text" class="form-control date" id="singledaterange" data-toggle="date-picker" data-cancel-class="btn-warning">
                                    </div>
                                </div>

                                <div class="my-4 border-top border-dashed"></div>

                                <!-- Example 2: Date Range Picker With Times -->
                                <div class="row g-3">
                                    <div class="col-lg-6">
                                        <h5>Date Range Picker With Times</h5>
                                        <p class="text-muted mb-0">Includes both start and end time selection.</p>
                                    </div>
                                    <div class="col-lg-6">
                                        <input type="text" class="form-control date" id="daterangetime" data-toggle="date-picker" data-time-picker="true" data-locale="{'format': 'DD/MM hh:mm A'}">
                                    </div>
                                </div>

                                <div class="my-4 border-top border-dashed"></div>

                                <!-- Example 3: Single Date Picker -->
                                <div class="row g-3">
                                    <div class="col-lg-6">
                                        <h5>Single Date Picker</h5>
                                        <p class="text-muted mb-0">Select a single date (e.g., birthday).</p>
                                    </div>
                                    <div class="col-lg-6">
                                        <input type="text" class="form-control date" id="birthdatepicker" data-toggle="date-picker" data-single-date-picker="true">
                                    </div>
                                </div>

                                <div class="my-4 border-top border-dashed"></div>

                                <!-- Example 4: Predefined Date Ranges -->
                                <div class="row g-3">
                                    <div class="col-lg-6">
                                        <h5>Predefined Date Ranges</h5>
                                        <p class="text-muted mb-0">Choose from common ranges like "Last 7 Days", etc.</p>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="position-relative">
                                            <div id="reportrange" class="form-control" data-toggle="date-picker-range" data-target-display="#selectedValue" data-cancel-class="btn-light">
                                                <i class="ti ti-calendar me-2"></i>
                                                <span id="selectedValue"></span>
                                                <i class="ti ti-chevron-down position-absolute end-0 top-50 translate-middle me-1"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div> <!-- end card-body-->
                        </div> <!-- end card-->

                        <div class="card">
                            <div class="card-header d-block">
                                <h4 class="card-title mb-1">Colorpicker</h4>
                                <p class="text-muted mb-0">
                                    Pickr - A simple, multi-themed, responsive and hackable Color-Picker library.
                                    No dependencies, no jQuery. Compatible with all CSS Frameworks e.g. Bootstrap, Materialize. Supports alpha channel, rgba, hsla, hsva and more!
                                </p>
                            </div>

                            <div class="card-body">

                                <!-- Classic Colorpicker -->
                                <div class="row align-items-center g-4">
                                    <div class="col-lg-6">
                                        <h5 class="fw-semibold mb-1">Classic Demo</h5>
                                        <p class="text-muted mb-0">Use <code>classic-colorpicker</code> class to set classic colorpicker.</p>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="classic-colorpicker"></div>
                                    </div>
                                </div>

                                <div class="my-4 border-top border-dashed"></div>

                                <!-- Monolith Colorpicker -->
                                <div class="row align-items-center g-4">
                                    <div class="col-lg-6">
                                        <h5 class="fw-semibold mb-1">Monolith Demo</h5>
                                        <p class="text-muted mb-0">Use <code>monolith-colorpicker</code> class to set monolith colorpicker.</p>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="monolith-colorpicker"></div>
                                    </div>
                                </div>

                                <div class="my-4 border-top border-dashed"></div>

                                <!-- Nano Colorpicker -->
                                <div class="row align-items-center g-4">
                                    <div class="col-lg-6">
                                        <h5 class="fw-semibold mb-1">Nano Demo</h5>
                                        <p class="text-muted mb-0">Use <code>nano-colorpicker</code> class to set nano colorpicker.</p>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="nano-colorpicker"></div>
                                    </div>
                                </div>

                                <div class="my-4 border-top border-dashed"></div>

                                <!-- Colorpicker Demo -->
                                <div class="row align-items-center g-4">
                                    <div class="col-lg-6">
                                        <h5 class="fw-semibold mb-1">Demo</h5>
                                        <p class="text-muted mb-0">Use <code>colorpicker-demo</code> class to set demo option colorpicker.</p>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="colorpicker-demo"></div>
                                    </div>
                                </div>

                                <div class="my-4 border-top border-dashed"></div>

                                <!-- Colorpicker with Opacity & Hue -->
                                <div class="row align-items-center g-4">
                                    <div class="col-lg-6">
                                        <h5 class="fw-semibold mb-1">Picker with Opacity & Hue</h5>
                                        <p class="text-muted mb-0">Use <code>colorpicker-opacity-hue</code> class to set colorpicker with opacity & hue.</p>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="colorpicker-opacity-hue"></div>
                                    </div>
                                </div>

                                <div class="my-4 border-top border-dashed"></div>

                                <!-- Switch Colorpicker -->
                                <div class="row align-items-center g-4">
                                    <div class="col-lg-6">
                                        <h5 class="fw-semibold mb-1">Switches</h5>
                                        <p class="text-muted mb-0">Use <code>colorpicker-switch</code> class to set switch colorpicker.</p>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="colorpicker-switch"></div>
                                    </div>
                                </div>

                                <div class="my-4 border-top border-dashed"></div>

                                <!-- Colorpicker with Input -->
                                <div class="row align-items-center g-4">
                                    <div class="col-lg-6">
                                        <h5 class="fw-semibold mb-1">Picker with Input</h5>
                                        <p class="text-muted mb-0">Use <code>colorpicker-input</code> class to set colorpicker with input.</p>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="colorpicker-input"></div>
                                    </div>
                                </div>

                                <div class="my-4 border-top border-dashed"></div>

                                <!-- Colorpicker Format Option -->
                                <div class="row align-items-center g-4">
                                    <div class="col-lg-6">
                                        <h5 class="fw-semibold mb-1">Color Format</h5>
                                        <p class="text-muted mb-0">Use <code>colorpicker-format</code> class to set colorpicker with format option.</p>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="colorpicker-format"></div>
                                    </div>
                                </div>
                            </div><!-- end card-body -->
                        </div><!-- end card -->
                    </div>
                    <!-- end col -->
                </div> <!-- end row -->

            </div> <!-- container -->


            <?php include('partials/footer.php'); ?>

        </div>

        <!-- ============================================================== -->
        <!-- End of Main Content -->
        <!-- ============================================================== -->

    </div>
    <!-- END wrapper -->

    <?php include('partials/customizer.php'); ?>

    <?php include('partials/footer-scripts.php'); ?>

    <!-- Jquery Require -->
    <script src="assets/plugins/jquery/jquery.min.js"></script>

    <!-- Daterangepicker Plugin Js -->
    <script src="assets/plugins/daterangepicker/moment.min.js"></script>
    <script src="assets/plugins/daterangepicker/daterangepicker.js"></script>

    <!-- Date Range Picker Demo Js -->
    <script src="assets/js/pages/form-date-range-picker.js"></script>

    <!-- Colorpicker Plugin Js -->
    <script src="assets/plugins/pickr/pickr.min.js"></script>

    <!-- Color Picker Demo Js -->
    <script src="assets/js/pages/form-colorpickr.js"></script>

</body>

</html>