@extends('layouts.app')

@section('title', '채번 규칙 생성')

@section('content')
<div class="container mx-auto max-w-4xl">
    <!-- 페이지 헤더 -->
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-gray-800">채번 규칙 생성</h1>
        <a href="{{ route('numbering-rules.index') }}" class="text-gray-600 hover:text-gray-800">
            ← 목록으로
        </a>
    </div>

    <!-- 기본 정보 -->
    <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
        <h2 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b">기본 정보</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">규칙명</label>
                <input type="text" name="rule_name" maxlength="100"
                       placeholder="예: 5130 견적번호"
                       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>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    문서유형 <span class="text-red-500">*</span>
                </label>
                <select name="document_type" 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>
                    @foreach($documentTypes as $value => $label)
                        <option value="{{ $value }}"
                            {{ in_array($value, $usedDocumentTypes) ? 'disabled' : '' }}>
                            {{ $label }} ({{ $value }})
                            {{ in_array($value, $usedDocumentTypes) ? ' - 사용 중' : '' }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    리셋 주기 <span class="text-red-500">*</span>
                </label>
                <select name="reset_period" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    @foreach($resetPeriods as $value => $label)
                        <option value="{{ $value }}" {{ $value === 'daily' ? 'selected' : '' }}>
                            {{ $label }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    시퀀스 자릿수 <span class="text-red-500">*</span>
                </label>
                <input type="number" name="sequence_padding" value="2" min="1" max="10"
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                <p class="text-xs text-gray-500 mt-1">2 → 01,02 / 3 → 001,002</p>
            </div>
            <div class="flex items-center gap-2">
                <input type="checkbox" name="is_active" id="is_active" value="1" checked
                       class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-500">
                <label for="is_active" class="text-sm text-gray-700">활성</label>
            </div>
        </div>
    </div>

    <!-- 세그먼트 편집 -->
    <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
        <h2 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b">패턴 세그먼트</h2>
        <div id="segmentsContainer"></div>
        <button type="button" onclick="addSegment()"
                class="w-full py-2 border-2 border-dashed border-gray-300 rounded-lg text-gray-500 hover:border-blue-400 hover:text-blue-600 transition mt-3">
            + 세그먼트 추가
        </button>
    </div>

    <!-- 미리보기 -->
    <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
        <h2 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b">미리보기</h2>
        <div id="previewArea" class="bg-gray-50 rounded-lg p-4">
            <p class="text-gray-400">세그먼트를 추가하면 미리보기가 표시됩니다.</p>
        </div>
    </div>

    <!-- 버튼 -->
    <div class="flex justify-end gap-3">
        <a href="{{ route('numbering-rules.index') }}"
           class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition">
            취소
        </a>
        <button type="button" onclick="submitForm('/api/admin/numbering-rules', 'POST')"
                class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition">
            생성
        </button>
    </div>
</div>
@endsection

@push('scripts')
@include('numbering.partials.segment-editor-js')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        initPatternEditor([], 2);
    });
</script>
@endpush