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

    {!! resource('js/common/banners.js') !!}
@endsection

@section("content")

<div>
    <h1><a href="{{ route('term.list') }}">배너그룹관리</a></h1>
    <div class="alert alert-info">
        배너 그룹을 추가 및 수정합니다. <br>
        배너 그룹 수정 시 배너에도 동시 적용 처리 됩니다.
    </div>
</div>

<div class="row" x-data="groupPage">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                배너그룹등록
            </div>
            <div class="card-body">
                <form class="default" action="" id="group_form">
                    <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="group_name" id="group_name" value="" class="form-control"/>
                                <div class="validation-wrap"><p class="m-0"></p></div>
                            </div>
                        </li>
                    </ul>
                </form>
            </div>
            <div class="card-footer align-right">
                <button class="btn btn-primary" type="button" @click="onSubmitGroup()">저장</button>
            </div>
        </div>

        <div class="card mt-2">
            <div class="card-header">
                <div class="split align-items-center justify-content-between">
                    <span>선택된 배너 그룹 총 <strong x-text="checked.groups_cnt">0</strong>건</span>
                    <button class="btn btn-danger" type="button" @click="onRemoveGroup()">선택삭제</button>
                </div>
            </div>
            <div class="card-body">
                <table class="table table-striped table-hover">
                    <colgroup>
                        <col width="5%">
                        <col width="10%">
                        <col width="15%">
                        <col width="/">
                        <col width="10%">
                        <col width="15%">
                    </colgroup>
                    <thead>
                        <tr>
                            <th>
                                <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>
                        <template x-for="(group, index) in groups" :key="index">
                            <tr :class="{'active' : group.checked }">
                                <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)"></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.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.banner_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="getBanners(index)">
                                        <i class="bi bi-eye-fill"></i>
                                    </button>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-lg-6" x-show="searchGroup.name.length > 0">
        <div class="card">
            <div class="card-header">
                <div class="split align-items-center justify-content-between">
                    <span>
                        <strong class="text-danger" x-text="'['+ searchGroup.serviceName +'] '"></strong>
                        <strong class="text-danger" x-text="searchGroup.name"></strong> 포함된 배너 총 <strong x-text="banners.length"></strong>건
                    </span>
                    <div>
                        <button class="btn btn-danger" @click="onClickBannerReset()">선택제외</button>
                        <button class="btn btn-primary" type="button" @click="onClickBannerSort()">저장</button>
                    </div>
                </div>
            </div>
            <div class="card-body" x-show="banners.length == 0">
                <div class="alert alert-warning">
                    노출중인 배너가 없습니다.
                </div>
            </div>
            <div class="card-body" x-show="banners.length > 0">
                <div class="alert alert-info">
                    * 현재 노출중인 배너만 노출됩니다.
                </div>
                <table class="table table-striped table-hover">
                    <colgroup>
                        <col width="10%">
                        <col width="10%">
                        <col width="15%">
                        <col width="/">
                        <col width="7%">
                    </colgroup>
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" name="" class="form-check-input"  @click="onClickCheckbox('banners')"/>
                            </th>
                            <th>순서</th>
                            <th>등록일시</th>
                            <th>배너명</th>
                            <th>순서변경</th>
                        </tr>
                    </thead>
                    <tbody x-ref="sortable">
                        <template x-for="(banner, index) in banners" :key="index">
                            <tr :class="{'active' : banner.checked }">
                                <td class="align-middle">
                                    <input type="checkbox" name="" class="form-check-input" x-model="banner.checked" @change="onChangeCheckCnt('banners')"/>
                                </td>
                                <td x-text="banner.id" @click="onClickCheckbox('banners', index)" class="banner_id"></td>
                                <td x-text="banner.created_at" @click="onClickCheckbox('banners', index)"></td>
                                <td x-text="banner.banner_name" @click="onClickCheckbox('banners', index)"></td>
                                <td>
                                    <button class="btn btn-sm btn-outline-secondary" type="button">
                                        <i class="bi bi-list"></i>
                                    </button>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</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 , 'banners' : false, 'groups_cnt' : 0, 'banners_cnt' : 0 },
                searchGroup: { 'serviceName' : "", "name" : "", index: -1 },
                groups: [],
                banners: [],
                services: [],
                sortableInstance: null,
                async init() {
                    const self = this;
                    $.each($('#service option'), function() {
                        self.services.push({ "value" : $(this).val(), "text": $(this).text()} ) ;
                    });
                    await this.getGroups();
                }, 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 banner_cnt = 0;
                    const groupId =[];
                    checked.forEach(item => {
                        banner_cnt += item.banner_cnt;
                        groupId.push(item.id);
                    });

                    let message = "배너 그룹을 삭제 하시겠습니까?";
                    if (banner_cnt > 0) {
                        message = "배너 그룹에 배너가 포함되어 있습니다.<br>삭제 시 배너의 배너 그룹 선택 값이 초기화 처리되며 비전시 처리 됩니다.<br>" + message;
                    }

                    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.banners = [];
                        }
                    }, () => { });

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

                        if (group.banner_cnt > 0) {
                            const result = await getBannerList(group.id);
                            if (result.status) {
                                this.banners = result.data.map(item => ({
                                    ...item, created_at : convertDate(item.created_at), checked: false
                                }));
                                this.enabledSortable();
                            }
                        } else {
                            this.banners = [];
                        }
                    }
                } , 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.banners;
                    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.group_name, tmp_service : item.service};
                }, async onUpdateGroupName(index) {
                    // 그룹 명 업데이트
                    const group = this.groups[index];
                    if (group.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, group_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() {
                    //배너정보 호출 시 sortable 기능 활성화
                    if (this.sortableInstance != null) {
                        this.sortableInstance.destroy();
                        this.sortableInstance = null;
                    }
                    if (this.banners.length > 0) {
                        this.sortableInstance = 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");
                            }
                        })
                    }
                }, onClickBannerSort() {
                    //배너순서 업데이트
                    alertify.confirm("확인", "저장하시겠습니까?", async () => {
                        await onUpdateBannerSort();
                    }, () => { })
                }, onClickBannerReset() {
                    //배너와 배너 그룹을 리셋
                    const data = this.banners.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 onUpdateBannerReset(data, self.groups[index].id);
                        if (status) {
                            await self.getGroups();
                            await self.getBanners(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.banner.group.create') }}", {
                method: "POST",
                body : formData
            });

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

        async function onRemoveGroups(groupIds) {

            const result = await customFetch('{{ route("api.banner.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.banner.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 getBannerList(groupId) {
            const result = await customFetch('{{ route("api.banner.list") }}', {
                method: "POST",
                body : JSON.stringify({"id" : groupId}) ,
                headers: { "Content-Type" : "application/json"}
            });

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

        async function onUpdateBannerSort() {
            const banners = [];
            $.each($('.banner_id'), function() {
                banners.push($(this).text());
            });

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

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

            return result;
        }

        async function onUpdateBannerReset(bannerIds, groupId) {
            const result = await customFetch('{{ route("api.banner.reset") }}', {
                method: "POST",
                body : JSON.stringify({"banners" : bannerIds, 'group_id' : groupId}) ,
                headers: { "Content-Type" : "application/json"}
            });

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

            return result.status;
        }
    </script>
@endpush