@extends("common.layout")


@section("header")
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></script>

@endsection

@section("content")

<div>
    <h1><a href="">{{ $type == 'sms' ? "문자" : "이메일" }} 템플릿 그룹관리</a></h1>
</div>

<div class="row" x-data="groupPage">
    <div class="col-lg-6">
        <section>
            <header>
                템플릿 그룹 등록
            </header>
            <main>
                <form class="default" action="" id="group_form">
                    <input type='hidden' name="type" id="type" value="{{ strtoupper($type) }}"/>
                    <ul class="px-0">
                        <li class="row m-0 mb-3 p-0">
                            <label class="col-md-2 col-form-label required">서비스 명</label>
                            <div class="col-3">
                                <select class="form-select" name="service" id="service">
                                    @foreach ($services as $service => $name)
                                        <option value="{{ $service }}">{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-6 validation-wrap"><p class="m-0"></p></div>
                        </li>
                        <li class="row m-0 mb-3 p-0">
                            <label class="col-md-2 col-form-label required">템플릿 그룹명</label>
                            <div class="col-6">
                                <input type='text' name="name" id="name" value="" class="form-control"/>
                                <div class="validation-wrap"><p class="m-0"></p></div>
                            </div>
                        </li>
                    </ul>
                </form>
            </main>
            <footer>
                <button class="btn btn-primary" type="button" @click="onSubmitGroup()">저장</button>
            </footer>
        </section>

        <section class="mt-3">
            <header>
                <h6>
                    <span>선택된 템플릿 그룹 총 <strong x-text="checked.groups_cnt">0</strong>건</span>
                </h6>
                <span>
                    <button class="btn btn-info" type="button" @click="onClickTemplateSort(false)">정렬저장</button>
                    <button class="btn btn-danger" type="button" @click="onRemoveGroup()">선택삭제</button>
                </span>
            </header>
            <main>
                <table class="table table-striped table-hover">
                    <colgroup>
                        <col width="5%">
                        <col width="5%">
                        <col width="10%">
                        <col width="15%">
                        <col width="/">
                        <col width="10%">
                        <col width="15%">
                    </colgroup>
                    <thead>
                        <tr>
                            <th></th>
                            <th class="">
                                <input type="checkbox" name="" class="form-check-input" @click="onClickCheckbox('groups')" x-model="checked.groups"/>
                            </th>
                            <th>번호</th>
                            <th>서비스구분</th>
                            <th>템플릿 그룹명</th>
                            <th>템플릿 수</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody x-ref="sortable">
                        <template x-for="(group, index) in groups" :key="index">
                            <tr :class="{'active' : group.checked }">
                                <td class="align-middle">
                                    <button class="btn btn-sm btn-outline-secondary" type="button">
                                        <i class="bi bi-list"></i>
                                    </button>
                                </td>
                                <td class="align-middle">
                                    <input type="checkbox" name="" class="form-check-input" x-model="group.checked" @change="onChangeCheckCnt('groups')"/>
                                </td>

                                <td x-text="group.id"  @click="onClickCheckbox('groups', index)" class="group_id"></td>
                                <td>
                                    <span x-show='! group.isUpdate'  x-text="group.serviceName" @click="onClickCheckbox('groups', index)"></span>
                                    <select x-show='group.isUpdate' class="form-control form-control-sm" x-model="group.tmp_service">
                                        <template x-for="(service, sIndex) in services" :key=sIndex>
                                            <option :value="service.value" x-text="service.text" :selected="group.tmp_service === service.value"></option>
                                        </template>
                                    </select>
                                </td>
                                <td>
                                    <span x-show='! group.isUpdate' x-text="group.name"></span>
                                    <input x-show='group.isUpdate'  type='text' name='group_name' x-model='group.tmp_name' class='form-control form-control-sm' />
                                </td>
                                <td x-text="group.template_cnt"></td>
                                <td>
                                    <button x-show='! group.isUpdate' class="btn btn-sm btn-outline-primary" type="button" @click="onShowUpdateForm(index)"><i class="bi bi-pencil-square"></i></button>
                                    <button x-show='group.isUpdate' class="btn btn-sm btn-primary" type="button" @click="onUpdateGroupName(index)"><i class="bi bi-save"></i></button>
                                    <button class="btn btn-sm btn-warning" type="button" @click="getTemplates(index)">
                                        <i class="bi bi-eye-fill"></i>
                                    </button>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </main>
        </section>
    </div>

    <section class="col-lg-6" x-show="searchGroup.name.length > 0">

            <header>
                <h6>
                    <strong class="text-danger" x-text="'['+ searchGroup.serviceName +'] '"></strong>
                    <strong class="text-danger" x-text="searchGroup.name"></strong> 포함된 템플릿 총 <strong x-text="templates.length"></strong>건
                </h6>
                <span>
                    <button class="btn btn-primary" type="button" @click="onClickTemplateSort(true)">정렬저장</button>
                    <button class="btn btn-danger" @click="onClickTemplateReset()">선택제외</button>
                </span>
            </header>
            <main>
                <div x-show="templates.length == 0">
                    <div class="alert alert-warning">
                        노출중인 템플릿이 없습니다.
                    </div>
                </div>
                <div x-show="templates.length > 0">
                    <div class="alert alert-info">
                        * 현재 노출중인 템플릿만 노출됩니다.
                    </div>
                    <table class="table table-striped table-hover">
                        <colgroup>
                            <col width="7%">
                            <col width="10%">
                            <col width="10%">
                            <col width="15%">
                            <col width="/">
                        </colgroup>
                        <thead>
                            <tr>
                                <th></th>
                                <th>
                                    <input type="checkbox" name="" class="form-check-input"  @click="onClickCheckbox('templates')"/>
                                </th>
                                <th>순서</th>
                                <th>등록일시</th>
                                <th>템플릿명</th>
                            </tr>
                        </thead>
                        <tbody x-ref="templateSortable">
                            <template x-for="(template, index) in templates" :key="index">
                                <tr :class="{'active' : template.checked }">
                                    <td class="align-middle">
                                        <button class="btn btn-sm btn-outline-secondary" type="button">
                                            <i class="bi bi-list"></i>
                                        </button>
                                    </td>
                                    <td class="align-middle">
                                        <input type="checkbox" name="" class="form-check-input" x-model="template.checked" @change="onChangeCheckCnt('templates')"/>
                                    </td>
                                    <td x-text="template.id" @click="onClickCheckbox('templates', index)" class="template_id"></td>
                                    <td x-text="template.created_at" @click="onClickCheckbox('templates', index)"></td>
                                    <td x-text="template.name" @click="onClickCheckbox('templates', index)"></td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
            </main>

        </div>
    </section>
</div>
@endsection


@push("script")
    <script>
        $('#group_name').on('keydown', function(e) {
            if (e.keyCode === 13) {
                e.preventDefault();
            }
        })

        document.addEventListener("alpine:init", () => {
            Alpine.data("groupPage" , () => ({
                checked: { 'groups' : false , 'templates' : false, 'groups_cnt' : 0, 'templates_cnt' : 0 },
                searchGroup: { 'serviceName' : "", "name" : "", index: -1 },
                groups: [],
                templates: [],
                services: [],
                async init() {
                    const self = this;
                    $.each($('#service option'), function() {
                        self.services.push({ "value" : $(this).val(), "text": $(this).text()} ) ;
                    });
                    await this.getGroups();
                    this.enabledSortable();
                }, async onSubmitGroup() {
                    //템플릿그룹을 등록하는 function
                    if (checkValidation()) {
                        const self = this;
                        alertify.confirm("확인", "템플릿 그룹을 등록하시겠습니까?", async () => {
                            const status = await onCreateGroup();
                            if (status) {
                                await self.getGroups();
                            }
                        }, () => { });
                    }
                }, async getGroups() {
                    //그룹 정보 가져오기 function
                    const group = await getGroupList();
                    this.groups = group;
                    this.onChangeCheckCnt('groups');
                }, async onRemoveGroup() {
                    //그룹 삭제
                    const checked = this.groups.filter(item => item.checked);
                    if (checked.length == 0) {
                        alertify.alert("Error", "선택된 템플릿 그룹이 없습니다.");
                        return false;
                    }
                    let template_cnt = 0;
                    const groupId =[];
                    checked.forEach(item => {
                        template_cnt += item.template_cnt;
                        groupId.push(item.id);
                    });

                    let message = "템플릿 그룹을 삭제 하시겠습니까?";
                    if (template_cnt > 0) {
                        message = "템플릿 그룹에 템플릿이 포함되어 있습니다.<br>삭제 시 포함된 템플릿도 함꼐 삭제됩니다.<br><br>삭제 하시겠습니까?"
                    }

                    const self = this;
                    alertify.confirm("확인", message , async () => {
                        const status = await onRemoveGroups(groupId);
                        if (status) {
                            alertify.alert("완료", "삭제되었습니다.");
                            await self.getGroups();

                            self.searchGroup = { 'serviceName' : "", "name" : "", index: -1 };
                            self.templates = [];
                        }
                    }, () => { });

                } , async getTemplates(index, type = 'load') {
                    //그룹별 템플릿정보 가져오기
                    const group = this.groups[index];
                    if (type == 'reset' || this.searchGroup.index != index ) {
                        if (type == 'load') {
                            this.searchGroup.name = group.name;
                            this.searchGroup.serviceName = group.serviceName;
                            this.searchGroup.index = index;
                        }

                        if (group.template_cnt > 0) {
                            const result = await getTemplateList( group.id);
                            if (result.status) {
                                this.templates = result.data.map(item => ({
                                    ...item.sms_dispatches, id: item.id , created_at : convertDate(item.created_at), checked: false
                                }));
                            }
                        } else {
                            this.templates = [];
                        }
                    }
                } , onClickCheckbox(type, index = -1) {
                    //각 그룹/템플릿 tr row의 선택여부에 따라서 활성화 여부 결정
                    if (index > -1) {
                        const item = this[type][index];
                        this[type][index] = {...item, 'checked' : ! item.checked };
                    } else {
                        const isChecked = this.checked[type];
                        this[type] = this[type].map(item => ({ ...item, 'checked': ! isChecked}));
                    }

                    this.onChangeCheckCnt(type);
                }, onChangeCheckCnt(type) {
                    //현재 몇개의 tr 이 체크되어 있는지 확인
                    const data = type == "groups" ? this.groups : this.templates;
                    this.checked[type + '_cnt'] = data.filter(item => item.checked).length
                }, onShowUpdateForm(index) {
                    // 템플릿 그룹명을 변경할 수 있도록 변경하는 function
                    const item = this.groups[index];
                    this.groups[index] = { ...item , isUpdate : true, tmp_name : item.name, tmp_service : item.service};
                }, async onUpdateGroupName(index) {
                    // 그룹 명 업데이트
                    const group = this.groups[index];
                    if (group.name != group.tmp_name || group.service != group.tmp_service) {
                        const serviceName = this.services.filter(item => item.value == group.tmp_service)[0].text;
                        const self = this;
                        alertify.confirm("알림", "변경하시겠습니까?", async () => {
                            const result = await onUpdateGroups({ id: group.id, name: group.tmp_name, service: group.tmp_service});
                            if (result.status) {
                                const item = self.groups[index];
                                self.groups[index] = { ...result.group, serviceName: serviceName };

                                alertify.alert("완료", "완료되었습니다.");
                            }
                        }, () => { })
                    } else {
                        this.groups[index] = { ...group, isUpdate: false };
                    }
                }, enabledSortable(isTemplate = false) {
                    Sortable.create(this.$refs.templateSortable, {
                        handle: ".btn-outline-secondary",
                        animation: 150,
                        onStart: (event) => {
                            event.item.classList.add("active");
                        }, onEnd : (event) => {
                            event.item.classList.remove("active");
                        }
                    })

                    Sortable.create(this.$refs.sortable, {
                        handle: ".btn-outline-secondary",
                        animation: 150,
                        onStart: (event) => {
                            event.item.classList.add("active");
                        }, onEnd : (event) => {
                            event.item.classList.remove("active");
                        }
                    })
                }, onClickTemplateSort(isTemplate) {
                    //템플릿순서 업데이트
                    alertify.confirm("확인", "저장하시겠습니까?", async () => {
                        await onChangeSortable(isTemplate);
                    }, () => { })
                }, onClickTemplateReset() {
                    //템플릿와 템플릿 그룹을 리셋
                    const data = this.templates.filter(item => item.checked).map(item => item.id) ;
                    if (data.length == 0) {
                        alertify.alert("Error", "선택된 템플릿이 없습니다.");
                        return false;
                    }

                    const self = this;
                    alertify.confirm("확인", "제거하시겠습니까?", async () => {
                        const index = self.searchGroup.index;
                        const status = await onModifyTemplateReset(data);
                        if (status) {
                            await self.getGroups();
                            await self.getTemplates(index, 'reset');
                        }
                    }, () => { })
                }
            }))
        })

        function convertDate(dateStr) {
            const date = new Date(dateStr);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');

            return `${year}-${month}-${day} ${hours}:${minutes}`;
        }
        function checkValidation() {
            $(".validation-wrap").hide()
            let validationWrap = false;

            if ($('#group_name').val() == "") {
                validationWrap = displayValidationForm($('#group_name'), "입력된 내용이 없습니다.");
            }

            return ! validationWrap;

        }

        async function onCreateGroup() {
            const formData = new FormData(document.getElementById('group_form'));
            const result = await customFetch("{{ route('api.notify.group.create') }}", {
                method: "POST",
                body : formData
            });

            if (result.status) {
                $('#name').val("");
                return result.status
            } else {
                displayValidationForm($('#name'), result.message, 'div');
            }
        }

        async function onRemoveGroups(groupIds) {

            const result = await customFetch('{{ route("api.notify.group.remove") }}', {
                method: "POST",
                body : JSON.stringify({'groupIds' : groupIds}) ,
                headers: { "Content-Type" : "application/json"}
            });

            if (! result.status) {
                alertify.alert("Error", result.message);
            }

            return result.status;
        }

        async function onUpdateGroups(group) {
            const result = await customFetch('{{ route("api.notify.group.modify") }}', {
                method: "POST",
                body : JSON.stringify(group) ,
                headers: { "Content-Type" : "application/json"}
            });

            if (! result.status) {
                alertify.alert("Error", result.message);
            }

            return result;
        }

        async function getGroupList() {
            const result = await customFetch('{{ route("api.notify.group.list") }}', {
                method: "POST",
                body : JSON.stringify({"type" : $('#type').val() }) ,
                headers: { "Content-Type" : "application/json"}
            });

            if (! result.status) {
                alertify.alert("Error", result.message);
            }

            return result.list;
        }

        async function onChangeSortable(isTemplate) {
            const sortable_ids = [];
            $.each($(isTemplate ? '.template_id' : ".group_id"), function() {
                sortable_ids.push($(this).text());
            });

            const result = await customFetch('{{ route("api.notify.sort") }}', {
                method: "POST",
                body : JSON.stringify({"sortable_ids" : sortable_ids, 'isTemplate' : isTemplate, "type" : $('#type').val()}) ,
                headers: { "Content-Type" : "application/json"}
            });

            if (result.status) {
                alertify.alert("완료", "저장되었습니다.");
            } else {
                alertify.alert("Error", result.message);
            }

            return result;
        }

        async function onModifyTemplateReset(ids) {
            const result = await customFetch("{{ route('api.notify.template.change') }}", {
                method: "POST",
                body : JSON.stringify({"id": ids, 'notification_category_id' : 0, 'type' : $('#type').val()}) ,
                headers: { "Content-Type" : "application/json"}
            });

            return result;
        }

        async function getTemplateList(category_id) {
            const href = "{{ route('api.notify.template.list', ['type' => $type]) }}?category_id="  + category_id

            const result = await customFetch(href, {
                method: "get",
                headers: { "Content-Type" : "application/json"}
            });

            return result;

        }
    </script>
@endpush