@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 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" class="text-success"></strong> 추가, <strong x-text="summary.error" class="text-danger"></strong> 실패
                        </span>
                    </div>
                    <ul class="list-item-none mt-2 font-sm">
                        <template x-for="(error, index) in errors" :key="index">
                            <li x-text="error" class="text-danger mb-1"></li>
                        </template>

                    </ul>
                </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/SampleEventWinner.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">{{ $post->eventWinners->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>
                    <th>연락처</th>
                </tr>
            </thead>
            <tbody>
                <x:board.event-winner id="default" />

                @foreach ($post->eventWinners as $winner )
                <x:board.event-winner eventWinnerId="{{ $winner->id }}" :user="$winner->user" />
                @endforeach
            </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>




<div id="summary-form" style="display: none">
    <div class="layout-2-cols" >
        <div class="winner-summary-box">
            <h6>변경 전</h6>
            <ul>
                <li class="mb-1 ml-1 row align-item-center">
                    <div class="col-6 font-weight-600">당첨자 수</div>
                    <div class="col-6">{{ $post->eventWinners->count() }}명</div>
                </li>
            </ul>
        </div>
        <div class="winner-summary-box">
            <h6>변경사항</h6>
            <ul>
                <li class="mb-1 ml-1 row align-item-center">
                    <div class="col-6 font-weight-600">추가 당첨자</div>
                    <div class="col-6"><span id="add_winner_cnt">0</span>명</div>
                </li>
                <li class="mb-1 ml-1 row align-item-center">
                    <div class="col-6 font-weight-600">삭제 당첨자</div>
                    <div class="col-6"><span id="remove_winner_cnt">0</span>명</div>
                </li>
                <li class="mb-1 ml-1 row align-item-center">
                    <div class="col-6 font-weight-600">총 당첨자</div>
                    <div class="col-6"><span id="total_winner_cnt">0</span>명</div>
                </li>
            </ul>
        </div>
    </div>
</div>
@endsection
@push("script")
    <script>

        const removeWinnerId = [];
        $(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 onCreateSearchUser() {
            const checkedUser = $('#user-search-list tbody .is_checked:checked');
            if (checkedUser.length == 0) {
                alertify.alert("Error", '추가할 유저를 선택하세요');
                return false;
            }

            $.each(checkedUser , function() {

                const user_id = $(this).closest("tr").find(".user_id").val();

                if ($('#user-result tbody .user_id[value='+user_id+']').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 target = $('#user-result #default').clone();
            $.each(target.find('td:not(:nth-child(1))'), function() {
                $(this).text(user[$(this).attr("class")]);
            })

            target.find("input.user_id").val(user.id);
            target.attr("id", "");
            target.show();

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

            return true;
        }

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

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

            $.ajax({
                url: "{{ route('api.board.user.list') }}",
                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() {
                if ( ! $.isEmptyObject($(this).val()) ) {
                    removeWinnerId.push($(this).val());
                }

                $(this).closest("tr").remove();
            });

            onChangeUserCount();
        }

        function onApplyUser() {
            const target = $('#user-result tr:not(#default) .is_checked');
            const addWinners = target.filter(function() { return !this.value; } );
            const totalWinnerCnt = target.length
            const removeWinnerCnt = removeWinnerId.length

            if ( addWinners.length == 0 && removeWinnerCnt == 0 ) {
                alertify.alert("Error", "변경된 당첨자 정보가 없습니다.");
                return false
            }

            const summaryForm = $('#summary-form').clone();
            summaryForm.find("#add_winner_cnt").text(addWinners.length);
            summaryForm.find("#remove_winner_cnt").text(removeWinnerCnt);
            summaryForm.find("#total_winner_cnt").text(totalWinnerCnt);

            summaryForm.show();

            const userIds = [];
            $.each(addWinners, function() {
                userIds.push($(this).closest("tr").find('.user_id').val())
            })

            alertify.confirm("Confirm", "당첨자 정보를 아래 내용으로 저장하시겠습니까?<br>" + summaryForm.html(), async () => {
                const result = await customFetch("{{ route('api.board.set-winner', ['postId' => $postId]) }}", {
                    body : JSON.stringify({"user_ids" : userIds, "remove_winner_ids" : removeWinnerId }) ,
                    headers: { "Content-Type" : "application/json"},
                    method: "POST",
                })

                if ( result.status ) {
                    alertify.alert("알림", "변경되었습니다.", () => { onClosePopup() })
                } else {
                    alertify.alert("Error", result.message );
                }

            }, () => {})
        }
    </script>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data("filePage" , () => ({
                file: {},
                summary : { total: 0, success: 0, error: 0},
                errors: [],
                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.board.excel-upload', ['postId' => $postId]) }}", {
                        method: "POST",
                        body: formData,
                    });

                    if ( result.status ) {
                        this.summary.total = result.total;
                        this.summary.success = result.successCnt;
                        this.summary.error = result.errorCnt;
                        this.errors = result.errors;

                        const users = result.users;
                        $.each(result.users , function(index) {
                            const isApply = onCreateUserRow(users[index]);
                        })
                    } else {
                        alertify.alert("Error", result.message);
                    }

                    this.file = {};
                }
            }));
        })


    </script>
@endpush