@extends('layouts.app')

@section('content')
<div class="container">
    <h2 class="mb-4">Home GIF Images</h2>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <form method="POST" action="{{ url('/upload-home-gifs') }}" enctype="multipart/form-data">
        @csrf

        <div class="row mb-3">
            <div class="col-md-6">
                <label>Image 1 (GIF)</label>
                <input type="file" name="image1" accept="image/gif" class="form-control" onchange="previewGif(this, 'preview1')" >
                @error('image1')
                    <small class="text-danger">{{ $message }}</small>
                @enderror
                <div class="mt-2">
                    <img id="preview1" src="{{ $gif ? asset('storage/images/' . $gif->image1) : '' }}" style="max-width: 100%; height: auto;" />
                </div>
            </div>

            <div class="col-md-6">
                <label>Image 2 (GIF)</label>
                <input type="file" name="image2" accept="image/gif" class="form-control" onchange="previewGif(this, 'preview2')" >
                @error('image2')
                    <small class="text-danger">{{ $message }}</small>
                @enderror
                <div class="mt-2">
                    <img id="preview2" src="{{ $gif ? asset('storage/images/' . $gif->image2) : '' }}" style="max-width: 100%; height: auto;" />
                </div>
            </div>
        </div>

        <button type="submit" class="btn btn-primary">Upload GIFs</button>
    </form>
</div>

<script>
function previewGif(input, previewId) {
    const file = input.files[0];
    if (file && file.type === "image/gif") {
        const reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById(previewId).src = e.target.result;
        }
        reader.readAsDataURL(file);
    }
}
</script>
@endsection