@extends('layouts.finance.finance')

@section('content')
    <style>
        /* Custom Scoped Styles to guarantee layout matches the Meking theme */
        .finance-header-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 24px;
        }

        .finance-title {
            font-size: 22px;
            font-weight: 600;
            color: #1e293b;
            margin-bottom: 8px;
        }

        .finance-tabs {
            display: flex;
            gap: 20px;
            margin-top: 5px;
        }

        .finance-tab-link {
            font-size: 14px;
            color: #64748b;
            text-decoration: none;
            padding-bottom: 6px;
            border-bottom: 2px solid transparent;
            transition: all 0.2s;
        }

        .finance-tab-link:hover {
            color: #0f172a;
        }

        .finance-tab-link.active {
            color: #2563eb;
            font-weight: 600;
            border-bottom: 2px solid #2563eb;
        }

        /* New Filter Styles */
        .finance-filters-form {
            display: flex;
            gap: 12px;
            align-items: center;
        }

        .finance-select {
            padding: 8px 32px 8px 12px;
            border: 1px solid #cbd5e1;
            border-radius: 6px;
            font-size: 14px;
            outline: none;
            background-color: white;
            color: #334155;
            cursor: pointer;
            height: 38px;
        }

        .finance-select:focus {
            border-color: #2563eb;
        }

        .finance-search-container {
            position: relative;
            width: 280px;
        }

        .finance-search-input {
            width: 100%;
            height: 38px;
            padding: 8px 16px 8px 36px;
            border: 1px solid #cbd5e1;
            border-radius: 6px;
            font-size: 14px;
            outline: none;
        }

        .finance-search-input:focus {
            border-color: #2563eb;
        }

        .finance-search-icon {
            position: absolute;
            left: 12px;
            top: 11px;
            color: #94a3b8;
        }

        .finance-card {
            background: #ffffff;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            border: 1px solid #f1f5f9;
            padding: 10px 20px;
        }

        .finance-table th {
            font-size: 11px;
            color: #64748b;
            font-weight: 700;
            text-transform: uppercase;
            padding: 16px 10px;
            border-bottom: 1px solid #e2e8f0;
        }

        .finance-table td {
            padding: 16px 10px;
            vertical-align: middle;
            font-size: 14px;
            color: #334155;
            border-bottom: 1px solid #f8fafc;
        }

        .finance-badge {
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .finance-badge.active {
            background: #dcfce7;
            color: #166534;
        }

        .finance-badge.completed {
            background: #f1f5f9;
            color: #475569;
        }

        .status-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: currentColor;
        }
    </style>

    <div class="container-fluid" style="padding: 20px;">

        <!-- Header & Search Area -->
        <div class="finance-header-wrapper">
            <div>
                <h2 class="finance-title">Jobs</h2>

                <!-- Dynamic Tabs -->
                <div class="finance-tabs">
                    <a href="{{ url()->current() }}?status=active"
                        class="finance-tab-link {{ $tabStatus === 'active' ? 'active' : '' }}">
                        Active Jobs
                    </a>
                    <a href="{{ url()->current() }}?status=completed"
                        class="finance-tab-link {{ $tabStatus === 'completed' ? 'active' : '' }}">
                        Completed Jobs
                    </a>
                </div>
            </div>

            <!-- Filters (Year & Search) -->
            <form action="{{ route('finance.jobs') }}" method="GET" class="finance-filters-form">
                <!-- Preserve current tab status -->
                <input type="hidden" name="status" value="{{ $tabStatus }}">

                <!-- Year Filter -->
                <select name="year" class="finance-select" onchange="this.form.submit()">
                    <option value="">All Years</option>
                    @foreach($years ?? [] as $y)
                        <option value="{{ $y }}" {{ request('year') == $y ? 'selected' : '' }}>
                            {{ $y }}
                        </option>
                    @endforeach
                </select>

                <!-- Search Bar -->
                <div class="finance-search-container">
                    <svg class="finance-search-icon" width="16" height="16" fill="none" stroke="currentColor"
                        viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                    <input type="text" name="search" class="finance-search-input"
                        placeholder="Search Job, Name, or Client..." value="{{ request('search') }}">
                </div>

                <!-- Hidden Submit (Allows pressing 'Enter' in search box) -->
                <button type="submit" style="display: none;"></button>
            </form>
        </div>

        <!-- Table Card -->
        <div class="finance-card">
            <div class="table-responsive">
                <table class="table finance-table" style="width: 100%; margin-bottom: 0;">
                    <thead>
                        <tr>
                            <th>JOB NUMBER</th>
                            <th>QUOTE NO.</th>
                            <th>JOB NAME</th>
                            <th>CLIENT</th>
                            <th>JOB VALUE</th>
                            <th>START DATE</th>
                            <th>STATUS</th>
                            <th style="text-align: center;">ACTIONS</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($projects as $project)
                            <tr>
                                <td style="color: #2563eb; font-weight: 500;">
                                    JB-{{ $project->id }}
                                </td>
                                <td>{{ $project->quotation_id ?? '-' }}</td>
                                <td style="font-weight: 500; color: #0f172a;">{{ $project->title }}</td>
                                <td>{{ $project->client_name }}</td>
                                <td>₹{{ number_format($project->project_cost, 2) }}</td>
                                <td>
                                    {{ $project->start_date ? \Carbon\Carbon::parse($project->start_date)->format('d M Y') : '-' }}
                                </td>
                                <td>
                                    @if($tabStatus === 'active')
                                        <span class="finance-badge active">
                                            <span class="status-dot"></span> Active
                                        </span>
                                    @else
                                        <span class="finance-badge completed">
                                            <span class="status-dot"></span> Completed
                                        </span>
                                    @endif
                                </td>
                                <td class="px-6 py-4 text-right">
                                    <a href="{{ route('finance.showProject', $project->id) }}"
                                        class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-blue-600 bg-blue-50 border border-blue-100 rounded hover:bg-blue-100 hover:text-blue-700 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z">
                                            </path>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
                                            </path>
                                        </svg>
                                        View
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" style="text-align: center; padding: 40px 0; color: #94a3b8;">
                                    @if(request('search') || request('year'))
                                        No {{ $tabStatus }} jobs found matching your filters.
                                    @else
                                        No {{ $tabStatus }} jobs found.
                                    @endif
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Pagination -->
        @if($projects->hasPages())
            <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 20px;">
                <div style="font-size: 13px; color: #64748b;">
                    Showing {{ $projects->firstItem() }} to {{ $projects->lastItem() }} of {{ $projects->total() }} entries
                </div>
                <div>
                    {{ $projects->links() }}
                </div>
            </div>
        @endif
    </div>
@endsection