@extends("common.layout-popup")

@section("page-title", "[결제관리] 회원검색")

@section("content")

    <section class="mb-3">
        <main>
            <form method="get" class="search-form" id="user-form" action="{{ route('payment.popup-user') }}">
                {{-- @csrf --}}
                <input type="hidden" name="paginate" value="{{ Request::get('paginate') }}" />

                <div class="search-input-wrap">
                    <div class="input-group input-group-sm">
                        <label class="input-group-text" for="start_at">이름/이메일(아이디)</label>
                        <select class="form-select" name="field" id="field">
                            <option value="">선택</option>
                            <option value="name" @selected(Request::get("field") == "name")>이름</option>
                            <option value="login_id" @selected(Request::get("field") == "login_id")>이메일(아이디)</option>
                        </select>
                        <input type="text" name="keyword" id="keyword" class="form-control" value="{{ Request::get("keyword") }}" disabled/>
                    </div>

                    <div class="input-group input-group-sm">
                        <label class="input-group-text" for="start_at">연락처</label>
                        <input type="text" name="phone" id="phone" class="form-control" value="{{ Request::get("phone") }}"/>
                    </div>
                </div>

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

    <section>
        <header>
            <h6>조회결과 <strong>{{ $list ? $list->total() : 0 }}</strong>건</h6>
        </header>
        <main>
            <table class="table table-striped table-hover">
                <colgroup>

                </colgroup>
                <thead>
                    <tr>
                        <th>가입일</th>
                        <th>이름</th>
                        <th>이메일(아이디)</th>
                        <th>연락처</th>
                        <th>선택</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($list as $item)
                    <tr>
                        <td>{{ date("Y.m.d", strtotime($item->created_at)) }}</td>
                        <td class="name">{{ $item->name }}</td>
                        <td class="email">{{ $item->email }}{{ $item->edm_id ? "/(".$item->edm_id.")" : ""}}</td>
                        <td class="phone">+{{ $item->phone_code }} {{ $item->phone }}</td>
                        <td>
                            <button class="btn btn-sm btn-primary onClick" type="button" data-id="{{ $item->id }}">선택</button>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </main>
        <footer>
            <div class="pagination-wrap">
                {{ $list ? $list->links() : "" }}
            </div>
        </footer>
    </section>
@endsection

@push("script")
<script>
    $(function() {
        checkField($("#field option:selected").val());
        $("#field").on("change", function() {
            checkField($(this).val())
        })

        $('.onClick').on("click", function() {
            const id = $(this).data("id");
            const tr = $(this).closest("tr");

            const params = {
                "name" : tr.find('.name').text(),
                "login_id" : tr.find('.email').text(),
                "phone" : tr.find('.phone').text(),
            }

            onChangeUser(id, params);
        })

        function checkField(value) {
            if ($.isEmptyObject(value)) {
                $("#keyword").val("");
                $("#keyword").attr("disabled", true);
            } else {
                $("#keyword").attr("disabled", false);
            }
        }

        $(document).on('keydown', function(event) {
            if (event.key === 'Enter') {
                onSearch()
            }
        });

    })

    function onSearch() {
        // if ($.isEmptyObject($('#keyword').val()) && $.isEmptyObject($('#phone').val())) {
        //     alertify.alert('error', '검색조건을 입력하세요');
        //     return false;
        // }

        $('#user-form').submit();
    }

    function onChangeUser(id, params) {

        let text = "회원정보가 성공적으로 등록되었습니다";

        alertify.confirm("확인", text, () => {
            window.opener.$("#user_id").val(id);
            $.each(params, function(field) {
                window.opener.$("#" + field).text(params[field]);
            })
            onClosePopup()
        }, () => { });

    }
    function onCloseEvent() {
        window.close();
    }
</script>
@endpush