sam-manage/resources/views/dashboard/index.blade.php

@extends('layouts.app')

@section('title', '대시보드')
@section('page-title', '대시보드')

@section('content')
    <!-- Welcome Card -->
    <div class="bg-white rounded-lg shadow overflow-hidden mt-6">
        <div class="p-6">
            <h2 class="text-2xl font-bold text-gray-900 mb-2">환영합니다!</h2>
            <p class="text-gray-600">{{ auth()->user()->name ?? 'User' }}님, MNG 관리자 패널에 로그인하셨습니다.</p>

            <div class="my-6 border-t border-gray-200"></div>

            <!-- Stats Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                    <div class="text-sm font-medium text-gray-500 mb-1">사용자 이메일</div>
                    <div class="text-lg font-semibold text-gray-900">{{ auth()->user()->email }}</div>
                </div>
                <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                    <div class="text-sm font-medium text-gray-500 mb-1">로그인 시간</div>
                    <div class="text-lg font-semibold text-gray-900">{{ now()->format('Y-m-d H:i:s') }}</div>
                </div>
                <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                    <div class="text-sm font-medium text-gray-500 mb-1">상태</div>
                    <div class="text-lg font-semibold text-green-600">활성</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white rounded-lg shadow p-6 hover:shadow-lg transition-shadow">
            <h3 class="text-lg font-semibold text-gray-900 mb-2">사용자 관리</h3>
            <p class="text-sm text-gray-600 mb-4">시스템 사용자를 관리합니다.</p>
            <a href="#" class="inline-flex items-center text-primary hover:underline">
                바로가기
                <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
            </a>
        </div>

        <div class="bg-white rounded-lg shadow p-6 hover:shadow-lg transition-shadow">
            <h3 class="text-lg font-semibold text-gray-900 mb-2">시스템 설정</h3>
            <p class="text-sm text-gray-600 mb-4">시스템 환경을 설정합니다.</p>
            <a href="#" class="inline-flex items-center text-primary hover:underline">
                바로가기
                <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
            </a>
        </div>

        <div class="bg-white rounded-lg shadow p-6 hover:shadow-lg transition-shadow">
            <h3 class="text-lg font-semibold text-gray-900 mb-2">통계 및 리포트</h3>
            <p class="text-sm text-gray-600 mb-4">시스템 통계를 확인합니다.</p>
            <a href="{{ route('stats.dashboard') }}" class="inline-flex items-center text-primary hover:underline">
                바로가기
                <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
            </a>
        </div>
    </div>

    <!-- Calendar Section -->
    <div class="mt-6 bg-white rounded-lg shadow p-6">
        <div id="calendar-container"
             hx-get="{{ route('dashboard.calendar', ['year' => now()->year, 'month' => now()->month]) }}"
             hx-trigger="load"
             hx-swap="innerHTML">
            <div class="flex items-center justify-center py-12">
                <svg class="animate-spin h-8 w-8 text-emerald-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                <span class="ml-3 text-gray-500">달력을 불러오는 중...</span>
            </div>
        </div>
    </div>

    <!-- Schedule Modal -->
    <div id="schedule-modal" class="fixed inset-0 z-50 hidden">
        <div class="fixed inset-0 bg-black/50" onclick="closeModal()"></div>
        <div class="fixed inset-0 flex items-center justify-center p-4">
            <div class="bg-white rounded-xl shadow-2xl w-full max-w-lg relative" onclick="event.stopPropagation()">
                <!-- Modal Header -->
                <div class="flex items-center justify-between px-6 py-4 border-b">
                    <h3 id="modal-title" class="text-lg font-bold text-gray-900">일정 추가</h3>
                    <button type="button" onclick="closeModal()" class="text-gray-400 hover:text-gray-600 transition-colors">
                        <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="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </button>
                </div>

                <!-- Modal Body -->
                <form id="schedule-form" class="px-6 py-4 space-y-4">
                    <input type="hidden" id="schedule-id" value="">

                    <!-- 제목 -->
                    <div>
                        <label for="schedule-title" class="block text-sm font-medium text-gray-700 mb-1">제목 <span class="text-red-500">*</span></label>
                        <input type="text" id="schedule-title" name="title" required
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-sm"
                            placeholder="일정 제목을 입력하세요">
                    </div>

                    <!-- 유형 -->
                    <div>
                        <label for="schedule-type" class="block text-sm font-medium text-gray-700 mb-1">유형</label>
                        <select id="schedule-type" name="type"
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-sm">
                            <option value="event">일정</option>
                            <option value="meeting">회의</option>
                            <option value="notice">공지</option>
                            <option value="other">기타</option>
                        </select>
                    </div>

                    <!-- 날짜 -->
                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label for="schedule-start-date" class="block text-sm font-medium text-gray-700 mb-1">시작일 <span class="text-red-500">*</span></label>
                            <input type="date" id="schedule-start-date" name="start_date" required
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-sm">
                        </div>
                        <div>
                            <label for="schedule-end-date" class="block text-sm font-medium text-gray-700 mb-1">종료일</label>
                            <input type="date" id="schedule-end-date" name="end_date"
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-sm">
                        </div>
                    </div>

                    <!-- 종일 체크 + 시간 -->
                    <div>
                        <label class="inline-flex items-center gap-2 cursor-pointer">
                            <input type="checkbox" id="schedule-all-day" name="is_all_day" checked
                                class="w-4 h-4 text-emerald-600 border-gray-300 rounded focus:ring-emerald-500"
                                onchange="toggleTimeFields()">
                            <span class="text-sm text-gray-700">종일</span>
                        </label>
                    </div>

                    <div id="time-fields" class="grid grid-cols-2 gap-3 hidden">
                        <div>
                            <label for="schedule-start-time" class="block text-sm font-medium text-gray-700 mb-1">시작 시간</label>
                            <input type="time" id="schedule-start-time" name="start_time"
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-sm">
                        </div>
                        <div>
                            <label for="schedule-end-time" class="block text-sm font-medium text-gray-700 mb-1">종료 시간</label>
                            <input type="time" id="schedule-end-time" name="end_time"
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-sm">
                        </div>
                    </div>

                    <!-- 설명 -->
                    <div>
                        <label for="schedule-description" class="block text-sm font-medium text-gray-700 mb-1">설명</label>
                        <textarea id="schedule-description" name="description" rows="3"
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-sm"
                            placeholder="일정에 대한 설명을 입력하세요 (선택)"></textarea>
                    </div>
                </form>

                <!-- Modal Footer -->
                <div class="flex items-center justify-between px-6 py-4 border-t bg-gray-50 rounded-b-xl">
                    <div>
                        <button type="button" id="btn-delete" onclick="deleteSchedule()" class="hidden px-4 py-2 text-sm text-red-600 hover:text-red-700 hover:bg-red-50 rounded-lg transition-colors">
                            삭제
                        </button>
                    </div>
                    <div class="flex items-center gap-2">
                        <button type="button" onclick="closeModal()" class="px-4 py-2 text-sm text-gray-600 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors">
                            취소
                        </button>
                        <button type="button" id="btn-save" onclick="saveSchedule()" class="px-4 py-2 text-sm bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg transition-colors">
                            저장
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    const CSRF_TOKEN = '{{ csrf_token() }}';

    // 모달 열기 (생성 모드)
    function openCreateModal(dateKey) {
        document.getElementById('modal-title').textContent = '일정 추가';
        document.getElementById('schedule-id').value = '';
        document.getElementById('schedule-form').reset();
        document.getElementById('schedule-all-day').checked = true;
        document.getElementById('btn-delete').classList.add('hidden');
        toggleTimeFields();

        if (dateKey) {
            document.getElementById('schedule-start-date').value = dateKey;
            document.getElementById('schedule-end-date').value = dateKey;
        } else {
            const today = new Date().toISOString().split('T')[0];
            document.getElementById('schedule-start-date').value = today;
            document.getElementById('schedule-end-date').value = today;
        }

        document.getElementById('schedule-modal').classList.remove('hidden');
    }

    // 모달 열기 (수정 모드)
    async function openEditModal(id) {
        try {
            const res = await fetch(`/dashboard/schedules/${id}`, {
                headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': CSRF_TOKEN }
            });
            const json = await res.json();
            if (!json.success) throw new Error(json.message || '일정을 불러올 수 없습니다.');

            const s = json.data;
            document.getElementById('modal-title').textContent = '일정 수정';
            document.getElementById('schedule-id').value = s.id;
            document.getElementById('schedule-title').value = s.title || '';
            document.getElementById('schedule-type').value = s.type || 'event';
            document.getElementById('schedule-start-date').value = s.start_date ? s.start_date.split('T')[0] : '';
            document.getElementById('schedule-end-date').value = s.end_date ? s.end_date.split('T')[0] : '';
            document.getElementById('schedule-all-day').checked = s.is_all_day;
            document.getElementById('schedule-start-time').value = s.start_time ? s.start_time.substring(0, 5) : '';
            document.getElementById('schedule-end-time').value = s.end_time ? s.end_time.substring(0, 5) : '';
            document.getElementById('schedule-description').value = s.description || '';
            document.getElementById('btn-delete').classList.remove('hidden');
            toggleTimeFields();

            document.getElementById('schedule-modal').classList.remove('hidden');
        } catch (e) {
            alert(e.message || '일정을 불러올 수 없습니다.');
        }
    }

    // 모달 닫기
    function closeModal() {
        document.getElementById('schedule-modal').classList.add('hidden');
    }

    // 종일 토글
    function toggleTimeFields() {
        const allDay = document.getElementById('schedule-all-day').checked;
        document.getElementById('time-fields').classList.toggle('hidden', allDay);
        if (allDay) {
            document.getElementById('schedule-start-time').value = '';
            document.getElementById('schedule-end-time').value = '';
        }
    }

    // 저장
    async function saveSchedule() {
        const id = document.getElementById('schedule-id').value;
        const isEdit = !!id;

        const body = {
            title: document.getElementById('schedule-title').value.trim(),
            type: document.getElementById('schedule-type').value,
            start_date: document.getElementById('schedule-start-date').value,
            end_date: document.getElementById('schedule-end-date').value || document.getElementById('schedule-start-date').value,
            is_all_day: document.getElementById('schedule-all-day').checked,
            start_time: document.getElementById('schedule-start-time').value || null,
            end_time: document.getElementById('schedule-end-time').value || null,
            description: document.getElementById('schedule-description').value.trim() || null,
        };

        if (!body.title) { alert('제목을 입력하세요.'); return; }
        if (!body.start_date) { alert('시작일을 선택하세요.'); return; }

        const url = isEdit ? `/dashboard/schedules/${id}` : '/dashboard/schedules';
        const method = isEdit ? 'PUT' : 'POST';

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

            if (!res.ok) {
                if (json.errors) {
                    const msgs = Object.values(json.errors).flat().join('\n');
                    alert(msgs);
                } else {
                    alert(json.message || '저장에 실패했습니다.');
                }
                return;
            }

            closeModal();
            htmx.trigger('#calendar-container', 'htmx:load');
            // HTMX로 달력 갱신
            const calendarEl = document.getElementById('calendar-container');
            const currentUrl = calendarEl.getAttribute('hx-get') || calendarEl.querySelector('[hx-get]')?.getAttribute('hx-get');
            if (currentUrl) {
                htmx.ajax('GET', currentUrl, { target: '#calendar-container', swap: 'innerHTML' });
            } else {
                refreshCalendar();
            }
        } catch (e) {
            alert('저장 중 오류가 발생했습니다.');
        }
    }

    // 삭제
    async function deleteSchedule() {
        const id = document.getElementById('schedule-id').value;
        if (!id) return;
        if (!confirm('이 일정을 삭제하시겠습니까?')) return;

        try {
            const res = await fetch(`/dashboard/schedules/${id}`, {
                method: 'DELETE',
                headers: {
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': CSRF_TOKEN,
                },
            });
            const json = await res.json();
            if (!res.ok) { alert(json.message || '삭제에 실패했습니다.'); return; }

            closeModal();
            refreshCalendar();
        } catch (e) {
            alert('삭제 중 오류가 발생했습니다.');
        }
    }

    // 달력 갱신 헬퍼
    function refreshCalendar() {
        const container = document.getElementById('calendar-container');
        // 현재 로드된 달력의 년/월 정보를 가져오기 위해 마지막 HTMX URL 추출
        const prevBtn = container.querySelector('button[hx-get]');
        if (prevBtn) {
            const url = prevBtn.getAttribute('hx-get');
            // URL에서 year, month 파라미터 추출 후 현재 달로 재요청
            const params = new URLSearchParams(url.split('?')[1]);
            // 이전달 버튼이므로 +1달이 현재달
            let year = parseInt(params.get('year'));
            let month = parseInt(params.get('month')) + 1;
            if (month > 12) { month = 1; year++; }
            htmx.ajax('GET', `/dashboard/calendar?year=${year}&month=${month}`, { target: '#calendar-container', swap: 'innerHTML' });
        } else {
            // 달력이 아직 로드 안됐으면 현재 월로 로드
            const now = new Date();
            htmx.ajax('GET', `/dashboard/calendar?year=${now.getFullYear()}&month=${now.getMonth()+1}`, { target: '#calendar-container', swap: 'innerHTML' });
        }
    }

    // ESC 키로 모달 닫기
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') closeModal();
    });
</script>
@endpush