@extends('layouts.admin')
@section('title', isset($product) ? '編輯考題商品' : '新增考題商品')
@section('content')
<div class="max-w-3xl">
    <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-6">
        <form action="{{ isset($product) ? route('admin.exam-products.update', $product) : route('admin.exam-products.store') }}" method="POST" enctype="multipart/form-data">
            @csrf @if(isset($product)) @method('PUT') @endif
            <div class="space-y-5">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">標題 *</label>
                    <input type="text" name="title" value="{{ old('title', $product->title ?? '') }}" required class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500">
                    @error('title')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">原價 *</label>
                        <input type="number" name="price" step="1" min="0" value="{{ old('price', $product->price ?? 0) }}" required class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500">
                        @error('price')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">庫存數量（留空 = 不限量）</label>
                        <input type="number" name="stock_quantity" step="1" min="0" value="{{ old('stock_quantity', $product->stock_quantity ?? '') }}" class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500">
                        @if(isset($product))
                        <p class="text-xs text-gray-500 mt-1">目前已開通：{{ $product->activatedCount() }}</p>
                        @endif
                        @error('stock_quantity')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>
                </div>

                <div class="border-2 border-gray-100 dark:border-slate-800 rounded-lg p-4 space-y-3">
                    <div class="text-sm font-semibold text-gray-700 dark:text-gray-300">折扣活動（選填）</div>
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">特價</label>
                            <input type="number" name="discount_price" step="1" min="0" value="{{ old('discount_price', $product->discount_price ?? '') }}" class="w-full px-4 py-2 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500">
                            @error('discount_price')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">開始時間</label>
                            <input type="datetime-local" name="discount_starts_at" value="{{ old('discount_starts_at', isset($product) && $product->discount_starts_at ? $product->discount_starts_at->format('Y-m-d\TH:i') : '') }}" class="w-full px-4 py-2 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500">
                        </div>
                        <div>
                            <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">結束時間</label>
                            <input type="datetime-local" name="discount_ends_at" value="{{ old('discount_ends_at', isset($product) && $product->discount_ends_at ? $product->discount_ends_at->format('Y-m-d\TH:i') : '') }}" class="w-full px-4 py-2 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500">
                            @error('discount_ends_at')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                        </div>
                    </div>
                    <p class="text-xs text-gray-400">留空開始/結束時間代表不限制該端；特價需小於原價</p>
                </div>

                <div class="border-2 border-gray-100 dark:border-slate-800 rounded-lg p-4 space-y-3">
                    <div class="text-sm font-semibold text-gray-700 dark:text-gray-300">開賣時間（選填，控制何時可被購買/兌換）</div>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">開始時間</label>
                            <input type="datetime-local" name="sale_starts_at" value="{{ old('sale_starts_at', isset($product) && $product->sale_starts_at ? $product->sale_starts_at->format('Y-m-d\TH:i') : '') }}" class="w-full px-4 py-2 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500">
                        </div>
                        <div>
                            <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">結束時間</label>
                            <input type="datetime-local" name="sale_ends_at" value="{{ old('sale_ends_at', isset($product) && $product->sale_ends_at ? $product->sale_ends_at->format('Y-m-d\TH:i') : '') }}" class="w-full px-4 py-2 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500">
                            @error('sale_ends_at')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                        </div>
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">說明</label>
                    <textarea name="description" rows="4" class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500">{{ old('description', $product->description ?? '') }}</textarea>
                </div>

                <div>
                    <div class="flex items-center justify-between mb-1">
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300">新增檔案</label>
                        @if(isset($product))
                        <a href="{{ route('admin.exam-products.subjects.index', $product) }}" class="text-xs text-blue-600 dark:text-blue-400 hover:underline">管理科目（各科獨立定價）</a>
                        @endif
                    </div>
                    @if(isset($product) && $product->subjects->isEmpty())
                    <p class="text-xs text-amber-600 dark:text-amber-400 mb-2">尚未建立任何科目，檔案會先算「未指定科目」，只有買整包才能下載。要讓考生分科購買，請先到「管理科目」新增科目。</p>
                    @else
                    <p class="text-xs text-gray-400 mb-2">每一列可各自上傳一個 PDF 檔案，並指定屬於哪個科目（不指定 = 只有買整包才能下載）</p>
                    @endif
                    <div id="new-file-rows" class="space-y-2"></div>
                    <button type="button" id="add-file-row" class="mt-2 px-3 py-1.5 text-xs rounded-lg border-2 border-dashed border-gray-300 dark:border-slate-600 text-gray-500 dark:text-gray-400 hover:border-blue-400 hover:text-blue-600">+ 新增一列檔案</button>
                    @error('files.*')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
            </div>
            <div class="flex gap-3 mt-6">
                <button type="submit" class="px-6 py-2.5 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700">{{ isset($product) ? '更新' : '建立' }}</button>
                <a href="{{ route('admin.exam-products.index') }}" class="px-6 py-2.5 bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-gray-300 rounded-lg font-medium">取消</a>
                @if(isset($product))
                <a href="{{ route('admin.exam-products.codes.index', $product) }}" class="ml-auto px-6 py-2.5 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700">序號管理</a>
                @endif
            </div>
        </form>

        @if(isset($product) && $product->files->isNotEmpty())
        {{-- 刻意放在主表單外面：既有檔案的刪除各自要送一個獨立請求，
             嵌套在同一個 <form> 裡是不合法的 HTML，瀏覽器解析後 hidden method 欄位
             會被併入外層表單，結果按刪除檔案卻整個商品被刪掉。 --}}
        <div class="mt-6 pt-6 border-t border-gray-100 dark:border-slate-800">
            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">目前檔案</label>
            <div class="space-y-2">
                @foreach($product->files as $file)
                <div class="flex items-center justify-between px-3 py-2 rounded-lg bg-gray-50 dark:bg-slate-800 border border-gray-200 dark:border-slate-700">
                    <div class="text-sm text-gray-700 dark:text-gray-300">
                        {{ $file->original_name }}
                        <span class="text-xs text-gray-400">（{{ number_format($file->size / 1024, 0) }} KB{{ $file->subject ? '・' . $file->subject->name : '・未指定科目' }}）</span>
                    </div>
                    <form action="{{ route('admin.exam-products.files.destroy', [$product, $file]) }}" method="POST" onsubmit="return confirm('確定刪除此檔案？')">
                        @csrf @method('DELETE')
                        <button type="submit" class="text-red-600 dark:text-red-400 text-xs hover:underline">刪除</button>
                    </form>
                </div>
                @endforeach
            </div>
        </div>
        @endif
    </div>
</div>

<template id="file-row-template">
    <div class="flex flex-wrap sm:flex-nowrap items-center gap-2 file-row">
        <select name="file_subject_ids[]" class="w-full sm:w-40 px-3 py-2 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:border-blue-500">
            <option value="">未指定科目</option>
            @if(isset($product))
            @foreach($product->subjects as $subject)
            <option value="{{ $subject->id }}">{{ $subject->name }}</option>
            @endforeach
            @endif
        </select>
        <input type="file" name="files[]" accept="application/pdf" class="flex-1 min-w-0 px-3 py-2 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:border-blue-500">
        <button type="button" class="remove-file-row px-2 py-2 text-red-500 hover:text-red-700 text-sm">移除</button>
    </div>
</template>

<script>
(function () {
    const container = document.getElementById('new-file-rows');
    const template = document.getElementById('file-row-template');
    const addButton = document.getElementById('add-file-row');

    function addRow() {
        const row = template.content.cloneNode(true);
        row.querySelector('.remove-file-row').addEventListener('click', function (e) {
            e.target.closest('.file-row').remove();
        });
        container.appendChild(row);
    }

    addButton.addEventListener('click', addRow);
    addRow(); // 預設先給一列
})();
</script>
@endsection