@extends('layouts.app')

@section('title', '首頁 - 閱讀卡管理平台')

@section('content')
<div class="row justify-content-center">
    <div class="col-lg-10">
        <div class="card">
            <div class="card-body py-5">
                <div class="text-center mb-4">
                    <div class="d-inline-flex align-items-center justify-content-center rounded-circle mb-3" style="width:80px;height:80px;background:linear-gradient(135deg,#3498db,#1abc9c);">
                        <i class="bi bi-credit-card-2-front text-white" style="font-size:2.2rem;"></i>
                    </div>
                    <h2 class="fw-bold">閱讀卡管理平台</h2>
                    <p class="text-muted">此平台提供線上製卡申請</p>
                </div>
                <div class="row g-3 justify-content-center">
                    @if(auth()->user()->hasRole(['teacher', 'school', 'staff', 'admin']))
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <a href="{{ route('apply.create') }}" class="text-decoration-none">
                            <div class="card h-100 text-center border-0" style="background:#f0f9ff;transition:transform .2s;" onmouseover="this.style.transform='translateY(-4px)'" onmouseout="this.style.transform=''">
                                <div class="card-body py-4">
                                    <i class="bi bi-plus-circle text-primary" style="font-size:2rem;"></i>
                                    <div class="mt-2 fw-semibold text-dark">我要申請</div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <a href="{{ route('apply.index') }}" class="text-decoration-none">
                            <div class="card h-100 text-center border-0" style="background:#f0fdf4;transition:transform .2s;" onmouseover="this.style.transform='translateY(-4px)'" onmouseout="this.style.transform=''">
                                <div class="card-body py-4">
                                    <i class="bi bi-list-ul text-success" style="font-size:2rem;"></i>
                                    <div class="mt-2 fw-semibold text-dark">申請紀錄</div>
                                </div>
                            </div>
                        </a>
                    </div>
                    @endif
                    @if(auth()->user()->hasRole(['school', 'staff', 'admin']))
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <a href="{{ route('check.index') }}" class="text-decoration-none">
                            <div class="card h-100 text-center border-0" style="background:#fefce8;transition:transform .2s;" onmouseover="this.style.transform='translateY(-4px)'" onmouseout="this.style.transform=''">
                                <div class="card-body py-4">
                                    <i class="bi bi-check-circle text-warning" style="font-size:2rem;"></i>
                                    <div class="mt-2 fw-semibold text-dark">閱讀卡審核</div>
                                </div>
                            </div>
                        </a>
                    </div>
                    @endif
                    @if(auth()->user()->hasRole(['school', 'staff', 'admin']))
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <a href="{{ route('card.index') }}" class="text-decoration-none">
                            <div class="card h-100 text-center border-0" style="background:#eff6ff;transition:transform .2s;" onmouseover="this.style.transform='translateY(-4px)'" onmouseout="this.style.transform=''">
                                <div class="card-body py-4">
                                    <i class="bi bi-credit-card text-info" style="font-size:2rem;"></i>
                                    <div class="mt-2 fw-semibold text-dark">閱讀卡處理作業</div>
                                </div>
                            </div>
                        </a>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection