<?php $__env->startSection('title', 'Upload Excel — Banknote'); ?>
<?php $__env->startSection('page-title', 'Upload Excel'); ?>
<?php $__env->startSection('breadcrumb', 'Home / QR Code / Upload'); ?>

<?php $__env->startSection('styles'); ?>
<style>
  :root{
 
    --brand-blue:       #0071BC; 
    --brand-blue-dk:    #005A96; 
    --brand-green:      #39B54A; 
    --brand-blue-lt:    rgba(0, 113, 188, 0.08);
    --brand-glow:       rgba(0, 113, 188, 0.15);

    --red: #e74c3c; --red-lt: rgba(231,76,60,.10);
    --text: #2c3e50; --text-mid: #546e7a; --muted: #90a4ae;
    --border: #e0e7ef; --white: #fff; --bg: #f0f3f8; --input-bg: #f8fafc;
    --sh: 0 2px 10px rgba(0,0,0,.07);
  }

  /* Breadcrumb */
  .breadcrumb-bar{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-bottom:18px; direction: ltr;}
  .breadcrumb-bar a{color:var(--brand-blue);text-decoration:none;font-weight:600}
  .breadcrumb-bar a:hover{text-decoration:underline}

  .pg-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:10px; direction: ltr;}
  .pg-hdr h1{font-size:20px;font-weight:900;color:var(--text)}

  .form-card{background:var(--white);border:1px solid var(--border);border-radius:14px;box-shadow:var(--sh);animation:cIn .4s ease both;margin-bottom:18px; direction: ltr; overflow: hidden;}
  @keyframes cIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

  .fc-header{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--border);background:linear-gradient(90deg, var(--brand-blue-lt), transparent)}
  .fc-icon{width:40px;height:40px;border-radius:10px;background:var(--brand-blue);display:flex;align-items:center;justify-content:center;font-size:19px;color:#fff;flex-shrink:0;box-shadow: 0 4px 10px rgba(0, 113, 188, 0.2);}
  .fc-title{font-size:15px;font-weight:800;color:var(--text)}
  .fc-body{padding:24px}

  .fg{display:flex;flex-direction:column;gap:6px}
  .flbl{font-size:12.5px;font-weight:700;color:var(--text-mid);display:flex;align-items:center;gap:5px}
  .flbl i{font-size:14px;color:var(--brand-blue)}
  .req{color:var(--red);margin-left:2px}

  /* FILE DROP */
  .file-drop{
    border:2px dashed var(--border);border-radius:10px;
    padding:35px 20px;text-align:center;background:var(--input-bg);
    cursor:pointer;transition:all .2s;
    position:relative;
  }
  .file-drop:hover, .file-drop.drag-over{border-color:var(--brand-blue);background:var(--brand-blue-lt);box-shadow:0 0 0 3px var(--brand-glow)}
  .file-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}

  .file-drop-icon{font-size:40px;color:var(--muted);margin-bottom:10px;transition:all .2s}
  .file-drop:hover .file-drop-icon, .file-drop.drag-over .file-drop-icon{color:var(--brand-blue);transform:translateY(-3px)}
  .file-drop-text{font-size:14px;color:var(--text-mid)}
  .file-drop-text span{color:var(--brand-blue);font-weight:700}
  .file-drop-hint{font-size:11.5px;color:var(--muted);margin-top:8px; line-height: 1.6;}
  .file-drop-hint strong{color: var(--brand-green);}

  /* FILE SELECTED STATE */
  .file-selected{
    display:none;
    align-items:center;gap:14px;
    padding:14px 16px;
    background:linear-gradient(90deg, var(--brand-blue-lt), rgba(57, 181, 74, 0.05));
    border:1.5px solid rgba(0, 113, 188, 0.2);
    border-radius:10px;
    margin-top:15px;
    animation:fadeIn .3s ease;
  }
  .file-selected.show{display:flex}

  .fs-icon{width:42px;height:42px;flex-shrink:0;background:var(--brand-blue);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;box-shadow:0 4px 12px rgba(0, 113, 188, 0.25)}
  .fs-info{flex:1;min-width:0}
  .fs-name{font-size:13.5px;font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fs-size{font-size:11.5px;color:var(--muted);margin-top:2px}
  .fs-badge{display:inline-flex;align-items:center;gap:5px;background:var(--brand-green);color:#fff;font-size:11px;font-weight:800;padding:4px 12px;border-radius:20px;flex-shrink:0}
  .fs-remove{width:28px;height:28px;border-radius:50%;background:rgba(231,76,60,.1);color:var(--red);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
  .fs-remove:hover{background:var(--red);color:#fff}

  /* ACTIONS */
  .actions-bar{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-radius:14px;border:1px solid var(--border);background:var(--white);box-shadow:var(--sh);flex-wrap:wrap;gap:10px; direction: ltr;}
  .btn-cancel{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;background:var(--white);color:var(--text-mid);border:1.5px solid var(--border);border-radius:10px;font-size:13px;font-weight:600;text-decoration:none;transition:all .2s}
  .btn-cancel:hover{background:var(--bg); border-color: var(--muted);}
  
  .btn-save{display:inline-flex;align-items:center;gap:7px;padding:10px 25px;background:linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dk));color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 4px 14px rgba(0, 113, 188, 0.3);transition:all .2s}
  .btn-save:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 18px rgba(0, 113, 188, 0.4)}
  .btn-save:disabled{opacity:.5;cursor:not-allowed; filter: grayscale(1);}
</style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>

<div class="breadcrumb-bar">
  <a href="<?php echo e(route('admin.dashboard')); ?>"><i class="las la-home"></i> Home</a>
  <i class="las la-angle-right"></i>
  <a href="<?php echo e(route('reports.index')); ?>">QR Code Reports</a>
  <i class="las la-angle-right"></i>
  <span>Upload Excel</span>
</div>

<div class="pg-hdr">
  <h1>Upload QR Code Excel File</h1>
</div>

<form method="POST" action="<?php echo e(route('reports.upload.store')); ?>" enctype="multipart/form-data" id="uploadForm">
<?php echo csrf_field(); ?>

  <div class="form-card">
    <div class="fc-header">
      <div class="fc-icon"><i class="las la-file-excel"></i></div>
      <div>
        <div class="fc-title">File Selection</div>
      </div>
    </div>

    <div class="fc-body">
      <div class="fg">
        <label class="flbl">
          <i class="las la-upload"></i> Choose your document <span class="req">*</span>
        </label>

        <div class="file-drop" id="dropZone">
          <input type="file" name="file" id="fileInput" accept=".csv,.xlsx,.xls" required>
          <div class="file-drop-icon"><i class="las la-cloud-upload-alt"></i></div>
          <div class="file-drop-text">Drag Excel file here or <span>click to browse</span></div>
          <div class="file-drop-hint">
            <strong>Supported format:</strong> .CSV, .XLSX, .XLS 
            <br>
            <small>Max file size allowed: 20MB</small>
          </div>
        </div>

        <div class="file-selected" id="fileSelected">
          <div class="fs-icon"><i class="las la-file-excel"></i></div>
          <div class="fs-info">
            <div class="fs-name" id="fsName"></div>
            <div class="fs-size" id="fsSize"></div>
          </div>
          <div class="fs-badge"><i class="las la-check"></i> Ready</div>
          <button type="button" class="fs-remove" id="removeFile">
            <i class="las la-times"></i>
          </button>
        </div>
      </div>
    </div>
  </div>

  <div class="actions-bar">
    <div></div>
    <div style="display:flex; gap:10px">
      <a href="<?php echo e(route('reports.index')); ?>" class="btn-cancel">
        <i class="las la-times"></i> Cancel
      </a>
      <button type="submit" class="btn-save" id="submitBtn" disabled>
        <i class="las la-cloud-upload-alt"></i> Start Upload
      </button>
    </div>
  </div>
</form>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
<script>
(function(){
  const fileInput = document.getElementById('fileInput');
  const fileSelected = document.getElementById('fileSelected');
  const fsName = document.getElementById('fsName');
  const fsSize = document.getElementById('fsSize');
  const submitBtn = document.getElementById('submitBtn');
  const removeBtn = document.getElementById('removeFile');

  fileInput.addEventListener('change', function() {
    if(this.files && this.files[0]) {
      const file = this.files[0];
      fsName.textContent = file.name;
      fsSize.textContent = (file.size / 1024).toFixed(1) + ' KB';
      fileSelected.classList.add('show');
      submitBtn.disabled = false;
    }
  });

  removeBtn.addEventListener('click', function() {
    fileInput.value = '';
    fileSelected.classList.remove('show');
    submitBtn.disabled = true;
  });
})();
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('admin.layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/erppanel/public_html/banknote.roayapay.com/resources/views/admin/transactions/create.blade.php ENDPATH**/ ?>