@extends('backend.layouts.master')

@section('title', 'Edit Project - Admin Panel')

@section('admin-content')

<div class="page-title-area p-4">
    <h4 class="page-title">Edit Project</h4>
</div>

<div class="main-content-inner mt-4">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <form action="{{ route('admin.projects.update', $project->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf @method('PUT')
                        
                        <div class="form-group">
                            <label>Existing Image</label><br>
                            @if ($project->image)
                                <img src="{{ asset($project->image) }}" alt="Project Image" class="img-thumbnail" width="100px">
                            @else
                                <p>No image uploaded</p>
                            @endif
                        </div>

                        <div class="form-group">
                            <label>Change Image</label>
                            <input type="file" name="image" class="form-control-file">
                        </div>

                        <div class="form-group">
                            <label>Project Name</label>
                            <input type="text" class="form-control" name="name" value="{{ $project->name }}" required>
                        </div>

                        <div class="form-group">
                            <label>Description</label>
                            <textarea class="form-control" name="description">{{ $project->description }}</textarea>
                        </div>

                         <div class="form-group">
                            <label>IRR</label>
                            <input type="number" class="form-control" name="target_irr" value="{{ $project->target_irr }}">
                        </div>
						<div class="form-group">
                            <label>ROI</label>
                            <input type="number" class="form-control" name="roi" value="{{ $project->roi }}">
                        </div>

                        <div class="form-group">
                            <label>Asset Value</label>
                            <input type="number" class="form-control" name="asset_value" value="{{ $project->asset_value }}">
                        </div>

                        <div class="form-group">
                            <label>Asset Type</label>
                            <input type="text" class="form-control" name="asset_type" value="{{ $project->asset_type }}">
                        </div>

                        <div class="form-group">
                            <label>Minimum Investment</label>
                            <input type="number" class="form-control" name="minimum_investment" value="{{ $project->minimum_investment }}">
                        </div>

                        <div class="form-group">
                            <label>Status</label>
                            <select class="form-control" name="status">
                                <option value="Active" {{ $project->status == 'Active' ? 'selected' : '' }}>Active</option>
                                <option value="Inactive" {{ $project->status == 'Inactive' ? 'selected' : '' }}>Inactive</option>
                            </select>
                        </div>
						<div class="form-group">
                            <label>Launch Status</label>
                            <select class="form-control" name="launching_soon">
                                <option value="1" {{ $project->launching_soon == '1' ? 'selected' : '' }}>Launched</option>
                                <option value="0" {{ $project->launching_soon == '0' ? 'selected' : '' }}>Launching Soon</option>
                            </select>
                        </div>
                        

                        <hr>
                        <h5>Project Progress</h5>
                        <div id="progress-section">
                            @foreach ($project->progressImages as $index => $progress)
                                <div class="progress-group">
                                    <input type="hidden" name="progress_ids[{{ $index }}]" value="{{ $progress->id }}">
                                    <div class="form-group">
                                        <label>Progress Date</label>
                                        <input type="date" name="progress_dates[{{ $index }}]" class="form-control" value="{{ $progress->date }}" required>
                                    </div>
                                    <div class="form-group">
                                        <label>Progress (%)</label>
                                        <input type="text" name="progress_percentages[{{ $index }}]" class="form-control" value="{{ $progress->progress_percentage }}" required>
                                    </div>
                                    <div class="form-group">
                                        <label>Existing Images</label><br>
                                        @foreach ($progress->images as $imageIndex => $image)
                                            <img src="{{ asset($image->image) }}" alt="Progress Image" class="img-thumbnail" width="100px"><a style="font-size: 16px; color: #e71515; background: #e1dede; padding: 0px 5px;" 
   href="{{ url('admin/remove/progress/image') }}/{{ $image->id }}" 
   onclick="return confirm('Are you sure you want to delete this image?');">
   <i class="fa fa-close"></i>
</a>

                                             <input type="text" name="progress_titles[{{ $index }}][{{ $imageIndex }}]" class="form-control mt-2" value="{{ old("progress_titles.$index.$imageIndex", $image->title) }}" placeholder="Enter title for image">
											 
											 
                                        @endforeach
                                    </div>
                                    <div class="form-group">
                                        <label>Upload More Images</label>
                                        <input type="file" name="progress_images[{{ $index }}][]" class="form-control-file" multiple>
                                    </div>
                                    <button type="button" class="btn btn-danger remove-progress" data-id="{{ $progress->id }}">Remove</button>
                                    <hr>
                                </div>
                            @endforeach
                        </div>
                        <button type="button" id="add-progress" class="btn btn-success">Add More Progress</button>
                        <br><br>
                        <button type="submit" class="btn btn-primary">Update</button>
                        <a href="{{ route('admin.projects.index') }}" class="btn btn-secondary">Cancel</a>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    let progressIndex = {{ count($project->progressImages) }};
    document.getElementById('add-progress').addEventListener('click', function () {
        let progressSection = document.getElementById('progress-section');
        let newProgress = `
            <div class="progress-group">
                <div class="form-group">
                    <label>Progress Date</label>
                    <input type="date" name="progress_dates[${progressIndex}]" class="form-control" required>
                </div>
                <div class="form-group">
                    <label>Progress (%)</label>
                    <input type="text" name="progress_percentages[${progressIndex}]" class="form-control" required>
                </div>
                <div class="form-group">
                    <label>Upload Progress Images</label>
                    <input type="file" name="progress_images[${progressIndex}][]" multiple class="form-control-file" accept="image/*" required>
                </div>
                <button type="button" class="btn btn-danger remove-progress">Remove</button>
                <hr>
            </div>
        `;
        progressSection.insertAdjacentHTML('beforeend', newProgress);
        progressIndex++;
    });	
        document.addEventListener('click', function (event) {
        if (event.target.classList.contains('remove-progress')) {
            let progressItem = event.target.closest('.progress-group');
            let progressId = event.target.getAttribute('data-id');  // Get the existing progress ID

            // If there's a progressId, trigger the DELETE request
            if (progressId) {
                fetch(`{{url('/')}}/admin/project-progress/${progressId}/delete`, {
                    method: 'DELETE',  // Ensure you're using the DELETE method
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    }
                }).then(response => {
                    if (response.ok) {
                        progressItem.remove();  // Remove from DOM after success
                    }
                }).catch(error => {
                    console.error('Error:', error);
                });
            } else {
                // If it's a dynamically added item without a progressId, just remove it from DOM
                progressItem.remove();
            }
        }
    });
    document.addEventListener('change', function (event) {
        if (event.target.matches('input[type="file"][name^="progress_images"]')) {
            let fileInput = event.target;
            let progressGroup = fileInput.closest('.progress-group');
            let progressTitlesDiv = progressGroup.querySelector(`[id^="progress-titles-"]`);
            progressTitlesDiv.innerHTML = '<label>Image Titles</label>';
            Array.from(fileInput.files).forEach((file, index) => {
                let titleInput = document.createElement('input');
                titleInput.type = 'text';
               titleInput.name = `${fileInput.name.replace('progress_images', 'progress_titles')}[${progressIndex}][${index}]`;
                titleInput.className = 'form-control';
                titleInput.placeholder = `Enter title for ${file.name}`;
                progressTitlesDiv.appendChild(titleInput);
            });
        }
    });
</script>

@endsection