@extends('layouts.admin')

@section('page_title', 'All Projects')

@section('content')
    <div class="row align-items-center mb-5">
        <div class="col">
            <h2 class="fw-extrabold tracking-tight mb-1" style="font-weight: 800; font-size: 1.875rem;">Project Management
            </h2>
            <p class="text-secondary opacity-75 mb-0">Track and manage organizational projects, tasks, and progress.</p>
        </div>
        <div class="col-auto">
            <a href="{{ route('admin.projects.create') }}"
                class="btn btn-primary px-4 py-2 fw-bold d-flex align-items-center gap-2 shadow-lg"
                style="border-radius: 0.625rem; font-size: 0.9375rem;">
                <span class="material-symbols-outlined" style="font-size: 1.25rem;">add_box</span>
                Create Project
            </a>
        </div>
    </div>

    <!-- Filters Bar -->
    <div class="card border-0 shadow-sm mb-5"
        style="border-radius: 0.875rem; border: 1px solid rgba(0,0,0,0.05) !important;">
        <div class="card-body p-4">
            <div class="row g-4 align-items-end">
                <div class="col-lg-6">
                    <label class="text-uppercase fw-bold text-secondary mb-2 d-block"
                        style="font-size: 0.65rem; letter-spacing: 0.05rem;">Search Projects</label>
                    <div class="input-group">
                        <span class="input-group-text bg-light border-0 px-3"><span
                                class="material-symbols-outlined text-secondary opacity-50"
                                style="font-size: 1.25rem;">search</span></span>
                        <input type="text" class="form-control border-0 bg-light py-2"
                            placeholder="Project name or keyword..." style="font-size: 0.875rem;">
                    </div>
                </div>
                <div class="col-lg-3">
                    <label class="text-uppercase fw-bold text-secondary mb-2 d-block"
                        style="font-size: 0.65rem; letter-spacing: 0.05rem;">Status</label>
                    <select class="form-select border-0 bg-light py-2" style="font-size: 0.875rem;">
                        <option value="">All Status</option>
                        <option value="active">Active Projects</option>
                        <option value="completed">Completed</option>
                        <option value="on-hold">On Hold</option>
                    </select>
                </div>
                <div class="col-lg-3">
                    <button class="btn btn-light w-100 fw-bold py-2" style="font-size: 0.875rem; background: #eaedf2;"
                        onclick="location.reload()">Reset Filters</button>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        @foreach ($projects as $project)
            <div class="col-xxl-4 col-lg-6">
                <div class="card border-0 shadow-sm h-100 project-card transition-all"
                    style="border-radius: 1rem; border: 1px solid rgba(0,0,0,0.05) !important;">
                    <div class="card-body p-4">
                        <div class="d-flex justify-content-between align-items-start mb-4">
                            @php
                                $statusColor =
                                    $project->status == 'active'
                                        ? '#4f46e5'
                                        : ($project->status == 'completed'
                                            ? '#059669'
                                            : '#64748b');
                                $statusBg =
                                    $project->status == 'active'
                                        ? '#eef2ff'
                                        : ($project->status == 'completed'
                                            ? '#ecfdf5'
                                            : '#f1f5f9');
                            @endphp
                            <span class="px-3 py-1 rounded-pill text-uppercase fw-bold"
                                style="font-size: 0.625rem; background-color: {{ $statusBg }}; color: {{ $statusColor }}; border: 1px solid {{ $statusColor }}20;">
                                {{ $project->status }}
                            </span>

                            <div class="dropdown">
                                <button class="btn btn-icon btn-sm" data-bs-toggle="dropdown">
                                    <span class="material-symbols-outlined fs-5">more_vert</span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end border-0 shadow-lg p-2 rounded-3">
                                    <li><a class="dropdown-item rounded-2 py-2 small"
                                            href="{{ route('admin.projects.edit', $project->id) }}"><i
                                                class="bi bi-pencil me-2"></i> Edit Details</a></li>
                                    <li>
                                        <hr class="dropdown-divider opacity-50">
                                    </li>
                                    <li>
                                        <form action="{{ route('admin.projects.destroy', $project->id) }}" method="POST"
                                            id="delProj-{{ $project->id }}">
                                            @csrf @method('DELETE')
                                            <button type="button" onclick="confirmDelete('{{ $project->id }}')"
                                                class="dropdown-item rounded-2 py-2 small text-danger"><i
                                                    class="bi bi-trash me-2"></i> Delete Project</button>
                                        </form>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <h5 class="fw-bold text-dark mb-2 tracking-tight">{{ $project->name }}</h5>
                        <p class="text-secondary opacity-75 mb-4 leading-relaxed"
                            style="font-size: 0.875rem; height: 3.5rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">
                            {{ $project->description }}
                        </p>

                        <!-- Progress Bar -->
                        <div class="mb-5">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span class="text-uppercase fw-bold text-secondary"
                                    style="font-size: 0.65rem; letter-spacing: 0.05rem;">Overall Progress</span>
                                <span class="fw-bold text-dark"
                                    style="font-size: 0.8125rem;">{{ $project->progress }}%</span>
                            </div>
                            <div class="progress rounded-pill bg-light" style="height: 6px; overflow: visible;">
                                <div class="progress-bar rounded-pill shadow-sm transition-all" role="progressbar"
                                    style="width: {{ $project->progress }}%; background-color: {{ $statusColor }};"
                                    aria-valuenow="{{ $project->progress }}" aria-valuemin="0" aria-valuemax="100">
                                </div>
                            </div>
                        </div>

                        <!-- Footer -->
                        <div class="d-flex justify-content-between align-items-center mt-auto pt-3 border-top">
                            <div class="d-flex align-items-center gap-2">
                                <span class="material-symbols-outlined text-secondary opacity-50"
                                    style="font-size: 1.1rem;">corporate_fare</span>
                                <span class="fw-bold text-dark"
                                    style="font-size: 0.75rem;">{{ $project->department->name ?? 'General' }}</span>
                            </div>
                            <a href="{{ route('projects.show', $project->id) }}"
                                class="btn btn-primary btn-sm px-3 py-1.5 fw-bold rounded-pill shadow-sm"
                                style="font-size: 0.75rem;">
                                Kanban Board
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
@endsection

@push('styles')
    <style>
        .tracking-tight {
            letter-spacing: -0.015rem;
        }

        .project-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.075) !important;
        }

        .btn-icon {
            padding: 0.4rem;
            border-radius: 0.5rem;
            color: #94a3b8;
            background: transparent;
            border: 0;
            transition: all 0.2s;
        }

        .btn-icon:hover {
            color: #1a1f2e;
            background: #eaedf2;
        }

        .progress-bar {
            transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }
    </style>
@endpush

@push('scripts')
    <script>
        function confirmDelete(id) {
            Swal.fire({
                title: 'Delete Project?',
                text: "All associated tasks and board data will be permanently removed.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc2626',
                cancelButtonColor: '#64748b',
                confirmButtonText: 'Yes, Delete Project',
                borderRadius: '1rem'
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById(`delProj-${id}`).submit();
                }
            });
        }
    </script>
@endpush