@extends('admin.layouts.master')
@section('content')
<div class="card bg-body-white hoverable card-xl-stretch mb-xl-8">
    <div class="card card-custom">
        <div class="card-header">
            <h3 class="card-title">
                Home - Latest Projects
            </h3>
        </div>
        <!--begin::Form-->
		@if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        <div class="card-body">
        	<form action="{{ route('admin.project.saveHomeProjects') }}" method="POST" enctype="multipart/form-data" class="form">
            @csrf
		            @for ($i = 0; $i < 3; $i++)
					    @php
					        $selectedOld = old('project_id')[$i] ?? null;
					        $selected = $selectedOld ?? ($homeProjects[$i]->project_id ?? null);
					        $selectedProject = $projects->firstWhere('id', $selected);
					        $img = $selectedProject ? $selectedProject->upcoming_image : null;
					    @endphp
					    <div class="form-group">
					        <label>Project - {{ $i + 1 }}</label>
					        <select name="project_id[]"
					            class="w-25 form-control form-control-solid @error('project_id.' . $i) is-invalid @enderror"
					            onchange="updateImagePreview(this, {{ $i }})" data-index="{{ $i }}">
					            <option value="">Select Project</option>
					            @foreach($projects as $project)
					                <option value="{{ $project->id }}"
					                    data-image="{{ $project->upcoming_image ? asset('storage/' . $project->upcoming_image) : '' }}"
					                    {{ $selected == $project->id ? 'selected' : '' }}>
					                    {{ $project->name }}
					                </option>
					            @endforeach
					        </select>
					        @error('project_id.' . $i)
					        <div class="invalid-feedback">{{ $message }}</div>
					        @enderror
					        <div class="mt-2">
					            @if ($img)
					                <img id="preview-image-{{ $i }}" src="{{ asset('storage/' . $img) }}" alt="Preview"
					                     style="max-height: 100px; display: block;">
					                <p class="text-danger textMsg" id="preview-text-{{ $i }}" style="display: none;">Image Not Exist</p>
					            @else
					                <img id="preview-image-{{ $i }}" src="" alt="Preview"
					                     style="max-height: 100px; display: none;">
					              <p class="text-danger textMsg" id="preview-text-{{ $i }}" style="display: {{ isset($homeProjects[$i]) && $homeProjects[$i]->project_id ? 'none' : 'block' }};">Image Not Exist</p>

					            @endif
					        </div>
					    </div>
					@endfor

		            @error('project_id')
		            <div class="alert alert-danger">{{ $message }}</div>
		            @enderror
		            <button type="submit" class="btn btn-primary mr-2">Save</button>
				</form>
        </div>
	</div>
</div>
<script>
function updateImagePreview(select, index) {
    const selectedOption = select.options[select.selectedIndex];
    const imageUrl = selectedOption.getAttribute('data-image');

    const imgElement = document.getElementById(`preview-image-${index}`);
    const textElement = document.getElementById(`preview-text-${index}`);

    if (imageUrl) {
        imgElement.src = imageUrl;
        imgElement.style.display = 'block';
        textElement.style.display = 'none';
    } else {
        imgElement.style.display = 'none';
        textElement.style.display = 'block';
    }
}

</script>
@endsection