sam-manage/resources/views/barobill/members/index.blade.php

@extends('layouts.app')

@section('title', '회원사관리')

@section('content')
<!-- 페이지 헤더 -->
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-6">
    <div>
        <h1 class="text-2xl font-bold text-gray-800">회원사관리</h1>
        <p class="text-sm text-gray-500 mt-1">바로빌 연동 회원사를 관리합니다</p>
    </div>
    <button
        type="button"
        onclick="MemberModal.openCreate()"
        class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition text-center w-full sm:w-auto flex items-center justify-center gap-2"
    >
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
        </svg>
        회원사 등록
    </button>
</div>

<!-- 통계 카드 -->
<div id="stats-container"
     hx-get="/api/admin/barobill/members/stats"
     hx-trigger="load, memberUpdated from:body"
     hx-headers='{"X-CSRF-TOKEN": "{{ csrf_token() }}"}'
     class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
    @include('barobill.members.partials.stats-skeleton')
</div>

<!-- 필터 영역 -->
<x-filter-collapsible id="memberFilterForm">
    <form id="memberFilterForm" class="flex flex-wrap gap-2 sm:gap-4">
        <!-- 검색 -->
        <div class="flex-1 min-w-0 w-full sm:w-auto">
            <input type="text"
                   name="search"
                   placeholder="상호명, 사업자번호, 바로빌ID로 검색..."
                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>

        <!-- 상태 필터 -->
        <div class="w-full sm:w-40">
            <select name="status" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                <option value="">전체 상태</option>
                <option value="active">활성</option>
                <option value="inactive">비활성</option>
                <option value="pending">대기중</option>
            </select>
        </div>

        <!-- 검색 버튼 -->
        <button type="submit" class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-2 rounded-lg transition w-full sm:w-auto">
            검색
        </button>
    </form>
</x-filter-collapsible>

<!-- 테이블 영역 (HTMX로 로드) -->
<div id="member-table"
     hx-get="/api/admin/barobill/members"
     hx-trigger="load, filterSubmit from:body, memberUpdated from:body"
     hx-include="#memberFilterForm"
     hx-headers='{"X-CSRF-TOKEN": "{{ csrf_token() }}"}'
     class="bg-white rounded-lg shadow-sm overflow-hidden">
    <!-- 로딩 스피너 -->
    <div class="flex justify-center items-center p-12">
        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
    </div>
</div>

<!-- 등록/수정 모달 -->
@include('barobill.members.partials.modal-form')
@endsection

@push('scripts')
<script>
    // 폼 제출 시 HTMX 이벤트 트리거
    document.getElementById('memberFilterForm').addEventListener('submit', function(e) {
        e.preventDefault();
        htmx.trigger('#member-table', 'filterSubmit');
    });

    // 회원사 모달 관리
    const MemberModal = {
        modal: null,
        form: null,
        isEditing: false,
        currentId: null,

        init() {
            this.modal = document.getElementById('memberModal');
            this.form = document.getElementById('memberForm');
        },

        openCreate() {
            this.isEditing = false;
            this.currentId = null;
            this.resetForm();
            document.getElementById('modalTitle').textContent = '회원사 등록';
            document.getElementById('submitBtn').textContent = '등록하기';
            document.getElementById('passwordFields').classList.remove('hidden');
            this.modal.classList.remove('hidden');
        },

        openEdit(id) {
            this.isEditing = true;
            this.currentId = id;
            this.resetForm();
            document.getElementById('modalTitle').textContent = '회원사 수정';
            document.getElementById('submitBtn').textContent = '수정하기';
            document.getElementById('passwordFields').classList.add('hidden');

            // 데이터 로드
            fetch(`/api/admin/barobill/members/${id}`, {
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    const m = data.data;
                    this.form.biz_no.value = m.biz_no || '';
                    this.form.biz_no.disabled = true;
                    this.form.corp_name.value = m.corp_name || '';
                    this.form.ceo_name.value = m.ceo_name || '';
                    this.form.addr.value = m.addr || '';
                    this.form.biz_type.value = m.biz_type || '';
                    this.form.biz_class.value = m.biz_class || '';
                    this.form.barobill_id.value = m.barobill_id || '';
                    this.form.barobill_id.disabled = true;
                    this.form.manager_name.value = m.manager_name || '';
                    this.form.manager_email.value = m.manager_email || '';
                    this.form.manager_hp.value = m.manager_hp || '';
                    this.form.status.value = m.status || 'active';
                }
            });

            this.modal.classList.remove('hidden');
        },

        close() {
            this.modal.classList.add('hidden');
            this.resetForm();
        },

        resetForm() {
            this.form.reset();
            this.form.biz_no.disabled = false;
            this.form.barobill_id.disabled = false;
        },

        async submit(e) {
            e.preventDefault();

            const formData = new FormData(this.form);
            const data = Object.fromEntries(formData.entries());

            // 수정 시 disabled 필드 제외
            if (this.isEditing) {
                delete data.biz_no;
                delete data.barobill_id;
                delete data.barobill_pwd;
            }

            const url = this.isEditing
                ? `/api/admin/barobill/members/${this.currentId}`
                : '/api/admin/barobill/members';

            const method = this.isEditing ? 'PUT' : 'POST';

            try {
                const res = await fetch(url, {
                    method: method,
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify(data)
                });

                const result = await res.json();

                if (result.success) {
                    showToast(result.message, 'success');
                    this.close();
                    htmx.trigger(document.body, 'memberUpdated');
                } else {
                    showToast(result.message || '오류가 발생했습니다.', 'error');
                }
            } catch (error) {
                showToast('통신 오류가 발생했습니다.', 'error');
            }
        },

        fillTestData() {
            const randomId = Math.random().toString(36).substring(2, 8);
            const randomBiz = `123-45-${Math.floor(10000 + Math.random() * 90000)}`;

            this.form.biz_no.value = randomBiz;
            this.form.corp_name.value = `테스트기업_${randomId}`;
            this.form.ceo_name.value = '홍길동';
            this.form.addr.value = '서울특별시 강남구 테헤란로 123';
            this.form.biz_type.value = '서비스';
            this.form.biz_class.value = '소프트웨어';
            this.form.barobill_id.value = `test_${randomId}`;
            this.form.barobill_pwd.value = 'password123!';
            this.form.manager_name.value = '김철수';
            this.form.manager_hp.value = '010-1234-5678';
            this.form.manager_email.value = `test_${randomId}@example.com`;
        }
    };

    // 삭제 확인
    window.confirmDeleteMember = function(id, name) {
        showDeleteConfirm(name, async () => {
            try {
                const res = await fetch(`/api/admin/barobill/members/${id}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    }
                });
                const result = await res.json();
                if (result.success) {
                    showToast(result.message, 'success');
                    htmx.trigger(document.body, 'memberUpdated');
                } else {
                    showToast(result.message || '삭제 실패', 'error');
                }
            } catch (error) {
                showToast('통신 오류가 발생했습니다.', 'error');
            }
        });
    };

    // 초기화
    document.addEventListener('DOMContentLoaded', function() {
        MemberModal.init();
    });
</script>
@endpush