<style>
    <style>
    .import-card {
        border: none;
        border-radius: 16px;
        background-color: #ffffff;
    }
    .icon-header-wrapper {
        width: 56px; 
        height: 56px; 
        min-width: 56px; 
        background-color: #f0f3ff !important;
    }
    .text-main-title {
        color: #0b132b; 
        font-size: 1.5rem;
    }
    .drag-zone {
        border: 2px dashed #cbd5e1; 
        border-radius: 12px; 
        background-color: #f8fafc; 
        cursor: pointer; 
        transition: all 0.3s ease;
    }
    .drag-zone:hover {
        border-color: #5c4cf4;
        background-color: #f0f3ff;
    }
    .btn-brand-primary {
        background-color: #5c4cf4; 
        color: #ffffff;
        border-radius: 8px; 
        font-size: 0.9rem;
    }
    .btn-brand-primary:hover {
        background-color: #4a3cd1;
        color: #ffffff;
    }
    .note-box {
        background-color: #f8fafc; 
        border-color: #e2e8f0 !important;
    }
</style>
</style>
<?php $__env->startSection('content'); ?>


<div class="container">
    <!-- Success Alert -->
    <?php if(session('success')): ?>
        <div class="alert alert-success border-0 shadow-sm mb-4"><?php echo e(session('success')); ?></div>
    <?php endif; ?>

    <!-- Main Card -->
    <div class="card border-0 shadow-sm p-4 p-md-5" style="border-radius: 16px; background-color: #ffffff;">
        
        <!-- Header Section -->
        <div class="d-flex align-items-start gap-3 mb-4">
            <div class="d-flex align-items-center justify-content-center bg-light rounded-circle" style="width: 56px; height: 56px; min-width: 56px; background-color: #f0f3ff !important;">
                <!-- Upload Cloud Icon -->
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#5c4cf4" class="bi bi-cloud-upload" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383zm.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z"/>
                    <path fill-rule="evenodd" d="M7.646 5.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2z"/>
                </svg>
            </div>
            <div>
                <h3 class="fw-bold mb-1" style="color: #0b132b; font-size: 1.5rem;">Import Jewelry Data</h3>
                <p class="text-muted mb-0" style="font-size: 0.95rem;">Upload your Excel or CSV file to import jewelry data into the system.</p>
            </div>
        </div>

        <!-- Form Form -->
        <form action="<?php echo e(route('jewelry.import')); ?>" method="POST" enctype="multipart/form-data">
            <?php echo csrf_field(); ?>
            
            <!-- Drag & Drop Zone -->
            <div class="drag-zone d-flex flex-column align-items-center justify-content-center p-5 text-center mb-4" id="drop-zone" style="border: 2px dashed #cbd5e1; border-radius: 12px; background-color: #f8fafc; cursor: pointer; transition: all 0.3s ease;">
                
                <!-- Inner Sheet/Table Icon -->
                <div class="d-flex align-items-center justify-content-center rounded-circle mb-3" style="width: 48px; height: 48px; background-color: #eef2ff;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#5c4cf4" class="bi bi-table" viewBox="0 0 16 16">
                        <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h4v-3zm-5 3v-3H6v3h4zm-5 0v-3H1v3h4zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5 0h4V4H6v3zm4 4H6V8h4v3z"/>
                    </svg>
                </div>

                <h5 class="fw-semibold mb-1" style="color: #1e293b;">Drag & drop your file here</h5>
                <p class="text-muted small mb-3">or click to browse</p>
                
                <!-- Hidden Real File Input -->
                <input type="file" name="file" id="file-input" class="d-none" required accept=".xlsx, .xls, .csv">
                
                <!-- Styled Button trigger -->
                <button type="button" class="btn text-white px-4 py-2 fw-medium d-flex align-items-center gap-2" id="browse-btn" style="background-color: #5c4cf4; border-radius: 8px; font-size: 0.9rem;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-in-up" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M3.5 10a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 0 0 1h2A1.5 1.5 0 0 0 14 9.5v-8A1.5 1.5 0 0 0 12.5 0h-9A1.5 1.5 0 0 0 2 1.5v8A1.5 1.5 0 0 0 3.5 11h2a.5.5 0 0 0 0-1h-2z"/>
                        <path fill-rule="evenodd" d="M7.646 4.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V14.5a.5.5 0 0 1-1 0V5.707L5.354 6.854a.5.5 0 1 1-.708-.708l3-3z"/>
                    </svg>
                    Choose File
                </button>

                <!-- File info text -->
                <div id="file-info" class="mt-3 text-success fw-medium small d-none"></div>

                <p class="text-muted small mt-3 mb-0" style="font-size: 0.8rem;">Supported formats: .xlsx, .xls, .csv <br> Maximum file size: 10MB</p>
            </div>

            <!-- Submit Button & Footer text -->
            <div class="text-center">
                <button type="submit" class="btn text-white px-4 py-2.5 fw-semibold shadow-sm mb-3" style="background-color: #5c4cf4; border-radius: 8px; min-width: 220px;">
                    Upload & Import Data
                </button>
            </div>

        </form>
    </div>
</div>

<!-- Simple Script for interaction -->
<script>
    const dropZone = document.getElementById('drop-zone');
    const fileInput = document.getElementById('file-input');
    const browseBtn = document.getElementById('browse-btn');
    const fileInfo = document.getElementById('file-info');

    // Trigger input when box or browse button is clicked
    browseBtn.addEventListener('click', (e) => {
        e.stopPropagation();
        fileInput.click();
    });
    dropZone.addEventListener('click', () => fileInput.click());

    // Handle Drag & Drop styling States
    dropZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropZone.style.borderColor = '#5c4cf4';
        dropZone.style.backgroundColor = '#f0f3ff';
    });

    ['dragleave', 'dragend'].forEach(type => {
        dropZone.addEventListener(type, () => {
            dropZone.style.borderColor = '#cbd5e1';
            dropZone.style.backgroundColor = '#f8fafc';
        });
    });

    dropZone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropZone.style.borderColor = '#cbd5e1';
        dropZone.style.backgroundColor = '#f8fafc';
        
        if (e.dataTransfer.files.length) {
            fileInput.files = e.dataTransfer.files;
            updateFileInfo(e.dataTransfer.files[0].name);
        }
    });

    fileInput.addEventListener('change', () => {
        if (fileInput.files.length) {
            updateFileInfo(fileInput.files[0].name);
        }
    });

    function updateFileInfo(name) {
        fileInfo.textContent = `Selected file: ${name}`;
        fileInfo.classList.remove('d-none');
    }
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('admin.layout.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/braintreeeasysof/public_html/popular/resources/views/admin/jewelry/import.blade.php ENDPATH**/ ?>