@extends('layout.basic.main')
@if($idCross)
    @section('title', 'クロス分析（編集）')
@else
    @section('title', 'クロス分析（作成）')
@endif
@push('css')
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css"
          integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
    <link rel="stylesheet" href="{{asset('css/cross_analysis/create.css')}}?v={{config("sns-line.version")}}">
    <style>
        #crossAnalysisAdd label {
            font-size: inherit;
            font-weight: inherit;
        }

        #crossAnalysisAdd input::placeholder {
            color: #E0E0E0;
        }

        /* pagination style */
        #crossAnalysisAdd .active {
            background-color: white !important;
            border: 1px solid #5799DB;
        }

        #crossAnalysisAdd .active button {
            color: #5799DB;
        }

        #crossAnalysisAdd .dropdown-menu {
            min-width: 103px;
            top: -155px
        }

        #crossAnalysisAdd .open > .dropdown-menu {
            display: flex;
            flex-direction: column;
        }

        .toastMessage::before {
            content: "";
            display: inline-block;
            width: 18px;
            height: 18px;
            background-image: url('/images/circle-check.svg');
            background-size: cover;
            margin-right: 3px;
        }
    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@latest/dist/plugins/monthSelect/style.css">

    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr@latest/dist/plugins/monthSelect/index.js"></script>

    <style>
        .flatpickr-calendar .flatpickr-innerContainer .flatpickr-weekdays .flatpickr-weekday:nth-child(7n + 1), .flatpickr-calendar .flatpickr-innerContainer .flatpickr-days .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not( .nextMonthDay ):nth-child(7n + 1) {
            color: #f44336;
        }
        .flatpickr-calendar .flatpickr-innerContainer .flatpickr-weekdays .flatpickr-weekday:nth-child(7), .flatpickr-calendar .flatpickr-innerContainer .flatpickr-days .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not( .nextMonthDay ):nth-child(7n) {
            color: #5799db;
        }
        .flatpickr-day.is-holiday {
            background: #fff8f7 !important;
        }
        .flatpickr-monthDropdown-months {
            padding: 2px 4px !important;
        }
        .flatpickr-monthSelect-month.selected, .flatpickr-monthSelect-month.startRange, .flatpickr-monthSelect-month.endRange {
            background: #5799db !important;
            border-color: #5799db !important;
            color: #fff !important;
        }
        .flatpickr-year-dropdown {
            font-size: 14px;
            padding: 2px 4px;
            border: none;
            background: transparent;
            font-weight: 700;
        }
        .numInputWrapper:hover span {
            display: none;
            opacity: 0;
        }
        .flatpickr-current-month input.cur-year::-webkit-inner-spin-button, .flatpickr-current-month input.cur-year::-webkit-outer-spin-button {
            -webkit-appearance: none !important;
            margin: 0 !important;
        }
        .flatpickr-current-month input.cur-year {
            -moz-appearance: textfield !important;
        }
        .flatpickr-calendar .numInput {
            user-select: none;
        }
        .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
            background: #5799db !important;
            border-color: #5799db !important;
            color: #fff !important;
        }
        .flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus {
            background: #5799db !important;
            border-color: #5799db !important;
            color: #fff !important;
        }
        .flatpickr-day.inRange {
            box-shadow: -5px 0 0 #5799db,5px 0 0 #5799db;
        }
        .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
            box-shadow: -2px 0 0 #5799db,5px 0 0 #5799db;
        }
        .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
            box-shadow: -10px 0 0 #5799db;
        }
        .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year, .flatpickr-current-month span.cur-month {
            font-size: 14px;
            font-weight: 700;
        }
        .flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg {
            fill: #b4b4b4;
        }
        .flatpickr-time input.flatpickr-hour {
            font-weight: normal;
        }
        .flatpickr-calendar.hasTime .flatpickr-time {
            align-items: center;
            height: 41px !important;
            gap: 16px;
            padding: 8px;
        }
        .flatpickr-calendar.hasTime .flatpickr-time .flatpickr-hour-dropdown, .flatpickr-calendar.hasTime .flatpickr-time .flatpickr-minute-dropdown {
            width: calc(100% / 2);
        }
        .flatpickr-time:after {
            content: none;
        }
        .flatpickr-day.today {
            background: #f0f0f0;
            border-color: #f0f0f0;
        }
        .flatpickr-calendar button.today {
            background: #fff;
            border-radius: 0 0 5px 5px;
            border-top: 1px solid #e0e0e0;
            color: #5799db;
            cursor: pointer;
            font-size: 14px;
            padding: 8px;
            width: 100%;
        }
        .flatpickr-calendar button.today:hover {
            background: #edf4fb;
        }
        .flatpickr-monthSelect-month.today {
            background: #f0f0f0;
            border-color: #f0f0f0;
        }
        .date-box {
            position: relative;
        }
        .date-box .clear-btn {
            background: none;
            cursor: pointer;
            color: #888;
            display: none;
            opacity: 0.6;
            position: absolute;
            right: 40px;
            top: 50%;
            transform: translateY(-50%);
        }
        .date-box .clear-btn:hover {
            opacity: 1;
        }
        .date {
            width: fit-content;
        }
        .date-box {
            border-radius: 5px;
            display: inline-block;
            padding: 4px;
            position: relative;
        }
        .date-box::after {
            color: #ddd;
            content: "\f133";
            font-family: "Font Awesome 5 Pro";
            font-size: 14px;
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .date-box:focus-within {
            background: #edf4fb;
        }
        .date input[type="text"] {
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
            font-weight: 400;
            height: 36px;
            padding: 6px 56px 6px 8px;
            width: 100%;
        }
        .date input[type="text"]::placeholder {
            color: #b4b4b4;
            font-weight: 400;
        }
        .date input[type="text"]:focus {
            border: 1px solid #5799db;
        }
        .date04 input[type="text"] {
            min-width: 280px;
        }
        .dayContainer {
            justify-content: start !important;
        }
        .dayContainer .hidden {
            display: block !important;
        }
        .rangeMode .flatpickr-day {
            margin: auto;
        }
    </style>
@endpush
@section('content')
    <div id="crossAnalysisAdd" class="text-[#222222] text-[14px] font-[300]" v-cloak style="position: relative">
        {{-- Header edit --}}
        <div class="w-[1000px] h-[90px] bg-[#FFFFFF] flex items-center justify-content-between rounded-[10px] mt-[18px] ml-[2px]">
            <div class="text-[#888888] ml-[21px]">
                <div>
                    <a href="{{ route('index.crossAnalysis') }}"
                       class="font-[400] text-[14px] hover:text-[#888888] hover:opacity-70 hover:underline">TOP</a>
                    <span class="mr-[25px] text-[14px] text-[#222] font-[400]"><span class="text-[#888888]">></span> クロス分析 編集</span>
                </div>
                <div class="text-[#222222] text-[18px] font-[600]">
                    クロス分析 編集
                </div>
            </div>

            <div class="flex items-center mr-[24px]">
                <div class="w-[300px] ml-[17px]">
                    <div class="flex justify-content-between">
                        <label class="text-[14px] text-[#222] font-[300]" for="cr_edit_name">管理名</label>
                        <span class="text-[12px] text-[#888888]">@{{ name.length ?? 0 }}/50</span>
                    </div>
                    <input type="text" class="rounded-[5px] border w-full !h-[35px] mt-[9px] !pl-[10px] text-[#222] !text-[14px]"
                           id="cr_edit_name"
                           v-model="name"
                           v-on:change="updateTitleCross()"
                           maxlength="50">
                </div>
                <div class="w-[300px] ml-[30px]">
                    <div>
                        <label class="text-[14px] text-[#222] font-[300]" for="edit_cross_group_id">フォルダ</label>
                    </div>
                    <select class="rounded-[5px] border border-solid border-[#DDDDDD] w-full !h-[35px] mt-[9px] text-[#222] !text-[14px] cursor-pointer"
                            id="edit_cross_group_id"
                            v-on:change="updateTitleCross()"
                            v-model="group_id">
                        <option value="0">未分類</option>
                        <option v-for="(item,index) in groups" :value="item.id">@{{ item.name }}</option>
                    </select>
                </div>
            </div>
        </div>
        {{-- End header edit --}}
        @include('basic.cross_analysis.v2.modal.change_info_modal')

        <div class="min-w-[1000px] max-w-[100%] inline-block bg-[#FFFFFF] rounded-[10px] mt-[26px] ml-[2px] p-0" id="cr_section_data_table" style="opacity: 0">
            <div v-show="isNewCreateCross == 1">
                @include('basic.cross_analysis.v2.components.create.register_filter')
            </div>


            <div v-show="isNewCreateCross != 1">
                @include('basic.cross_analysis.v2.components.create.register_condition')
            </div>


            {{-- data table--}}
            <div class="px-[25px]" id="contain-data-table" v-show="isNewCreateCross != 1 || cr_step > 1">
                @include('basic.cross_analysis.v2.components.create.table_data')
            </div>
            <div class="flex items-center justify-content-between">
                <div class="px-[25px] pt-[5px] pb-[13px] flex items-center mt-[18px]" v-show="isNewCreateCross == 1 && cr_step > 1">
                    <button class="w-[110px] h-[40px] border border-solid border-[#5799DB] text-[#5799DB] rounded-[5px]"
                            v-on:click="saveCrossV2()">
                        保存・更新
                    </button>
                    <button class="w-[110px] h-[40px] text-[#888] border border-solid border-[#DDDDDD] rounded-[5px] ml-[10px]"
                            v-on:click="backStep(1)">
                        戻る
                    </button>
                </div>

                <div class="px-[25px] pt-[5px] pb-[13px] flex items-center mt-[18px]" v-show="isNewCreateCross != 1">
                    <button class="w-[250px] h-[40px] border border-solid border-[#5799DB] bg-[#5799DB] text-[#FFFFFF] rounded-[5px] font-[600]"
                            v-on:click="saveCrossV2(0, false, false)">
                        この内容で分析リストを作成・更新
                    </button>
                    <a class="ml-[10px]" href="{{ route('index.crossAnalysis') }}">
                        <button class="w-[110px] h-[40px] text-[#888] border border-solid border-[#DDDDDD] rounded-[5px] bg-[#fff]">
                            戻る
                        </button>
                    </a>
                    <div class="flex ml-[30px] text-[14px] text-[#222222] font-[300]" style="position: relative">
                        <div class="group mr-[6px]" style="position: relative">
                            <i class="fal fa-history fa-flip-horizontal"></i>
                            <div class="i-tooltip !font-[400] !text-[14px] w-[106px] h-[28px] top-[-30px] left-[-45px] group-hover:flex items-center justify-center shadow-[0px_5px_10px_#00000033]">
                                条件保存日時
                            </div>
                        </div> @{{ last_time_save }}

                    </div>
                </div>

                <div class="ml-[30px] mt-[8px] mr-[20px]" v-if="isNewCreateCross != 1">
                    @include('basic.cross_analysis.v2.components.pagination')
                </div>
            </div>
        </div>

        <div class="mt-[31px]" v-if="isNewCreateCross == 1 && cr_step == 1">
            <a href="{{ route('index.crossAnalysis') }}">
                <button class="w-[110px] h-[40px] text-[#888] border border-solid border-[#DDDDDD] rounded-[5px] bg-[#fff]">
                    戻る
                </button>
            </a>
        </div>
    </div>
    @include('layout.modal_filter_v2')
    @include('basic.cross_analysis.v2.modal.condition_modal')
@endsection

@push('js')
    <script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>
    <script>
        var token = "{!! csrf_token() !!}";
        var group_id = "{!! $folderCookie !!}";
        var idCross = "{!! $idCross !!}";
        var basic_home_new = [];
        var list_status = null;
        list_status.forEach(function (item) {
            basic_home_new.push({
                k: item.id,
                text: item.name_status,
                bg: item.color,
                'class': 'default',
                show: !1,
                stt: 1,
                value: item.id
            });
        });
        var params = [];
        var isNewCreateCross = {{ $is_new_create_cross ? 1 : 0 }};
        var getScenario = null;
        var conversion = null;
    </script>
    <script src="/js/tailwindcss.js"></script>
    <script src="/chat_files/clipboard.min.js"></script>
    <script src="/js/form_answer/vee-validate.rc7.min.js"></script>
    <script src="/js/friendlist/modal_filter_v2.js?v={{config('sns-line.version')}}"></script>
    <script type="application/javascript"
            src="/js/infor_friend/components/list_friend.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/cross_analysis/v2/pagination.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/cross_analysis/v2/edit.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/cross_analysis/create.js?v={{config("sns-line.version")}}"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
    <script>
        $(document).ready(function () {
            setTimeout(function () {
                $(".datepicker").datepicker({
                    dateFormat: 'yy/mm/dd',
                    language: 'ja',
                })
            }, 2000);

            $('#cr_table_header_condition').sortable({
                handle: ".drag-title-handle",
                axis: "x",
                cursor: "move",
                update: function () {
                    let x = $(this).sortable('toArray', {attribute: 'data-index'});
                    crossAnalysisAdd.sortFilterName(x);
                }
            });
            $('#section_data_rows').sortable({
                handle: ".drag-handle",
                cursor: "move",
                update: function () {
                    let x = $(this).sortable('toArray', {attribute: 'data-index'});
                    crossAnalysisAdd.sortRow(x);
                }
            });
        });
        $(document).ready(function () {
            setTimeout(function () {
                $('#cr_section_data_table').css('opacity', 1)
            }, 1000);
        });
    </script>
    <script>
        // -------------------- Flatpickr カスタム機能 --------------------
        function addClearButton(instance) {
            const builtinClearBtn = instance.calendarContainer.querySelector(".flatpickr-clear");
            if (builtinClearBtn) builtinClearBtn.style.display = "none";

            const inputWrapper = instance.input.closest(".date-box, .timepicker-box");
            const externalClearBtn = inputWrapper?.querySelector(".clear-btn");

            if (externalClearBtn) {
                externalClearBtn.style.display = instance.input.value ? "block" : "none";
                externalClearBtn.addEventListener("click", () => {
                    instance.clear();
                    externalClearBtn.style.display = "none";
                });
            }

            instance.config.onValueUpdate = instance.config.onValueUpdate || [];
            instance.config.onValueUpdate.push(function () {
                if (externalClearBtn) {
                    externalClearBtn.style.display = instance.input.value ? "block" : "none";
                }
            });
        }

        function addTodayButton(instance) {
            const isTimeOnly = instance.config.noCalendar;
            const isMonthSelect =
                instance.config.plugins &&
                instance.config.plugins.some(
                    (plugin) => plugin.constructor.name === "monthSelectPlugin"
                );

            const todayButton = document.createElement("button");
            todayButton.textContent = isTimeOnly
                ? "現在時刻"
                : instance.input.id === "js-datepicker05"
                    ? "今月"
                    : "今日";
            todayButton.type = "button";
            todayButton.classList.add("today");

            todayButton.addEventListener("click", function () {
                const now = new Date();
                instance.setDate(now, true);
            });

            instance.calendarContainer.appendChild(todayButton);
        }

        function addYearDropdown(instance, yearRange = 50, maxYear = 2030) {
            const currentYear = new Date().getFullYear();
            const yearSelect = document.createElement("select");
            yearSelect.classList.add("flatpickr-year-dropdown");

            for (let i = currentYear - yearRange; i <= maxYear; i++) {
                const option = document.createElement("option");
                option.value = i;
                option.textContent = i + "年";
                yearSelect.appendChild(option);
            }

            yearSelect.value = instance.currentYear;
            yearSelect.addEventListener("change", function () {
                instance.changeYear(parseInt(this.value, 10));
            });

            instance.config.onYearChange = instance.config.onYearChange || [];
            instance.config.onYearChange.push(function () {
                yearSelect.value = instance.currentYear;
            });

            const yearInput = instance.calendarContainer.querySelector(
                ".flatpickr-current-month input.cur-year"
            );
            if (yearInput) {
                yearInput.style.display = "none";
                yearInput.parentNode.appendChild(yearSelect);
            }
        }

        function addTimeDropdown(instance) {
            const timeContainer = instance.calendarContainer.querySelector(".flatpickr-time");
            if (!timeContainer) return;

            const hourWrapper = timeContainer.querySelector(".numInputWrapper .flatpickr-hour")?.parentNode;
            const minuteWrapper = timeContainer.querySelector(".numInputWrapper .flatpickr-minute")?.parentNode;
            const timeSeparator = timeContainer.querySelector(".flatpickr-time-separator");

            if (hourWrapper) hourWrapper.style.display = "none";
            if (minuteWrapper) minuteWrapper.style.display = "none";
            if (timeSeparator) timeSeparator.style.display = "none";

            const hourSelect = document.createElement("select");
            hourSelect.classList.add("flatpickr-hour-dropdown");
            for (let i = 0; i < 24; i++) {
                const option = document.createElement("option");
                option.value = i;
                option.textContent = String(i).padStart(2, "0");
                hourSelect.appendChild(option);
            }

            const minuteSelect = document.createElement("select");
            minuteSelect.classList.add("flatpickr-minute-dropdown");
            for (let i = 0; i < 60; i++) {
                const option = document.createElement("option");
                option.value = i;
                option.textContent = String(i).padStart(2, "0");
                minuteSelect.appendChild(option);
            }

            hourSelect.addEventListener("change", () => {
                const date = instance.selectedDates[0] || new Date();
                date.setHours(parseInt(hourSelect.value, 10));
                instance.setDate(date, false);
            });

            minuteSelect.addEventListener("change", () => {
                const date = instance.selectedDates[0] || new Date();
                date.setMinutes(parseInt(minuteSelect.value, 10));
                instance.setDate(date, false);
            });

            instance.config.onValueUpdate.push(function () {
                const date = instance.selectedDates[0];
                if (!date) return;
                hourSelect.value = date.getHours();
                minuteSelect.value = date.getMinutes();
            });

            timeContainer.appendChild(hourSelect);
            timeContainer.appendChild(minuteSelect);
        }

        function setupFlatpickr(selector, options = {}) {
            return flatpickr(selector, {
                locale: "ja",
                ...options,
                onReady(selectedDates, dateStr, instance) {
                    if (typeof options.onReady === "function") {
                        options.onReady(selectedDates, dateStr, instance);
                    }
                    addYearDropdown(instance);
                    addTodayButton(instance);
                    addClearButton(instance);
                    if (options.enableTime) addTimeDropdown(instance);
                },
            });
        }

        // -------------------- 各 input に適用 --------------------
        setupFlatpickr("#js-datepicker04", {
            mode: "range",
            showMonths: 2,
            dateFormat: "Y/m/d（D）",
            allowInput: true,
            onChange: function (selectedDates, dateStr, instance) {
                if (selectedDates.length === 2) {
                    const [start, end] = selectedDates;
                    const weekdays = ["日", "月", "火", "水", "木", "金", "土"];
                    const formatDateWithWeekday = (date) => {
                        const y = date.getFullYear();
                        const m = String(date.getMonth() + 1).padStart(2, "0");
                        const d = String(date.getDate()).padStart(2, "0");
                        const w = weekdays[date.getDay()];
                        return `${y}/${m}/${d}（${w}）`;
                    };
                    const startStr1 = formatDateWithWeekday(start);
                    const endStr1 = formatDateWithWeekday(end);

                    instance.input.value = `${startStr1} から ${endStr1}`;

                    const formatForData = (date) => {
                        const y = String(date.getFullYear());
                        const m = String(date.getMonth() + 1).padStart(2, "0");
                        const d = String(date.getDate()).padStart(2, "0");
                        return `${y}/${m}/${d}`;
                    };

                    crossAnalysisAdd.start_date = formatForData(start);
                    crossAnalysisAdd.end_date = formatForData(end);
                }
            },
        });

    </script>
@endpush