<?php
echo form_open_multipart('items/do_excel_import/', array('id' => 'item_form'));
?>

<style>
/* ── Excel Import Dialog – WAK POS Redesign ── */
#item_form {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 20px;
    color: #1f2937;
}

#required_fields_message { display: none; }

#error_message_box {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}
#error_message_box li {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 4px solid #e87722;
    border-radius: 7px;
    padding: 8px 12px;
    font-size: 12.5px;
    color: #b91c1c;
    margin-bottom: 6px;
}

/* Info banner */
.xi-banner {
    background: #fff8f3;
    border: 1.5px solid #fde8d5;
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
}

.xi-banner svg {
    width: 18px;
    height: 18px;
    stroke: #e87722;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    margin-top: 1px;
}

.xi-banner-text {
    font-size: 12.5px;
    color: #92400e;
    line-height: 1.5;
}

.xi-banner-text strong {
    display: block;
    font-size: 13px;
    color: #78350f;
    margin-bottom: 2px;
}

/* Download template link */
.xi-download {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 9px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    box-shadow: 0 3px 10px rgba(15,52,96,0.25);
    transition: all 0.2s;
    margin-bottom: 20px;
    display: flex;
    width: fit-content;
}

.xi-download:hover {
    box-shadow: 0 5px 16px rgba(15,52,96,0.4);
    transform: translateY(-1px);
    color: #fff !important;
}

.xi-download svg {
    width: 15px;
    height: 15px;
    stroke: #fff;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Upload section */
.xi-section {
    background: #ffffff;
    border: 1.5px solid #f0f0f0;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.xi-section-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #e87722;
    text-transform: uppercase;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1.5px solid #fde8d5;
    display: flex;
    align-items: center;
    gap: 6px;
}

.xi-section-label svg {
    width: 14px;
    height: 14px;
    stroke: #e87722;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Drop zone */
.xi-dropzone {
    border: 2px dashed #fde8d5;
    border-radius: 10px;
    padding: 28px 20px;
    text-align: center;
    background: #fffaf7;
    transition: border-color 0.2s, background 0.2s;
    cursor: pointer;
    position: relative;
}

.xi-dropzone:hover {
    border-color: #e87722;
    background: #fff5ee;
}

.xi-dropzone svg {
    width: 36px;
    height: 36px;
    stroke: #e87722;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-bottom: 10px;
    opacity: 0.7;
}

.xi-dropzone-text {
    font-size: 13.5px;
    color: #6b7280;
    margin-bottom: 4px;
}

.xi-dropzone-text strong {
    color: #e87722;
}

.xi-dropzone-hint {
    font-size: 11.5px;
    color: #9ca3af;
}

.xi-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* File chosen indicator */
.xi-file-chosen {
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 12.5px;
    color: #166534;
    font-weight: 600;
}

.xi-file-chosen svg {
    width: 15px;
    height: 15px;
    stroke: #16a34a;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* Footer */
.xi-footer {
    display: flex;
    justify-content: flex-end;
}

.xi-btn-submit {
    background: linear-gradient(135deg, #e87722 0%, #c45e10 100%) !important;
    border: none !important;
    border-radius: 9px !important;
    padding: 10px 28px !important;
    font-size: 13.5px !important;
    color: #ffffff !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    transition: opacity 0.15s, transform 0.1s !important;
    box-shadow: 0 3px 10px rgba(232,119,34,0.35) !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    line-height: normal !important;
}

.xi-btn-submit:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 16px rgba(232,119,34,0.45) !important;
}
</style>

<ul id="error_message_box"></ul>

<!-- Info Banner -->
<div style="padding: 20px 20px 0;">
    <div class="xi-banner">
        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
        <div class="xi-banner-text">
            <strong>Before you import</strong>
            Use the template below to format your data correctly. Max rows per import is limited by your server settings.
        </div>
    </div>

    <!-- Download Template -->
    <a href="<?php echo base_url().'/'.'Import-PHPPOS.xls'; ?>" class="xi-download">
        <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
        Download Excel Template
    </a>

    <!-- Upload Section -->
    <div class="xi-section">
        <div class="xi-section-label">
            <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
            Upload Excel File
        </div>

        <div class="xi-dropzone" id="xi-dropzone">
            <svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="12" y1="18" x2="12" y2="12"/><line x1="9" y1="15" x2="12" y2="12"/><line x1="15" y1="15" x2="12" y2="12"/></svg>
            <div class="xi-dropzone-text"><strong>Click to browse</strong> or drag & drop your file here</div>
            <div class="xi-dropzone-hint">Supports .xls and .xlsx files</div>
            <?php echo form_upload(array('name'=>'file_path','id'=>'file_path','value'=>'')); ?>
        </div>

        <div class="xi-file-chosen" id="xi-file-chosen">
            <svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
            <span id="xi-file-name">File selected</span>
        </div>
    </div>

    <!-- Footer -->
    <div class="xi-footer">
        <?php
        echo form_submit(array(
            'name'  => 'submitf',
            'id'    => 'submitf',
            'value' => $this->lang->line('common_submit'),
            'class' => 'xi-btn-submit'
        ));
        ?>
    </div>
</div>

<?php echo form_close(); ?>

<script type='text/javascript'>
$(document).ready(function() {

    // Show filename when file chosen
    $('#file_path').on('change', function() {
        var fileName = this.files[0] ? this.files[0].name : '';
        if (fileName) {
            $('#xi-file-name').text(fileName);
            $('#xi-file-chosen').css('display', 'flex');
            $('#xi-dropzone').css('border-color', '#e87722');
        }
    });

    $('#item_form').validate({
        submitHandler: function(form) {
            $(form).ajaxSubmit({
                success: function(response) {
                    tb_remove();
                    post_item_form_submit(response);
                },
                dataType: 'json'
            });
        },
        errorLabelContainer: "#error_message_box",
        wrapper: "li",
        rules: {
            file_path: "required"
        },
        messages: {
            file_path: "Please select an Excel file to import"
        }
    });
});
</script>