@extends('admin.layouts.app')
@section('title', isset($project) ? 'Edit Project' : 'New CSR Project')
@section('breadcrumb')
    <span>/</span> <a href="{{ route('admin.csr.projects.index') }}" style="color:inherit;text-decoration:none;">Projects</a>
    <span>/</span> {{ isset($project) ? 'Edit' : 'Register' }}
@endsection

@section('content')
<div class="page-header">
    <div>
        <h1>{{ isset($project) ? 'Edit Project' : 'Register CSR Project' }}</h1>
        <p class="page-subtitle">{{ isset($project) ? $project->project_code : 'Fill in project details below' }}</p>
    </div>
    <a href="{{ route('admin.csr.projects.index') }}" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left me-2"></i>Back
    </a>
</div>

<form method="POST"
    action="{{ isset($project) ? route('admin.csr.projects.update',$project) : route('admin.csr.projects.store') }}"
    enctype="multipart/form-data" id="projectForm">
    @csrf
    @if(isset($project)) @method('PUT') @endif

    <div class="row g-4">
        <div class="col-lg-8">
            <!-- Basic Info -->
            <div class="card mb-4">
                <div class="card-header"><h6 class="mb-0 fw-700"><i class="fas fa-project-diagram text-primary me-2"></i>Project Information</h6></div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label">Project Title <span class="text-danger">*</span></label>
                            <input type="text" name="project_title" class="form-control @error('project_title') is-invalid @enderror"
                                placeholder="Descriptive project title"
                                value="{{ old('project_title',$project->project_title??'') }}" required>
                            @error('project_title') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">CSR Company <span class="text-danger">*</span></label>
                            <select name="csr_company_id" class="form-select @error('csr_company_id') is-invalid @enderror" required>
                                <option value="">Select Company</option>
                                @foreach($companies as $id => $name)
                                <option value="{{ $id }}" {{ old('csr_company_id',$project->csr_company_id??'')==$id?'selected':'' }}>{{ $name }}</option>
                                @endforeach
                            </select>
                            @error('csr_company_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Project Category</label>
                            <select name="category_id" class="form-select">
                                <option value="">Select Category</option>
                                @foreach($categories as $id => $name)
                                <option value="{{ $id }}" {{ old('category_id',$project->category_id??'')==$id?'selected':'' }}>{{ $name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Start Date</label>
                            <input type="date" name="start_date" class="form-control"
                                value="{{ old('start_date', isset($project) ? $project->start_date?->format('Y-m-d') : '') }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">End Date</label>
                            <input type="date" name="end_date" class="form-control @error('end_date') is-invalid @enderror"
                                value="{{ old('end_date', isset($project) ? $project->end_date?->format('Y-m-d') : '') }}">
                            @error('end_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Location</label>
                            <input type="text" name="location" class="form-control" placeholder="City, State or area"
                                value="{{ old('location',$project->location??'') }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Budget Allocation (₹)</label>
                            <div class="input-group">
                                <span class="input-group-text">₹</span>
                                <input type="number" name="budget_allocation" class="form-control" min="0" step="0.01"
                                    placeholder="0.00"
                                    value="{{ old('budget_allocation',$project->budget_allocation??'') }}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Funding Source</label>
                            <input type="text" name="funding_source" class="form-control"
                                placeholder="e.g. CSR Fund 2024"
                                value="{{ old('funding_source',$project->funding_source??'') }}">
                        </div>
                        <div class="col-md-6 d-flex align-items-end">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="is_public" value="1"
                                    id="isPublic" {{ old('is_public', $project->is_public??false) ? 'checked' : '' }}>
                                <label class="form-check-label" for="isPublic" style="font-size:13px;">
                                    <strong>Public Project</strong> — visible on website
                                </label>
                            </div>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Description</label>
                            <textarea name="description" class="form-control" rows="3"
                                placeholder="Detailed project description...">{{ old('description',$project->description??'') }}</textarea>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Stakeholders</label>
                            <textarea name="stakeholders" class="form-control" rows="2"
                                placeholder="List of key stakeholders...">{{ old('stakeholders',$project->stakeholders??'') }}</textarea>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Expected Impact</label>
                            <textarea name="expected_impact" class="form-control" rows="2"
                                placeholder="Describe expected impact and outcomes...">{{ old('expected_impact',$project->expected_impact??'') }}</textarea>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Attachments -->
            <div class="card">
                <div class="card-header"><h6 class="mb-0 fw-700"><i class="fas fa-paperclip text-secondary me-2"></i>Attachments</h6></div>
                <div class="card-body">
                    @if(isset($project) && $project->attachments->count())
                    <div class="mb-3">
                        <label class="form-label">Existing Attachments</label>
                        <div class="row g-2">
                            @foreach($project->attachments as $att)
                            <div class="col-md-4">
                                <div class="card border p-2">
                                    <div style="font-size:12px;font-weight:600;" class="text-truncate">{{ $att->file_name }}</div>
                                    <span class="badge bg-light text-dark border" style="font-size:10px;">{{ ucfirst($att->attachment_type) }}</span>
                                    <a href="{{ asset('uploads/projects/'.$att->file_path) }}" target="_blank"
                                        class="btn btn-xs btn-outline-primary mt-1" style="font-size:10px;padding:2px 6px;">Download</a>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    @endif

                    <div id="attachmentsList">
                        <div class="attachment-row row g-2 mb-2">
                            <div class="col-md-7">
                                <input type="file" name="attachments[]" class="form-control form-control-sm"
                                    accept=".pdf,.jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx">
                            </div>
                            <div class="col-md-4">
                                <select name="attachment_types[]" class="form-select form-select-sm">
                                    @foreach(['proposal','approval','budget','image','report','other'] as $t)
                                    <option value="{{ $t }}">{{ ucfirst($t) }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-secondary mt-1" onclick="addAttachment()">
                        <i class="fas fa-plus me-1"></i>Add More
                    </button>
                    <small class="d-block text-muted mt-1" style="font-size:11px;">Allowed: PDF, Images, Word, Excel · Max 10MB each</small>
                </div>
            </div>
        </div>

        <!-- Right Sidebar -->
        <div class="col-lg-4">
            <div class="card mb-3">
                <div class="card-header"><h6 class="mb-0 fw-700"><i class="fas fa-cog text-secondary me-2"></i>Status & Submit</h6></div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Project Status <span class="text-danger">*</span></label>
                        <select name="status" class="form-select" required>
                            @foreach(['draft'=>'Draft','pending'=>'Pending Review','approved'=>'Approved','active'=>'Active','completed'=>'Completed','cancelled'=>'Cancelled'] as $v => $l)
                            <option value="{{ $v }}" {{ old('status',$project->status??'draft')===$v?'selected':'' }}>{{ $l }}</option>
                            @endforeach
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary w-100 mb-2" id="submitBtn">
                        <i class="fas fa-save me-2"></i>{{ isset($project) ? 'Update Project' : 'Register Project' }}
                    </button>
                    <a href="{{ route('admin.csr.projects.index') }}" class="btn btn-outline-secondary w-100">Cancel</a>

                    @if(isset($project))
                    <hr>
                    <div class="text-muted" style="font-size:11px;">
                        <div><strong>Code:</strong> {{ $project->project_code }}</div>
                        <div><strong>Expenses:</strong> {{ $project->expenses()->count() }}</div>
                        <div><strong>Beneficiaries:</strong> {{ $project->beneficiaries()->count() }}</div>
                        <div><strong>Created:</strong> {{ $project->created_at->format('d M Y') }}</div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@push('scripts')
<script>
function addAttachment() {
    const row = document.createElement('div');
    row.className = 'attachment-row row g-2 mb-2';
    row.innerHTML = `
        <div class="col-md-7"><input type="file" name="attachments[]" class="form-control form-control-sm" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx"></div>
        <div class="col-md-4">
            <select name="attachment_types[]" class="form-select form-select-sm">
                <option value="proposal">Proposal</option><option value="approval">Approval</option>
                <option value="budget">Budget</option><option value="image">Image</option>
                <option value="report">Report</option><option value="other" selected>Other</option>
            </select>
        </div>
        <div class="col-md-1 d-flex align-items-center">
            <button type="button" class="btn btn-sm btn-outline-danger" onclick="this.closest('.attachment-row').remove()">
                <i class="fas fa-times"></i>
            </button>
        </div>`;
    document.getElementById('attachmentsList').appendChild(row);
}

document.getElementById('projectForm').addEventListener('submit',function(){
    const btn=document.getElementById('submitBtn');
    btn.disabled=true;
    btn.innerHTML='<span class="spinner-border spinner-border-sm me-2"></span>Saving...';
});
</script>
@endpush