@extends('layouts.app')

@section('content')
@php
    $totalProjects = $projects->count();
    $activeProjects = $projects->filter(function ($project) {
        return strtolower((string) $project->status) === 'active';
    })->count();
    $inactiveProjects = $totalProjects - $activeProjects;
    $withImages = $projects->filter(function ($project) {
        return !empty($project->image);
    })->count();
@endphp

<div class="row mb-4 align-items-center">
    <div class="col-lg-7">
        <h2 class="fw-bold text-dark mb-1">Project Portfolio</h2>
        <p class="text-secondary mb-0">Manage project cards, stack tags, links, and showcase status from one clean workspace.</p>
    </div>
    <div class="col-lg-5 text-lg-end mt-3 mt-lg-0">
        <a href="{{ route('projects.create') }}" class="btn btn-primary btn-lg shadow-sm rounded-3 px-4 py-2">
            <i class="bi bi-plus-circle-fill me-2"></i> Add New Project
        </a>
    </div>
</div>

@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show rounded-4 shadow-sm mb-4 border-0 p-3" role="alert">
        <div class="d-flex align-items-center">
            <div class="bg-success text-white rounded-circle p-2 me-3 d-flex align-items-center justify-content-center success-icon">
                <i class="bi bi-check-lg"></i>
            </div>
            <div>
                <strong class="d-block">Success!</strong>
                <span class="small">{{ session('success') }}</span>
            </div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

<div class="row g-3 mb-4">
    <div class="col-md-6 col-xl-3">
        <div class="card border-0 shadow-sm rounded-4 h-100 stats-card">
            <div class="card-body p-4">
                <span class="stats-label">Total Projects</span>
                <div class="d-flex align-items-end justify-content-between mt-3">
                    <h3 class="fw-bold text-dark mb-0">{{ $totalProjects }}</h3>
                    <div class="stats-icon bg-primary-subtle text-primary">
                        <i class="bi bi-grid"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-xl-3">
        <div class="card border-0 shadow-sm rounded-4 h-100 stats-card">
            <div class="card-body p-4">
                <span class="stats-label">Active</span>
                <div class="d-flex align-items-end justify-content-between mt-3">
                    <h3 class="fw-bold text-dark mb-0">{{ $activeProjects }}</h3>
                    <div class="stats-icon bg-success-subtle text-success">
                        <i class="bi bi-rocket-takeoff"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-xl-3">
        <div class="card border-0 shadow-sm rounded-4 h-100 stats-card">
            <div class="card-body p-4">
                <span class="stats-label">Inactive</span>
                <div class="d-flex align-items-end justify-content-between mt-3">
                    <h3 class="fw-bold text-dark mb-0">{{ $inactiveProjects }}</h3>
                    <div class="stats-icon bg-warning-subtle text-warning">
                        <i class="bi bi-pause-circle"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-xl-3">
        <div class="card border-0 shadow-sm rounded-4 h-100 stats-card">
            <div class="card-body p-4">
                <span class="stats-label">With Images</span>
                <div class="d-flex align-items-end justify-content-between mt-3">
                    <h3 class="fw-bold text-dark mb-0">{{ $withImages }}</h3>
                    <div class="stats-icon bg-info-subtle text-info">
                        <i class="bi bi-image"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card border-0 shadow-sm rounded-4 mb-4">
    <div class="card-body p-4">
        <form action="{{ route('projects.index') }}" method="GET" class="row g-3 align-items-end">
            <div class="col-lg-5">
                <label for="search" class="form-label fw-semibold text-dark small">Search Project</label>
                <div class="input-group">
                    <span class="input-group-text bg-light border-0">
                        <i class="bi bi-search text-secondary"></i>
                    </span>
                    <input
                        type="text"
                        name="search"
                        id="search"
                        class="form-control bg-light border-0"
                        placeholder="Search by project name"
                        value="{{ request('search') }}"
                    >
                </div>
            </div>
            <div class="col-lg-4">
                <label for="technology" class="form-label fw-semibold text-dark small">Filter By Technology</label>
                <select name="technology" id="technology" class="form-select bg-light border-0">
                    <option value="">All technologies</option>
                    @foreach($technologies as $technology)
                        <option value="{{ $technology->id }}" {{ (string) request('technology') === (string) $technology->id ? 'selected' : '' }}>
                            {{ $technology->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-lg-3">
                <div class="d-flex flex-wrap gap-2">
                    <button type="submit" class="btn btn-primary rounded-3 px-4 flex-fill">
                        <i class="bi bi-funnel-fill me-2"></i> Apply
                    </button>
                    <a href="{{ route('projects.index') }}" class="btn btn-light border rounded-3 px-4">
                        Reset
                    </a>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="card border-0 shadow-sm rounded-4 overflow-hidden">
    <div class="card-header bg-white border-bottom py-3 px-4 d-flex align-items-center justify-content-between">
        <h6 class="m-0 fw-bold text-dark">Project Library</h6>
        <span class="badge bg-light text-dark border rounded-pill px-3 py-2">{{ $totalProjects }} records</span>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="text-secondary small text-uppercase fw-bold" style="background-color: #f8fafc;">
                    <tr>
                        <th class="px-4 py-3" style="width: 80px;">SL.NO</th>
                        <th class="py-3">Project</th>
                        <th class="py-3">Technology Stack</th>
                        <th class="py-3">Links</th>
                        <th class="py-3">Status</th>
                        <th class="py-3">Updated</th>
                        <th class="px-4 py-3 text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($projects as $project)
                        @php
                            $isActive = strtolower((string) $project->status) === 'active';
                        @endphp
                        <tr class="transition-all">
                            <td class="px-4 py-4 text-secondary fw-medium">{{ $loop->iteration }}</td>
                            <td class="py-4">
                                <div class="d-flex align-items-start gap-3">
                                    @if(!empty($project->image))
                                        <img src="{{ asset('storage/' . $project->image) }}" alt="{{ $project->project_name }}" class="project-thumb">
                                    @else
                                        <div class="project-thumb project-thumb-fallback">
                                            <i class="bi bi-code-slash"></i>
                                        </div>
                                    @endif
                                    <div>
                                        <span class="d-block fw-bold text-dark h6 mb-1">{{ $project->project_name }}</span>
                                        <p class="text-secondary small mb-0">{{ \Illuminate\Support\Str::limit($project->short_description, 95) }}</p>
                                    </div>
                                </div>
                            </td>
                            <td class="py-4">
                                @if($project->technologies->isNotEmpty())
                                    <div class="d-flex flex-wrap gap-2">
                                        @foreach($project->technologies as $technology)
                                            <span class="tech-chip">
                                                <span class="tech-chip-dot" style="background-color: {{ $technology->color ?: '#3b82f6' }};"></span>
                                                {{ $technology->name }}
                                            </span>
                                        @endforeach
                                    </div>
                                @else
                                    <span class="badge bg-light text-secondary border rounded-pill px-3 py-2">No tags</span>
                                @endif
                            </td>
                            <td class="py-4">
                                <div class="d-flex flex-column gap-2">
                                    @if($project->github_link)
                                        <a href="{{ $project->github_link }}" target="_blank" rel="noopener" class="link-pill text-decoration-none">
                                            <i class="bi bi-github"></i> GitHub
                                        </a>
                                    @endif
                                    @if($project->live_demo_link)
                                        <a href="{{ $project->live_demo_link }}" target="_blank" rel="noopener" class="link-pill text-decoration-none">
                                            <i class="bi bi-box-arrow-up-right"></i> Live Demo
                                        </a>
                                    @endif
                                    @if(!$project->github_link && !$project->live_demo_link)
                                        <span class="badge bg-light text-secondary border rounded-pill px-3 py-2 align-self-start">No links</span>
                                    @endif
                                </div>
                            </td>
                            <td class="py-4">
                                <span class="badge rounded-pill px-3 py-2 {{ $isActive ? 'bg-success-subtle text-success' : 'bg-warning-subtle text-warning' }}">
                                    {{ ucfirst($project->status) }}
                                </span>
                            </td>
                            <td class="py-4 text-secondary">
                                <span class="d-block small fw-bold text-dark mb-1">
                                    {{ $project->updated_at ? $project->updated_at->format('d M, Y') : 'Not updated yet' }}
                                </span>
                                <span class="small">
                                    {{ $project->updated_at ? $project->updated_at->diffForHumans() : 'Fresh draft' }}
                                </span>
                            </td>
                            <td class="px-4 py-4 text-end">
                                <div class="d-flex justify-content-end gap-2">
                                    <a href="{{ route('projects.show', $project->id) }}" class="btn btn-light btn-sm rounded-3 border text-info" title="View Project">
                                        <i class="bi bi-eye"></i>
                                    </a>
                                    <a href="{{ route('projects.edit', $project->id) }}" class="btn btn-light btn-sm rounded-3 border text-primary" title="Edit Project">
                                        <i class="bi bi-pencil-square"></i>
                                    </a>
                                    <button
                                        type="button"
                                        class="btn btn-light btn-sm rounded-3 border text-danger"
                                        title="Delete Project"
                                        data-bs-toggle="modal"
                                        data-bs-target="#deleteProjectModal"
                                        data-project-name="{{ $project->project_name }}"
                                        data-delete-url="{{ route('projects.destroy', $project->id) }}"
                                    >
                                        <i class="bi bi-trash3"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center py-5">
                                <div class="empty-state-icon mx-auto mb-4">
                                    <i class="bi bi-folder2-open"></i>
                                </div>
                                <h5 class="text-dark fw-bold">No Projects Added Yet</h5>
                                <p class="text-secondary mb-4">Create your first project card to start building a stronger portfolio showcase.</p>
                                <a href="{{ route('projects.create') }}" class="btn btn-primary rounded-3 px-4">Create First Project</a>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal fade" id="deleteProjectModal" tabindex="-1" aria-labelledby="deleteProjectModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg rounded-4 overflow-hidden">
            <div class="modal-body p-4 p-md-5">
                <div class="delete-modal-icon mx-auto mb-4">
                    <i class="bi bi-trash3"></i>
                </div>
                <div class="text-center">
                    <h5 class="fw-bold text-dark mb-2" id="deleteProjectModalLabel">Delete this project?</h5>
                    <p class="text-secondary mb-2">This action will permanently remove the selected project and its linked technology mapping.</p>
                    <p class="text-dark fw-semibold mb-0" id="deleteProjectName"></p>
                </div>
            </div>
            <div class="modal-footer border-0 pt-0 px-4 px-md-5 pb-4 pb-md-5 d-flex justify-content-center gap-2">
                <button type="button" class="btn btn-light border rounded-3 px-4" data-bs-dismiss="modal">Cancel</button>
                <form id="deleteProjectForm" method="POST" class="m-0">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger rounded-3 px-4 shadow-sm">
                        Delete Project
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('styles')
<style>
    .transition-all {
        transition: all 0.2s ease-in-out;
    }
    .table tbody tr:hover {
        background-color: #f8fafc !important;
        transform: scale(1.002);
    }
    .stats-card {
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    }
    .stats-label {
        color: #64748b;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-weight: 700;
    }
    .stats-icon,
    .success-icon {
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        font-size: 1.15rem;
    }
    .project-thumb {
        width: 74px;
        height: 74px;
        border-radius: 18px;
        object-fit: cover;
        border: 1px solid #e2e8f0;
        flex-shrink: 0;
    }
    .project-thumb-fallback {
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(145deg, #dbeafe 0%, #eff6ff 100%);
        color: #2563eb;
        font-size: 1.4rem;
    }
    .tech-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.4rem 0.75rem;
        border-radius: 999px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        color: #334155;
        font-size: 0.82rem;
        font-weight: 600;
    }
    .tech-chip-dot {
        width: 9px;
        height: 9px;
        border-radius: 999px;
        flex-shrink: 0;
    }
    .link-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        color: #1d4ed8;
        font-size: 0.85rem;
        font-weight: 600;
    }
    .link-pill:hover {
        color: #1e40af;
    }
    .bg-primary-subtle {
        background-color: #eff6ff !important;
    }
    .bg-success-subtle {
        background-color: #ecfdf5 !important;
    }
    .bg-warning-subtle {
        background-color: #fffbeb !important;
    }
    .bg-info-subtle {
        background-color: #ecfeff !important;
    }
    .text-success {
        color: #10b981 !important;
    }
    .text-warning {
        color: #d97706 !important;
    }
    .text-info {
        color: #0891b2 !important;
    }
    .empty-state-icon,
    .delete-modal-icon {
        width: 72px;
        height: 72px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 24px;
        font-size: 1.8rem;
    }
    .empty-state-icon {
        background: linear-gradient(145deg, #dbeafe 0%, #eff6ff 100%);
        color: #2563eb;
    }
    .delete-modal-icon {
        background: linear-gradient(145deg, #fee2e2 0%, #fecaca 100%);
        color: #dc2626;
    }
    .input-group-text {
        border: none !important;
    }
    @media (max-width: 767.98px) {
        .project-thumb {
            width: 62px;
            height: 62px;
        }
    }
</style>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const deleteProjectModal = document.getElementById('deleteProjectModal');
        const deleteProjectForm = document.getElementById('deleteProjectForm');
        const deleteProjectName = document.getElementById('deleteProjectName');

        if (!deleteProjectModal || !deleteProjectForm || !deleteProjectName) {
            return;
        }

        deleteProjectModal.addEventListener('show.bs.modal', function (event) {
            const triggerButton = event.relatedTarget;

            if (!triggerButton) {
                return;
            }

            deleteProjectForm.setAttribute('action', triggerButton.getAttribute('data-delete-url'));
            deleteProjectName.textContent = triggerButton.getAttribute('data-project-name')
                ? '"' + triggerButton.getAttribute('data-project-name') + '"'
                : '';
        });
    });
</script>
@endsection