@extends('layouts.admin')

@section('page-title', 'Create Project')

@section('content')

<div class="card shadow p-4">
    <h3 class="fw-bold mb-4">Create New Project</h3>

    <form action="{{ route('page_projects.store') }}" method="POST" enctype="multipart/form-data">
        @csrf

        <div class="row g-3">

            {{-- Project Title --}}
            <div class="col-md-6">
                <label class="form-label fw-bold">Project Title *</label>
                <input type="text" name="title" class="form-control" value="{{ old('title') }}" required>
            </div>

            {{-- Client Name --}}
            <div class="col-md-6">
                <label class="form-label fw-bold">Client Name</label>
                <input type="text" name="client_name" class="form-control" value="{{ old('client_name') }}">
            </div>

            {{-- Location --}}
            <div class="col-md-6">
                <label class="form-label fw-bold">Location</label>
                <input type="text" name="location" class="form-control" value="{{ old('location') }}">
            </div>

            {{-- Project Type --}}
            <div class="col-md-6">
                <label class="form-label fw-bold">Project Type *</label>
                <select name="project_type[]" class="form-select" multiple required>
                    @foreach(['Residential', 'Commercial', 'Industrial', 'Institutional'] as $type)
                        <option value="{{ $type }}" {{ collect(old('project_type'))->contains($type) ? 'selected' : '' }}>
                            {{ $type }}
                        </option>
                    @endforeach
                </select>
                <small class="text-muted">Hold CTRL to select multiple</small>
            </div>

            {{-- Dates --}}
            <div class="col-md-6">
                <label class="form-label fw-bold">Start Date</label>
                <input type="date" name="start_date" class="form-control" value="{{ old('start_date') }}">
            </div>

            <div class="col-md-6">
                <label class="form-label fw-bold">End Date</label>
                <input type="date" name="end_date" class="form-control" value="{{ old('end_date') }}">
            </div>

            {{-- Descriptions --}}
            <div class="col-12">
                <label class="form-label fw-bold">Short Description</label>
                <textarea name="short_description" class="form-control">{{ old('short_description') }}</textarea>
            </div>

            <div class="col-12">
                <label class="form-label fw-bold">About Project</label>
                <textarea name="content" class="form-control" rows="3">{{ old('content') }}</textarea>
            </div>

            <div class="col-12">
                <label class="form-label fw-bold">Detailed Description</label>
                <textarea name="project_desc" class="form-control" rows="4">{{ old('project_desc') }}</textarea>
            </div>

            {{-- Featured Image --}}
            <div class="col-md-6">
                <label class="form-label fw-bold">Featured Image</label>
                <input type="file" name="featured_img" class="form-control" accept="image/*">
            </div>

            {{-- Behind Images --}}
            <div class="col-12">
                <label class="form-label fw-bold">Behind Images</label>

                <input type="file" id="behindImages" name="behind_img[]" class="form-control" accept="image/*" multiple>

                <div id="previewContainer" class="d-flex flex-wrap gap-3 mt-3"></div>
            </div>

        </div>

        <div class="text-end mt-4">
            <button type="submit" class="btn btn-primary px-4 fw-bold">Save Project</button>
        </div>

    </form>
</div>

{{-- ✅ SAME JS USED IN EDIT --}}
<script>
let selectedFiles = [];

document.getElementById("behindImages").addEventListener("change", function(event) {
    const inputFiles = Array.from(event.target.files);
    selectedFiles.push(...inputFiles);

    preview();
});

function preview() {
    const container = document.getElementById("previewContainer");
    container.innerHTML = "";

    selectedFiles.forEach((file, index) => {
        const reader = new FileReader();
        reader.onload = (e) => {
            container.innerHTML += `
                <div class="position-relative">
                    <img src="${e.target.result}" style="width:100px;height:100px;border-radius:8px;object-fit:cover;">
                    <button type="button" onclick="removeImage(${index})" style="position:absolute;top:-8px;right:-8px;background:red;color:white;border:none;border-radius:50%;width:20px;height:20px;font-size:12px;">X</button>
                </div>
            `;
        };
        reader.readAsDataURL(file);
    });
}

function removeImage(index) {
    selectedFiles.splice(index, 1);

    const dt = new DataTransfer();
    selectedFiles.forEach(f => dt.items.add(f));
    document.getElementById("behindImages").files = dt.files;

    preview();
}
</script>

@endsection