@extends('layouts.admin')

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

@section('content')

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

    <form action="{{ route('page_projects.update', $pageProject->id) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        <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', $pageProject->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', $pageProject->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', $pageProject->location) }}">
            </div>

            {{-- Project Type --}}
            <div class="col-md-6">
                <label class="form-label fw-bold">Project Type *</label>
                @php $selectedTypes = json_decode($pageProject->project_type ?? '[]', true); @endphp
                <select name="project_type[]" class="form-select" required>
                    @foreach(['Residential', 'Commercial', 'Industrial', 'Institutional'] as $type)
                        <option value="{{ $type }}" {{ in_array($type, $selectedTypes) ? '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', $pageProject->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', $pageProject->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', $pageProject->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', $pageProject->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', $pageProject->project_desc) }}</textarea>
            </div>

            {{-- Featured Image --}}
            <div class="col-md-6">
                <label class="form-label fw-bold">Featured Image</label>
                @if($pageProject->featured_img)
                    <div class="mb-2">
                        <img src="{{ asset('uploads/projects/featured/'.$pageProject->featured_img) }}" class="rounded border" style="max-height:120px;">
                    </div>
                @endif
                <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>

                @if($pageProject->behind_img)
                    <div class="mb-3 d-flex flex-wrap gap-2">
                        @foreach(json_decode($pageProject->behind_img, true) as $img)
                            <div class="position-relative">
                                <img src="{{ asset('uploads/projects/behind_img/'.$img) }}" class="rounded border" style="height:80px;width:80px;object-fit:cover;">
                            </div>
                        @endforeach
                    </div>
                @endif

                <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">Update Project</button>
        </div>

    </form>
</div>

<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);

    // Update file input with new list
    const dt = new DataTransfer();
    selectedFiles.forEach(f => dt.items.add(f));
    document.getElementById("behindImages").files = dt.files;

    preview();
}
</script>

@endsection