@extends('layouts.app')

@section('content')
<div class="container py-5">
    <h1 class="text-center mb-4" style="font-weight:600;">VIMS</h1>
    <p class="text-center mb-2" style="font-size:1.25rem;color:#666;">Valuation Information Management System</p>
    @auth
    <div class="dashboard-cards">
        <a href="{{ url('/jpph') }}" class="dashboard-card">
            <span class="dashboard-icon">
                <svg width="64" height="64" fill="none" stroke="#e57373" stroke-width="2" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="20" rx="2"/><path d="M8 2v4a2 2 0 0 0 2 2h4"/></svg>
            </span>
            <span class="dashboard-label">JPPH Data</span>
        </a>
        <a href="{{ url('/valuations') }}" class="dashboard-card">
            <span class="dashboard-icon">
                <svg width="64" height="64" fill="#e57373" viewBox="0 0 24 24"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v6c0 1.657 4.03 3 9 3s9-1.343 9-3V5"/><path d="M3 11v6c0 1.657 4.03 3 9 3s9-1.343 9-3v-6"/></svg>
            </span>
            <span class="dashboard-label">Sales Transactions</span>
        </a>
        <a href="{{ url('/indications') }}" class="dashboard-card">
            <span class="dashboard-icon">
                <svg width="64" height="64" fill="none" stroke="#e57373" stroke-width="2" viewBox="0 0 24 24"><path d="M4 20V8m0 0l6 6 5-5 5 5"/><path d="M20 20H4"/></svg>
            </span>
            <span class="dashboard-label">Indication Transactions</span>
        </a>
        <div class="dashboard-card disabled">
            <span class="dashboard-icon">
                <svg width="64" height="64" fill="none" stroke="#bdbdbd" stroke-width="2" viewBox="0 0 24 24"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5z"/></svg>
            </span>
            <span class="dashboard-label">Job Book</span>
        </div>
    </div>
    @endauth
</div>
<style>
    .dashboard-cards {
        display: flex;
        gap: 3rem;
        justify-content: center;
        align-items: flex-start;
        margin-top: 2rem;
        flex-wrap: wrap;
    }
    .dashboard-card {
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        padding: 2rem 2.5rem 1.5rem 2.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: #222;
        transition: box-shadow 0.2s, transform 0.2s;
        min-width: 180px;
        min-height: 220px;
        cursor: pointer;
    }
    .dashboard-card:hover:not(.disabled) {
        box-shadow: 0 4px 16px rgba(229, 115, 115, 0.15);
        transform: translateY(-4px) scale(1.03);
    }
    .dashboard-icon {
        margin-bottom: 1.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .dashboard-label {
        font-size: 1.25rem;
        font-weight: 500;
        margin-top: 0.5rem;
        color: #222;
    }
    .dashboard-card.disabled {
        opacity: 0.5;
        pointer-events: none;
        background: #f5f5f5;
        color: #bdbdbd;
        box-shadow: none;
    }
    @media (max-width: 900px) {
        .dashboard-cards {
            flex-direction: column;
            align-items: center;
            gap: 2rem;
        }
    }
</style>
@endsection