@php
    function formatIndianCurrency($amount)
    {
        $amount = (float) $amount;
        $decimal = number_format($amount, 2, '.', '');
        $exploded = explode('.', $decimal);
        $last3 = substr($exploded[0], -3);
        $restUnits = substr($exploded[0], 0, -3);
        if ($restUnits != '') {
            $restUnits = preg_replace("/\B(?=(\d{2})+(?!\d))/", ",", $restUnits);
        }
        return '₹' . $restUnits . $last3 . '.' . $exploded[1];
    }
@endphp

@extends('layouts.admin')

@section('title', 'Active Jobs')
@section('pages', 'Active Jobs')

@section('content')

    <div class="container-fluid py-4 px-4">

        {{-- Page Header --}}
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h4 class="fw-bold mb-1">Active Jobs</h4>
                <p class="text-muted mb-0 small">All currently in-progress projects</p>
            </div>
            <div class="d-flex gap-2 align-items-center">
                <span class="badge rounded-pill px-3 py-2"
                    style="background:#e0f2fe; color:#0369a1; font-size:13px;">
                    <i class="bi bi-bag-fill me-1"></i>
                    {{ $activeJobs->count() }} Active Jobs
                </span>
                <!-- <button class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-download me-1"></i> Export
                </button> -->
            </div>
        </div>

        {{-- Search & Filter Bar --}}
        <div class="bg-white rounded-3 p-3 mb-3 shadow-sm d-flex flex-wrap gap-2 align-items-center"
            style="border:1px solid #f0f0f0;">
            <div class="input-group" style="max-width:280px;">
                <span class="input-group-text bg-white border-end-0 text-muted">
                    <i class="bi bi-search"></i>
                </span>
                <input type="text" class="form-control border-start-0 ps-0"
                    placeholder="Search by client, project...">
            </div>
            <select class="form-select form-select-sm" style="max-width:150px;">
                <option value="">All Statuses</option>
                <option>In Progress</option>
                <option>On Hold</option>
                <option>Review</option>
            </select>
            <select class="form-select form-select-sm" style="max-width:150px;">
                <option value="">All Locations</option>
            </select>
            <button class="btn btn-sm ms-auto"
                style="background:#0ea5e9; color:#fff; padding:6px 16px;">
                <i class="bi bi-funnel me-1"></i> Filter
            </button>
        </div>

        {{-- Table Card --}}
        <div class="bg-white rounded-3 shadow-sm overflow-hidden" style="border:1px solid #f0f0f0;">

            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">

                    <thead style="background:#fafafa; border-bottom:2px solid #f0f0f0;">
                        <tr style="font-size:12px; text-transform:uppercase; letter-spacing:0.5px; color:#888;">
                            <th class="px-4 py-3">Quote No</th>
                            <th class="py-3">Client</th>
                            <th class="py-3">Factory Name</th>
                            <th class="py-3">Factory Location</th>
                            <th class="py-3">Quote Date</th>
                            <th class="py-3">Status</th>
                            <th class="py-3">Estimated Quote</th>
                            <th class="py-3">Final Quote Value</th>
                            <!-- <th class="py-3 text-center">Action</th> -->
                        </tr>
                    </thead>

                    <tbody>
                        @forelse($activeJobs as $order)
                            <tr style="border-bottom:1px solid #f8f8f8; font-size:14px;">

                                {{-- Quote ID --}}
                                <td class="px-4 py-3">
                                    <span class="fw-semibold"
                                        style="color:#0ea5e9; font-family:monospace; font-size:13px;">
                                        {{ strtoupper(substr($order->quotation->state_code ?? '', 0, 2)) }}-{{ \Carbon\Carbon::parse($order->quotation->created_at)->format('y') }}-{{ str_pad($order->quotation->id ?? 0, 3, '0', STR_PAD_LEFT) }}
                                    </span>
                                </td>

                                {{-- Client with Avatar --}}
                                <td class="py-3">
                                    <div class="d-flex align-items-center gap-2">
                                        <!-- <div class="rounded-circle d-flex align-items-center justify-content-center fw-semibold text-white"
                                            style="width:34px; height:34px; min-width:34px; font-size:13px;
                                            background:{{ collect(['#0ea5e9', '#22c55e', '#f59e0b', '#6366f1', '#ef4444', '#8b5cf6'])->random() }};">
                                            {{ strtoupper(substr($order->client_name ?? 'U', 0, 1)) }}
                                        </div> -->
                                        <span class="fw-semibold text-dark">
                                            {{ $order->client_name }}
                                        </span>
                                    </div>
                                </td>

                                {{-- Project Name --}}
                                <td class="py-3">
                                    <div class="fw-semibold text-dark" style="font-size:13px;">
                                        {{ $order->title ?? 'N/A' }}
                                    </div>
                                </td>

                                {{-- Location --}}
                                <td class="py-3">
                                    <div class="d-flex align-items-center gap-1 text-muted" style="font-size:13px;">
                                        <i class="bi bi-geo-alt text-danger" style="font-size:12px;"></i>
                                        {{ $order->location ?? 'N/A' }}
                                    </div>
                                </td>

                                {{-- Date --}}
                                <td class="py-3">
                                    <div style="font-size:13px;" class="text-dark">
                                        {{ \Carbon\Carbon::parse($order->created_at)->format('d M Y') }}
                                    </div>
                                    <div style="font-size:11px;" class="text-muted">
                                        {{ \Carbon\Carbon::parse($order->created_at)->diffForHumans() }}
                                    </div>
                                </td>

                                {{-- Status Badge --}}
                                <td class="py-3">
                                    @php
                                        $statusMap = [
                                            'in-progress' => ['bg' => '#e0f2fe', 'text' => '#0369a1', 'dot' => '#0ea5e9', 'label' => 'In Progress'],
                                            'on-hold' => ['bg' => '#fef9c3', 'text' => '#854d0e', 'dot' => '#eab308', 'label' => 'On Hold'],
                                            'review' => ['bg' => '#ede9fe', 'text' => '#6d28d9', 'dot' => '#8b5cf6', 'label' => 'Review'],
                                            'completed' => ['bg' => '#dcfce7', 'text' => '#15803d', 'dot' => '#22c55e', 'label' => 'Completed'],
                                        ];
                                        $s = $statusMap[strtolower($order->status)] ?? ['bg' => '#f3f4f6', 'text' => '#374151', 'dot' => '#9ca3af', 'label' => ucfirst($order->status)];
                                    @endphp
                                    <span class="d-inline-flex align-items-center gap-1 rounded-pill px-3 py-1"
                                        style="background:{{ $s['bg'] }}; color:{{ $s['text'] }}; font-size:12px; font-weight:500;">
                                        <span class="rounded-circle"
                                            style="width:6px;height:6px;min-width:6px;background:{{ $s['dot'] }};"></span>
                                        {{ $s['label'] }}
                                    </span>
                                </td>

                                {{-- Estimated Cost --}}
                                <td class="py-3">
                                    @if(!empty($order->quotation->estimate_cost))
                                        <div class="fw-semibold text-dark" style="font-size:13px;">
                                            {{ formatIndianCurrency($order->quotation->estimate_cost) }}
                                        </div>
                                    @else
                                        <span class="text-muted" style="font-size:13px;">—</span>
                                    @endif
                                </td>

                                {{-- Final Quote --}}
                                <td class="py-3">
                                    @if(!empty($order->project_cost))
                                        <div class="fw-semibold" style="font-size:13px; color:#15803d;">
                                            {{ formatIndianCurrency($order->project_cost) }}
                                        </div>
                                        {{-- Show variance if both values exist --}}
                                        @if(!empty($order->quotation->estimate_cost))
                                            @php
                                                $diff = $order->project_cost - $order->quotation->estimate_cost;
                                                $pct = $order->quotation->estimate_cost > 0
                                                    ? round(($diff / $order->quotation->estimate_cost) * 100, 1)
                                                    : 0;
                                            @endphp
                                            <div style="font-size:11px; color:{{ $diff > 0 ? '#dc2626' : '#15803d' }}">
                                                <i class="bi bi-arrow-{{ $diff > 0 ? 'up' : 'down' }}-right"></i>
                                                {{ abs($pct) }}% vs estimate
                                            </div>
                                        @endif
                                    @else
                                        <span class="text-muted" style="font-size:13px;">—</span>
                                    @endif
                                </td>

                                {{-- Action --}}
                                <!-- <td class="py-3 text-center">
                                    <div class="d-flex gap-1 justify-content-center">
                                        <a href="{{ route('active.quote', $order->id) }}"
                                            class="btn btn-sm rounded-2"
                                            style="background:#e0f2fe; color:#0369a1; border:none; padding:5px 10px;"
                                            title="View Details">
                                            <i class="bi bi-eye" style="font-size:13px;"></i>
                                        </a>
                                        <button class="btn btn-sm rounded-2"
                                            style="background:#dcfce7; color:#15803d; border:none; padding:5px 10px;"
                                            title="Mark Complete">
                                            <i class="bi bi-check-circle" style="font-size:13px;"></i>
                                        </button>
                                        <button class="btn btn-sm rounded-2"
                                            style="background:#fef9c3; color:#854d0e; border:none; padding:5px 10px;"
                                            title="Put on Hold">
                                            <i class="bi bi-pause-circle" style="font-size:13px;"></i>
                                        </button>
                                    </div>
                                </td> -->

                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" class="text-center py-5">
                                    <div class="py-4">
                                        <div class="mb-3" style="font-size:48px; color:#e5e7eb;">
                                            <i class="bi bi-bag-x"></i>
                                        </div>
                                        <h6 class="text-muted fw-semibold">No active jobs found</h6>
                                        <p class="text-muted small mb-0">No projects are currently in progress.</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>

                </table>
            </div>

            {{-- Footer --}}
            <div class="px-4 py-3 d-flex justify-content-between align-items-center flex-wrap gap-2"
                style="border-top:1px solid #f0f0f0; background:#fafafa;">
                <small class="text-muted">
                    Showing <strong>{{ $activeJobs->count() }}</strong> active job(s)
                </small>
                @if(method_exists($activeJobs, 'links'))
                    {{ $activeJobs->links('pagination::bootstrap-5') }}
                @endif
            </div>

        </div>

    </div>

@endsection