strprfcrm/resources/views/schedule/index.blade.php

@extends('layouts.app')

@section('content')
    <div class="p-0 m-0 table-responsive">
        <div class="row mb-3">
            <div class="col-md-6">
                <h3>График монтажей</h3>
            </div>
            <div class="col-md-6 text-end">
                <div class="d-flex flex-row justify-content-end">
                    <div class="p-2">
                        <button @disabled($weekNumber == 1) class="btn btn-sm btn-primary"
                                onclick="document.location = '{{ route('schedule.index', ['week' => $weekNumber - 1]) }}'">
                            <i class="bi bi-arrow-left"></i>
                        </button>
                    </div>
                    <label class="p-2 d-none d-mb-block small mt-1" for="fromDate">Неделя №</label>
                    <div class="p-2">
                        <input type="number" style="width: 3rem" value="{{ $weekNumber }}"
                               class="form-control form-control-sm" name="weekNumber"
                               onchange="document.location = '{{ route('schedule.index') }}?week='+this.value"
                               min="1" max="53" title="№ недели">
                    </div>

                    <div class="p-2">
                        <input type="date" min="{{ year() . '-01-01' }}" max="{{ year() . '-12-31' }}"
                               class="form-control form-control-sm" value="{{ $weekDates['mon'] }}"
                               title="начало недели" name="monday" id="fromDate"
                               onchange="document.location = '{{ route('schedule.index') }}?week=' + getWeekNumber(this.value)">
                    </div>
                    <div class="p-2 d-none d-md-block">
                        <input type="date" disabled name="sunday"
                               class="form-control form-control-sm" value="{{ $weekDates['sun'] }}"
                               title="конец недели">
                    </div>

                    <div class="p-2">
                        <button @disabled($weekNumber > 52) class="btn btn-sm btn-primary"
                                onclick="document.location = '{{ route('schedule.index', ['week' => $weekNumber + 1]) }}'">
                            <i class="bi bi-arrow-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>


        <table class="table">
            <thead>
            <tr>
                <th class="text-center vertical">День недели</th>
                <th class="text-center vertical">Дата</th>
                <th>Код адр</th>
                <th>Округ</th>
                <th>Район</th>
                <th>Адрес</th>
                <th>Тип объекта</th>
                <th>Артикулы МАФ</th>
                <th>Кол-во позиций</th>
                <th>Бригадир</th>
                <th>Примечание</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            @foreach($schedules as $dow => $schs)
                <tr>
                    <td rowspan="{{ ($schs) ? count($schs) : '1' }}"
                        class="vertical">{{ \App\Helpers\DateHelper::getHumanDayOfWeek($dow) }}
                        <i class="bi bi-calendar-plus text-primary ms-2 createSchedule"
                           title="Новая запись" data-schedule-date="{{ $dow }}"></i>
                    </td>
                    <td rowspan="{{ ($schs) ? count($schs) : '1' }}"
                        class="vertical">{{ \App\Helpers\DateHelper::getHumanDate($dow) }}</td>
                    @if($schs)
                        @foreach($schs as $schedule)
                            {!! (!$loop->first) ? '<tr>':'' !!}
                            <td style="background: {{ $schedule->brigadier->color }}"
                                class="align-middle">{{ $schedule->order_id }}</td>
                            <td style="background: {{ $schedule->brigadier->color }}"
                                class="align-middle">{{ $schedule->district->shortname }}</td>
                            <td style="background: {{ $schedule->brigadier->color }}"
                                class="align-middle">{{ $schedule->area->name }}</td>
                            <td style="background: {{ $schedule->brigadier->color }}"
                                class="align-middle">{{ $schedule->object_address }}</td>
                            <td style="background: {{ $schedule->brigadier->color }}"
                                class="align-middle">{{ $schedule->objectType->name }}</td>
                            <td style="background: {{ $schedule->brigadier->color }}"
                                class="align-middle">{!! $schedule->mafs !!}</td>
                            <td style="background: {{ $schedule->brigadier->color }}"
                                class="align-middle">{{ $schedule->mafs_count }}</td>
                            <td style="background: {{ $schedule->brigadier->color }}"
                                class="align-middle">{{ $schedule->brigadier->name }}</td>
                            <td style="background: {{ $schedule->brigadier->color }}"
                                class="align-middle comment-{{ $schedule->id }}">{{ $schedule->comment }}</td>
                            <td style="background: {{ $schedule->brigadier->color }}" class="align-middle">
                                <i class="bi bi-pencil p-1 m-1 cursor-pointer text-primary editSchedule"
                                   data-schedule-date="{{ $schedule->installation_date }}"
                                   data-schedule-id="{{ $schedule->id }}"></i>
                                <i class="bi bi-trash text-danger p-1 m-1 deleteSchedule"
                                   data-schedule-id="{{ $schedule->id }}"></i>
                                <div class="visually-hidden d-none">
                                    <form action="{{ route('schedule.delete', $schedule->id) }}" method="post"
                                          class="deleteForm-{{ $schedule->id }}">
                                        @csrf
                                        @method('DELETE')
                                    </form>
                                </div>
                            </td>
                </tr>
            @endforeach
            @endif
            {!! (!$schs) ? '</tr>': '' !!}

            @endforeach

            </tbody>
        </table>


        <!-- Модальное окно редактирования графика -->
        <div class="modal fade" id="copySchedule" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-fullscreen-sm-down modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="addModalLabel">Изменить запись в графике</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
                    </div>
                    <div class="modal-body">
                        <form action="{{ route('schedule.update') }}" method="post" id="scheduleEditForm">
                            @csrf
                            <input type="hidden" name="id" value="0">
                            <div>
                                <input type="date" name="installation_date" value=""
                                       class="form-control form-control-sm mb-3">
                                <textarea name="comment" placeholder="Комментарий для графика"
                                          class="form-control form-control-sm mb-3"></textarea>
                                <button type="submit" class="btn btn-primary btn-sm">Обновить</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Модальное окно создания графика -->
        <div class="modal fade" id="createSchedule" tabindex="-1" aria-labelledby="exampleModalLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-fullscreen-sm-down modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="addModalLabel">Изменить запись в графике</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
                    </div>
                    <div class="modal-body">
                        <form action="{{ route('schedule.create') }}" method="post" id="scheduleCreateForm">
                            @csrf
                            <input type="text" class="form-control mb-2" placeholder="Поиск площадки" id="search_order">
                            <select id="select_order" name="order_id" class="form-select mb-3" size="7" multiple
                                    required></select>
                            <div>
                                <input type="date" name="installation_date" value=""
                                       class="form-control form-control-sm mb-3">
                                <textarea name="comment" placeholder="Комментарий для графика"
                                          class="form-control form-control-sm mb-3"></textarea>
                                <button type="submit" class="btn btn-primary btn-sm">Создать</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>


        @if($errors->any())
            @dump($errors)
        @endif
    </div>
@endsection

@push('scripts')
    <script type="module">
        $('.editSchedule').on('click', function () {
            let scheduleId = $(this).attr('data-schedule-id');
            let scheduleDate = $(this).attr('data-schedule-date');
            let scheduleComment = $('.comment-' + scheduleId).text();
            $('form#scheduleEditForm input[name=id]').val(scheduleId);
            $('form#scheduleEditForm input[name=installation_date]').val(scheduleDate);
            $('form#scheduleEditForm textarea').text(scheduleComment);
            let myModalEditSchedule = new bootstrap.Modal(document.getElementById("copySchedule"), {});
            myModalEditSchedule.show();
        });

        $('.deleteSchedule').on('click', function () {
            if (confirm('Удалить запись?')) {
                let scheduleId = $(this).attr('data-schedule-id');
                $('.deleteForm-' + scheduleId).submit();
            }

        });

        $('.createSchedule').on('click', function () {
            let scheduleDate = $(this).attr('data-schedule-date');

            $('form#scheduleCreateForm input[name=installation_date]').val(scheduleDate);
            $('form#scheduleCreateForm textarea').text('');

            let myModalCreateSchedule = new bootstrap.Modal(document.getElementById("createSchedule"), {});
            myModalCreateSchedule.show();
        });

        // select order
        $('#search_order').on('keyup', function () {
            // search products on backend
            $.get('{{ route('order.search') }}?s=' + $(this).val(),
                function (data) {
                    $('#select_order').children().remove()
                    $.each(data, function (id, name) {
                        $('#select_order').append('<option value=\'' + id + '\'>' + name + '</option>');
                    });
                }
            );
        }).trigger('keyup');
    </script>
    <script type="text/javascript">
        function getWeekNumber(d) {
            // Copy date so don't modify original
            d = new Date(Date.parse(d));
            // Set to nearest Thursday: current date + 4 - current day number
            // Make Sunday's day number 7
            d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
            // Get first day of year
            let yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
            // Calculate and return week number
            return Math.ceil((((d - yearStart) / 86400000) + 1) / 7);
        }
    </script>
@endpush