@extends('layouts.app')

@section('title', $board->name . ' - 글쓰기')

@section('content')
<!-- 페이지 헤더 -->
<div class="flex justify-between items-center mb-6">
    <div>
        <h1 class="text-2xl font-bold text-gray-800">글쓰기</h1>
        <p class="text-sm text-gray-500 mt-1">{{ $board->name }}</p>
    </div>
    <a href="{{ route('boards.posts.index', $board) }}" class="text-gray-600 hover:text-gray-900">
        &larr; 목록으로
    </a>
</div>

<!-- 작성 폼 -->
<div class="bg-white rounded-lg shadow-sm p-6">
    <form action="{{ route('boards.posts.store', $board) }}" method="POST" enctype="multipart/form-data">
        @csrf

        <!-- 제목 -->
        <div class="mb-6">
            <label for="title" class="block text-sm font-medium text-gray-700 mb-2">
                제목 <span class="text-red-500">*</span>
            </label>
            <input type="text" name="title" id="title" value="{{ old('title') }}"
                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 @error('title') border-red-500 @enderror"
                   required>
            @error('title')
                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
            @enderror
        </div>

        <!-- 커스텀 필드들 -->
        @if($fields->isNotEmpty())
            <div class="mb-6 border-t border-gray-200 pt-6">
                <h3 class="text-sm font-medium text-gray-700 mb-4">추가 정보</h3>
                <div class="grid grid-cols-2 gap-4">
                    @foreach($fields as $field)
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                {{ $field->name }}
                                @if($field->is_required)
                                    <span class="text-red-500">*</span>
                                @endif
                            </label>

                            @switch($field->field_type)
                                @case('text')
                                    <input type="text"
                                           name="custom_fields[{{ $field->field_key }}]"
                                           value="{{ old('custom_fields.' . $field->field_key) }}"
                                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                                           {{ $field->is_required ? 'required' : '' }}>
                                    @break

                                @case('number')
                                    <input type="number"
                                           name="custom_fields[{{ $field->field_key }}]"
                                           value="{{ old('custom_fields.' . $field->field_key) }}"
                                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                                           {{ $field->is_required ? 'required' : '' }}>
                                    @break

                                @case('select')
                                    <select name="custom_fields[{{ $field->field_key }}]"
                                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                                            {{ $field->is_required ? 'required' : '' }}>
                                        <option value="">선택하세요</option>
                                        @foreach($field->getMeta('options', []) as $option)
                                            <option value="{{ $option }}" {{ old('custom_fields.' . $field->field_key) == $option ? 'selected' : '' }}>
                                                {{ $option }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @break

                                @case('date')
                                    <input type="date"
                                           name="custom_fields[{{ $field->field_key }}]"
                                           value="{{ old('custom_fields.' . $field->field_key) }}"
                                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                                           {{ $field->is_required ? 'required' : '' }}>
                                    @break

                                @case('textarea')
                                    <textarea name="custom_fields[{{ $field->field_key }}]"
                                              rows="3"
                                              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                                              {{ $field->is_required ? 'required' : '' }}>{{ old('custom_fields.' . $field->field_key) }}</textarea>
                                    @break

                                @case('checkbox')
                                    <label class="flex items-center">
                                        <input type="checkbox"
                                               name="custom_fields[{{ $field->field_key }}]"
                                               value="1"
                                               {{ old('custom_fields.' . $field->field_key) ? 'checked' : '' }}
                                               class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                        <span class="ml-2 text-sm text-gray-600">{{ $field->getMeta('label', '예') }}</span>
                                    </label>
                                    @break

                                @default
                                    <input type="text"
                                           name="custom_fields[{{ $field->field_key }}]"
                                           value="{{ old('custom_fields.' . $field->field_key) }}"
                                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                            @endswitch

                            @error('custom_fields.' . $field->field_key)
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                    @endforeach
                </div>
            </div>
        @endif

        <!-- 내용 -->
        <div class="mb-6">
            <label for="content" class="block text-sm font-medium text-gray-700 mb-2">내용</label>
            <textarea name="content" id="content" rows="15"
                      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 @error('content') border-red-500 @enderror">{{ old('content') }}</textarea>
            @error('content')
                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
            @enderror
        </div>

        <!-- 파일 첨부 -->
        @if($board->allow_files)
            <div class="mb-6 border-t border-gray-200 pt-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    파일 첨부
                    <span class="text-gray-400 font-normal">(최대 {{ $board->max_file_count }}개, 파일당 {{ round($board->max_file_size / 1024, 1) }}MB)</span>
                </label>
                <div class="border-2 border-dashed border-gray-300 rounded-lg p-6">
                    <input type="file" name="files[]" id="files" multiple
                           class="hidden"
                           accept="*/*">
                    <label for="files" class="cursor-pointer block text-center">
                        <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                            <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        <p class="mt-2 text-sm text-gray-600">
                            <span class="text-blue-600 hover:text-blue-500">파일을 선택</span>하거나 여기로 드래그하세요
                        </p>
                    </label>
                    <div id="file-list" class="mt-4 space-y-2"></div>
                </div>
                @error('files')
                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                @enderror
                @error('files.*')
                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                @enderror
            </div>
        @endif

        <!-- 옵션 -->
        <div class="mb-6 flex items-center gap-6">
            @if($board->getSetting('allow_secret', true))
                <label class="flex items-center">
                    <input type="checkbox" name="is_secret" value="1" {{ old('is_secret') ? 'checked' : '' }}
                           class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                    <span class="ml-2 text-sm text-gray-700">비밀글</span>
                </label>
            @endif

            @if(auth()->user()->hasRole(['admin', 'super-admin', 'manager']))
                <label class="flex items-center">
                    <input type="checkbox" name="is_notice" value="1" {{ old('is_notice') ? 'checked' : '' }}
                           class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                    <span class="ml-2 text-sm text-gray-700">공지사항으로 등록</span>
                </label>
            @endif
        </div>

        <!-- 버튼 -->
        <div class="flex justify-end gap-3">
            <a href="{{ route('boards.posts.index', $board) }}"
               class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition">
                취소
            </a>
            <button type="submit"
                    class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition">
                등록
            </button>
        </div>
    </form>
</div>

@if($board->allow_files)
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const fileInput = document.getElementById('files');
    const fileList = document.getElementById('file-list');
    const dropZone = fileInput?.closest('.border-dashed');
    const maxFiles = {{ $board->max_file_count }};
    const maxSize = {{ $board->max_file_size * 1024 }}; // bytes

    // 파일 목록 표시 함수
    function displayFiles(files) {
        fileList.innerHTML = '';

        if (files.length > maxFiles) {
            showToast(`최대 ${maxFiles}개의 파일만 첨부할 수 있습니다.`, 'warning');
            fileInput.value = '';
            return;
        }

        Array.from(files).forEach((file, index) => {
            if (file.size > maxSize) {
                showToast(`${file.name}: 파일 크기가 너무 큽니다.`, 'error');
                return;
            }

            const item = document.createElement('div');
            item.className = 'flex items-center justify-between px-3 py-2 bg-blue-50 rounded-lg';
            item.innerHTML = `
                <div class="flex items-center gap-2">
                    <svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                    </svg>
                    <span class="text-sm text-gray-700">${file.name}</span>
                    <span class="text-xs text-gray-400">(${formatFileSize(file.size)})</span>
                </div>
            `;
            fileList.appendChild(item);
        });
    }

    // 파일 선택 이벤트
    if (fileInput) {
        fileInput.addEventListener('change', function() {
            displayFiles(this.files);
        });
    }

    // 드래그앤드롭 이벤트
    if (dropZone) {
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            dropZone.addEventListener(eventName, preventDefaults, false);
        });

        function preventDefaults(e) {
            e.preventDefault();
            e.stopPropagation();
        }

        ['dragenter', 'dragover'].forEach(eventName => {
            dropZone.addEventListener(eventName, highlight, false);
        });

        ['dragleave', 'drop'].forEach(eventName => {
            dropZone.addEventListener(eventName, unhighlight, false);
        });

        function highlight() {
            dropZone.classList.add('border-blue-500', 'bg-blue-50');
            dropZone.classList.remove('border-gray-300');
        }

        function unhighlight() {
            dropZone.classList.remove('border-blue-500', 'bg-blue-50');
            dropZone.classList.add('border-gray-300');
        }

        dropZone.addEventListener('drop', handleDrop, false);

        function handleDrop(e) {
            const dt = e.dataTransfer;
            const files = dt.files;

            // DataTransfer를 사용하여 file input에 파일 설정
            const dataTransfer = new DataTransfer();
            Array.from(files).forEach(file => dataTransfer.items.add(file));
            fileInput.files = dataTransfer.files;

            displayFiles(files);
        }
    }

    function formatFileSize(bytes) {
        if (bytes >= 1073741824) return (bytes / 1073741824).toFixed(2) + ' GB';
        if (bytes >= 1048576) return (bytes / 1048576).toFixed(2) + ' MB';
        if (bytes >= 1024) return (bytes / 1024).toFixed(2) + ' KB';
        return bytes + ' bytes';
    }
});
</script>
@endpush
@endif
@endsection