@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-10" style="margin-left: 220px;">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2>Projects</h2>
                @if(auth()->user()->canProject('create'))
                    <a href="{{ route('projects.create') }}" class="btn btn-primary">
                        <i class="fas fa-plus"></i> Create New Project
                    </a>
                @endif
            </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

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

            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Project Name</th>
                                    <th>Units</th>
                                    <th>Start Date</th>
                                    <th>End Date</th>
                                    <th>Project Value</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($projects as $project)
                                <tr>
                                    <td>{{ $project->project_name }}</td>
                                    <td>
                                        @php
                                            $units = is_array($project->unit) ? $project->unit : (is_string($project->unit) ? [$project->unit] : []);
                                        @endphp
                                        @if(count($units) > 0)
                                            @foreach($units as $unit)
                                                <span class="badge bg-primary me-1">{{ $unit }}</span>
                                            @endforeach
                                        @else
                                            <span class="text-muted">No units assigned</span>
                                        @endif
                                    </td>
                                    <td>{{ $project->start_date->format('d/m/Y') }}</td>
                                    <td>{{ $project->end_date->format('d/m/Y') }}</td>
                                    <td>RM {{ number_format($project->project_value, 2) }}</td>
                                    <td>
                                        @php
                                            $now = now();
                                            $status = '';
                                            $badgeClass = '';
                                            
                                            if ($now < $project->start_date) {
                                                $status = 'Upcoming';
                                                $badgeClass = 'badge-info';
                                            } elseif ($now >= $project->start_date && $now <= $project->end_date) {
                                                $status = 'Active';
                                                $badgeClass = 'badge-success';
                                            } else {
                                                $status = 'Completed';
                                                $badgeClass = 'badge-secondary';
                                            }
                                        @endphp
                                        <span class="badge {{ $badgeClass }}">{{ $status }}</span>
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            @if(auth()->user()->canProject('view'))
                                                <a href="/projects/{{ $project->id }}" class="btn btn-info btn-sm" title="View Project">
                                                    <i class="fas fa-eye"></i> View
                                                </a>
                                            @endif
                                            @if(auth()->user()->canProject('edit'))
                                                <a href="/projects/{{ $project->id }}/edit" class="btn btn-warning btn-sm" title="Edit Project">
                                                    <i class="fas fa-edit"></i> Edit
                                                </a>
                                                <form action="{{ route('projects.destroy', $project) }}" method="POST" style="display:inline;" class="d-inline delete-form">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-danger btn-sm" title="Delete Project"
                                                        data-project-name="{{ $project->project_name }}"
                                                        onclick="return confirmDelete(this)">
                                                        <i class="fas fa-trash"></i> Delete
                                                    </button>
                                                </form>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="7" class="text-center">No projects found.</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Enhanced delete confirmation
function confirmDelete(button) {
    const projectName = button.getAttribute('data-project-name');
    return confirm(`Are you sure you want to delete the project "${projectName}"?\n\nThis action cannot be undone and may affect related requests.`);
}

// Auto-hide alerts after 5 seconds
document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
        const alerts = document.querySelectorAll('.alert');
        alerts.forEach(alert => {
            const closeButton = alert.querySelector('.btn-close');
            if (closeButton) {
                closeButton.click();
            }
        });
    }, 5000);
    
    // Add form submission handlers for better error handling
    const deleteForms = document.querySelectorAll('.delete-form');
    deleteForms.forEach(form => {
        form.addEventListener('submit', function(e) {
            const button = form.querySelector('button[type="submit"]');
            if (button) {
                button.disabled = true;
                button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Deleting...';
            }
        });
    });
});
</script>
@endsection