@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;
        }

        /* status variants */
        .aq-status-active {
            background: #ecfdf5;
            color: #15803d;
        }

        .aq-status-pending {
            background: #fef9c3;
            color: #92400e;
        }

        .aq-status-progress {
            background: #eff6ff;
            color: #1d4ed8;
        }

        .aq-status-completed {
            background: #f3e8ff;
            color: #6b21a8;
        }

        .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;
        }

        /* Tabs styling */
        .aq-tabs {
            display: inline-flex;
            flex-wrap: wrap;
            gap: 6px;
            background: #e5e7eb;
            border-radius: 999px;
            padding: 4px;
            margin: 12px 0 20px;
        }

        .aq-tabs .nav-link {
            border-radius: 999px;
            padding: 6px 14px;
            font-size: 12px;
            font-weight: 500;
            color: #4b5563;
            border: none;
        }

        .aq-tabs .nav-link.active {
            background: #111827;
            color: #f9fafb;
        }

        @media (max-width: 576px) {
            .aq-card {
                flex-direction: column;
                align-items: flex-start;
            }

            .aq-actions {
                align-items: flex-start;
            }
        }
    </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 --}}
            <div class="d-flex justify-content-between align-items-center mb-2">
                <div>
                    <h2 class="aq-title mb-0">Project Quotes</h2>
                    <p class="aq-sub mb-0">View and track all your project quotations.</p>
                </div>

                <a href="{{ route('request') }}" class="btn btn-primary" style="border-radius: 999px; font-size:14px;">
                    Add New Quotation / Project
                </a>
            </div>

            {{-- TABS --}}
            <ul class="nav aq-tabs" id="quoteTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="active-tab" data-bs-toggle="tab"
                            data-bs-target="#active-projects" type="button" role="tab">
                        Active Projects
                    </button>
                </li>

                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pending-tab" data-bs-toggle="tab"
                            data-bs-target="#pending-projects" type="button" role="tab">
                        Pending Projects
                    </button>
                </li>

                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="progress-tab" data-bs-toggle="tab"
                            data-bs-target="#progress-projects" type="button" role="tab">
                        In-Progress Projects
                    </button>
                </li>

                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="completed-tab" data-bs-toggle="tab"
                            data-bs-target="#completed-projects" type="button" role="tab">
                        Completed Projects
                    </button>
                </li>
            </ul>

            {{-- TAB CONTENT --}}
            <div class="tab-content" id="quoteTabsContent">

                {{-- ACTIVE PROJECTS --}}
                <div class="tab-pane fade show active" id="active-projects" role="tabpanel" aria-labelledby="active-tab">
                    @forelse($activeProjects ?? [] as $project)
                                            @php
                        $status = strtolower($project->status ?? '');
                        $amount = $project->final_quote ?? optional($project->quotation)->estimate_cost ?? 0;

                        $badgeClass = 'aq-status-active';
                        if ($status === 'pending') {
                            $badgeClass = 'aq-status-pending';
                        } elseif ($status === 'in-progress') {
                            $badgeClass = 'aq-status-progress';
                        } elseif ($status === 'completed') {
                            $badgeClass = 'aq-status-completed';
                        }
                                                @endphp

                                            <div class="aq-card">
                                                {{-- LEFT --}}
                                                <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->client_name ?? $project->name ?? 'NA' }}
                                                    </div>

                                                    <div class="aq-status-badge {{ $badgeClass }}">
                                                        {{ ucfirst($project->status ?? 'Active') }}
                                                    </div>
                                                </div>

                                                {{-- RIGHT --}}
                                                <div class="aq-actions">
                                                    <div class="aq-amount">
                                                        Estimate Cost: ₹ {{ number_format($amount) }}
                                                    </div>
                                                    <div class="aq-quote-id">
                                                        Quote #{{ $project->id }}
                                                    </div>

                                                    @if(strtolower($project->status) !== 'active')
                                                        <a href="{{ route('project.details', $project->id) }}" class="btn btn-primary btn-sm aq-view-btn">
                                                                                        View Project
                                                        </a>
                                                    @endif
                                                </div>
                                            </div>
                    @empty
                        <div class="aq-empty">
                            <i class="bi bi-file-earmark-text mb-2" style="font-size: 24px;"></i>
                            <div>No active projects found.</div>
                        </div>
                    @endforelse
                </div>

                {{-- PENDING PROJECTS --}}
                <div class="tab-pane fade" id="pending-projects" role="tabpanel" aria-labelledby="pending-tab">
                    @forelse($pendingProjects ?? [] as $project)
                                            @php
    $status = strtolower($project->status ?? 'pending');
    $amount = $project->final_quote ?? optional($project->quotation)->estimate_cost ?? 0;

    $badgeClass = 'aq-status-pending';
    if ($status === 'active') {
        $badgeClass = 'aq-status-active';
    } elseif ($status === 'in-progress') {
        $badgeClass = 'aq-status-progress';
    } elseif ($status === 'completed') {
        $badgeClass = 'aq-status-completed';
    }
                                            @endphp

                                            <div class="aq-card">
                                                <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->client_name ?? $project->name ?? 'NA' }}
                                                    </div>

                                                    <div class="aq-status-badge {{ $badgeClass }}">
                                                        {{ ucfirst($project->status ?? 'Pending') }}
                                                    </div>
                                                </div>

                                                <div class="aq-actions">
                                                    <div class="aq-amount">
                                                    Estimate Cost: ₹ {{ number_format($amount) }}
                                                    </div>
                                                    <div class="aq-quote-id">
                                                        Quote #{{ $project->id }}
                                                    </div>

                                                    <a href="{{ route('project.details', $project->id) }}"
                                                       class="btn btn-outline-primary btn-sm aq-view-btn">
                                                        View Project
                                                    </a>
                                                </div>
                                            </div>
                    @empty
                        <div class="aq-empty">
                            No pending projects.
                        </div>
                    @endforelse
                </div>

                {{-- IN-PROGRESS PROJECTS --}}
                <div class="tab-pane fade" id="progress-projects" role="tabpanel" aria-labelledby="progress-tab">
                    @forelse($inProgressProjects ?? [] as $project)
                                            @php
    $status = strtolower($project->status ?? 'in-progress');
    $amount = $project->final_quote ?? optional($project->quotation)->estimate_cost ?? 0;

    $badgeClass = 'aq-status-progress';
    if ($status === 'active') {
        $badgeClass = 'aq-status-active';
    } elseif ($status === 'pending') {
        $badgeClass = 'aq-status-pending';
    } elseif ($status === 'completed') {
        $badgeClass = 'aq-status-completed';
    }
                                            @endphp

                                            <div class="aq-card">
                                                <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">
                                                        Started On:
                                                        {{ optional($project->created_at)->format('d-m-Y') ?? 'NA' }}
                                                        &nbsp; • &nbsp;
                                                        Client:
                                                        {{ $project->client_name ?? $project->name ?? 'NA' }}
                                                    </div>

                                                    <div class="aq-status-badge {{ $badgeClass }}">
                                                        {{ ucfirst($project->status ?? 'In-progress') }}
                                                    </div>
                                                </div>

                                                <div class="aq-actions">
                                                    <div class="aq-amount">
                                                        Estimate Cost: ₹ {{ number_format($amount) }}
                                                    </div>
                                                    <div class="aq-quote-id">
                                                        Quote #{{ $project->id }}
                                                    </div>

                                                    <a href="{{ route('project.details', $project->id) }}"
                                                       class="btn btn-outline-secondary btn-sm aq-view-btn">
                                                        View Project
                                                    </a>
                                                </div>
                                            </div>
                    @empty
                        <div class="aq-empty">
                            No in-progress projects yet.
                        </div>
                    @endforelse
                </div>


                {{-- COMPLETED PROJECTS --}}
                <div class="tab-pane fade" id="completed-projects" role="tabpanel" aria-labelledby="completed-tab">
                    @forelse($completedProjects ?? [] as $project)
                                            @php
    $status = strtolower($project->status ?? 'completed');
    $amount = $project->final_quote ?? optional($project->quotation)->estimate_cost ?? 0;

    $badgeClass = 'aq-status-completed';
    if ($status === 'active') {
        $badgeClass = 'aq-status-active';
    } elseif ($status === 'pending') {
        $badgeClass = 'aq-status-pending';
    } elseif ($status === 'in-progress') {
        $badgeClass = 'aq-status-progress';
    }
                                            @endphp

                                            <div class="aq-card">
                                                <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->client_name ?? $project->name ?? 'NA' }}
                                                    </div>

                                                    <div class="aq-status-badge {{ $badgeClass }}">
                                                        {{ ucfirst($project->status ?? 'Completed') }}
                                                    </div>
                                                </div>

                                                <div class="aq-actions">
                                                    <div class="aq-amount">
                                                        Estimate Cost: ₹ {{ number_format($amount) }}
                                                    </div>
                                                    <div class="aq-quote-id">
                                                        Quote #{{ $project->id }}
                                                    </div>

                                                    {{-- 👇 Only show button when status is COMPLETED --}}
                                                    @if(strtolower($project->status) === 'completed')
                                                        <a href="{{ route('project.details', $project->id) }}"
                                                        class="btn btn-outline-secondary btn-sm aq-view-btn">
                                                            View Details
                                                        </a>
                                                    @endif
                                                </div>
                                            </div>
                    @empty
                        <div class="aq-empty">
                            No completed projects yet.
                        </div>
                    @endforelse
                </div>

            </div> {{-- /.tab-content --}}

        </div>
    </section>
@endsection