@extends('adminlte::page')

@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Edit Heritage Page</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('admin.home') }}">Home</a></li>
                    <li class="breadcrumb-item active">Heritage Page</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">Edit Heritage Page Content</h3>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('admin.updateHeritage') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')

                            <!-- Heading -->
                            <div class="form-group">
                                <label for="heading">Heading</label>
                                <input type="text" name="heading" id="heading" class="form-control" value="{{ old('heading', $heritage ? $heritage->heading : '') }}">
                                @error('heading')
                                <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <!-- First Image -->
                                    <div class="form-group">
                                        <label for="first_image">First Image</label>
                                        <div class="custom-file">
                                            <input type="file" name="first_image" id="first_image" class="custom-file-input" onchange="previewImage(event, 'first_image_preview')">
                                            <label class="custom-file-label" for="first_image">Choose file</label>
                                        </div>

                                        <div class="mt-2">
                                            @if($heritage && $heritage->first_image)
                                            <img src="{{ asset('/' . $heritage->first_image) }}" alt="First Image" id="first_image_preview" class="img-thumbnail" width="200">
                                            @else
                                            <img id="first_image_preview" class="img-thumbnail" width="200" style="display:none;">
                                            <div id="no_first_image" class="text-muted">No image selected</div>
                                            @endif
                                        </div>

                                        @error('first_image')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <!-- Second Image -->
                                    <div class="form-group">
                                        <label for="second_image">Second Image</label>
                                        <div class="custom-file">
                                            <input type="file" name="second_image" id="second_image" class="custom-file-input" onchange="previewImage(event, 'second_image_preview')">
                                            <label class="custom-file-label" for="second_image">Choose file</label>
                                        </div>

                                        <div class="mt-2">
                                            @if($heritage && $heritage->second_image)
                                            <img src="{{ asset('/' . $heritage->second_image) }}" alt="Second Image" id="second_image_preview" class="img-thumbnail" width="200">
                                            @else
                                            <img id="second_image_preview" class="img-thumbnail" width="200" style="display:none;">
                                            <div id="no_second_image" class="text-muted">No image selected</div>
                                            @endif
                                        </div>

                                        @error('second_image')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <!-- Paragraphs -->
                            @for($i = 1; $i <= 4; $i++)
                            <div class="form-group">
                                <label for="paragraph_{{ $i }}">Paragraph {{ $i }}</label>
                                <textarea name="paragraph_{{ $i }}" id="paragraph_{{ $i }}" class="form-control summernote">{{ old('paragraph_' . $i, $heritage ? $heritage->{'paragraph_' . $i} : '') }}</textarea>
                                @error('paragraph_' . $i)
                                <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                            @endfor

                            <button type="submit" class="btn btn-primary float-right">
                                <i class="fas fa-save"></i> Save
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@stop

@section('js')
<script>
    $(document).ready(function() {
        $('.summernote').summernote({
            height: 200,
            placeholder: 'Enter content here...'
        });
    });

    // Preview Image on File Input Change
    function previewImage(event, previewId) {
        var reader = new FileReader();
        var containerId = 'no_' + previewId.replace('_preview', '');
        
        reader.onload = function() {
            var output = document.getElementById(previewId);
            output.style.display = 'block'; // Show the image preview
            output.src = reader.result;
            
            var noImageText = document.getElementById(containerId);
            if (noImageText) {
                noImageText.style.display = 'none';
            }
        }
        
        if (event.target.files[0]) {
            reader.readAsDataURL(event.target.files[0]);
        } else {
            document.getElementById(previewId).style.display = 'none';
            var noImageText = document.getElementById(containerId);
            if (noImageText) {
                noImageText.style.display = 'block';
            }
        }
    }
</script>
@stop