@extends('admin.layouts.app')
@section('title','CSR Projects')
@section('breadcrumb') <span>/</span> CSR Management <span>/</span> Projects @endsection

@section('content')
<div class="page-header">
    <div>
        <h1>CSR Projects</h1>
        <p class="page-subtitle">Manage CSR project lifecycle from draft to completion</p>
    </div>
    @if(auth()->user()->hasPermission('projects.create'))
    <a href="{{ route('admin.csr.projects.create') }}" class="btn btn-primary">
        <i class="fas fa-plus me-2"></i>New Project
    </a>
    @endif
</div>

<!-- Status Summary Cards -->
<div class="row g-3 mb-4">
    @php
    $statusMap = ['total'=>['bg'=>'primary','icon'=>'fa-layer-group','label'=>'Total'],
                  'active'=>['bg'=>'success','icon'=>'fa-play-circle','label'=>'Active'],
                  'pending'=>['bg'=>'warning','icon'=>'fa-clock','label'=>'Pending'],
                  'completed'=>['bg'=>'info','icon'=>'fa-check-circle','label'=>'Completed']];
    @endphp
    @foreach($statusMap as $key => $s)
    <div class="col-6 col-md-3">
        <div class="card p-3 text-center" style="border-top:3px solid var(--bs-{{ $s['bg'] }});">
            <i class="fas {{ $s['icon'] }} mb-1" style="font-size:20px;" class="text-{{ $s['bg'] }}"></i>
            <div style="font-size:24px;font-weight:700;">{{ $stats[$key] }}</div>
            <div style="font-size:12px;color:#64748b;">{{ $s['label'] }}</div>
        </div>
    </div>
    @endforeach
</div>

<!-- Filters -->
<div class="card mb-3">
    <div class="card-body py-3">
        <form method="GET" class="row g-2 align-items-end">
            <div class="col-md-3">
                <input type="text" name="search" class="form-control" placeholder="Project title or code..."
                    value="{{ request('search') }}">
            </div>
            <div class="col-md-2">
                <select name="company_id" class="form-select">
                    <option value="">All Companies</option>
                    @foreach($companies as $id => $name)
                    <option value="{{ $id }}" {{ request('company_id')==$id?'selected':'' }}>{{ $name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <select name="category_id" class="form-select">
                    <option value="">All Categories</option>
                    @foreach($categories as $id => $name)
                    <option value="{{ $id }}" {{ request('category_id')==$id?'selected':'' }}>{{ $name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <select name="status" class="form-select">
                    <option value="">All Status</option>
                    @foreach(['draft','pending','approved','active','completed','cancelled'] as $s)
                    <option value="{{ $s }}" {{ request('status')===$s?'selected':'' }}>{{ ucfirst($s) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3 d-flex gap-2">
                <button class="btn btn-primary flex-grow-1"><i class="fas fa-search me-1"></i>Search</button>
                <a href="{{ route('admin.csr.projects.index') }}" class="btn btn-outline-secondary">Reset</a>
            </div>
        </form>
    </div>
</div>

<!-- Projects Table -->
<div class="card">
    <div class="card-header d-flex align-items-center justify-content-between">
        <h6 class="mb-0 fw-700"><i class="fas fa-project-diagram text-primary me-2"></i>All Projects</h6>
        <span class="badge bg-primary">{{ $projects->total() }} total</span>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead style="background:#f8fafc;">
                    <tr>
                        <th class="ps-3">S.N.</th>
                        <th>Project</th>
                        <th>CSR Company</th>
                        <th>Category</th>
                        <th>Budget</th>
                        <th>Progress</th>
                        <th>Dates</th>
                        <th>Status</th>
                        <th class="text-center">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($projects as $i => $project)
                    <tr>
                        <td class="ps-3 text-muted">{{ ($projects->currentPage()-1)*$projects->perPage()+$i+1 }}</td>
                        <td>
                            <div style="font-weight:600;font-size:13px;">{{ $project->project_title }}</div>
                            <code style="font-size:11px;background:#f1f5f9;padding:1px 5px;border-radius:4px;">{{ $project->project_code }}</code>
                            @if($project->location)
                            <div style="font-size:11px;color:#94a3b8;"><i class="fas fa-map-marker-alt me-1"></i>{{ $project->location }}</div>
                            @endif
                        </td>
                        <td style="font-size:12px;">{{ $project->csrCompany->company_name ?? '—' }}</td>
                        <td>
                            @if($project->category)
                            <span class="badge bg-light text-dark border">{{ $project->category->name }}</span>
                            @else <span class="text-muted">—</span> @endif
                        </td>
                        <td>
                            @if($project->budget_allocation)
                            <div style="font-weight:600;font-size:13px;">₹{{ number_format($project->budget_allocation) }}</div>
                            <div style="font-size:11px;color:#64748b;">Spent: ₹{{ number_format($project->total_spent) }}</div>
                            @else <span class="text-muted">—</span> @endif
                        </td>
                        <td style="min-width:100px;">
                            @if($project->budget_allocation)
                            <div class="progress mb-1" style="height:6px;border-radius:6px;">
                                <div class="progress-bar bg-{{ $project->budget_used_percent >= 100 ? 'danger' : ($project->budget_used_percent >= 80 ? 'warning' : 'success') }}"
                                    style="width:{{ $project->budget_used_percent }}%"></div>
                            </div>
                            <div style="font-size:10px;color:#94a3b8;">{{ $project->budget_used_percent }}% used</div>
                            @else <span style="font-size:11px;color:#94a3b8;">No budget set</span> @endif
                        </td>
                        <td>
                            @if($project->start_date)
                            <div style="font-size:11px;"><i class="fas fa-calendar-alt text-primary me-1"></i>{{ $project->start_date->format('d M Y') }}</div>
                            @endif
                            @if($project->end_date)
                            <div style="font-size:11px;"><i class="fas fa-calendar-check text-success me-1"></i>{{ $project->end_date->format('d M Y') }}</div>
                            @endif
                        </td>
                        <td>
                            <select class="form-select form-select-sm status-changer" style="width:auto;font-size:11px;"
                                data-id="{{ $project->id }}"
                                data-url="{{ route('admin.csr.projects.change-status',$project) }}"
                                @if(!auth()->user()->hasAnyPermission(['projects.edit','projects.approve'])) disabled @endif>
                                @foreach(['draft','pending','approved','active','completed','cancelled'] as $s)
                                <option value="{{ $s }}" {{ $project->status===$s?'selected':'' }}>{{ ucfirst($s) }}</option>
                                @endforeach
                            </select>
                        </td>
                        <td class="text-center">
                            <div class="d-flex gap-1 justify-content-center">
                                <a href="{{ route('admin.csr.projects.show',$project) }}" class="btn btn-sm btn-outline-info" title="View"><i class="fas fa-eye"></i></a>
                                @if(auth()->user()->hasPermission('projects.edit'))
                                <a href="{{ route('admin.csr.projects.edit',$project) }}" class="btn btn-sm btn-outline-primary" title="Edit"><i class="fas fa-edit"></i></a>
                                @endif
                                @if(auth()->user()->hasPermission('projects.approve') && in_array($project->status,['pending','draft']))
                                <form action="{{ route('admin.csr.projects.approve',$project) }}" method="POST" class="d-inline">
                                    @csrf
                                    <button class="btn btn-sm btn-outline-success" title="Approve">
                                        <i class="fas fa-check"></i>
                                    </button>
                                </form>
                                @endif
                                <a href="{{ route('admin.csr.expenses.index') }}?project_id={{ $project->id }}" class="btn btn-sm btn-outline-warning" title="Expenses">
                                    <i class="fas fa-receipt"></i>
                                </a>
                                @if(auth()->user()->hasPermission('projects.delete'))
                                <button class="btn btn-sm btn-outline-danger" onclick="confirmDelete('{{ route('admin.csr.projects.destroy',$project) }}','{{ $project->project_title }}')"><i class="fas fa-trash"></i></button>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="text-center py-5">
                            <i class="fas fa-project-diagram d-block mb-2" style="font-size:32px;color:#cbd5e1;"></i>
                            <p class="text-muted mb-2">No projects found</p>
                            @if(auth()->user()->hasPermission('projects.create'))
                            <a href="{{ route('admin.csr.projects.create') }}" class="btn btn-sm btn-primary">
                                <i class="fas fa-plus me-1"></i>Create First Project
                            </a>
                            @endif
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @if($projects->hasPages())
    <div class="card-footer bg-white py-3">{{ $projects->links() }}</div>
    @endif
</div>
@endsection

@push('scripts')
<script>
document.querySelectorAll('.status-changer').forEach(sel => {
    sel.addEventListener('change', function() {
        const url = this.dataset.url, newStatus = this.value, el = this;
        const prev = [...this.options].find(o => o.selected && o.value !== newStatus)?.value || newStatus;

        fetch(url, {
            method: 'POST',
            headers: {'X-CSRF-TOKEN':'{{ csrf_token() }}','Content-Type':'application/json'},
            body: JSON.stringify({status: newStatus})
        })
        .then(r=>r.json())
        .then(d => {
            if(d.success) toastr.success(d.message);
            else { el.value = prev; toastr.error(d.message||'Failed to update status'); }
        })
        .catch(()=>{ el.value = prev; toastr.error('Network error'); });
    });
});
</script>
@endpush