@extends('layouts.app')

@section('content')
    <div class="p-0 m-0">
        <div class="row mb-3 align-items-center">
            <div class="col-md-6">
                <h3>График монтажей</h3>
            </div>
            <div class="col-md-6 text-end">
                <ul class="nav nav-tabs justify-content-end">
                    <li class="nav-item">
                        <a class="nav-link @if($activeTab === 'week') active @endif"
                           href="{{ route('schedule.index', ['week' => $weekNumber, 'tab' => 'week']) }}">Неделя</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link @if($activeTab === 'month') active @endif"
                           href="{{ route('schedule.index', ['month' => str_pad((string)$monthNumber, 2, '0', STR_PAD_LEFT), 'tab' => 'month']) }}">Месяц</a>
                    </li>
                </ul>
            </div>
        </div>

        @if($activeTab === 'week')
            <div class="row mb-3">
                <div class="col-md-12 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, 'tab' => 'week']) }}'">
                                <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" value="{{ $weekNumber }}"
                                   class="form-control form-control-sm week-number-input" name="weekNumber"
                                   onchange="document.location = '{{ route('schedule.index') }}?tab=week&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') }}?tab=week&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, 'tab' => 'week']) }}'">
                                <i class="bi bi-arrow-right"></i>
                            </button>
                        </div>
                        @if(hasRole('admin'))
                        <div class="p-2 ms-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 }}">
                                <button type="submit" class="btn btn-sm btn-primary" id="exportScheduleButton">Экспорт</button>
                            </form>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        @endif

        @if($activeTab === 'week')
        <div class="table-responsive">
        <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>
                @if(hasRole('admin'))
                    <th>Транспорт</th>
                    <th>Комментарий</th>
                @endif
                <th>Примечание</th>
                @if(hasRole('admin'))
                    <th></th>
                @endif
            </tr>
            </thead>
            <tbody>
            @foreach($schedules as $dow => $schs)
                <tr>
                    <td rowspan="{{ ($schs) ? count($schs) : '1' }}"
                        class="vertical">{{ \App\Helpers\DateHelper::getHumanDayOfWeek($dow) }}
                        @if(hasRole('admin'))
                            <i class="bi bi-calendar-plus text-primary ms-2 createSchedule"
                               title="Новая запись" data-schedule-date="{{ $dow }}"></i>
                        @endif
                    </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 code-{{ $schedule->id }}">{{ $schedule->address_code }}</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">
                                @if($schedule->order_id)
                                <a href="{{ route('order.show', $schedule->order_id) }}">{{ $schedule->object_address }}</a>
                                @else
                                    {{ $schedule->object_address }}
                                @endif
                            </td>
                            <td style="background: {{ $schedule->brigadier->color }}"
                                class="align-middle object-type-{{ $schedule->id }}">{{ $schedule->object_type }}</td>
                            <td style="background: {{ $schedule->brigadier->color }}"
                                class="align-middle mafs-{{ $schedule->id }}">{!! nl2br($schedule->mafs) !!}</td>
                            <td style="background: {{ $schedule->brigadier->color }}"
                                class="align-middle  mafs-count-{{ $schedule->id }}">{{ $schedule->mafs_count }}</td>
                            <td style="background: {{ $schedule->brigadier->color }}"
                                class="align-middle">{{ $schedule->brigadier->name }}</td>
                            @if(hasRole('admin'))
                                <td style="background: {{ $schedule->brigadier->color }}"
                                    class="align-middle transport-{{ $schedule->id }}">{{ $schedule->transport }}</td>
                                <td style="background: {{ $schedule->brigadier->color }}"
                                    class="align-middle admin-comment-{{ $schedule->id }}">{{ $schedule->admin_comment }}</td>
                            @endif
                            <td style="background: {{ $schedule->brigadier->color }}"
                                class="align-middle comment-{{ $schedule->id }}">{{ $schedule->comment }}</td>
                            @if(hasRole('admin'))
                                <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-address="{{ $schedule->object_address }}"
                                       data-schedule-district="{{ $schedule->district_id }}"
                                       data-schedule-brigadier="{{ $schedule->brigadier_id }}"
                                       data-schedule-area="{{ $schedule->area_id }}"
                                       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>
                            @endif
                </tr>
            @endforeach
            @endif
            {!! (!$schs) ? '</tr>': '' !!}

            @endforeach

            </tbody>
        </table>
        </div>
        @endif

        @if($activeTab === 'month')
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div class="d-flex align-items-center">
                    <button class="btn btn-sm btn-primary me-2" @disabled(!$monthPrev)
                            onclick="document.location = '{{ route('schedule.index', ['tab' => 'month', 'month' => $monthPrev ?? str_pad((string)$monthNumber, 2, '0', STR_PAD_LEFT)]) }}'">
                        <i class="bi bi-arrow-left"></i>
                    </button>
                    <div class="h5 mb-0 text-capitalize">{{ $monthLabel }}</div>
                    <button class="btn btn-sm btn-primary ms-2" @disabled(!$monthNext)
                            onclick="document.location = '{{ route('schedule.index', ['tab' => 'month', 'month' => $monthNext ?? str_pad((string)$monthNumber, 2, '0', STR_PAD_LEFT)]) }}'">
                        <i class="bi bi-arrow-right"></i>
                    </button>
                </div>
                <div class="d-flex align-items-center">
                    <label for="monthSelect" class="me-2 small">Месяц</label>
                    <input id="monthSelect" type="month" class="form-control form-control-sm"
                           min="{{ year() . '-01' }}" max="{{ year() . '-12' }}"
                           value="{{ year() . '-' . str_pad((string)$monthNumber, 2, '0', STR_PAD_LEFT) }}"
                           onchange="document.location='{{ route('schedule.index') }}?tab=month&month=' + this.value.substring(5,7)">
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-bordered schedule-month">
                    <thead>
                    <tr>
                        <th class="text-center">Пн</th>
                        <th class="text-center">Вт</th>
                        <th class="text-center">Ср</th>
                        <th class="text-center">Чт</th>
                        <th class="text-center">Пт</th>
                        <th class="text-center">Сб</th>
                        <th class="text-center">Вс</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($monthGrid as $week)
                        <tr>
                            @foreach($week as $day)
                                <td class="schedule-day @if(!$day['inMonth']) schedule-outside @endif @if($day['isToday']) schedule-today @endif"
                                    data-week="{{ $day['week'] }}">
                                    <a class="schedule-day-link"
                                       href="{{ route('schedule.index', ['week' => $day['week'], 'tab' => 'week']) }}"
                                       title="Открыть неделю №{{ $day['week'] }}">
                                        {{ $day['day'] }}
                                    </a>
                                    @if(isset($monthScheduleColors[$day['date']]))
                                        <div class="schedule-dots">
                                            @foreach($monthScheduleColors[$day['date']] as $brigadier)
                                                <span class="schedule-dot" style="background: {{ $brigadier['color'] }}"
                                                      title="{{ $brigadier['name'] }}"></span>
                                            @endforeach
                                        </div>
                                    @endif
                                </td>
                            @endforeach
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>

            @if(!empty($monthBrigadierLegend))
                <div class="schedule-legend mt-3">
                    <div class="small text-muted mb-2">Бригадиры</div>
                    <div class="schedule-legend-items">
                        @foreach($monthBrigadierLegend as $brigadier)
                            <span class="schedule-legend-item">
                                <span class="schedule-dot" style="background: {{ $brigadier['color'] }}"></span>
                                <span class="schedule-legend-name">{{ $brigadier['name'] }}</span>
                            </span>
                        @endforeach
                    </div>
                </div>
            @endif
        @endif

        <style>
            .schedule-month {
                table-layout: fixed;
            }
            .schedule-day {
                height: 110px;
                vertical-align: top;
                position: relative;
            }
            .schedule-day-link {
                display: inline-block;
                font-weight: 600;
                text-decoration: none;
                color: #0d6efd;
            }
            .schedule-dots {
                margin-top: 6px;
                display: flex;
                flex-wrap: wrap;
                gap: 4px;
            }
            .schedule-dot {
                width: 12px;
                height: 12px;
                border-radius: 50%;
                display: inline-block;
                border: 1px solid rgba(0, 0, 0, 0.1);
            }
            .schedule-outside {
                background: #f8f9fa;
                color: #9aa0a6;
            }
            .schedule-today {
                outline: 2px solid rgba(13, 110, 253, 0.5);
                outline-offset: -2px;
            }
            .schedule-legend-items {
                display: flex;
                flex-wrap: wrap;
                gap: 10px 16px;
                align-items: center;
            }
            .schedule-legend-item {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                font-size: 0.9rem;
            }
            .schedule-legend-name {
                white-space: nowrap;
            }
        </style>

        <!-- Модальное окно редактирования графика -->
        <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>
                                @include('partials.input',  ['name' => 'installation_date', 'title' => 'Дата монтажа', 'type' => 'date'])
                                @include('partials.input',  ['name' => 'address_code', 'title' => 'Код адреса'])
                                @include('partials.select', ['name' => 'district_id', 'title' => 'Округ', 'options' => $districts, 'first_empty' => true])
                                @include('partials.select', ['name' => 'area_id', 'title' => 'Район', 'options' => $areas, 'first_empty' => true])
                                @include('partials.input',  ['name' => 'object_address', 'title' => 'Адрес', 'required' => true])
                                @include('partials.input',  ['name' => 'object_type', 'title' => 'Тип объекта', 'required' => true])
                                @include('partials.textarea', ['name' => 'mafs', 'title' => 'МАФы', 'required' => true])
                                @include('partials.input',  ['name' => 'mafs_count', 'title' => 'Кол-во МАФ', 'type' => 'number', 'required' => true])
                                @include('partials.select', ['name' => 'brigadier_id', 'title' => 'Бригадир', 'options' => $brigadiers, 'required' => true, 'first_empty' => true])
                                @include('partials.input',  ['name' => 'transport', 'title' => 'Транспорт'])
                                @include('partials.textarea', ['name' => 'admin_comment', 'title' => 'Комментарий'])
                                @include('partials.textarea', ['name' => 'comment', 'title' => 'Примечание'])
                                <div class="text-center">
                                    <button type="submit" class="btn btn-primary btn-sm">Сохранить</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

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

@push('scripts')
    <script type="module">
        $('.schedule-day').on('dblclick', function () {
            let week = $(this).attr('data-week');
            if (!week) return;
            document.location = '{{ route('schedule.index') }}?tab=week&week=' + week;
        });

        $('.editSchedule').on('click', function () {
            let scheduleId = $(this).attr('data-schedule-id');
            let scheduleDate = $(this).attr('data-schedule-date');
            let scheduleDistrict = $(this).attr('data-schedule-district');
            let scheduleArea = $(this).attr('data-schedule-area');
            let scheduleBrigadier = $(this).attr('data-schedule-brigadier');
            let scheduleAddress = $(this).attr('data-schedule-address');
            let scheduleComment = $('.comment-' + scheduleId).text();
            let scheduleTransport = $('.transport-' + scheduleId).text();
            let scheduleAdminComment = $('.admin-comment-' + scheduleId).text();
            let scheduleMafs = $('.mafs-' + scheduleId).text();
            let scheduleObjectType = $('.object-type-' + scheduleId).text();
            let scheduleMafsCount = $('.mafs-count-' + scheduleId).text();
            let scheduleCode = $('.code-' + scheduleId).text();
            console.log(scheduleId, scheduleDate, scheduleDistrict, $(this).attr('data-schedule-brigadier'));
            $('form#scheduleEditForm input[name=id]').val(scheduleId);
            $('form#scheduleEditForm input[name=object_address]').val(scheduleAddress);
            $('form#scheduleEditForm input[name=object_type]').val(scheduleObjectType);
            $('form#scheduleEditForm input[name=installation_date]').val(scheduleDate);
            $('form#scheduleEditForm select[name=district_id]').val(scheduleDistrict);
            $('form#scheduleEditForm select[name=area_id]').val(scheduleArea);
            $('form#scheduleEditForm select[name=brigadier_id]').val(scheduleBrigadier);
            $('form#scheduleEditForm textarea[name=comment]').text(scheduleComment);
            $('form#scheduleEditForm input[name=transport]').val(scheduleTransport);
            $('form#scheduleEditForm textarea[name=admin_comment]').text(scheduleAdminComment);
            $('form#scheduleEditForm textarea[name=mafs]').text(scheduleMafs);
            $('form#scheduleEditForm input[name=mafs_count]').val(scheduleMafsCount);
            $('form#scheduleEditForm input[name=address_code]').val(scheduleCode);

            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#scheduleEditForm input[name=id]').val('');
            $('form#scheduleEditForm input[name=object_address]').val('');
            $('form#scheduleEditForm input[name=object_type]').val('');
            $('form#scheduleEditForm input[name=installation_date]').val(scheduleDate);
            $('form#scheduleEditForm select[name=district_id]').val('');
            $('form#scheduleEditForm select[name=area_id]').val('');
            $('form#scheduleEditForm select[name=brigadier_id]').val('');
            $('form#scheduleEditForm textarea[name=comment]').text('');
            $('form#scheduleEditForm input[name=transport]').val('');
            $('form#scheduleEditForm textarea[name=admin_comment]').text('');
            $('form#scheduleEditForm textarea[name=mafs]').text('');
            $('form#scheduleEditForm input[name=mafs_count]').val('');
            $('form#scheduleEditForm input[name=address_code]').val('');

            let myModalCreateSchedule = new bootstrap.Modal(document.getElementById("copySchedule"), {});
            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');


        $('#district_id').on('change', function () {
            // load areas of selected district
            $.get('{{ route('area.ajax-get-areas-by-district') }}/' + $(this).val(),
                function (data) {
                    $('#area_id').children().remove();
                    $.each(data, function (id, name) {
                        $('#area_id').append('<option value=\'' + id + '\'>' + name + '</option>');
                    });
                }
            );
        });


    </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