@extends('layouts.app')

@section('title', '일정 상세')

@section('content')
<div class="container mx-auto px-4 py-6 max-w-2xl">
    {{-- 페이지 헤더 --}}
    <div class="flex justify-between items-start mb-6">
        <div>
            <a href="{{ route('finance.fund-schedules.index') }}" class="text-sm text-gray-500 hover:text-gray-700 inline-flex items-center gap-1 mb-2">
                <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="M15 19l-7-7 7-7"/>
                </svg>
                자금계획일정으로
            </a>
            <h1 class="text-2xl font-bold text-gray-800">{{ $schedule->title }}</h1>
            <div class="flex items-center gap-2 mt-1">
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $schedule->type_color_class }}">
                    {{ $schedule->type_label }}
                </span>
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $schedule->status_color_class }}">
                    {{ $schedule->status_label }}
                </span>
            </div>
        </div>
        <a href="{{ route('finance.fund-schedules.edit', $schedule->id) }}"
           class="inline-flex items-center gap-2 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
            <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
            </svg>
            수정
        </a>
    </div>

    {{-- 상세 정보 카드 --}}
    <div class="bg-white rounded-lg shadow-sm p-6 space-y-6">
        {{-- 금액 --}}
        <div class="text-center py-4 border-b">
            <div class="text-sm text-gray-500">예정 금액</div>
            <div class="text-3xl font-bold {{ $schedule->schedule_type === 'income' ? 'text-green-600' : 'text-red-600' }}">
                {{ $schedule->schedule_type === 'expense' ? '-' : '+' }}{{ number_format($schedule->amount) }}원
            </div>
            @if($schedule->isCompleted() && $schedule->completed_amount)
            <div class="text-sm text-gray-500 mt-1">
                실제 완료: {{ number_format($schedule->completed_amount) }}원
            </div>
            @endif
        </div>

        {{-- 기본 정보 --}}
        <div class="grid grid-cols-2 gap-4">
            <div>
                <div class="text-sm text-gray-500">예정일</div>
                <div class="font-medium">{{ $schedule->scheduled_date->format('Y년 m월 d일') }}</div>
            </div>
            @if($schedule->completed_date)
            <div>
                <div class="text-sm text-gray-500">완료일</div>
                <div class="font-medium">{{ $schedule->completed_date->format('Y년 m월 d일') }}</div>
            </div>
            @endif
            <div>
                <div class="text-sm text-gray-500">거래상대방</div>
                <div class="font-medium">{{ $schedule->counterparty ?? '-' }}</div>
            </div>
            <div>
                <div class="text-sm text-gray-500">분류</div>
                <div class="font-medium">{{ $schedule->category ?? '-' }}</div>
            </div>
        </div>

        @if($schedule->bankAccount)
        <div>
            <div class="text-sm text-gray-500">{{ $schedule->isIncome() ? '입금 계좌' : '출금 계좌' }}</div>
            <div class="font-medium">{{ $schedule->bankAccount->bank_name }} - {{ $schedule->bankAccount->account_number }}</div>
        </div>
        @endif

        @if($schedule->description)
        <div>
            <div class="text-sm text-gray-500">설명</div>
            <div class="text-gray-700 whitespace-pre-line">{{ $schedule->description }}</div>
        </div>
        @endif

        @if($schedule->memo)
        <div>
            <div class="text-sm text-gray-500">메모</div>
            <div class="text-gray-700 whitespace-pre-line">{{ $schedule->memo }}</div>
        </div>
        @endif

        {{-- 상태 변경 버튼 --}}
        @if($schedule->isPending())
        <div class="flex gap-3 pt-4 border-t">
            <button type="button"
                    hx-patch="{{ route('api.admin.fund-schedules.status', $schedule->id) }}"
                    hx-vals='{"status": "completed"}'
                    hx-headers='{"X-CSRF-TOKEN": "{{ csrf_token() }}"}'
                    hx-confirm="이 일정을 완료 처리하시겠습니까?"
                    class="flex-1 px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors text-center">
                완료 처리
            </button>
            <button type="button"
                    hx-patch="{{ route('api.admin.fund-schedules.status', $schedule->id) }}"
                    hx-vals='{"status": "cancelled"}'
                    hx-headers='{"X-CSRF-TOKEN": "{{ csrf_token() }}"}'
                    hx-confirm="이 일정을 취소하시겠습니까?"
                    class="flex-1 px-4 py-2 border border-gray-300 text-gray-700 hover:bg-gray-50 rounded-lg transition-colors text-center">
                취소
            </button>
        </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.body.addEventListener('htmx:afterRequest', function(event) {
        if (event.detail.successful) {
            window.location.reload();
        }
    });
</script>
@endpush
