@model NewReminderASP.Domain.Entities.Event

@{
    ViewBag.Title = "Create Event";
}

<link href="~/styles.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.4/themes/default.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.4/themes/default.date.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.4/themes/default.time.css">





<div class="create-form">
    <h2>Add Event</h2>

    @using (Html.BeginForm("Create", "Event", FormMethod.Post, new { @class = "form-horizontal" }))
    {
        @Html.AntiForgeryToken()

        <h4>Event</h4>

        <!-- Event Type Selection -->
        <div class="form-group">
            @Html.LabelFor(model => model.EventTypes, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.EventTypes, new SelectList(Model.EventsTypes, "TypeName", "TypeName"), "Select Event Type", new { @class = "form-control", required = "required" })
                @Html.ValidationMessageFor(model => model.EventTypes, "", new { @class = "text-danger" })
            </div>
        </div>

        <!-- Title Input -->
        <div class="form-group">
            @Html.LabelFor(model => model.Title, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control", placeholder = "Enter Your Title" } })
                @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Date, new { @class = "edit-control-label" })
            @Html.TextBoxFor(model => model.Date, new { @class = "form-control datepicker", placeholder = "Select Date" })
            @Html.ValidationMessageFor(model => model.Date, "", new { @class = "text-danger" })
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Time, new { @class = "edit-control-label" })
            @Html.TextBoxFor(model => model.Time, new { @class = "form-control timepicker", placeholder = "Select Time" })
            @Html.ValidationMessageFor(model => model.Time, "", new { @class = "text-danger" })
        </div>

        <!-- Recurrence Selection -->
        <div class="form-group">
            @Html.LabelFor(model => model.Recurrence, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.Recurrence, new SelectList(Model.EventRecurrences, "RecurrenceType", "RecurrenceType"), "Select Recurrence", new { @class = "form-control", required = "required" })
                @Html.ValidationMessageFor(model => model.Recurrence, "", new { @class = "text-danger" })
            </div>
        </div>

        <!-- Reminder Input -->
        <div class="form-group">
            @Html.LabelFor(model => model.Reminders, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Reminders, new { htmlAttributes = new { @class = "form-control", placeholder = "Enter Your Reminder" } })
                @Html.ValidationMessageFor(model => model.Reminders, "", new { @class = "text-danger" })
            </div>
        </div>

        <!-- Submit Button -->
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <button type="submit" class="btn btn-primary">Create Event</button>
            </div>
        </div>
    }
</div>




<div class="row mt-2">
    <div class="col-md-6">
        @Html.ActionLink("Back", "Details", "Event", new { userName = User.Identity.Name, area = "EventsArea", controller = "User" }, new { @class = "btn btn-secondary" })
    </div>
</div>
}



<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.4/picker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.4/picker.date.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.4/picker.time.js"></script>

<script>
    jQuery(document).ready(function ($) {
        // Инициализация Flatpickr для выбора даты
        $(".datepicker").flatpickr({
            dateFormat: 'd.m.Y', // Формат даты
            enableTime: false, // Отключение выбора времени
        });

        // Инициализация Bootstrap Timepicker для выбора времени
        $('.timepicker').timepicker({

            showMeridian: false, // 24-часовой формат без AM/PM
            showSeconds: false,  // Отключение секунд
            defaultTime: false   // Отключение значения по умолчанию
            
        });

        // Инициализация Pickadate для выбора даты и времени
        $('.datepicker').pickadate({
            format: 'dd.mm.yyyy', // Формат даты
            selectYears: true,
            selectMonths: true,
            selectYears: 100
        });

        // Инициализация Pickadate для выбора времени
        $('.timepicker').pickatime({
            format: 'HH:i', // Формат времени
            interval: 15 // Интервал времени
        });
    });
</script>
Так в методе добавления нужно сделать более удобный календарь для выбора даты  и более удобный способ выбор времени