@extends('layouts.admin')

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

@section('content')
    <div class="quote all-project mx-3 p-4 my-3">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h5 class="mb-0">All Projects</h5>
            <a href="{{ route('adminProjects.create') }}" class="btn btn-primary">
                <i class="bi bi-plus-circle me-2"></i>Add New Project
            </a>
        </div>

        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <div class="card shadow-sm border-0">
            <div class="card-body">
                <div class="d-flex flex-wrap g-4 justify-content-between align-items-center mb-3">
                    <h6 class="fw-bold mb-0">Projects List</h6>
                    <div class="d-flex gap-2 controls">
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-search"></i></span>
                            <input type="text" class="form-control" placeholder="Search projects...">
                        </div>
                        <select class="form-select">
                            <option>All Status</option>
                            <option>Active</option>
                            <option>Pending</option>
                            <option>Completed</option>
                        </select>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table align-middle mb-0">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Title</th>
                                <th>Client</th>
                                <th>Status</th>
                                <th>Priority</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($projects as $project)
                                <tr>
                                    <td class="active">#{{ str_pad($project->id, 3, '0', STR_PAD_LEFT) }}</td>
                                    <td class="active">{{ $project->title }}</td>
                                    <td class="active">{{ $project->client_name }}</td>
                                    <td class="active">
                                        @php
                                            $statusColors = [
                                                'active' => ['bg' => '#E7F1FF', 'color' => '#0d6efd'],
                                                'pending' => ['bg' => '#C8B20A1F', 'color' => '#C8B20A'],
                                                'completed' => ['bg' => '#52B8571F', 'color' => '#0AC84D'],
                                                'cancelled' => ['bg' => '#C80A0A1F', 'color' => '#EC140D'],
                                            ];
                                            $status = strtolower($project->status);
                                            $colors = $statusColors[$status] ?? ['bg' => '#E7F1FF', 'color' => '#0d6efd'];
                                        @endphp
                                        <span class="d-inline-flex align-items-center px-3 py-1 rounded-pill"
                                              style="background:{{ $colors['bg'] }};color:{{ $colors['color'] }};font-weight:500;">
                                            <i class="bi bi-circle-fill me-1" 
                                               style="font-size:8px;color:{{ $colors['color'] }};"></i>
                                            {{ ucfirst($project->status) }}
                                        </span>
                                    </td>
                                    <td class="active" style="min-width: 150px;">
                                        @php
                                            $priority = strtolower($project->priority_level);
                                            $progressValues = [
                                                'low' => ['value' => 30, 'color' => 'bg-secondary'],
                                                'medium' => ['value' => 60, 'color' => 'bg-warning'],
                                                'high' => ['value' => 100, 'color' => 'bg-danger'],
                                            ];
                                            $progress = $progressValues[$priority] ?? ['value' => 0, 'color' => 'bg-secondary'];
                                        @endphp

                                        <div class="progress" style="height: 8px;">
                                            <div class="progress-bar {{ $progress['color'] }}" 
                                                role="progressbar" 
                                                style="width: {{ $progress['value'] }}%;" aria-valuenow="{{ $progress['value'] }}" aria-valuemin="0" aria-valuemax="100">
                                            </div>
                                        </div>
                                        <small class="text-muted d-block mt-1 text-capitalize">
                                            {{ $project->priority_level ?? 'N/A' }}
                                        </small>
                                    </td>

                                    <td class="active">
                                        <div class="d-flex gap-2">
                                            <a href="{{ route('adminProjects.show', $project->id) }}" class="btn btn-sm btn-outline-primary" title="View">  
                                                <i class="bi bi-eye"></i>
                                            </a>
                                            <a href="{{ route('adminProjects.edit', $project->id) }}" class="btn btn-sm btn-outline-secondary" title="Edit">    
                                                <i class="bi bi-pencil"></i>
                                            </a>
                                            <form action="{{ route('adminProjects.destroy', $project->id) }}"  method="POST" class="d-inline"
                                                 onsubmit="return confirm('Are you sure you want to delete this project?')">
                                                @csrf
                                                @method('DELETE')
                                                <button class="p-dltbtn" type="submit" title="Delete">                                                       
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

              
            </div>
        </div>
    </div>
@endsection