@extends('layouts.admin')

@section('page-title', 'Projects')

@section('content')

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

            {{-- Success Message --}}
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show d-flex align-items-center gap-2 mb-4"
                    style="border-radius:10px; border:none; background:#dcfce7; color:#15803d;">
                    <i class="bi bi-check-circle-fill"></i>
                    {{ session('success') }}
                    <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
                </div>
            @endif

            {{-- Page Header --}}
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h4 class="fw-bold mb-1">All Projects</h4>
                    <p class="text-muted mb-0 small">Track progress, status and quotes for every project</p>
                </div>
                <a href="{{ route('adminProjects.create') }}" class="btn btn-sm fw-semibold"
                    style="background:#0d6efd; color:#fff; padding:8px 18px; border-radius:8px;">
                    <i class="bi bi-plus-lg me-1"></i> Add New Project
                </a>
            </div>

            {{-- Stats Row --}}
            <div class="row g-3 mb-4">
                @php
    $allCount = $projects->count();
    $activeCount = $projects->where('status', 'active')->count();
    $completedCount = $projects->where('status', 'completed')->count();
    $pendingCount = $projects->where('status', 'pending')->count();
                @endphp

                <div class="col-6 col-md-3">
                    <div class="rounded-3 p-3 d-flex align-items-center gap-3"
                        style="background:#eff6ff; border:1px solid #bfdbfe;">
                        <div class="rounded-circle d-flex align-items-center justify-content-center"
                            style="width:42px;height:42px;background:#0d6efd;">
                            <i class="bi bi-folder-fill text-white" style="font-size:16px;"></i>
                        </div>
                        <div>
                            <div class="fw-bold" style="font-size:22px; color:#1e3a8a;">{{ $allCount }}</div>
                            <div class="text-muted small">Total Projects</div>
                        </div>
                    </div>
                </div>

                <div class="col-6 col-md-3">
                    <div class="rounded-3 p-3 d-flex align-items-center gap-3"
                        style="background:#e0f2fe; border:1px solid #bae6fd;">
                        <div class="rounded-circle d-flex align-items-center justify-content-center"
                            style="width:42px;height:42px;background:#0ea5e9;">
                            <i class="bi bi-play-circle-fill text-white" style="font-size:16px;"></i>
                        </div>
                        <div>
                            <div class="fw-bold" style="font-size:22px; color:#0c4a6e;">{{ $activeCount }}</div>
                            <div class="text-muted small">Active Jobs</div>
                        </div>
                    </div>
                </div>

                <div class="col-6 col-md-3">
                    <div class="rounded-3 p-3 d-flex align-items-center gap-3"
                        style="background:#dcfce7; border:1px solid #bbf7d0;">
                        <div class="rounded-circle d-flex align-items-center justify-content-center"
                            style="width:42px;height:42px;background:#22c55e;">
                            <i class="bi bi-check-circle-fill text-white" style="font-size:16px;"></i>
                        </div>
                        <div>
                            <div class="fw-bold" style="font-size:22px; color:#14532d;">{{ $completedCount }}</div>
                            <div class="text-muted small">Completed Jobs</div>
                        </div>
                    </div>
                </div>

                <div class="col-6 col-md-3">
                    <div class="rounded-3 p-3 d-flex align-items-center gap-3"
                        style="background:#fef9c3; border:1px solid #fde68a;">
                        <div class="rounded-circle d-flex align-items-center justify-content-center"
                            style="width:42px;height:42px;background:#eab308;">
                            <i class="bi bi-hourglass-split text-white" style="font-size:16px;"></i>
                        </div>
                        <div>
                            <div class="fw-bold" style="font-size:22px; color:#713f12;">{{ $pendingCount }}</div>
                            <div class="text-muted small">Pending Jobs</div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- 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" id="searchInput" class="form-control border-start-0 ps-0"
                        placeholder="Search project, client...">
                </div>

                <select id="statusFilter" class="form-select form-select-sm" style="max-width:160px;">
                    <option value="">All Statuses</option>
                    @foreach($statuses as $status)
                        <option value="{{ $status }}">{{ ucfirst($status) }}</option>
                    @endforeach
                </select>

                <select id="regionFilter" class="form-select form-select-sm" style="max-width:160px;">
                    <option value="">All Regions</option>
                    @foreach($regions as $region)
                        <option value="{{ strtolower($region) }}">
                            {{ strtoupper($region) }}
                        </option>
                    @endforeach
                </select>

                <button id="resetFilters" class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-x-circle me-1"></i> Reset
                </button>

                <span class="ms-auto text-muted small">
                    Showing <strong id="visibleCount">{{ $projects->count() }}</strong> projects
                </span>
            </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" id="projectsTable">

                        <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">Project</th>
                                <th class="py-3">Client</th>
                                <th class="py-3">Status</th>
                                <th class="py-3" style="min-width:160px;">Factory Progress</th>
                                <th class="py-3">Closure Date</th>
                                <th class="py-3">Tonnage</th>
                                <th class="py-3">Final Quote</th>
                                <th class="py-3 text-center">Action</th>
                            </tr>
                        </thead>

                        <tbody id="projectsTableBody">
                            @forelse($projects as $project)
                                                @php
        $statusColors = [
            'active' => ['bg' => '#eff6ff', 'text' => '#1d4ed8', 'dot' => '#0d6efd'],
            'pending' => ['bg' => '#fef9c3', 'text' => '#854d0e', 'dot' => '#eab308'],
            'completed' => ['bg' => '#dcfce7', 'text' => '#15803d', 'dot' => '#22c55e'],
            'cancelled' => ['bg' => '#fee2e2', 'text' => '#dc2626', 'dot' => '#ef4444'],
            'in-progress' => ['bg' => '#e0f2fe', 'text' => '#0369a1', 'dot' => '#0ea5e9'],
        ];
        $s = $statusColors[strtolower($project->status)] ?? ['bg' => '#f3f4f6', 'text' => '#374151', 'dot' => '#9ca3af'];
        $prog = $project->progress ?? 0;
        $pColor = $prog < 40 ? '#ef4444' : ($prog < 70 ? '#eab308' : '#22c55e');
                                                @endphp

                                                <tr data-title="{{ strtolower($project->title ?? '') }}"
                                                    data-client="{{ strtolower($project->client_name ?? '') }}"
                                                    data-status="{{ strtolower($project->status) }}"
                                                    data-region="{{ strtolower(optional($project->quotation)->state_code ?? '') }}" data-quote="{{ strtolower(
            $project->quotation
            ? strtoupper(substr($project->quotation->state_code ?? '', 0, 2)) . '-' .
            \Carbon\Carbon::parse($project->quotation->created_at)->format('y') . '-' .
            str_pad($project->quotation->id ?? 0, 3, '0', STR_PAD_LEFT)
            : ''
        ) }}">


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

                                                    {{-- Project Title --}}
                                                    <td class="py-3">
                                                        <div class="fw-semibold text-dark" style="font-size:14px;">
                                                            {{ $project->title }}
                                                        </div>
                                                    </td>

                                                    {{-- Client with Avatar --}}
                                                    <td class="py-3">
                                                        <div class="d-flex align-items-center gap-2">
                                                            <span style="font-size:13px;">{{ $project->client_name }}</span>
                                                        </div>
                                                    </td>

                                                    {{-- Status --}}
                                                    <td class="py-3">
                                                        <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>
                                                            {{ ucfirst($project->status) }}
                                                        </span>
                                                    </td>

                                                    {{-- Progress --}}
                                                    <td class="py-3">
                                                        <div class="d-flex align-items-center gap-2">
                                                            <div class="flex-grow-1"
                                                                style="background:#f1f5f9; border-radius:99px; height:7px; overflow:hidden;">
                                                                <div
                                                                    style="width:{{ $prog }}%; height:100%; background:{{ $pColor }}; border-radius:99px; transition:width 0.4s;">
                                                                </div>
                                                            </div>
                                                            <span style="font-size:12px; font-weight:600; color:{{ $pColor }}; min-width:32px;">
                                                                {{ $prog }}%
                                                            </span>
                                                        </div>
                                                    </td>

                                                    {{-- Closure Date --}}
                                                    <td class="py-3">
                                                        @if($project->expected_closure_date)
                                                            @php
            $closure = \Carbon\Carbon::parse($project->expected_closure_date);
            $overdue = $closure->isPast() && strtolower($project->status) !== 'completed';
                                                            @endphp
                                                            <div style="font-size:13px;"
                                                                class="{{ $overdue ? 'text-danger fw-semibold' : 'text-dark' }}">
                                                                {{ $closure->format('d M Y') }}
                                                            </div>
                                                            @if($overdue)
                                                                <div style="font-size:11px;" class="text-danger">
                                                                    <i class="bi bi-exclamation-circle me-1"></i>Overdue
                                                                </div>
                                                            @else
                                                                <div style="font-size:11px;" class="text-muted">
                                                                    {{ $closure->diffForHumans() }}
                                                                </div>
                                                            @endif
                                                        @else
                                                            <span class="text-muted" style="font-size:13px;">—</span>
                                                        @endif
                                                    </td>

                                                    {{-- Tonnage --}}
                                                    <td class="py-3">
                                                        <span style="font-size:13px;" class="text-dark">
                                                            {{ $project->tonnage ? $project->tonnage . ' T' : '—' }}
                                                        </span>
                                                    </td>

                                                    {{-- Final Quote --}}
                                                    <td class="py-3">
                                                        @if($project->final_quote_value)
                                                            <span class="fw-semibold" style="font-size:13px; color:#15803d;">
                                                                ₹{{ number_format($project->final_quote_value, 0) }}
                                                            </span>
                                                        @else
                                                            <span class="text-muted" style="font-size:13px;">—</span>
                                                        @endif
                                                    </td>

                                                    {{-- Actions --}}
                                                    <td class="py-3 text-center">
                                                        <div class="d-flex gap-1 justify-content-center">
                                                            <a href="{{ route('adminProjects.edit', $project->id) }}" class="btn btn-sm rounded-2"
                                                                style="background:#eff6ff; color:#0d6efd; border:none; padding:5px 10px;"
                                                                title="Edit Project">
                                                                <i class="bi bi-pencil" style="font-size:13px;"></i>
                                                            </a>
                                                            <a href="{{ route('admin.chat', $project->quotation->id ?? 0) }}"
                                                                class="btn btn-sm rounded-2"
                                                                style="background:#dcfce7; color:#15803d; border:none; padding:5px 10px;"
                                                                title="Open Chat">
                                                                <i class="bi bi-chat-dots" style="font-size:13px;"></i>
                                                            </a>
                                                        </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-folder2-open"></i>
                                            </div>
                                            <h6 class="text-muted fw-semibold">No projects found</h6>
                                            <p class="text-muted small mb-0">Try adjusting your filters or add a new project.</p>
                                            <a href="{{ route('adminProjects.create') }}" class="btn btn-sm mt-3"
                                                style="background:#0d6efd; color:#fff; border-radius:8px;">
                                                <i class="bi bi-plus-lg me-1"></i> Add New Project
                                            </a>
                                        </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">
                        <strong id="footerCount">{{ $projects->count() }}</strong> project(s) shown
                    </small>
                    @if(method_exists($projects, 'links'))
                        {{ $projects->links('pagination::bootstrap-5') }}
                    @endif
                </div>

            </div>

        </div>

        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const searchInput = document.getElementById('searchInput');
                const statusFilter = document.getElementById('statusFilter');
                const regionFilter = document.getElementById('regionFilter');
                const resetBtn = document.getElementById('resetFilters');
                // const rows = document.querySelectorAll('#projectsTableBody tr[data-title]');
                const visibleCount = document.getElementById('visibleCount');
                const footerCount = document.getElementById('footerCount');

                function filterTable() {
                    const rows = document.querySelectorAll('#projectsTableBody tr[data-title]');

                    const search = searchInput.value.toLowerCase().trim();
                    const status = statusFilter.value.toLowerCase();
                    const region = regionFilter.value.toLowerCase();
                    let count = 0;

                    rows.forEach(row => {
                    const title = (row.dataset.title || '').toLowerCase();
                    const client = (row.dataset.client || '').toLowerCase();
                    const quote = (row.dataset.quote || '').toLowerCase();
                    const rowStatus = (row.dataset.status || '').toLowerCase();
                    const rowRegion = (row.dataset.region || '').toLowerCase();

                    const titleMatch =
                        !search ||
                        title.includes(search) ||
                        client.includes(search) ||
                        quote.includes(search);

                    const statusMatch = !status || rowStatus === status;
                    const regionMatch = !region || rowRegion === region;

                    // ✅ FINAL CONDITION
                    const show = titleMatch && statusMatch && regionMatch;

                    row.style.display = show ? '' : 'none';

                    if (show) count++;
                    });
                    visibleCount.textContent = count;
                    footerCount.textContent = count;
                        }

                resetBtn.addEventListener('click', function () {
                    searchInput.value = '';
                    statusFilter.value = '';
                    regionFilter.value = '';
                    filterTable();
                });

                searchInput.addEventListener('input', filterTable);
                statusFilter.addEventListener('change', filterTable);
                regionFilter.addEventListener('change', filterTable);
            });
        </script>

@endsection