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

<?php $__env->startSection('styles'); ?>
<style>
  :root{
    --teal:#00b09b;--teal-dk:#008f7a;--teal-lt:rgba(0,176,155,.10);--teal-glow:rgba(0,176,155,.20);
    --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 Direction Fixed for LTR */
  .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(--teal);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)}
  .pg-hdr .sub{font-size:11.5px;color:var(--muted);margin-top:3px}

  .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;}
  @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,rgba(0,176,155,.04),transparent)}
  .fc-icon{width:40px;height:40px;border-radius:10px;background:var(--teal-lt);display:flex;align-items:center;justify-content:center;font-size:19px;color:var(--teal);flex-shrink:0}
  .fc-title{font-size:15px;font-weight:800;color:var(--text)}
  .fc-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
  .fc-body{padding:24px}

  .sec-lbl{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.8px;color:var(--muted);text-transform:uppercase;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--border)}
  .sec-lbl i{font-size:14px;color:var(--teal)}

  .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(--muted)}
  .req{color:var(--red);margin-left:2px}

  /* FILE DROP */
  .file-drop{
    border:2px dashed var(--border);border-radius:10px;
    padding:28px 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(--teal);background:var(--teal-lt);box-shadow:0 0 0 3px var(--teal-glow)}
  .file-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}

  .file-drop-icon{font-size:32px;color:var(--muted);margin-bottom:8px;transition:all .2s}
  .file-drop:hover .file-drop-icon,.file-drop.drag-over .file-drop-icon{color:var(--teal);transform:translateY(-3px)}
  .file-drop-text{font-size:13px;color:var(--muted)}
  .file-drop-text span{color:var(--teal);font-weight:700}
  .file-drop-hint{font-size:11px;color:var(--muted);margin-top:4px}

  /* FILE SELECTED STATE */
  .file-selected{
    display:none;
    align-items:center;gap:14px;
    padding:14px 16px;
    background:linear-gradient(90deg,rgba(0,176,155,.08),rgba(0,176,155,.03));
    border:1.5px solid rgba(0,176,155,.3);
    border-radius:10px;
    margin-top:12px;
    animation:fadeIn .3s ease;
  }
  .file-selected.show{display:flex}

  .fs-icon{width:42px;height:42px;flex-shrink:0;background:var(--teal);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;box-shadow:0 4px 12px rgba(0,176,155,.3)}
  .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(--teal);color:#fff;font-size:11px;font-weight:800;padding:4px 12px;border-radius:20px;flex-shrink:0;white-space:nowrap}
  .fs-remove{width:28px;height:28px;border-radius:50%;background:rgba(231,76,60,.1);color:var(--red);border:none;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;transition:background .15s}

  /* ERROR */
  .file-error{display:none;align-items:center;gap:7px;color:var(--red);font-size:12px;font-weight:700;margin-top:8px;padding:9px 14px;background:var(--red-lt);border-radius:9px}
  .file-error.show{display:flex}

  /* 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;}
  .actions-btns{display:flex;gap:10px}
  .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-family:'Inter',sans-serif;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;transition:background .16s}
  .btn-save{display:inline-flex;align-items:center;gap:7px;padding:10px 22px;background:var(--teal);color:#fff;border:none;border-radius:10px;font-family:'Inter',sans-serif;font-size:13.5px;font-weight:800;cursor:pointer;box-shadow:0 4px 14px rgba(0,176,155,.28);transition:all .16s;position:relative;overflow:hidden}
  .btn-save:disabled{opacity:.55;cursor:not-allowed}
</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')); ?>">Reports</a>
  <i class="las la-angle-right"></i>
  <span>Upload Excel</span>
</div>

<div class="pg-hdr">
  <div>
    <h1>Upload Excel File</h1>
    <div class="sub">Upload invoice files for processing and analysis</div>
  </div>
</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">Invoices File Upload</div>
        <div class="fc-sub">Select an Excel or CSV file to upload to the system</div>
      </div>
    </div>

    <div class="fc-body">
      <div class="sec-lbl">
        <i class="las la-file-excel"></i> File Details
      </div>

      <div class="fg">
        <label class="flbl">
          <i class="las la-upload"></i> Upload File <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>Note:</strong> Supported Only format: .CSV 
            <br>
            <small>Max file size: 20MB</small>
          </div>
        </div>

        <div class="file-error" id="fileError">
          <i class="las la-exclamation-circle" style="font-size:16px"></i>
          <span id="errorText"></span>
        </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> Selected</div>
          <button type="button" class="fs-remove" id="removeFile" title="Remove File">
            <i class="las la-times"></i>
          </button>
        </div>
      </div>
    </div>
  </div>

  <div class="actions-bar">
    <div></div>
    <div class="actions-btns">
      <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-upload"></i> Upload Now
      </button>
    </div>
  </div>
</form>

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

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

  const ALLOWED = ['xlsx','xls','csv'];

  function formatSize(b){
    if(b < 1024) return b+' B';
    if(b < 1048576) return (b/1024).toFixed(1)+' KB';
    return (b/1048576).toFixed(2)+' MB';
  }

  function getExt(name){ return name.split('.').pop().toLowerCase(); }

  function showFile(file){
    fileError.classList.remove('show');

    if(!ALLOWED.includes(getExt(file.name))){
      errorText.textContent = 'Unsupported file type. Please upload .xlsx, .xls, or .csv only.';
      fileError.classList.add('show');
      fileSelected.classList.remove('show');
      submitBtn.disabled = true;
      return;
    }
    if(file.size > 20 * 1024 * 1024){
      errorText.textContent = 'File size exceeds the 20MB limit.';
      fileError.classList.add('show');
      fileSelected.classList.remove('show');
      submitBtn.disabled = true;
      return;
    }

    fsName.textContent = file.name;
    fsSize.textContent = formatSize(file.size);
    fileSelected.classList.add('show');
    submitBtn.disabled = false;
  }

  function clearFile(){
    fileInput.value = '';
    fileSelected.classList.remove('show');
    fileError.classList.remove('show');
    submitBtn.disabled = true;
  }

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

  removeBtn.addEventListener('click', clearFile);

  dropZone.addEventListener('dragover',  (e) => { e.preventDefault(); dropZone.classList.add('drag-over'); });
  dropZone.addEventListener('dragleave', ()  => dropZone.classList.remove('drag-over'));
  dropZone.addEventListener('drop', (e) => {
    e.preventDefault();
    dropZone.classList.remove('drag-over');
    const file = e.dataTransfer.files[0];
    if(file){
      const dt = new DataTransfer();
      dt.items.add(file);
      fileInput.files = dt.files;
      showFile(file);
    }
  });
})();
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('admin.layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/gamcoiraq/sctlold.gamcoiraq.com/resources/views/admin/postransactions/create.blade.php ENDPATH**/ ?>