@extends('layouts.user.user')

@section('title', 'Active Quotes')
@section('page', 'Active Quotes')

@section('content')

    <style>
        .aq-wrap {
            min-height: 100vh;
            padding: 24px 16px 60px;
            font-family: 'DM Sans', sans-serif;
            background: #f3f4f8;
        }

        .aq-inner {
            max-width: 1100px;
            margin: 0 auto;
        }

        .aq-title {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 22px;
            margin-bottom: 6px;
        }

        .aq-sub {
            font-size: 13px;
            color: #7A7A8C;
            margin-bottom: 18px;
        }

        .aq-section-heading {
            font-family: 'Syne', sans-serif;
            font-weight: 600;
            font-size: 16px;
            margin: 22px 0 8px;
            color: #111827;
        }

        .aq-card {
            background: #fff;
            border-radius: 16px;
            padding: 16px 18px;
            border: 1px solid rgba(0, 0, 0, .06);
            box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
            margin-bottom: 12px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 12px;
        }

        .aq-project-title {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 16px;
            margin: 0 0 4px;
            color: #111827;
        }

        .aq-meta {
            font-size: 12px;
            color: #6B7280;
            margin-bottom: 4px;
        }

        .aq-status-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 11px;
            padding: 4px 10px;
            border-radius: 999px;
            font-weight: 600;
        }

        /* active / pending */
        .aq-status-active {
            background: #ECFDF5;
            color: #15803D;
        }

        /* completed */
        .aq-status-completed {
            background: #EFF6FF;
            color: #1D4ED8;
        }

        .aq-amount {
            font-size: 14px;
            font-weight: 800;
            color: #111827;
        }

        .aq-quote-id {
            font-size: 11px;
            color: #9CA3AF;
        }

        .aq-actions {
            display: flex;
            flex-direction: column;
            gap: 6px;
            align-items: flex-end;
        }

        .aq-view-btn {
            font-size: 12px;
            padding: 6px 12px;
            border-radius: 999px;
        }

        .aq-empty {
            margin-top: 24px;
            text-align: center;
            color: #6B7280;
            font-size: 14px;
        }
    </style>

    <section class="aq-wrap">
        <div class="aq-inner">

            {{-- Flash messages --}}
            <div class="mb-2">
                @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
            </div>

            {{-- PAGE HEADER --}}
            <h2 class="aq-title">Active Quotes</h2>
            <p class="aq-sub">All projects that are currently in progress for your quotations.</p>

            {{-- ACTIVE / PENDING PROJECTS --}}
            <h4 class="aq-section-heading">In Progress</h4>

            @forelse($activeQuote as $project)
                <div class="aq-card">

                    {{-- LEFT SIDE --}}
                    <div>
                        <h5 class="aq-project-title">
                            {{ $project->title ?? 'Untitled Project' }}
                        </h5>

                        <div class="aq-meta">
                            <i class="bi bi-geo-alt-fill text-danger"></i>
                            {{ $project->location ?? 'Location not specified' }}
                        </div>

                        <div class="aq-meta">
                            Quote Date:
                            {{ optional($project->created_at)->format('d-m-Y') ?? 'NA' }}
                            &nbsp; • &nbsp;
                            Client:
                            {{ $project->name ?? 'NA' }}
                        </div>

                        <div class="aq-status-badge aq-status-active">
                            <i class="bi bi-play-fill"></i>
                            {{ ucfirst($project->status) }}
                        </div>
                    </div>

                    {{-- RIGHT SIDE --}}
                    <div class="aq-actions">
                        <div class="aq-amount">
                            ₹ {{ number_format($project->final_quote ?? $project->estimate_cost ?? 0) }}
                        </div>
                        <div class="aq-quote-id">
                            Quote #{{ $project->id }}
                        </div>

                        {{-- View project button (optional) --}}
                        <a href="{{ route('user.viewProject', $project->id) }}" class="btn btn-primary btn-sm aq-view-btn">
                            View Project
                        </a>
                    </div>
                </div>
            @empty
                <div class="aq-empty">
                    <i class="bi bi-file-earmark-text mb-2" style="font-size: 24px;"></i>
                    <div>No pending quotes found.</div>
                </div>
            @endforelse

            {{-- PAST COMPLETED PROJECTS --}}
            @if(isset($pastProject))
                <h4 class="aq-section-heading">Past Projects</h4>

                @forelse($pastProject as $project)
                    <div class="aq-card">

                        {{-- LEFT SIDE --}}
                        <div>
                            <h5 class="aq-project-title">
                                {{ $project->title ?? 'Untitled Project' }}
                            </h5>

                            <div class="aq-meta">
                                <i class="bi bi-geo-alt-fill text-danger"></i>
                                {{ $project->location ?? 'Location not specified' }}
                            </div>

                            <div class="aq-meta">
                                Completed On:
                                {{ optional($project->updated_at ?? $project->created_at)->format('d-m-Y') ?? 'NA' }}
                                &nbsp; • &nbsp;
                                Client:
                                {{ $project->name ?? 'NA' }}
                            </div>

                            <div class="aq-status-badge aq-status-completed">
                                <i class="bi bi-check-circle-fill"></i>
                                {{ ucfirst($project->status) }}
                            </div>
                        </div>

                        {{-- RIGHT SIDE --}}
                        <div class="aq-actions">
                            <div class="aq-amount">
                                ₹ {{ number_format($project->final_quote ?? $project->estimate_cost ?? 0) }}
                            </div>
                            <div class="aq-quote-id">
                                Quote #{{ $project->id }}
                            </div>

                            <a href="{{ route('user.viewProject', $project->id) }}"
                                class="btn btn-outline-secondary btn-sm aq-view-btn">
                                View Details
                            </a>
                        </div>
                    </div>
                @empty
                    <div class="aq-empty">
                        No completed projects yet.
                    </div>
                @endforelse
            @endif

        </div>
    </section>
@endsection