@extends('layouts.app')

@section('title', '공장 키오스크')

@push('styles')
<style>
    .fc { max-width: 1100px; margin: 0 auto; padding: 32px 20px 48px; }
    .fc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
    .fc-header h1 { font-size: 1.5rem; font-weight: 700; color: #1e293b; }
    .fc-header .back-link { display: inline-flex; align-items: center; gap: 6px; color: #64748b; text-decoration: none; font-size: 0.85rem; transition: color 0.15s; }
    .fc-header .back-link:hover { color: #16a34a; }

    /* 시나리오 흐름 */
    .fc-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
    .fc-flow-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px 16px; text-align: center; position: relative; }
    .fc-flow-num { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: #fff; margin-bottom: 10px; }
    .fc-flow-card h3 { font-size: 1rem; font-weight: 600; color: #1e293b; margin-bottom: 6px; }
    .fc-flow-card p { font-size: 0.8rem; color: #64748b; line-height: 1.5; }
    .fc-flow-arrow { position: absolute; right: -12px; top: 50%; transform: translateY(-50%); color: #cbd5e1; font-size: 1.1rem; font-weight: 700; z-index: 1; }

    /* SAM 자산 바 */
    .fc-assets { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 14px 20px; margin-bottom: 32px; }
    .fc-assets-title { font-size: 0.82rem; font-weight: 600; color: #1e293b; margin-bottom: 8px; }
    .fc-assets-tags { display: flex; flex-wrap: wrap; gap: 8px; }
    .fc-asset-tag { display: inline-block; padding: 4px 12px; border-radius: 6px; font-size: 0.75rem; font-weight: 500; background: #fff; border: 1px solid #bbf7d0; }
    .fc-asset-tag.blue { color: #1d4ed8; }
    .fc-asset-tag.green { color: #15803d; }
    .fc-asset-tag.orange { color: #d97706; }

    /* 기능 섹션 */
    .fc-section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
    .fc-section-title .bar { width: 4px; height: 22px; border-radius: 2px; flex-shrink: 0; }
    .fc-section-title h2 { font-size: 1.1rem; font-weight: 700; color: #1e293b; }
    .fc-sections { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .fc-sec { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 22px; }
    .fc-sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
    .fc-sec-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .fc-sec-icon svg { width: 15px; height: 15px; }
    .fc-sec h3 { font-size: 1rem; font-weight: 600; color: #1e293b; }
    .fc-sec > p { color: #94a3b8; font-size: 0.8rem; margin-bottom: 14px; }
    .fc-sec-detail { background: #f8fafc; border-radius: 8px; padding: 14px 16px; }
    .fc-sec-detail li { font-size: 0.8rem; color: #334155; padding: 4px 0; list-style: none; display: flex; align-items: flex-start; gap: 8px; }
    .fc-sec-detail li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; }
    .fc-sec.production li::before { background: #16a34a; }
    .fc-sec.work-order li::before { background: #2563eb; }
    .fc-sec.stats li::before { background: #d97706; }
    .fc-sec.notices li::before { background: #dc2626; }
    .fc-placeholder { background: #f8fafc; border: 2px dashed #e2e8f0; border-radius: 8px; padding: 32px 20px; text-align: center; color: #94a3b8; font-size: 0.82rem; margin-top: 12px; }

    @media (max-width: 768px) {
        .fc-flow { grid-template-columns: repeat(2, 1fr); }
        .fc-flow-arrow { display: none; }
        .fc-sections { grid-template-columns: 1fr; }
    }
</style>
@endpush

@section('content')
<div class="fc">
    <div class="fc-header">
        <h1>공장 키오스크</h1>
        <a href="{{ route('additional.kiosk.index') }}" class="back-link">
            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
            키오스크 메인으로
        </a>
    </div>

    {{-- 활용 시나리오 흐름 --}}
    <div class="fc-flow">
        <div class="fc-flow-card">
            <div class="fc-flow-num" style="background:#2563eb;">1</div>
            <h3>작업 지시 조회</h3>
            <p>오늘의 작업 목록 공정별/라인별 지시서</p>
            <span class="fc-flow-arrow">&rsaquo;</span>
        </div>
        <div class="fc-flow-card">
            <div class="fc-flow-num" style="background:#16a34a;">2</div>
            <h3>생산 현황</h3>
            <p>실시간 진행률 목표 대비 실적 확인</p>
            <span class="fc-flow-arrow">&rsaquo;</span>
        </div>
        <div class="fc-flow-card">
            <div class="fc-flow-num" style="background:#d97706;">3</div>
            <h3>실적 입력</h3>
            <p>완료 수량 터치 입력 불량/비고 기록</p>
            <span class="fc-flow-arrow">&rsaquo;</span>
        </div>
        <div class="fc-flow-card">
            <div class="fc-flow-num" style="background:#7c3aed;">4</div>
            <h3>통계 조회</h3>
            <p>일별/주별 실적 라인별 생산성 비교</p>
        </div>
    </div>

    {{-- SAM 기존 자산 활용 --}}
    <div class="fc-assets">
        <div class="fc-assets-title">SAM 기존 자산 활용</div>
        <div class="fc-assets-tags">
            <span class="fc-asset-tag blue">Worker Screen (/production/worker-screen)</span>
            <span class="fc-asset-tag green">생산 통계 테이블</span>
            <span class="fc-asset-tag orange">작업 지시 데이터</span>
        </div>
    </div>

    {{-- 기능 섹션 --}}
    <div class="fc-section-title">
        <div class="bar" style="background:#16a34a;"></div>
        <h2>기능 구성</h2>
    </div>
    <div class="fc-sections">
        <div class="fc-sec production">
            <div class="fc-sec-head">
                <div class="fc-sec-icon" style="background:#dcfce7; color:#16a34a;">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
                </div>
                <h3>생산 현황</h3>
            </div>
            <p>오늘의 생산 진행 상황을 실시간으로 확인합니다</p>
            <div class="fc-sec-detail">
                <ul>
                    <li>오늘 생산 목표 대비 실적 진행률</li>
                    <li>라인별/공정별 현황 대시보드</li>
                    <li>자동 새로고침 (실시간 갱신)</li>
                    <li>이상 발생 시 경고 표시</li>
                </ul>
            </div>
            <div class="fc-placeholder">생산 현황 영역 &middot; Worker Screen, 통계 테이블 연동 예정</div>
        </div>

        <div class="fc-sec work-order">
            <div class="fc-sec-head">
                <div class="fc-sec-icon" style="background:#dbeafe; color:#2563eb;">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" /></svg>
                </div>
                <h3>작업 지시</h3>
            </div>
            <p>현재 진행 중인 작업 지시서를 조회합니다</p>
            <div class="fc-sec-detail">
                <ul>
                    <li>오늘 배정된 작업 지시 목록</li>
                    <li>공정 순서 및 우선순위 표시</li>
                    <li>제품 사양/수량/납기 정보</li>
                    <li>종이 지시서 없이 터치로 확인</li>
                </ul>
            </div>
            <div class="fc-placeholder">작업 지시 영역 &middot; 작업 지시서 목록 표시 예정</div>
        </div>

        <div class="fc-sec stats">
            <div class="fc-sec-head">
                <div class="fc-sec-icon" style="background:#fef3c7; color:#d97706;">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" /></svg>
                </div>
                <h3>생산 통계</h3>
            </div>
            <p>일별, 주별 생산 실적과 목표 달성률을 확인합니다</p>
            <div class="fc-sec-detail">
                <ul>
                    <li>일별/주별/월별 생산 실적 차트</li>
                    <li>라인별 생산성 비교 그래프</li>
                    <li>목표 달성률 및 추이</li>
                    <li>불량률 통계 및 분석</li>
                </ul>
            </div>
            <div class="fc-placeholder">생산 통계 영역 &middot; 생산 실적 차트 표시 예정</div>
        </div>

        <div class="fc-sec notices">
            <div class="fc-sec-head">
                <div class="fc-sec-icon" style="background:#fee2e2; color:#dc2626;">
                    <svg 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>
                <h3>공지사항</h3>
            </div>
            <p>공장 내 공지사항과 안전 수칙을 확인합니다</p>
            <div class="fc-sec-detail">
                <ul>
                    <li>공장 전체 공지사항 게시</li>
                    <li>안전 수칙 및 주의사항</li>
                    <li>설비 점검/정비 일정</li>
                    <li>긴급 공지 상단 고정 표시</li>
                </ul>
            </div>
            <div class="fc-placeholder">공지사항 영역 &middot; 공장 공지사항 표시 예정</div>
        </div>
    </div>
</div>
@endsection