@include('header')
<style>
    .vn-dashboard-preview-wrap {
        overflow: hidden;
    }
    .vn-dashboard-preview-image {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center center;
    }
</style>
<div class="container-fluid flex-grow-1 container-p-y">
    <h4 class="font-weight-bold py-3 mb-0">Dashboard Image</h4>

    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    @endif

    <div class="row">
        <div class="col-xl-8">
            <div class="card">
                <div class="card-body">
                    <p class="text-muted mb-3">Only one dashboard image is used for all users. Upload a new image to replace the current one.</p>

                    <div class="mb-4 text-center border rounded p-3 bg-light vn-dashboard-preview-wrap">
                        <img src="{{ $imageUrl }}" alt="Current Dashboard Image" class="vn-dashboard-preview-image">
                    </div>

                    @if($updatedAt)
                    <p class="text-muted mb-4"><strong>Last updated:</strong> {{ $updatedAt }}</p>
                    @endif

                    <form method="POST" action="{{ url('updateDashboardImage') }}" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group">
                            <label for="image">Select new image <span class="text-danger">*</span></label>
                            <input type="file" class="form-control-file" id="image" name="image" accept="image/jpeg,image/jpg,image/png,image/webp" required>
                            <small class="form-text text-muted">Allowed: JPG, PNG, WEBP. Recommended max size: 8 MB. Large images are auto-resized to 1920px width.</small>
                            <div class="text-danger mt-1" id="image-size-error" style="display:none;"></div>
                            @error('image')
                            <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        <button type="submit" class="btn btn-primary btn-round" id="dashboard-image-submit">
                            <i class="feather icon-edit"></i> Update Image
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@include('footerscript')
<script>
(function () {
    var maxBytes = {{ (int) (8 * 1024 * 1024) }};
    var input = document.getElementById('image');
    var errorEl = document.getElementById('image-size-error');
    var form = input ? input.closest('form') : null;

    if (!input || !form) {
        return;
    }

    input.addEventListener('change', function () {
        errorEl.style.display = 'none';
        errorEl.textContent = '';
        if (!input.files || !input.files[0]) {
            return;
        }
        if (input.files[0].size > maxBytes) {
            errorEl.textContent = 'Selected file is too large. Please choose an image under 8 MB.';
            errorEl.style.display = 'block';
            input.value = '';
        }
    });

    form.addEventListener('submit', function (e) {
        if (!input.files || !input.files[0]) {
            return;
        }
        if (input.files[0].size > maxBytes) {
            e.preventDefault();
            errorEl.textContent = 'Selected file is too large. Please choose an image under 8 MB.';
            errorEl.style.display = 'block';
        }
    });
})();
</script>