<script setup>
import { useRoute, useRouter } from 'vue-router';
import { ref, onMounted } from 'vue';
import { useAuthStore } from '@/stores/Auth.js';

const authStore = useAuthStore();
const router = useRouter();
const route = useRoute();
const info = ref([]);
const message = ref('');

const pointInfo = (id) => {
    authStore.getPointInfo(id).then((response, error) => {
        if (error) return console.log(error);
        info.value = response.response.data;
    });
};

onMounted(() => {
    pointInfo(route.query.point_id);
    form.value.sen_manager_id = authStore.user.id;
    form.value.schedule_id = route.query.schedule_id;
});

function formatDate(dateStr) {
    const date = new Date(dateStr);
    return date.toLocaleDateString('ru-RU');
}

const form = ref({
    schedule_id: null,
    sen_manager_id: null,
    point_id: route.query.point_id,
    day: route.query.date,
    timeStart: '',
    timeEnd: '',
});

const updateEndTime = () => {
    if (!form.value.timeStart) {
        form.value.timeEnd = null;
        return;
    }

    // Разбиваем время на часы и минуты
    const [hours, minutes] = form.value.timeStart.split(':').map(Number);

    // Добавляем 4 часа
    const newHours = (hours + 4) % 24;

    // Форматируем обратно в HH:MM
    form.value.timeEnd = `${String(newHours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
};

const savePlan = () => {
    authStore.savePointPlan(form.value).then((response, error) => {
        if (error) return console.log(error);
        message.value = response.response.data.message;
        router.push({
            name: 'schedule-plan',
            params: { id: form.value.schedule_id },
            query: { district: route.query.district },
        });
    });
};
</script>

<template>
    <div class="container py-4">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <div class="mb-3 d-flex align-items-center justify-content-between">
                            <div>
                                <button class="btn btn-primary" @click="savePlan">Сохранить</button>
                            </div>
                            <div>
                                <button class="btn btn-secondary" @click="router.back">Назад</button>
                            </div>
                        </div>
                        <div class="mb-3 d-flex align-items-center">
                            <label class="w-150 flex-shrink-0">Дата:</label>
                            <p class="form-control-plaintext">{{ formatDate(route.query.date) }}</p>
                        </div>
                        <div v-if="info.point">
                            <div class="mb-3 d-flex align-items-center">
                                <label class="w-150 flex-shrink-0">Название:</label>
                                <p class="form-control-plaintext">{{ info.point.name }}</p>
                            </div>
                            <div class="mb-3 d-flex align-items-center">
                                <label class="w-150 flex-shrink-0">Широта:</label>
                                <p class="form-control-plaintext">{{ info.point.latitude }}</p>
                            </div>
                            <div class="mb-3 d-flex align-items-center">
                                <label class="w-150 flex-shrink-0">Долгота:</label>
                                <p class="form-control-plaintext">{{ info.point.longitude }}</p>
                            </div>
                            <div class="mb-3 d-flex align-items-center">
                                <label class="w-150 flex-shrink-0">Регион:</label>
                                <p class="form-control-plaintext">{{ info.point.district.name }}</p>
                            </div>
                            <div class="mb-3 d-flex align-items-center">
                                <label class="w-150 flex-shrink-0">Область:</label>
                                <p class="form-control-plaintext">{{ info.point.district.region.name }}</p>
                            </div>
                        </div>

                        <div class="mb-3 d-flex align-items-center">
                            <label class="w-150 flex-shrink-0">Время начало мониторинга:</label>
                            <select class="form-control" v-model="form.timeStart" @change="updateEndTime" required>
                                <option disabled value="">— выберите время —</option>
                                <option value="09:00">09:00</option>
                                <option value="14:00">14:00</option>
                            </select>
                        </div>

                        <div class="mb-3 d-flex align-items-center">
                            <label class="w-150 flex-shrink-0">Время завершения мониторинга:</label>

                            <input type="time" class="form-control" v-model="form.timeEnd" disabled required />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style></style>
