@extends("common.layout-popup")

@section("page-title", "발송회원 선택")
@section("header")
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
{!! resource('js/components/tab.js') !!}
@endsection

@section("content")

<div class="layout-2-cols">
<input type="hidden" name="tab-info" value="user-create" />
<div class="tab-wrap" data-name="tab-info">
    <ul class="tab-list">
        <li class="tab-item" data-name="user-create">
            <a class="tab-text">등록</a>
        </li>
        <li class="tab-item" data-name="user-search">
            <a class="tab-text">검색</a>
        </li>
    </ul>
    <div class="tab-contents" style="min-height: 500px; ">
        <div class="tab-content" id="user-create">
            <section>
                <header><h6>개별등록</h6></header>
                <main>
                    <form class="default">
                        <ul class="list-item-none" id="user-one">
                            <li class="row align-middle mx-0 mb-2">
                                <div class="col-1">
                                    <label>이름</label>
                                </div>
                                <div class="col-6">
                                    <input type="text" name="name" value="" class="form-control form-control-sm">
                                </div>
                            </li>
                            <li class="row align-middle mx-0 mb-2">
                                <div class="col-1">
                                    <label>연락처</label>
                                </div>
                                <div class="col-6">
                                    <input type="text" name="phone" value="" class="form-control form-control-sm">
                                </div>
                            </li>
                            <li class="row align-middle mx-0 mb-2">
                                <div class="col-1">
                                    <label>이메일</label>
                                </div>
                                <div class="col-6">
                                    <input type="text" name="email" value="" class="form-control form-control-sm">
                                </div>
                            </li>
                        </ul>
                    </form>
                </main>
                <footer class="align-right">
                    <button class="btn btn-primary" type="button" onclick="onCreateNewUser()">등록</button>
                </footer>
            </section>

            <section x-data="filePage" class="mt-3">
                <header><h6>엑셀업로드</h6></header>
                <main class="custom-scroll">
                    <div class="p-4 align-center border border-secondary"
                        x-on:dragover.prevent
                        x-on:drop.prevent="handleDrop"
                        x-on:dragleave.prevent
                    >
                        <div class="text-secondary" x-show="$.isEmptyObject(file)"><i class="bi bi-upload"></i> <span class="ml-2">파일을 마우스로 끌어오세요</span></div>
                        <div class="text-secondary" x-show="! $.isEmptyObject(file)"><i class="bi bi-clipboard-fill"></i> <span class="ml-2" x-text="file.name"></span></div>
                    </div>

                    <div class="mt-2 alert alert-success" x-show="summary.total > 0">
                        <i class="bi bi-check-circle"></i>
                        <span class="mx-2">
                            총 <strong x-text="summary.total"></strong>명 중 <strong x-text="summary.success"></strong> 명이 반영되었습니다.
                        </span>

                    </div>
                </main>
                <footer class="align-right">
                    <label class="btn btn-secondary" type="button" for="excel_file">파일선택</label>
                    <a class="btn btn-success text-white" type="button" href="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/sample/SampleNoficationUser.xlsx" download>샘플다운로드</a>
                    <input type="file" name="file" id="excel_file" style="display:none" x-on:change="handleFiles"/>
                    <button class="btn btn-primary" type="button" @click="onUpload()">업로드</button>
                </footer>
            </section>


        </div>
        <div class="tab-content" id="user-search">
            <section>
                <main>
                    <form action="{{ route('notify.user.list') }}" class="search-form" id="user-form" method="GET">
                        <input type="hidden" name="paginate" id="paginate" value="1" />
                        @csrf

                        <div class="search-input-wrap">
                            <div class="input-group input-group-sm">
                                <label class="input-group-text" for="name">회원명</label>
                                <input class="form-control" type="text" name="name" id='name' value="">
                            </div>

                            <div class="input-group input-group-sm">
                                <label class="input-group-text" for="phone">연락처</label>
                                <input class="form-control number-only" type="text" name="phone" id='phone' value="">
                            </div>
                            <div class="input-group input-group-sm">
                                <label class="input-group-text" for="email">이메일</label>
                                <input class="form-control" type="text" name="email" id='email' value="">
                            </div>
                        </div>

                        <button type="button" class="btn btn-sm btn-outline-dark search-button" onclick="onSearchUser()"><i class="bi bi-search"></i> 조회</button>
                    </form>
                </main>
            </section>

            <section class="mt-3" id="user-search-list"></section>

        </div>


    </div>
</div>

<section class="mt-3">
    <header><h6>총 <strong id="user-count"></strong>명</h6></header>
    <main class="custom-scroll"  style="min-height: 700px;">
        <table class="table table-hover" id="user-result">
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" name="is_all_checked" class="is_all_checked" value="" >
                    </th>
                    <th>이름</th>
                    <th>이메일</th>
                    <th>연락처</th>
                </tr>
            </thead>
            <tbody>
                <x:notification.send-user id="default" />
            </tbody>
        </table>
    </main>
    <footer class="align-right">
        <button class="btn btn-danger" onclick="onRemoveUser()">삭제</button>
        <button class="btn btn-success" onclick="onApplyUser()">반영</button>
    </footer>
</section>
</div>
@endsection
@push("script")
    <script>

        $(function() {
            onSearchUser() ;
            onChangeUserCount();

            $(document).on("click", 'tbody input[type=checkbox], td:not(:nth-child(1))', function() {
                const isInput = $(this).attr("type") == 'checkbox';
                const row = $(this).closest("tr");
                if (( isInput && ! $(this).is(":checked") ) ||
                    ( ! isInput && row.find("input[type=checkbox]").is(":checked"))) {
                    row.removeClass("active");
                } else {
                    row.addClass("active");
                }

                ! isInput ? row.find("input[type=checkbox]").prop("checked", ! row.find("input[type=checkbox]").is(":checked")) : ""
            })

            $(document).on("click", ".is_all_checked", function() {
                const targets = $(this).closest("table").find("tbody tr");
                const isChecked = $(this).is(":checked");
                $.each(targets, function() {
                    if (isChecked) {
                        $(this).addClass("active");
                    } else {
                        $(this).removeClass("active");
                    }

                    $(this).find("input[type=checkbox]").prop("checked", isChecked);
                })
            })
        })

        function onCreateNewUser() {
            const target = $('#user-result #default').clone();

            let isEmptyCnt = 0;
            const user = {};
            $.each($('#user-one input'), function() {
                const name = $(this).attr("name");
                user[name] = $(this).val();
                if ( (name == "phone" || name == "email") && $.isEmptyObject($(this).val())) {
                    isEmptyCnt ++;
                }
                $(this).val("");
            });

            if (isEmptyCnt < 2) {
                onCreateUserRow(user);
            } else {
                alertify.alert("Error", "이메일 혹은 연락처 중 1개는 반드시 입력해주세요");
            }
        }

        function onCreateSearchUser() {
            const checkedUser = $('#user-search-list tbody .is_checked:checked');
            if (checkedUser.length == 0) {
                alertify.alert("Error", '추가할 유저를 선택하세요');
                return false;
            }

            $.each(checkedUser , function() {
                if ($('#user-result tbody .is_checked[value='+$(this).val()+']').length > 0 ) {
                    return true;
                }

                const row = $(this).closest('tr').clone();
                row.find(".is_checked").prop("checked", false);
                row.removeClass("active");

                $(this).prop("checked", false);
                $(this).closest('tr').removeClass("active");

                $('#user-result tbody').append(row);
            })

            $('#user-search-list .is_all_checked').prop("checked", false);
            onChangeUserCount()
        }

        function onCreateUserRow(user) {
            const isPhoneOverlay = checkOverlayUser("phone", user['phone']);
            const isEmailOverlay = checkOverlayUser("email", user['email']);

            if (isPhoneOverlay || isEmailOverlay) {
                return false;
            }

            const target = $('#user-result #default').clone();
            $.each(target.find('td:not(:nth-child(1))'), function() {
                $(this).find("input").val(user[$(this).attr("class")]);
            })

            target.attr("id", "");
            target.show();

            $('#user-result tbody').append(target);
            onChangeUserCount()

            return true;
        }

        function checkOverlayUser(field, value) {
            let isOverlay = false;
            $.each($('#user-result tbody:not(#default) .' + field), function() {
                if (! $.isEmptyObject($(this).find("input").val()) && $(this).find("input").val() == value) {
                    isOverlay = true;
                }
            })

            return isOverlay;
        }


        function onSearchUser(page = 1) {
            const name = $('#name').val();
            const phone = $('#phone').val();
            const email = $('#email').val();

            $('#user-search-list').empty();

            $.ajax({
                url: "{{ route('notify.user.list') }}?isSearch=1",
                method: "GET",
                data: { name : name, phone : phone, email : email , page : page},
                dataType: "html",
                success: function(result) {
                    $('#user-search-list').append(result);
                }
            })
        }

        function onChangeUserCount() {
            const length = $('#user-result tbody tr:not(#default)').length;
            $('#user-count').text(length);
        }

        function getGrid(page) {
            onSearchUser(page) ;
        }

        function onRemoveUser() {
            const target = $('#user-result .is_checked:checked');
            if (target.length == 0) {
                alertify.alert("Error", "삭제할 회원을 선택하세요");
                return false;
            }

            $.each(target, function() {
                $(this).closest("tr").remove();
            });
        }

        function onApplyUser() {
            const target = $('#user-result tbody tr:not(#default)');
            if (target.length  == 0 ) {
                alertify.alert("Error", "회원을 먼저 선택해주세요.");
                return false;
            }

            alertify.confirm("Confirm", "총 " + target.length + " 명의 회원을 추가하시겠습니까?", () => {
                $.each(target, function() {

                    const td = $("<td></td>").append("<button class='btn btn-sm btn-danger onRemove' type='button'><i class='bi bi-trash'></i></button>")
                    td.addClass('align-right');

                    $(this).append(td)
                    $(this).find("td:first-of-type").remove();

                    $(this).removeClass("active");
                    opener.window.$('#user_list tbody').append($(this));
                });
                onChangeUserCount();
                window.close();
            }, () => {})
        }

        function downloadSample() {
            location.href="{{ app(\S3Helper::class)->getPublicUrl('sample/SampleNotificationUser.xlsx') }}";
        }
    </script>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data("filePage" , () => ({
                file: {},
                summary : { total: 0, success: 0 },
                handleFiles(event) {
                    const file = event.target.files[0] || event.dataTransfer.files[0];
                    this.addFiles(file);
                }, handleDrop(event) {
                    const file = event.dataTransfer.files[0];
                    this.addFiles(file);
                }, addFiles(file) {
                    if (file.type.indexOf("excel") == -1 && file.type.indexOf("sheet") == -1) {
                        alertify.alert("Error", "파일형식이 올바르지 않습니다. ");
                        return false;
                    }
                    this.file = file;
                    this.list = [];
                    this.errors = this.summary = {};
                }, async onUpload() {
                    if ($.isEmptyObject(this.file)) {
                        alertify.alert("Error", "파일을 업로드해주세요");
                        return false
                    }

                    const formData = new FormData();
                    formData.append('file', this.file);
                    const result = await customFetch("{{ route('api.notify.excel-upload') }}", {
                        method: "POST",
                        body: formData,
                    });

                    const users = result.data;
                    this.summary.total = result.total;

                    let successCnt = 0;
                    $.each(users , function(index) {
                        const user = users[index];
                        const isApply = onCreateUserRow(user);


                        isApply ? successCnt = successCnt + 1 : successCnt
                    })

                    this.summary.success = successCnt;
                    this.file = {};

                    const self = this;
                    setTimeout(() => {
                        self.summary.total = 0;
                        self.summary.summary = 0
                    }, 5000);
                }
            }));
        })


    </script>
@endpush