@extends('layouts.app')

@section('title', '테넌트 설정')

@section('content')
<div class="flex flex-col h-full">
    <!-- 페이지 헤더 -->
    <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-6 flex-shrink-0">
        <div>
            <h1 class="text-2xl font-bold text-gray-800">테넌트 설정</h1>
            <p class="text-sm text-gray-500 mt-1">
                @if($tenant)
                    <span class="inline-flex items-center gap-1">
                        <span class="px-2 py-0.5 bg-blue-100 text-blue-700 rounded text-xs font-medium">{{ $tenant->company_name }}</span>
                        설정을 관리합니다.
                    </span>
                @else
                    테넌트별 시스템 설정을 관리합니다.
                @endif
            </p>
        </div>
    </div>

    <!-- 테넌트 미선택 경고 -->
    @if(!$tenant)
        <div class="mb-4 bg-yellow-50 border border-yellow-200 text-yellow-700 px-4 py-3 rounded-lg flex items-center gap-2">
            <svg class="w-5 h-5 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
            헤더에서 테넌트를 선택해주세요.
        </div>
    @elseif(!$hasSettings)
        <div class="mb-4 bg-blue-50 border border-blue-200 text-blue-700 px-4 py-3 rounded-lg flex items-center gap-2">
            <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            이 테넌트는 아직 설정이 저장되지 않았습니다. 재고관리할 품목유형을 선택해주세요.
        </div>
    @endif

    <!-- 성공 메시지 -->
    @if(session('success'))
        <div class="mb-4 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg flex items-center gap-2">
            <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            {{ session('success') }}
        </div>
    @endif

    <!-- 에러 메시지 -->
    @if(session('error'))
        <div class="mb-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg flex items-center gap-2">
            <svg class="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            {{ session('error') }}
        </div>
    @endif

    <!-- 설정 폼 -->
    <form action="{{ route('tenant-settings.store') }}" method="POST">
        @csrf

        <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
            <!-- 재고관리 품목유형 -->
            <div class="bg-white rounded-lg shadow-sm p-5">
                <div class="flex items-center gap-3 mb-4">
                    <div class="w-9 h-9 bg-blue-100 rounded-lg flex items-center justify-center">
                        <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                        </svg>
                    </div>
                    <div>
                        <h3 class="font-semibold text-gray-800">재고관리 품목유형</h3>
                        <p class="text-xs text-gray-500">재고현황에 표시할 품목유형</p>
                    </div>
                </div>

                @error('stock_item_types')
                    <div class="mb-3 text-red-600 text-xs">{{ $message }}</div>
                @enderror

                <div class="grid grid-cols-2 gap-2">
                    @foreach($itemTypeLabels as $code => $label)
                        <label class="flex items-center gap-2 p-2 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100 transition border border-transparent has-[:checked]:border-blue-400 has-[:checked]:bg-blue-50">
                            <input type="checkbox"
                                   name="stock_item_types[]"
                                   value="{{ $code }}"
                                   {{ in_array($code, $stockItemTypes) ? 'checked' : '' }}
                                   class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                            <span class="text-sm">
                                <span class="font-medium text-gray-800">{{ $code }}</span>
                                <span class="text-gray-500 text-xs">({{ $label }})</span>
                            </span>
                        </label>
                    @endforeach
                </div>
            </div>

            <!-- 안전재고 설정 -->
            <div class="bg-white rounded-lg shadow-sm p-5">
                <div class="flex items-center gap-3 mb-4">
                    <div class="w-9 h-9 bg-yellow-100 rounded-lg flex items-center justify-center">
                        <svg class="w-5 h-5 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                        </svg>
                    </div>
                    <div>
                        <h3 class="font-semibold text-gray-800">안전재고 설정</h3>
                        <p class="text-xs text-gray-500">품목별 설정 없을 시 적용</p>
                    </div>
                </div>

                <div class="space-y-3">
                    <div>
                        <label for="default_safety_stock" class="block text-sm font-medium text-gray-600 mb-1">기본 안전재고</label>
                        <div class="flex items-center gap-2">
                            <input type="number"
                                   id="default_safety_stock"
                                   name="default_safety_stock"
                                   value="{{ old('default_safety_stock', $defaultSafetyStock) }}"
                                   min="0"
                                   max="9999"
                                   class="w-28 px-3 py-2 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('default_safety_stock') border-red-500 @enderror">
                            <span class="text-sm text-gray-500">개</span>
                        </div>
                        @error('default_safety_stock')
                            <div class="mt-1 text-red-600 text-xs">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- 알림 설정 -->
            <div class="bg-white rounded-lg shadow-sm p-5">
                <div class="flex items-center gap-3 mb-4">
                    <div class="w-9 h-9 bg-green-100 rounded-lg flex items-center justify-center">
                        <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                        </svg>
                    </div>
                    <div>
                        <h3 class="font-semibold text-gray-800">알림 설정</h3>
                        <p class="text-xs text-gray-500">재고 관련 알림</p>
                    </div>
                </div>

                <div class="space-y-3">
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div>
                            <p class="text-sm font-medium text-gray-700">재고부족 알림</p>
                            <p class="text-xs text-gray-500">안전재고 이하 시 알림</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox"
                                   name="low_stock_alert"
                                   value="1"
                                   {{ $lowStockAlert ? 'checked' : '' }}
                                   class="sr-only peer">
                            <div class="w-11 h-6 bg-gray-200 peer-focus:ring-2 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <!-- 저장 버튼 -->
        <div class="flex justify-end gap-3 mt-6">
            <button type="submit"
                    @if(!$tenant) disabled @endif
                    class="px-5 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors flex items-center gap-2 text-sm disabled:opacity-50 disabled:cursor-not-allowed">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                저장
            </button>
        </div>
    </form>
</div>
@endsection