@php
    $selectedTechnologies = collect(old('technologies', isset($project) ? $project->technologies->pluck('id')->all() : []))
        ->map(function ($id) {
            return (string) $id;
        })
        ->all();

    $statusValue = old('status', isset($project) ? strtolower((string) $project->status) : 'active');
    $showTechnologyQuickAdd = $showTechnologyQuickAdd ?? false;
    $allowTechnologyDelete = $allowTechnologyDelete ?? false;
@endphp

<div class="mb-4">
    <label for="project_name" class="form-label fw-bold text-dark mb-2">Project Name</label>
    <div class="input-group">
        <span class="input-group-text bg-light border-0">
            <i class="bi bi-kanban text-secondary"></i>
        </span>
        <input
            type="text"
            name="project_name"
            id="project_name"
            class="form-control bg-light border-0 @error('project_name') is-invalid @enderror"
            placeholder="e.g. Portfolio Management Dashboard"
            value="{{ old('project_name', $project->project_name ?? '') }}"
            required
            style="padding: 0.8rem;"
        >
    </div>
    @error('project_name')
        <div class="invalid-feedback d-block mt-2">{{ $message }}</div>
    @enderror
</div>

<div class="mb-4">
    <label for="short_description" class="form-label fw-bold text-dark mb-2">Short Description</label>
    <div class="input-group">
        <span class="input-group-text bg-light border-0 align-items-start pt-3">
            <i class="bi bi-text-paragraph text-secondary"></i>
        </span>
        <textarea
            name="short_description"
            id="short_description"
            rows="5"
            class="form-control bg-light border-0 @error('short_description') is-invalid @enderror"
            placeholder="Write a clean summary of what this project does and why it matters."
            required
        >{{ old('short_description', $project->short_description ?? '') }}</textarea>
    </div>
    @error('short_description')
        <div class="invalid-feedback d-block mt-2">{{ $message }}</div>
    @enderror
</div>

<div class="row g-4 mb-4">
    <div class="col-md-6">
        <label for="github_link" class="form-label fw-bold text-dark mb-2">GitHub Link</label>
        <div class="input-group">
            <span class="input-group-text bg-light border-0">
                <i class="bi bi-github text-secondary"></i>
            </span>
            <input
                type="url"
                name="github_link"
                id="github_link"
                class="form-control bg-light border-0 @error('github_link') is-invalid @enderror"
                placeholder="https://github.com/username/project"
                value="{{ old('github_link', $project->github_link ?? '') }}"
            >
        </div>
        @error('github_link')
            <div class="invalid-feedback d-block mt-2">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-md-6">
        <label for="live_demo_link" class="form-label fw-bold text-dark mb-2">Live Demo Link</label>
        <div class="input-group">
            <span class="input-group-text bg-light border-0">
                <i class="bi bi-box-arrow-up-right text-secondary"></i>
            </span>
            <input
                type="url"
                name="live_demo_link"
                id="live_demo_link"
                class="form-control bg-light border-0 @error('live_demo_link') is-invalid @enderror"
                placeholder="https://your-live-project.com"
                value="{{ old('live_demo_link', $project->live_demo_link ?? '') }}"
            >
        </div>
        @error('live_demo_link')
            <div class="invalid-feedback d-block mt-2">{{ $message }}</div>
        @enderror
    </div>
</div>

<div class="row g-4 mb-4">
    <div class="col-lg-5">
        <label for="status" class="form-label fw-bold text-dark mb-2">Project Status</label>
        <div class="input-group project-status-control" data-project-status-control style="cursor: pointer; user-select: none;">
            <span class="input-group-text border-0">
                <i class="bi bi-toggle-on project-status-icon"></i>
            </span>
            <input type="hidden" name="status" id="status" value="{{ $statusValue }}">
            <div class="form-control border-0 project-status-select d-flex align-items-center @error('status') is-invalid @enderror">
                <span class="status-text">{{ $statusValue === 'active' ? 'Active' : 'Inactive' }}</span>
            </div>
        </div>
        @error('status')
            <div class="invalid-feedback d-block mt-2">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-lg-7">
        <label for="image" class="form-label fw-bold text-dark mb-2">Project Image</label>

        @if(isset($project) && !empty($project->image))
            <div class="current-image-card mb-3">
                <img
                    src="{{ asset('storage/' . $project->image) }}"
                    alt="{{ $project->project_name }}"
                    class="current-image-thumb"
                >
                <div>
                    <span class="current-image-label">Current Preview</span>
                    <p class="text-secondary small mb-0">Upload a new image only if you want to replace the existing one.</p>
                </div>
            </div>
        @endif

        <div class="upload-container bg-light rounded-4 p-4 text-center border-2 border-dashed border-secondary-subtle">
            <i class="bi bi-image-fill text-primary fs-1 mb-3 d-block"></i>
            <p class="text-dark fw-semibold mb-1">{{ isset($project) ? 'Upload a replacement image' : 'Choose a project preview image' }}</p>
            <p class="text-secondary small mb-0" id="project-image-name">
                {{ isset($project) ? 'Leave this empty to keep the current image.' : 'JPG, PNG, or WEBP up to 2MB.' }}
            </p>
            <input
                type="file"
                name="image"
                id="image"
                class="form-control @error('image') is-invalid @enderror"
                accept=".jpg,.jpeg,.png,.webp"
            >
        </div>
        @error('image')
            <div class="invalid-feedback d-block mt-2">{{ $message }}</div>
        @enderror
    </div>
</div>

<div class="mb-4">
    <div class="d-flex align-items-center justify-content-between gap-3 mb-2 flex-wrap">
        <label class="form-label fw-bold text-dark mb-0">Project Technologies</label>
        <div class="d-flex align-items-center gap-2 ms-auto">
            <span class="small text-secondary">Choose at least one</span>
            @if($showTechnologyQuickAdd)
                <button
                    type="button"
                    class="btn btn-outline-primary btn-sm rounded-3 px-3 technology-add-btn"
                    data-bs-toggle="modal"
                    data-bs-target="#addTechnologyModal"
                >
                    <i class="bi bi-tags me-1"></i> + Add Technology
                </button>
            @endif
        </div>
    </div>

    @include('projects._technology_options', [
        'technologies' => $technologies,
        'selectedTechnologies' => $selectedTechnologies,
        'allowTechnologyDelete' => $allowTechnologyDelete,
    ])

    @error('technologies')
        <div class="invalid-feedback d-block mt-2">{{ $message }}</div>
    @enderror
</div>