select from and to for export scheduler

resources/views/schedule/index.blade.php

@@ -58,14 +58,7 @@
                         </div>
                         @if(hasRole('admin'))
                         <div class="p-2 ms-md-3">
-                            <form action="{{ route('schedule.export') }}" method="post">
-                                @csrf
-                                <input type="hidden" name="start_date" value="{{ $weekDates['mon'] }}">
-                                <input type="hidden" name="end_date" value="{{ $weekDates['sun'] }}">
-                                <input type="hidden" name="week" value="{{ $weekNumber }}">
-                                <input type="hidden" name="year" value="{{ $scheduleYear }}">
-                                <button type="submit" class="btn btn-sm btn-primary" id="exportScheduleButton">Экспорт</button>
-                            </form>
+                            <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#exportScheduleModal">Экспорт</button>
                         </div>
                         @endif
                     </div>
@@ -284,6 +277,40 @@
         @endif
 
         @if(hasRole('admin'))
+            <!-- Модальное окно экспорта графика -->
+            <div class="modal fade" id="exportScheduleModal" tabindex="-1" aria-labelledby="exportScheduleModalLabel" aria-hidden="true">
+                <div class="modal-dialog modal-sm">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h1 class="modal-title fs-5" id="exportScheduleModalLabel">Экспорт графика</h1>
+                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
+                        </div>
+                        <div class="modal-body">
+                            <form action="{{ route('schedule.export') }}" method="post" id="exportScheduleForm">
+                                @csrf
+                                <input type="hidden" name="week" value="{{ $weekNumber }}">
+                                <input type="hidden" name="year" value="{{ $scheduleYear }}">
+                                <div class="mb-3">
+                                    <label for="exportStartDate" class="form-label">Дата начала</label>
+                                    <input type="date" class="form-control" id="exportStartDate" name="start_date"
+                                           value="{{ $weekDates['mon'] }}"
+                                           min="{{ $weekDates['mon'] }}" max="{{ $weekDates['sun'] }}">
+                                </div>
+                                <div class="mb-3">
+                                    <label for="exportEndDate" class="form-label">Дата окончания</label>
+                                    <input type="date" class="form-control" id="exportEndDate" name="end_date"
+                                           value="{{ $weekDates['sun'] }}"
+                                           min="{{ $weekDates['mon'] }}" max="{{ $weekDates['sun'] }}">
+                                </div>
+                                <div class="text-center">
+                                    <button type="submit" class="btn btn-primary btn-sm">Экспортировать</button>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
             <!-- Модальное окно редактирования графика -->
             <div class="modal fade" id="copySchedule" tabindex="-1" aria-labelledby="copyScheduleLabel" aria-hidden="true">
                 <div class="modal-dialog modal-fullscreen-sm-down modal-lg">
@@ -370,6 +397,22 @@
                 }.bind(this), 'Подтверждение удаления');
             });
 
+            $('#exportStartDate').on('change', function () {
+                let val = $(this).val();
+                $('#exportEndDate').attr('min', val);
+                if ($('#exportEndDate').val() < val) {
+                    $('#exportEndDate').val(val);
+                }
+            });
+
+            $('#exportEndDate').on('change', function () {
+                let val = $(this).val();
+                $('#exportStartDate').attr('max', val);
+                if ($('#exportStartDate').val() > val) {
+                    $('#exportStartDate').val(val);
+                }
+            });
+
             $('.createSchedule').on('click', function () {
                 let scheduleDate = $(this).attr('data-schedule-date');