@include('userpage.header')
<style>
.upload-option {
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
    height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.upload-option:hover {
    border-color: #007bff;
    background: #f8f9fa;
}

.upload-option input[type="radio"],
.upload-option input[type="file"] {
    display: none;
}

.upload-icon {
    font-size: 40px;
    color: #007bff;
    margin-bottom: 8px;
}

.upload-text {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.upload-preview {
    max-width: 100%;
    max-height: 120px;
    border-radius: 6px;
    margin-top: 10px;
    object-fit: cover;
}

.change-btn {
    font-size: 12px;
    color: #007bff;
    text-decoration: underline;
    cursor: pointer;
    margin-top: 5px;
    display: none;
}

.upload-selected {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}
</style>





<div class="content-body">
    <div class="container-fluid">

        <!-- row -->
        <div class="row">
            <div class="col-xl-12 col-xxl-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Art Work</h4>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('artwork.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div id="smartwizard" class="form-wizard order-create">

                                <div class="tab-content">
                                    <div class="row emial-setup">
                                        <div class="row">
                                            <!-- Material Image -->
                                            <div class="col-lg-3 col-sm-6 col-6">
                                                @if(!empty($artwork) && $artwork->material_image_file)
                                                <div class="preview-box text-center">
                                                    <img class="upload-preview1"
                                                        src="{{ asset('../storage/app/public/'.$artwork->material_image_file) }}"
                                                        alt="Material Image"
                                                        style="height: 200px; width: 100%; object-fit: cover; border-radius: 8px;">
                                                    <div class="mt-2">Material Image</div>
                                                </div>
                                                @else
                                                <div class="upload-option" data-type="material_image">
                                                    <input type="radio" name="artwork_type" value="material_image">
                                                    <input type="file" name="material_image_file" accept="image/*">
                                                    <div class="upload-box">
                                                        <div class="upload-icon"><i class="fas fa-image"></i></div>
                                                        <div class="upload-text">Material Image</div>
                                                    </div>
                                                    <img class="upload-preview d-none" alt="Preview">
                                                    <div class="change-btn">Change</div>
                                                </div>
                                                @endif
                                            </div>

                                            <!-- Artwork -->
                                            <div class="col-lg-3 col-sm-6 col-6">
                                                @if(!empty($artwork) && $artwork->artwork_file)
                                                <div class="preview-box text-center">
                                                    <img class="upload-preview1"
                                                        src="{{ asset('../storage/app/public/'.$artwork->artwork_file) }}"
                                                        alt="Artwork"
                                                        style="height: 200px; width: 100%; object-fit: cover; border-radius: 8px;">
                                                    <div class="mt-2">Artwork</div>
                                                </div>
                                                @else
                                                <div class="upload-option" data-type="artwork">
                                                    <input type="radio" name="artwork_type" value="artwork">
                                                    <input type="file" name="artwork_file" accept="image/*">
                                                    <div class="upload-box">
                                                        <div class="upload-icon"><i class="fas fa-paint-brush"></i>
                                                        </div>
                                                        <div class="upload-text">Artwork</div>
                                                    </div>
                                                    <img class="upload-preview d-none" alt="Preview">
                                                    <div class="change-btn">Change</div>
                                                </div>
                                                @endif
                                            </div>

                                            <!-- Artwork with Person -->
                                            <div class="col-lg-3 col-sm-6 col-6">
                                                @if(!empty($artwork) && $artwork->artwork_person_file)
                                                <div class="preview-box text-center">
                                                    <img class="upload-preview1"
                                                        src="{{ asset('../storage/app/public/'.$artwork->artwork_person_file) }}"
                                                        alt="Artwork with Person"
                                                        style="height: 200px; width: 100%; object-fit: cover; border-radius: 8px;">
                                                    <div class="mt-2">Artwork with Person</div>
                                                </div>
                                                @else
                                                <div class="upload-option" data-type="artwork_person">
                                                    <input type="radio" name="artwork_type" value="artwork_person">
                                                    <input type="file" name="artwork_person_file" accept="image/*">
                                                    <div class="upload-box">
                                                        <div class="upload-icon"><i class="fas fa-user"></i></div>
                                                        <div class="upload-text">Artwork with Person</div>
                                                    </div>
                                                    <img class="upload-preview d-none" alt="Preview">
                                                    <div class="change-btn">Change</div>
                                                </div>
                                                @endif
                                            </div>

                                            <!-- Scanned Artwork -->
                                            <div class="col-lg-3 col-sm-6 col-6">
                                                @if(!empty($artwork) && $artwork->scanned_artwork_file)
                                                <div class="preview-box text-center">
                                                    <img class="upload-preview1"
                                                        src="{{ asset('../storage/app/public/'.$artwork->scanned_artwork_file) }}"
                                                        alt="Scanned Artwork"
                                                        style="height: 200px; width: 100%; object-fit: cover; border-radius: 8px;">
                                                    <div class="mt-2">Scanned Artwork</div>
                                                </div>
                                                @else
                                                <div class="upload-option" data-type="scanned_artwork">
                                                    <input type="radio" name="artwork_type" value="scanned_artwork">
                                                    <input type="file" name="scanned_artwork_file" accept="image/*">
                                                    <div class="upload-box">
                                                        <div class="upload-icon"><i class="fas fa-file-alt"></i></div>
                                                        <div class="upload-text">Scanned Artwork</div>
                                                    </div>
                                                    <img class="upload-preview d-none" alt="Preview">
                                                    <div class="change-btn">Change</div>
                                                </div>
                                                @endif
                                            </div>
                                        </div>

                                    </div>


                                </div>



                            </div>
                             @if(empty($artwork))
                            <button type="submit" class="btn btn-success mt-3">Submit</button>
                            @endif
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
@if(session('success'))
<script>
Swal.fire({
    icon: 'success',
    title: 'Success',
    text: '{{ session('
    success ') }}',
    timer: 3000,
    showConfirmButton: false
});
</script>
@endif

@if(session('error'))
<script>
Swal.fire({
    icon: 'error',
    title: 'Error',
    text: '{{ session('
    error ') }}',
    timer: 3000,
    showConfirmButton: false
});
</script>
@endif

@include('userpage.footer')
<script>
document.querySelectorAll('.upload-option').forEach(option => {
    const radio = option.querySelector('input[type="radio"]');
    const fileInput = option.querySelector('input[type="file"]');
    const preview = option.querySelector('.upload-preview');
    const uploadBox = option.querySelector('.upload-box');
    const changeBtn = option.querySelector('.change-btn');

    // Click box → open file
    option.addEventListener('click', () => {
        fileInput.click();
    });

    // File chosen → show preview
    fileInput.addEventListener('change', () => {
        if (fileInput.files && fileInput.files[0]) {
            const reader = new FileReader();
            reader.onload = e => {
                preview.src = e.target.result;
                preview.classList.remove('d-none');
                uploadBox.style.display = 'none';
                changeBtn.style.display = 'block';
            };
            reader.readAsDataURL(fileInput.files[0]);
        }
        radio.checked = true;
        document.querySelectorAll('.upload-option').forEach(o => o.classList.remove('upload-selected'));
        option.classList.add('upload-selected');
    });

    // Change button → re-open file chooser
    changeBtn.addEventListener('click', (e) => {
        e.stopPropagation();
        fileInput.click();
    });
});
</script>