@extends('layouts.admin')

@section('title', '뷰티샵 대시보드')

@section('content')

<!-- FullCalendar CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.css" rel="stylesheet" />

<style>
    /* 캘린더 디자인 커스텀 */
    #shopCalendar .fc-col-header-cell {
        background-color: #f8f9fa;
        padding: 10px 0;
    }
    #shopCalendar .fc-col-header-cell-cushion {
        color: #495057;
        font-weight: 600;
        text-decoration: none;
    }
    
    #shopCalendar .fc-daygrid-day-number {
        color: #333;
        font-weight: 500;
        padding: 8px 10px !important;
        text-decoration: none;
        transition: all 0.2s ease;
    }
    #shopCalendar .fc-daygrid-day:hover {
        background-color: #f1f3f5;
        cursor: pointer;
    }

    #shopCalendar .fc-day-today {
        background-color: #e7f1ff !important;
    }
    #shopCalendar .fc-day-today .fc-daygrid-day-number {
        color: #0d6efd;
        font-weight: bold;
    }
</style>

<div class="content-header-box mb-4 px-0">
    <div class="content-title-wrap">
        <h1 class="content-title">뷰티샵 관리 홈</h1>
        <span class="text-muted small">
            <strong>{{ $shopUser->name ?? '관리자' }}</strong> 대표님, 환영합니다. 우리 샵의 운영 현황을 한눈에 확인하세요.
        </span>
    </div>
</div>

<div class="row g-4 mb-4">
    <div class="col-md-4">
        <div class="card border-0 shadow-sm rounded-4 p-3">
            <div class="card-body">
                <div class="text-muted small fw-bold mb-1">오늘 신규 예약</div>
                <h3 class="fw-bold text-dark mb-0">0건</h3>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card border-0 shadow-sm rounded-4 p-3">
            <div class="card-body">
                <div class="text-muted small fw-bold mb-1">진행 중인 시술</div>
                <h3 class="fw-bold text-primary mb-0">0건</h3>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card border-0 shadow-sm rounded-4 p-3">
            <div class="card-body">
                <div class="text-muted small fw-bold mb-1">이번 달 누적 매출</div>
                <h3 class="fw-bold text-success mb-0">0원</h3>
            </div>
        </div>
    </div>
</div>

<div class="card border-0 shadow-sm rounded-4 p-4 mb-4">
    <h5 class="fw-bold text-dark mb-3"><i class="fa-solid fa-bolt text-warning me-2"></i>빠른 관리 메뉴</h5>
    <div class="d-flex gap-3 flex-wrap">
        <a href="{{ route('shop_admin.settings.schedule') }}" class="btn btn-outline-primary px-4 py-2 rounded-pill fw-bold">
            <i class="fa-solid fa-calendar-days me-2"></i>영업시간 및 휴무일 설정
        </a>
    </div>
</div>

<!-- 영업시간 및 예약 캘린더 섹션 -->
<div class="card border-0 shadow-sm rounded-4 p-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h5 class="fw-bold text-dark mb-0"><i class="fa-solid fa-calendar-check text-primary me-2"></i>예약 및 운영 일정 캘린더</h5>
        <div class="text-muted small">
            <span class="badge bg-danger me-2">휴무일</span>
            <span class="badge bg-primary">예약</span>
        </div>
    </div>
    <div class="card-body px-0">
        <div id="shopCalendar" style="min-height: 650px;"></div>
    </div>
</div>

<!-- FullCalendar JS CDN 및 초기화 스크립트 -->
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('shopCalendar');

    var holidayConfigs = @json($shop->holiday_configs ?? []);
    var calendarEvents = [];

    // 1. 요일별 정기 휴무 반영 (weekly_off)
    if (holidayConfigs.weekly_off && Array.isArray(holidayConfigs.weekly_off)) {
        var dayMap = { 'sun': 0, 'mon': 1, 'tue': 2, 'wed': 3, 'thu': 4, 'fri': 5, 'sat': 6 };
        holidayConfigs.weekly_off.forEach(function(item) {
            if (dayMap[item.day] !== undefined) {
                calendarEvents.push({
                    title: item.memo ? '정기휴무: ' + item.memo : '정기 휴무',
                    daysOfWeek: [ dayMap[item.day] ],
                    display: 'background',
                    color: '#ffcccc'
                });
            }
        });
    }

    // 2. 일정 기간 휴무 반영 (date_range_off)
    if (holidayConfigs.date_range_off && Array.isArray(holidayConfigs.date_range_off)) {
        holidayConfigs.date_range_off.forEach(function(item) {
            if (item.start_date && item.end_date) {
                let endDate = new Date(item.end_date);
                endDate.setDate(endDate.getDate() + 1);
                let formattedEndDate = endDate.toISOString().split('T')[0];

                calendarEvents.push({
                    title: item.memo ? '기간휴무: ' + item.memo : '기간 휴무',
                    start: item.start_date,
                    end: formattedEndDate,
                    allDay: true,
                    backgroundColor: '#dc3545',
                    borderColor: '#dc3545'
                });
            }
        });
    }

    // 3. 매월 고정일 휴무 반영 (monthly_date_off - 예: 매월 1일, 15일 등)
    if (holidayConfigs.monthly_date_off && Array.isArray(holidayConfigs.monthly_date_off)) {
        holidayConfigs.monthly_date_off.forEach(function(item) {
            let dayNum = parseInt(item.date);
            if (!isNaN(dayNum) && dayNum >= 1 && dayNum <= 31) {
                let currentYear = new Date().getFullYear();
                // 전년도부터 향후 2년 동안의 해당 일자를 동적으로 생성하여 캘린더에 표시
                for (let y = currentYear - 1; y <= currentYear + 2; y++) {
                    for (let m = 0; m < 12; m++) {
                        let lastDayOfMonth = new Date(y, m + 1, 0).getDate();
                        let targetDay = Math.min(dayNum, lastDayOfMonth); // 2월 30일 같은 예외 방지
                        
                        let mm = String(m + 1).padStart(2, '0');
                        let dd = String(targetDay).padStart(2, '0');
                        let dateStr = `${y}-${mm}-${dd}`;

                        calendarEvents.push({
                            title: item.memo ? '고정휴무: ' + item.memo : '매월 고정 휴무',
                            start: dateStr,
                            allDay: true,
                            display: 'background',
                            color: '#ffcccc'
                        });
                    }
                }
            }
        });
    }

    var calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'ko',
        initialView: 'dayGridMonth',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        buttonText: {
            today: '오늘',
            month: '월간',
            week: '주간',
            day: '일간'
        },
        editable: false,
        selectable: true,
        events: calendarEvents,
        
        // 날짜 클릭 시 해당 날짜의 일간(Day) 뷰로 이동
        dateClick: function(info) {
            calendar.changeView('timeGridDay', info.dateStr);
        }
    });

    calendar.render();
});
</script>

@endsection