@extends("common.layout-popup")

@section("header")
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
@endsection
@section("page-title", "[결제관리] 결제일괄등록")

@section("content")

<div x-data="filePage">
    <input type="hidden" name="service" id="service" value="{{ $service }}" />
    <section>
        <header>다건의 결제정보를 일괄 등록합니다.</header>
        <main>
            <div class="row align-items-center">
                <div class="col-2">
                    <label class="btn btn-secondary" type="button" for="excel_file">파일선택</label>
                    <input type="file" name="file" id="excel_file" style="display:none" x-on:change="handleFiles"/>
                </div>
                <div class="col-9 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>
        </main>
        <footer class="align-right">
            <button class="btn btn-primary" type="button" @click="onSearch()">조회</button>
        </footer>
    </section>

    <section x-show="! $.isEmptyObject(summary)">
        <header>
            <h6>성공 <strong x-text="summary.success">N</strong>건, 실패 <strong class="text-danger" x-text="summary.fail">N</strong>건</h6>
        </header>
        <main>
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>불가 사유</th>
                        <th>행 참조</th>
                    </tr>
                </thead>
                <tbody>
                    <template x-for="(error, key) in errors" :key="key">
                        <tr>
                            <td x-text="error.message" class="text-danger"></td>
                            <td x-text="error.rows.slice(0, 5).join('행, ') + '행'"></td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </main>
        <footer class="align-center" x-show="summary.success > 0">
            <button class="btn btn-primary" @click="onSubmit()">등록</button>
        </footer>
    </section>
</div>

@endsection

@push("script")
    <script>

        document.addEventListener('alpine:init', () => {
            Alpine.data("filePage" , () => ({
                file: {},
                list: [],
                errors: {},
                summary : {},
                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) {
                        alertify.alert("Error", "파일형식이 올바르지 않습니다. ");
                        return false;
                    }
                    this.file = file;
                    this.list = [];
                    this.errors = this.summary = {};
                }, async onSearch() {
                    if ($.isEmptyObject(this.file)) {
                        alertify.alert("Error", "파일을 업로드해주세요");
                        return false
                    }

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

                    this.list = result.data;
                    this.errors = result.errors;
                    this.summary = result.summary;
                }, onSubmit() {
                    if ($.isEmptyObject(this.list)) {
                        alertify.alert("Error", "등록할 수 있는 결제건이 없습니다. ");
                        return false
                    }

                    const data = this.list;
                    const message = (this.summary.fail > 0 ? "실패 건은 제외하고 등록됩니다.<br>" : "") + "총 " + this.summary.success +"건을 등록하시겠습니까?";
                    alertify.confirm("알림", message , async () => {
                        const result = await customFetch("{{ route('api.payment.excel-create') }}", {
                            method: "POST",
                            body: JSON.stringify({"list" : data, "service" : $('#service').val() }),
                            headers: { "Content-Type" : "application/json"}
                        });

                        if (result.status) {
                            alertify.alert("알림", "완료되었습니다.<br>총 " + result.success + "건 성공, " + result.fail + "건 실패" , () => {
                                onClosePopup();
                            });
                        }
                    }, () => {})

                }
            }));
        })
    </script>
@endpush