@extends('layouts.app')
@section('title','Bulk Upload')@section('page-title','Bulk Upload')
@section('content')
<div class="page-header"><h1>Bulk Product Import</h1><p>Upload CSV or Excel to import products. Branch code column determines target branch.</p></div>
<div class="row g-4">
<div class="col-12 col-xl-5">
    <div class="card mb-4"><div class="card-body p-4">
        <h6 class="fw-700 mb-4" style="font-family:'Space Grotesk',sans-serif;">Upload File</h6>
        <form action="{{ route('bulk.upload') }}" method="POST" enctype="multipart/form-data" id="uploadForm">
            @csrf
            <div class="mb-4">
                <div id="dropZone" style="border:2px dashed var(--border-c);border-radius:14px;padding:36px;text-align:center;cursor:pointer;transition:all .2s;" onclick="document.getElementById('fileInput').click()">
                    <i class="bi bi-cloud-arrow-up" style="font-size:40px;color:var(--brand)"></i>
                    <div class="mt-2 fw-600" style="font-size:15px;">Drop file here or click to browse</div>
                    <div class="text-muted mt-1" style="font-size:13px;">CSV, XLSX, XLS · Max 10MB</div>
                    <div id="fileName" class="mt-3 fw-600" style="color:var(--brand);display:none;font-size:14px;"></div>
                </div>
                <input type="file" id="fileInput" name="file" accept=".csv,.xlsx,.xls" class="d-none" onchange="showFileName(this)">
            </div>
            <div class="mb-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" name="update_existing" id="updateExisting" value="1"><label class="form-check-label" for="updateExisting" style="font-size:14px;">Update existing products (by SKU)</label></div><small class="text-muted">If unchecked, duplicate SKUs are skipped with an error.</small></div>
            <button type="submit" class="btn btn-brand w-100 py-3" id="uploadBtn" disabled><i class="bi bi-upload me-2"></i>Import Products</button>
        </form>
    </div></div>
    <div class="card" style="border-color:rgba(46,196,182,.3);background:rgba(46,196,182,.04)"><div class="card-body p-4">
        <h6 class="fw-700 mb-3" style="color:var(--accent)"><i class="bi bi-file-earmark-spreadsheet me-2"></i>CSV Template</h6>
        <a href="{{ route('bulk.template') }}" class="btn w-100 mb-3" style="border:1px solid var(--accent);color:var(--accent);border-radius:10px;"><i class="bi bi-download me-2"></i>Download Template</a>
        <div class="p-3 rounded-3" style="background:var(--page-bg);font-size:12px;">
            <strong class="d-block mb-2">Required columns:</strong>
            <div class="d-flex flex-wrap gap-1">@foreach(['sku','name','category_slug','branch_code','cost_price_local','cost_price_usd','selling_price_local','selling_price_usd','quantity_in_stock'] as $col)<span style="background:rgba(255,107,53,.1);color:var(--brand);padding:2px 8px;border-radius:6px;font-family:monospace;">{{ $col }}</span>@endforeach</div>
            <strong class="d-block mt-2 mb-1">Optional:</strong>
            <div class="d-flex flex-wrap gap-1">@foreach(['description','supplier_name','reorder_level','unit','exchange_rate'] as $col)<span style="background:var(--border-c);padding:2px 8px;border-radius:6px;font-family:monospace;">{{ $col }}</span>@endforeach</div>
        </div>
    </div></div>
</div>
<div class="col-12 col-xl-7">
    <div class="card"><div class="card-body p-4">
        <h6 class="fw-700 mb-3" style="font-family:'Space Grotesk',sans-serif;">Upload History</h6>
        @forelse($logs as $log)
        <div class="p-3 mb-3 rounded-3" style="background:var(--page-bg);border:1px solid var(--border-c)">
            <div class="d-flex align-items-start justify-content-between mb-2">
                <div><div class="fw-600" style="font-size:14px;">{{ $log->filename }}</div><div class="text-muted" style="font-size:12px;">{{ $log->user?->name }} @if($log->branch)· {{ $log->branch->code }}@endif · {{ $log->created_at->format('M j, Y H:i') }}</div></div>
                <span class="badge-status badge-{{ $log->status==='completed'?'completed':($log->status==='processing'?'pending':'cancelled') }}">{{ ucfirst($log->status) }}</span>
            </div>
            <div class="d-flex gap-3" style="font-size:13px;">
                <span><i class="bi bi-list-ul me-1"></i>{{ $log->total_rows }} rows</span>
                <span class="text-success"><i class="bi bi-check-circle me-1"></i>{{ $log->success_rows }} imported</span>
                @if($log->failed_rows > 0)<span class="text-danger"><i class="bi bi-x-circle me-1"></i>{{ $log->failed_rows }} failed</span>@endif
            </div>
            @if($log->errors && count($log->errors))
            <div class="mt-2"><button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#errors{{ $log->id }}">Show {{ count($log->errors) }} error(s)</button>
                <div class="collapse mt-2" id="errors{{ $log->id }}"><div style="background:#fff1f1;border-radius:8px;padding:12px;max-height:150px;overflow-y:auto;">@foreach($log->errors as $err)<div style="font-size:12px;color:var(--danger-c);border-bottom:1px solid rgba(239,71,111,.1);padding:3px 0;">{{ $err }}</div>@endforeach</div></div>
            </div>
            @endif
        </div>
        @empty<div class="text-center py-5"><i class="bi bi-inbox" style="font-size:40px;color:var(--text-muted-c)"></i><p class="mt-2 text-muted mb-0">No uploads yet.</p></div>@endforelse
    </div>
    @if($logs->hasPages())<div class="card-footer p-3" style="border-top:1px solid var(--border-c)">{{ $logs->links() }}</div>@endif
    </div>
</div>
</div>
@endsection
@push('scripts')
<script>
const dropZone=document.getElementById('dropZone'),fileInput=document.getElementById('fileInput'),uploadBtn=document.getElementById('uploadBtn');
function showFileName(input){if(input.files.length>0){document.getElementById('fileName').textContent='📄 '+input.files[0].name;document.getElementById('fileName').style.display='block';uploadBtn.disabled=false;dropZone.style.borderColor='var(--brand)';}}
dropZone.addEventListener('dragover',e=>{e.preventDefault();dropZone.style.borderColor='var(--brand)';});
dropZone.addEventListener('dragleave',()=>{dropZone.style.borderColor='var(--border-c)';});
dropZone.addEventListener('drop',e=>{e.preventDefault();fileInput.files=e.dataTransfer.files;showFileName(fileInput);});
document.getElementById('uploadForm').addEventListener('submit',function(){uploadBtn.disabled=true;uploadBtn.innerHTML='<span class="spinner-border spinner-border-sm me-2"></span>Importing...';});
</script>
@endpush