@extends('layouts.admin')

@section('title', '영업시간 및 휴무일 설정')

@section('content')

<div class="content-header-box mb-3 px-0 d-flex justify-content-between align-items-center">
    <div class="content-title-wrap">
        <h1 class="content-title">@yield('title')</h1>
    </div>
    <div class="content-btn-wrap d-flex gap-2">
        <button type="submit" form="shopScheduleForm" class="btn btn-dark btn-app-sm fw-bold d-none d-sm-inline-block">
            <i class="fa-solid fa-check me-1"></i> 저장
        </button>
    </div>
</div>

<x-admin.alerts-display />

<div class="container-fluid px-0">
    <form action="{{ route('shop_admin.settings.schedule.update') }}" method="POST" id="shopScheduleForm">
        @csrf
        @method('PUT')

        <!-- 1. 기본 영업 및 예약 운영 설정 -->
        <div class="app-form-card mb-4">
            <div class="app-card-header">
                <i class="fa-solid fa-clock text-primary me-2"></i> 기본 영업시간 및 예약 운영 설정
            </div>
            <div class="app-card-body">
                <div class="row g-3 mb-4">
                    <div class="p-3 bg-light rounded-3 col-md-6 d-flex justify-content-between align-items-center">
                        <div>
                            <label for="is_reservation_enabled" class="form-check-label fw-bold text-dark mb-0">고객 예약 접수 허용</label>
                            <p class="text-muted small mb-0">활성화 시 고객들이 해당 뷰티샵의 스케줄에 맞춰 예약을 진행할 수 있습니다.</p>
                        </div>
                        <div class="form-check form-switch fs-5">
                            <input class="form-check-input" type="checkbox" role="switch" id="is_reservation_enabled" name="is_reservation_enabled" value="1" {{ old('is_reservation_enabled', $shop->is_reservation_enabled) ? 'checked' : '' }}>
                        </div>
                    </div>
                    
                    <div class="col-md-3 mt-3">
                        <label class="form-label fw-semibold">예약 시간 단위</label>
                        <select name="booking_unit_minutes" class="form-select @error('booking_unit_minutes') is-invalid @enderror">
                            @foreach([10, 15, 20, 30, 60] as $min)
                            <option value="{{ $min }}" {{ old('booking_unit_minutes', $shop->booking_unit_minutes) == $min ? 'selected' : '' }}>{{ $min }}분 단위</option>
                            @endforeach
                        </select>
                        @error('booking_unit_minutes')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-3 mt-3">
                        <label class="form-label fw-semibold">시술 간 버퍼 타임 (청소/준비)</label>
                        <select name="slot_settings[buffer_minutes]" class="form-select">
                            @foreach([0, 5, 10, 15, 20, 30] as $bMin)
                            <option value="{{ $bMin }}" {{ old('slot_settings.buffer_minutes', data_get($shop->holiday_configs, 'slot_settings.buffer_minutes', 0)) == $bMin ? 'selected' : '' }}>{{ $bMin }}분</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label fw-semibold">매장 영업 시작 시간</label>
                        <input type="text" name="business_start_time" class="form-control time-picker @error('business_start_time') is-invalid @enderror" value="{{ old('business_start_time', $shop->business_start_time ? substr($shop->business_start_time, 0, 5) : '') }}">
                        @error('business_start_time')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-3">
                        <label class="form-label fw-semibold">매장 영업 종료 시간</label>
                        <input type="text" name="business_end_time" class="form-control time-picker @error('business_end_time') is-invalid @enderror" value="{{ old('business_end_time', $shop->business_end_time ? substr($shop->business_end_time, 0, 5) : '') }}">
                        @error('business_end_time')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-3">
                        <label class="form-label fw-semibold">휴게 시간 (시작)</label>
                        <input type="text" name="break_start_time" class="form-control time-picker @error('break_start_time') is-invalid @enderror" value="{{ old('break_start_time', $shop->break_start_time ? substr($shop->break_start_time, 0, 5) : '') }}">
                        @error('break_start_time')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-3">
                        <label class="form-label fw-semibold">휴게 시간 (종료)</label>
                        <input type="text" name="break_end_time" class="form-control time-picker @error('break_end_time') is-invalid @enderror" value="{{ old('break_end_time', $shop->break_end_time ? substr($shop->break_end_time, 0, 5) : '') }}">
                        @error('break_end_time')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>
        </div>

        <!-- 2. 정기 휴무 및 예외 일정 관리 -->
        <div class="app-form-card mb-4">
            <div class="app-card-header">
                <i class="fa-solid fa-calendar-check text-primary me-2"></i> 정기 휴무 및 특별 예외 일정 관리
            </div>
            <div class="app-card-body">
                
                @php 
                    // 💡 유효성 검사 실패 시 입력했던 old() 데이터와 기존 DB 데이터를 완벽히 연동
                    $weeklyOffs = old('weekly_off', data_get($shop->holiday_configs, 'weekly_off', []));$daysMap = ['mon' => '월요일', 'tue' => '화요일', 'wed' => '수요일', 'thu' => '목요일', 'fri' => '금요일', 'sat' => '토요일', 'sun' => '일요일'];
                    
                    $monthlyDateOffs = old('monthly_date_off', data_get($shop->holiday_configs, 'monthly_date_off', []));
                    $dateRangeOffs = old('date_range_off', data_get($shop->holiday_configs, 'date_range_off', []));
                    $customExceptions = old('custom_exceptions', data_get($shop->holiday_configs, 'custom_exceptions', []));
                @endphp

                <!-- 요일별 정기 휴무 & 매월 일자 고정 휴무 (2분할 배치, 버튼 하단 고정) -->
                <div class="row g-4 mb-4">
                    
                    <!-- 1. 요일별 정기 휴무 -->
                    <div class="col-md-6 d-flex flex-column justify-content-between border-end-md pe-md-3">
                        <div>
                            <h6 class="fw-bold text-dark mb-1">요일별 정기 휴무 설정</h6>
                            <p class="text-muted small mb-2">매주 반복되는 정기 휴무 요일 (중복 불가)</p>
                            
                            <div id="weeklyOffContainer" class="mb-2">
                                @foreach($weeklyOffs as $index =>$wOff)
                                    <div class="row g-2 mb-2 align-items-center weekly-off-row">
                                        <div class="col-4">
                                            <select name="weekly_off[{{ $index }}][day]" class="form-select form-select-sm weekly-day-select">
                                                @foreach($daysMap as $k =>$v)
                                                    <option value="{{ $k }}" {{ ($wOff['day'] ?? '') == $k ? 'selected' : '' }}>{{ $v }}</option>
                                                @endforeach
                                            </select>
                                            <input type="hidden" name="weekly_off[{{ $index }}][pattern]" value="every">
                                        </div>
                                        <div class="col-7">
                                            <input type="text" name="weekly_off[{{ $index }}][memo]" class="form-control form-control-sm" placeholder="휴무 사유 (선택)" value="{{ $wOff['memo'] ?? '' }}">
                                        </div>
                                        <div class="col-1">
                                            <button type="button" class="btn btn-outline-danger btn-sm remove-row-btn w-100"><i class="fa-solid fa-trash"></i></button>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <button type="button" class="btn btn-outline-primary btn-sm" id="addWeeklyOffBtn">
                                <i class="fa-solid fa-plus me-1"></i> 요일 휴무 추가
                            </button>
                        </div>
                    </div>

                    <!-- 2. 매월 일자 고정 휴무 -->
                    <div class="col-md-6 d-flex flex-column justify-content-between ps-md-3">
                        <div>
                            <h6 class="fw-bold text-dark mb-1">매월 일자별 고정 휴무</h6>
                            <p class="text-muted small mb-2">매월 특정한 날짜(1~31일) 고정 휴무</p>
                            
                            <div id="monthlyDateContainer" class="mb-2">
                                @foreach($monthlyDateOffs as $index =>$mon)
                                    <div class="row g-2 mb-2 align-items-center monthly-row">
                                        <div class="col-4">
                                            <input type="number" min="1" max="31" name="monthly_date_off[{{ $index }}][date]" class="form-control form-control-sm monthly-day-input" placeholder="일자" value="{{ $mon['date'] ?? '' }}">
                                        </div>
                                        <div class="col-7">
                                            <input type="text" name="monthly_date_off[{{ $index }}][memo]" class="form-control form-control-sm" placeholder="휴무 사유" value="{{ $mon['memo'] ?? '' }}">
                                        </div>
                                        <div class="col-1">
                                            <button type="button" class="btn btn-outline-danger btn-sm remove-row-btn w-100"><i class="fa-solid fa-trash"></i></button>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <button type="button" class="btn btn-outline-primary btn-sm" id="addMonthlyDateBtn">
                                <i class="fa-solid fa-plus me-1"></i> 매월 고정일 추가
                            </button>
                        </div>
                    </div>

                </div>

                <hr class="my-4">

                <!-- 3. 일정 기간 휴무 설정 -->
                <div class="mb-4">
                    <h6 class="fw-bold text-dark mb-1">일정 기간 휴무 설정</h6>
                    <p class="text-muted small mb-2">시작일과 종료일을 같게 지정하면 1일만 휴무 처리되며, 다르면 해당 기간 전체가 휴무 처리됩니다.</p>
                    
                    <div id="dateRangeContainer" class="mb-2">
                        @foreach($dateRangeOffs as $index =>$range)
                            <div class="row g-2 mb-2 align-items-center date-range-row">
                                <div class="col-md-2">
                                    <input type="text" name="date_range_off[{{ $index }}][start_date]" class="form-control form-control-sm date-picker-dynamic" placeholder="시작일 (YYYY-MM-DD)" value="{{ $range['start_date'] ?? '' }}">
                                </div>
                                <div class="col-md-2">
                                    <input type="text" name="date_range_off[{{ $index }}][end_date]" class="form-control form-control-sm date-picker-dynamic" placeholder="종료일 (YYYY-MM-DD)" value="{{ $range['end_date'] ?? '' }}">
                                </div>
                                <div class="col-md-7">
                                    <input type="text" name="date_range_off[{{ $index }}][memo]" class="form-control form-control-sm" placeholder="휴무 사유 (예: 추석 연휴)" value="{{ $range['memo'] ?? '' }}">
                                </div>
                                <div class="col-md-1">
                                    <button type="button" class="btn btn-outline-danger btn-sm remove-row-btn w-100"><i class="fa-solid fa-trash"></i></button>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <button type="button" class="btn btn-outline-primary btn-sm" id="addDateRangeBtn">
                        <i class="fa-solid fa-plus me-1"></i> 기간 휴무 추가
                    </button>
                </div>

                <hr class="my-4">

                <!-- 4. 특정 날짜 영업시간 변경 -->
                <div class="mb-4">
                    <h6 class="fw-bold text-dark mb-1">특정 날짜 영업시간 변경</h6>
                    <p class="text-muted small mb-2">크리스마스나 이벤트 등으로 평소와 영업시간이 달라지는 날의 시간을 설정합니다.</p>
                    
                    <div id="customTimeContainer" class="mb-2">
                        @foreach($customExceptions as $index =>$exc)
                            <div class="row g-2 mb-2 align-items-center custom-time-row">
                                <div class="col-md-2">
                                    <input type="text" name="custom_exceptions[{{ $index }}][date]" class="form-control form-control-sm date-picker-dynamic" placeholder="날짜 (YYYY-MM-DD)" value="{{ $exc['date'] ?? '' }}">
                                </div>
                                <div class="col-md-2">
                                    <input type="text" name="custom_exceptions[{{ $index }}][start_time]" class="form-control form-control-sm time-picker-dynamic" placeholder="시작 시간" value="{{ $exc['start_time'] ?? '' }}">
                                </div>
                                <div class="col-md-2">
                                    <input type="text" name="custom_exceptions[{{ $index }}][end_time]" class="form-control form-control-sm time-picker-dynamic" placeholder="종료 시간" value="{{ $exc['end_time'] ?? '' }}">
                                </div>
                                <div class="col-md-5">
                                    <input type="text" name="custom_exceptions[{{ $index }}][memo]" class="form-control form-control-sm" placeholder="사유" value="{{ $exc['memo'] ?? '' }}">
                                </div>
                                <div class="col-md-1">
                                    <button type="button" class="btn btn-outline-danger btn-sm remove-row-btn w-100"><i class="fa-solid fa-trash"></i></button>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <button type="button" class="btn btn-outline-primary btn-sm" id="addCustomTimeBtn">
                        <i class="fa-solid fa-plus me-1"></i> 특정일 시간 변경 추가
                    </button>
                </div>

            </div>
        </div>
    </form>
</div>

<!-- 동적 행 추가 및 요일 중복 방지 스크립트 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const daysMap = {
        'mon': '월요일', 'tue': '화요일', 'wed': '수요일', 
        'thu': '목요일', 'fri': '금요일', 'sat': '토요일', 'sun': '일요일'
    };

    // 1. 이미 선택된 요일은 다른 셀렉트박스에서 숨기는 함수 (중복 방지)
    function updateWeeklyOptions() {
        const selects = document.querySelectorAll('.weekly-day-select');
        const selectedValues = Array.from(selects).map(s => s.value);

        selects.forEach(select => {
            const currentValue = select.value;
            Array.from(select.options).forEach(option => {
                if (option.value !== currentValue && selectedValues.includes(option.value)) {
                    option.style.display = 'none';
                    option.disabled = true;
                } else {
                    option.style.display = 'block';
                    option.disabled = false;
                }
            });
        });
    }

    document.addEventListener('change', function(e) {
        if (e.target.classList.contains('weekly-day-select')) {
            updateWeeklyOptions();
        }
    });

    // 2. 요일별 정기 휴무 행 추가
    let weeklyIndex = document.querySelectorAll('.weekly-off-row').length;
    document.getElementById('addWeeklyOffBtn')?.addEventListener('click', function() {
        const container = document.getElementById('weeklyOffContainer');
        const currentSelected = Array.from(document.querySelectorAll('.weekly-day-select')).map(s => s.value);
        const availableDays = Object.keys(daysMap).filter(k => !currentSelected.includes(k));
        
        if (availableDays.length === 0) {
            alert('모든 요일이 이미 선택되었습니다.');
            return;
        }

        const row = document.createElement('div');
        row.className = 'row g-2 mb-2 align-items-center weekly-off-row';
        
        let optionsHtml = '';
        for (const [key, label] of Object.entries(daysMap)) {
            const isDisabled = currentSelected.includes(key) ? 'style="display:none;" disabled' : '';
            optionsHtml += `<option value="${key}" ${isDisabled}>${label}</option>`;
        }

        row.innerHTML = `
            <div class="col-4">
                <select name="weekly_off[${weeklyIndex}][day]" class="form-select form-select-sm weekly-day-select">
                    ${optionsHtml}
                </select>
                <input type="hidden" name="weekly_off[${weeklyIndex}][pattern]" value="every">
            </div>
            <div class="col-7">
                <input type="text" name="weekly_off[${weeklyIndex}][memo]" class="form-control form-control-sm" placeholder="휴무 사유 (선택)">
            </div>
            <div class="col-1">
                <button type="button" class="btn btn-outline-danger btn-sm remove-row-btn w-100"><i class="fa-solid fa-trash"></i></button>
            </div>
        `;
        container.appendChild(row);
        weeklyIndex++;
        updateWeeklyOptions();
    });

    // 3. 일정 기간 휴무 행 추가 (.date-picker-dynamic 적용)
    let rangeIndex = document.querySelectorAll('.date-range-row').length;
    document.getElementById('addDateRangeBtn')?.addEventListener('click', function() {
        const container = document.getElementById('dateRangeContainer');
        const row = document.createElement('div');
        row.className = 'row g-2 mb-2 align-items-center date-range-row';
        row.innerHTML = `
            <div class="col-md-2"><input type="text" name="date_range_off[${rangeIndex}][start_date]" class="form-control form-control-sm date-picker-dynamic" placeholder="시작일 (YYYY-MM-DD)"></div>
            <div class="col-md-2"><input type="text" name="date_range_off[${rangeIndex}][end_date]" class="form-control form-control-sm date-picker-dynamic" placeholder="종료일 (YYYY-MM-DD)"></div>
            <div class="col-md-7"><input type="text" name="date_range_off[${rangeIndex}][memo]" class="form-control form-control-sm" placeholder="휴무 사유"></div>
            <div class="col-md-1"><button type="button" class="btn btn-outline-danger btn-sm remove-row-btn w-100"><i class="fa-solid fa-trash"></i></button></div>
        `;
        container.appendChild(row);
        
        // 동적 피커 전용 함수 호출
        if (typeof window.initDynamicFlatpickr === 'function') {
            window.initDynamicFlatpickr(row);
        }
        rangeIndex++;
    });

    // 4. 특정일 시간 변경 행 추가 (.date-picker-dynamic, .time-picker-dynamic 적용)
    let customIndex = document.querySelectorAll('.custom-time-row').length;
    document.getElementById('addCustomTimeBtn')?.addEventListener('click', function() {
        const container = document.getElementById('customTimeContainer');
        const row = document.createElement('div');
        row.className = 'row g-2 mb-2 align-items-center custom-time-row';
        row.innerHTML = `
            <div class="col-md-2"><input type="text" name="custom_exceptions[${customIndex}][date]" class="form-control form-control-sm date-picker-dynamic" placeholder="날짜 (YYYY-MM-DD)"></div>
            <div class="col-md-2"><input type="text" name="custom_exceptions[${customIndex}][start_time]" class="form-control form-control-sm time-picker-dynamic" placeholder="시작 시간"></div>
            <div class="col-md-2"><input type="text" name="custom_exceptions[${customIndex}][end_time]" class="form-control form-control-sm time-picker-dynamic" placeholder="종료 시간"></div>
            <div class="col-md-5"><input type="text" name="custom_exceptions[${customIndex}][memo]" class="form-control form-control-sm" placeholder="사유"></div>
            <div class="col-md-1"><button type="button" class="btn btn-outline-danger btn-sm remove-row-btn w-100"><i class="fa-solid fa-trash"></i></button></div>
        `;
        container.appendChild(row);

        // 동적 피커 전용 함수 호출
        if (typeof window.initDynamicFlatpickr === 'function') {
            window.initDynamicFlatpickr(row);
        }
        customIndex++;
    });

    // 5. 매월 고정일 행 추가 (max 31 적용)
    let monthlyIndex = document.querySelectorAll('.monthly-row').length;
    document.getElementById('addMonthlyDateBtn')?.addEventListener('click', function() {
        const container = document.getElementById('monthlyDateContainer');
        const row = document.createElement('div');
        row.className = 'row g-2 mb-2 align-items-center monthly-row';
        row.innerHTML = `
            <div class="col-4">
                <input type="number" min="1" max="31" name="monthly_date_off[${monthlyIndex}][date]" class="form-control form-control-sm monthly-day-input" placeholder="일자">
            </div>
            <div class="col-7">
                <input type="text" name="monthly_date_off[${monthlyIndex}][memo]" class="form-control form-control-sm" placeholder="휴무 사유">
            </div>
            <div class="col-1">
                <button type="button" class="btn btn-outline-danger btn-sm remove-row-btn w-100"><i class="fa-solid fa-trash"></i></button>
            </div>
        `;
        container.appendChild(row);
        monthlyIndex++;
    });

    // 매월 일자 입력 시 32 이상 입력 실시간 방어
    document.addEventListener('input', function(e) {
        if (e.target.classList.contains('monthly-day-input')) {
            let val = parseInt(e.target.value);
            if (val > 31) {
                e.target.value = 31;
            } else if (val < 1 && e.target.value !== '') {
                e.target.value = 1;
            }
        }
    });

    // 6. 삭제 버튼 공통 이벤트 위임
    document.addEventListener('click', function(e) {
        if (e.target.closest('.remove-row-btn')) {
            e.target.closest('.row').remove();
            updateWeeklyOptions(); // 요일 삭제 시 선택 가능하도록 복구
        }
    });

    // 초기 로딩 시 요일 중복 체크 실행
    updateWeeklyOptions();
});
</script>

@endsection