@extends('Admin.layouts.master')

@section('content')
@php 
  $currentPage = 'user_overview';
@endphp
<!--begin::Wrapper-->
<!--<div class="app-wrapper flex-column flex-row-fluid meeting-datails" id="kt_app_wrapper">-->
<style>
    label.error {
        width: 100%;
        color: #d50c0c;
    }
</style>
    <!--begin::Main-->
    <div class="app-main appmain flex-column flex-row-fluid" id="kt_app_main">
        <!--begin::Content wrapper-->
        <div class="d-flex flex-column flex-column-fluid">
            <!--begin::Toolbar-->
            <div class="mng-noti bg-color-card p-5 m-5">
                <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
                    User Overview</h1>
                <div class="typemsg">
                   <form id="userOverviewForm" method="POST" action="{{ route('exportData') }}">
                        @csrf
                       <!--<label class="required">Date: </label>-->
                           <div class="mng-input">
                                <label class="required text-white fs-6">Start Date :</label>
                                <input type="date" id="start_date" name="start_date" style="width:500px;">
                            </div>
                            
                             <div class="mng-input">
                                <label class="required text-white fs-6">End Date :</label>
                                <input type="date" id="end_date" name="end_date" style="width:500px;">
                            </div>
                        <div class="send-noti" style="margin-top: 12px;">
                            <button type="submit" class="btn btn-sm fw-bold btn-primary explore submit" id="save" >Export</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!--end::Content wrapper-->
    </div>
    <!--end:::Main-->
<!--</div>-->


<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js" integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$(document).ready(function(){
   
    
    var today = new Date().toISOString().split('T')[0];
    $("#start_date").attr('max', today);
    $("#end_date").attr('max', today);
    
     
     $.validator.addMethod("endDateAfterStartDate", function(value, element) {
        var startDate = $("#start_date").val();
        var endDate = $("#end_date").val();
        return new Date(startDate) < new Date(endDate);
    }, "End date must be after start date");
    $("#userOverviewForm").validate({
        rules: {
            start_date: {
                required: true,
            },
            end_date: {
                required: true,
                 endDateAfterStartDate: true, 
            }
        },
        messages: {
            start_date: {
                required: "Please select date",
            },
            end_date: {
                required: "Please select date",
            }
        },
        submitHandler: function (form) {
        $("#save").html("saving....");
        $("#save").prop("disabled", true);
            form.submit();
            toastr.success('Data exported successfully');
            setTimeout(function() {
            window.location.reload();
            }, 1000); 
        },
    });
});

</script>

@endsection