@extends('admin.layouts.app')

@section('title', '권종 등록')
@section('page_title', '권종 등록')
@section('page_desc', '상품별 권종/가격(SKU)을 등록합니다.')

@push('head')
    <style>
        /* skus create only (admins edit 스타일 준수) */
        .lbtn{padding:8px 12px;font-size:13px;border-radius:12px;line-height:1.1;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;
            border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);color:inherit;cursor:pointer;}
        .lbtn:hover{background:rgba(255,255,255,.10);text-decoration:none;}
        .lbtn--primary{background:rgba(59,130,246,.88);border-color:rgba(59,130,246,.95);color:#fff;}
        .lbtn--primary:hover{background:rgba(59,130,246,.98);}
        .lbtn--ghost{background:transparent;}
        .lbtn--wide{padding:10px 14px;font-weight:800;}

        .pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:12px;
            border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);}
        .pill--muted{opacity:.9;}
        .mono{padding:4px 8px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);
            font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;}
        .actions{position:sticky;bottom:10px;z-index:5;margin-top:12px;
            display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;
            padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.25);backdrop-filter:blur(10px);}
        .actions__right{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
        .grid{display:grid;grid-template-columns:1fr;gap:12px;max-width:900px;}
        @media (min-width: 980px){ .grid{grid-template-columns:1fr 1fr;} }
        .grid .span2{grid-column:1 / -1;}
        .help{font-size:12px;margin-top:6px;}
    </style>
@endpush

@section('content')
    @php
        $qs = request()->only(['q','category_id','product_id','status','page']);
    @endphp

    <div class="a-card" style="padding:16px; margin-bottom:16px;">
        <div style="display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap;">
            <div>
                <div style="font-weight:900; font-size:16px;">SKU 등록</div>
                <div class="a-muted" style="font-size:12px; margin-top:4px;">상품별 권종/가격(SKU)을 등록합니다.</div>
            </div>

            <a class="lbtn lbtn--ghost"
               href="{{ route('admin.skus.index', $qs) }}">
                ← 목록
            </a>
        </div>
    </div>

    <form id="skuCreateForm"
          method="POST"
          action="{{ route('admin.skus.store') }}"
          onsubmit="this.querySelector('button[type=submit]')?.setAttribute('disabled','disabled');">
        @csrf

        <div class="a-card" style="padding:16px;">
            <div class="grid">
                <div class="a-field span2">
                    <label class="a-label">상품 선택</label>
                    <select class="a-input" name="product_id" id="product_id">
                        <option value="">상품을 선택하세요</option>
                        @foreach(($products ?? []) as $p)
                            @php
                                $pid = (string)($p->id ?? '');
                                $label = trim((string)($p->parent_category_name ?? ''));
                                if ($label !== '') $label .= ' / '.($p->category_name ?? '');
                                else $label = (string)($p->category_name ?? '');
                                $label = trim($label);
                                $label = $label !== '' ? ($label.' - '.($p->name ?? '')) : ($p->name ?? '-');
                            @endphp
                            <option value="{{ $pid }}" {{ (string)old('product_id')===$pid ? 'selected':'' }}>
                                {{ $label }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="a-field">
                    <label class="a-label">SKU 코드(선택)</label>
                    <input class="a-input" name="sku_code" value="{{ old('sku_code') }}" placeholder="예: GOOGLE_10000">
                    <div class="a-muted help">※ 내부 관리용 식별자(없어도 됨)</div>
                </div>

                <div class="a-field">
                    <label class="a-label">정렬(작을수록 우선)</label>
                    <input class="a-input" type="number" name="sort" min="0" value="{{ old('sort', '0') }}">
                </div>

                <div class="a-field">
                    <label class="a-label">권면가(원)</label>
                    <input class="a-input" type="number" name="face_value" id="face_value" min="0" value="{{ old('face_value') }}" placeholder="예: 10000">
                </div>

                <div class="a-field">
                    <label class="a-label">정상가(원)</label>
                    <input class="a-input" type="number" name="normal_price" id="normal_price" min="0" value="{{ old('normal_price') }}" placeholder="예: 10000">
                </div>

                <div class="a-field">
                    <label class="a-label">할인율(%)</label>
                    <input class="a-input" type="number" name="discount_rate" id="discount_rate" min="0" max="99.99" step="0.01" value="{{ old('discount_rate', '0.00') }}">
                </div>

                <div class="a-field">
                    <label class="a-label">판매가 미리보기</label>
                    <div><span class="mono" id="sale_price_preview">-</span></div>
                    <div class="a-muted help">※ 저장 시 서버에서 계산되어 sale_price에 저장됩니다.</div>
                </div>

                <div class="a-field">
                    <label class="a-label">재고방식</label>
                    <select class="a-input" name="stock_mode">
                        @php $sm = (string)old('stock_mode','infinite'); @endphp
                        <option value="infinite" {{ $sm==='infinite'?'selected':'' }}>무한(infinite)</option>
                        <option value="limited"  {{ $sm==='limited'?'selected':'' }}>한정(limited)</option>
                    </select>
                </div>

                <div class="a-field">
                    <label class="a-label">상태</label>
                    <select class="a-input" name="status">
                        @php $st = (string)old('status','active'); @endphp
                        <option value="active" {{ $st==='active'?'selected':'' }}>노출</option>
                        <option value="hidden" {{ $st==='hidden'?'selected':'' }}>숨김</option>
                    </select>
                </div>
            </div>

            <div class="actions">
                <div class="a-muted" style="font-size:12px;">
                    ※ 권면가/정상가/할인율 기반으로 판매가가 계산됩니다.
                </div>
                <div class="actions__right">
                    <a class="lbtn lbtn--ghost" href="{{ route('admin.skus.index', $qs) }}">취소</a>
                    <button class="lbtn lbtn--primary lbtn--wide" type="submit">등록</button>
                </div>
            </div>
        </div>
    </form>

    <script>
        (function(){
            const n = document.getElementById('normal_price');
            const r = document.getElementById('discount_rate');
            const out = document.getElementById('sale_price_preview');

            const fmt = (x) => {
                try { return Number(x).toLocaleString('ko-KR'); } catch (e) { return String(x); }
            };

            const calc = () => {
                const normal = parseInt(n?.value || '0', 10) || 0;
                let rate = parseFloat(r?.value || '0') || 0;
                if (rate < 0) rate = 0;
                if (rate > 99.99) rate = 99.99;
                const sale = Math.floor(normal * (100 - rate) / 100);
                out.textContent = (normal > 0) ? (fmt(sale) + ' 원') : '-';
            };

            n?.addEventListener('input', calc);
            r?.addEventListener('input', calc);
            calc();
        })();
    </script>
@endsection