@extends('layouts.app')
@section('content') 
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-dark text-white">Upload File</div>
                <div class="card-body">
                    <form action="{{ route('image.upload') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="mb-3">
                          
                            <input type="file" class="form-control @error('file') is-invalid @enderror" name="file" id="file" required>
                          
                            @error('file')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        @if($imageUrl)
                        <img style="margin: 10px 0; width: 100%; height: 100px;object-fit: contain;" src="{{ $imageUrl}}" />
                        <button onclick="downloadImage('{{ $imageUrl }}')" class="btn btn-primary">
                            Download Image
                        </button>
                        @else
                        <p style="color: red;text-align: center;">No Image exists on s3</p>
                        @endif

                        <div class="text-center">
                            <button type="submit" class="btn btn-dark">Upload File</button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>
@endsection
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    function downloadImage(filePath) {
        $.ajax({
            url: `/image/download`,
            method: 'POST',
            xhrFields: {
                responseType: 'blob'
            },
            data: { file: filePath }, // Encode file path in Base64
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            success: function (data, status, xhr) {
                console.log(data,"Data");
                
                const blob = new Blob([data], { type: xhr.getResponseHeader('Content-Type') });
                const url = window.URL.createObjectURL(blob);
                console.log(url,"url")
                const a = document.createElement('a');
                a.style.display = 'none';
                a.href = url;
                a.download = url.split('/').pop();
                console.log(url,"file path");
                document.body.appendChild(a);
                a.click();
                window.URL.revokeObjectURL(url);
            },
            error: function (xhr, status, error) {
                console.error('Download failed:', error);
                alert('Failed to download file.');
            }
        });
    }
</script>