@extends('layouts.app')

@section('title', '명함신청')

@section('content')
<div class="max-w-4xl mx-auto space-y-6">
    <!-- 페이지 헤더 -->
    <div>
        <h1 class="text-2xl font-bold text-gray-800">명함신청</h1>
        <p class="text-sm text-gray-500 mt-1">명함 인쇄를 신청합니다. 신청 후 본사에서 처리합니다.</p>
    </div>

    <!-- 명함 제작 신청 및 일정 안내 -->
    <div class="bg-gradient-to-r from-indigo-50 to-blue-50 border border-indigo-200 rounded-xl p-5 relative overflow-hidden">
        {{-- 배경 장식 --}}
        <div class="absolute top-0 right-0 opacity-[0.07]" style="transform: translate(20px, -10px);">
            <svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="10" y="30" width="140" height="85" rx="8" stroke="#4338ca" stroke-width="3"/>
                <rect x="20" y="40" width="55" height="10" rx="3" fill="#4338ca"/>
                <rect x="20" y="56" width="40" height="6" rx="2" fill="#4338ca" opacity="0.6"/>
                <rect x="20" y="68" width="50" height="6" rx="2" fill="#4338ca" opacity="0.4"/>
                <rect x="20" y="80" width="35" height="6" rx="2" fill="#4338ca" opacity="0.3"/>
                <rect x="95" y="50" width="35" height="35" rx="6" fill="#4338ca" opacity="0.15"/>
                <path d="M112.5 60 L112.5 78 M103.5 69 L121.5 69" stroke="#4338ca" stroke-width="2.5" stroke-linecap="round" opacity="0.4"/>
            </svg>
        </div>

        {{-- 제목 --}}
        <div class="flex items-center gap-2.5 mb-3">
            <div class="shrink-0 w-9 h-9 rounded-lg bg-indigo-600 flex items-center justify-center">
                <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                </svg>
            </div>
            <h3 class="text-base font-bold text-indigo-900">명함 제작 신청 및 일정 안내</h3>
        </div>

        {{-- 안내 문구 --}}
        <p class="text-sm text-indigo-700 mb-4 leading-relaxed">
            원활한 업무 지원을 위해 명함 제작 일정을 다음과 같이 안내드립니다.<br>
            일정에 맞춰 신청해 주시기 바랍니다.
        </p>

        {{-- 일정 정보 --}}
        <div class="space-y-2.5">
            <div class="flex items-start gap-3">
                <div class="shrink-0 w-7 h-7 rounded-full bg-amber-100 flex items-center justify-center mt-0.5">
                    <svg class="w-4 h-4 text-amber-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
                <div>
                    <span class="text-sm font-semibold text-gray-800">신청 마감</span>
                    <p class="text-sm text-gray-600">매주 <span class="font-semibold text-indigo-700">월요일 오후 3시</span> <span class="text-xs text-gray-400">(이후 신청 건은 익주 접수)</span></p>
                </div>
            </div>
            <div class="flex items-start gap-3">
                <div class="shrink-0 w-7 h-7 rounded-full bg-blue-100 flex items-center justify-center mt-0.5">
                    <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                    </svg>
                </div>
                <div>
                    <span class="text-sm font-semibold text-gray-800">제작 소요</span>
                    <p class="text-sm text-gray-600">접수 마감 후 영업일 기준 <span class="font-semibold text-indigo-700">1~2일</span></p>
                </div>
            </div>
            <div class="flex items-start gap-3">
                <div class="shrink-0 w-7 h-7 rounded-full bg-emerald-100 flex items-center justify-center mt-0.5">
                    <svg class="w-4 h-4 text-emerald-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"/>
                    </svg>
                </div>
                <div>
                    <span class="text-sm font-semibold text-gray-800">배송 기간</span>
                    <p class="text-sm text-gray-600">제작 완료 후 <span class="font-semibold text-indigo-700">2~3일</span> 내 수령 <span class="text-xs text-gray-400">(택배사 사정에 따라 변동 가능)</span></p>
                </div>
            </div>
        </div>
    </div>

    <!-- 회사 정보 안내 -->
    <div class="bg-gray-50 border border-gray-200 rounded-lg px-4 py-3">
        <div class="flex items-center gap-4 text-sm text-gray-600">
            <span class="font-medium text-gray-700">명함 인쇄 정보</span>
            <span>회사명: <span class="font-medium">(주)코드브릿지엑스</span></span>
            <span class="text-gray-300">|</span>
            <span>서비스: <span class="font-medium">SAM</span></span>
        </div>
        <p class="text-xs text-gray-400 mt-1">* 아래 입력하신 정보가 명함에 인쇄됩니다.</p>
    </div>

    <!-- 신청 폼 -->
    <div class="bg-white rounded-lg shadow-sm p-6">
        <h2 class="text-lg font-semibold text-gray-800 mb-4">명함 신청</h2>

        @if(session('success'))
        <div class="mb-4 p-3 bg-emerald-50 border border-emerald-200 text-emerald-700 rounded-lg text-sm">
            {{ session('success') }}
        </div>
        @endif

        @if($errors->any())
        <div class="mb-4 p-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm">
            <ul class="list-disc list-inside">
                @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif

        <form method="POST" action="{{ route('sales.business-cards.store') }}">
            @csrf
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">성함 <span class="text-red-500">*</span></label>
                    <input type="text" name="name" value="{{ old('name', $user->name) }}" required
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
                           placeholder="명함에 인쇄될 이름">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">직함</label>
                    <input type="text" name="title" value="{{ old('title') }}"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
                           placeholder="예: 영업팀장, 대리">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">전화번호 <span class="text-red-500">*</span></label>
                    <input type="text" name="phone" value="{{ old('phone', $user->phone) }}" required
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
                           placeholder="010-0000-0000">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">이메일</label>
                    <input type="email" name="email" value="{{ old('email', $user->email) }}"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
                           placeholder="example@email.com">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">수량</label>
                    <input type="number" name="quantity" value="{{ old('quantity', 500) }}" min="1" max="9999"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
                           placeholder="500">
                    <p class="text-xs text-gray-400 mt-1">기본 500매</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">메모</label>
                    <input type="text" name="memo" value="{{ old('memo') }}"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
                           placeholder="특이사항이 있으면 입력하세요">
                </div>
            </div>
            <div class="mt-6">
                <button type="submit"
                        class="w-full sm:w-auto px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition text-sm">
                    명함 신청하기
                </button>
            </div>
        </form>
    </div>

    <!-- 내 신청 이력 -->
    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-semibold text-gray-800">내 신청 이력</h2>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">신청일</th>
                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">성함</th>
                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">직함</th>
                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">전화번호</th>
                        <th class="px-4 py-2 text-center text-xs font-medium text-gray-500 uppercase">수량</th>
                        <th class="px-4 py-2 text-center text-xs font-medium text-gray-500 uppercase">상태</th>
                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">처리일</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @forelse($myRequests as $req)
                    <tr class="hover:bg-gray-50">
                        <td class="px-4 py-3 text-sm text-gray-700">{{ $req->created_at->format('Y-m-d') }}</td>
                        <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ $req->name }}</td>
                        <td class="px-4 py-3 text-sm text-gray-600">{{ $req->title ?: '-' }}</td>
                        <td class="px-4 py-3 text-sm text-gray-600">{{ $req->phone }}</td>
                        <td class="px-4 py-3 text-sm text-gray-700 text-center">{{ number_format($req->quantity) }}매</td>
                        <td class="px-4 py-3 text-center">
                            @if($req->status === 'pending')
                                <span class="px-2 py-0.5 text-xs font-medium rounded-full bg-yellow-100 text-yellow-800">요청</span>
                            @elseif($req->status === 'ordered')
                                <span class="px-2 py-0.5 text-xs font-medium rounded-full bg-blue-100 text-blue-800">제작중</span>
                            @else
                                <span class="px-2 py-0.5 text-xs font-medium rounded-full bg-emerald-100 text-emerald-800">처리완료</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-sm text-gray-500">
                            {{ $req->processed_at?->format('Y-m-d') ?? '-' }}
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="px-4 py-8 text-center text-gray-500 text-sm">
                            신청 이력이 없습니다.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($myRequests->hasPages())
        <div class="px-4 py-2 border-t border-gray-200 bg-gray-50">
            {{ $myRequests->links() }}
        </div>
        @endif
    </div>
</div>
@endsection
