@extends('layouts.dashboard')

@section('content')

<div id="sohImportOverlay" style="display:none; position:fixed; inset:0; z-index:99999; background:rgba(15,23,42,.72); backdrop-filter:blur(6px); align-items:center; justify-content:center;">
    <div style="width:520px; max-width:92%; background:white; border-radius:28px; padding:34px; box-shadow:0 30px 80px rgba(0,0,0,.25); text-align:center;">
        <div style="font-size:48px; margin-bottom:12px;">📦</div>
        <h2 style="font-size:26px; font-weight:900; margin:0 0 8px;">Importing SOH File</h2>
        <p style="color:#64748b; margin:0 0 22px;">Please keep this page open. Large files may take a few minutes.</p>

        <div style="width:100%; height:14px; background:#e5e7eb; border-radius:999px; overflow:hidden;">
            <div id="sohImportBar" style="height:100%; width:8%; background:linear-gradient(90deg,#4f46e5,#06b6d4,#10b981); border-radius:999px; transition:width .5s ease;"></div>
        </div>

        <div id="sohImportText" style="margin-top:14px; font-weight:800; color:#334155;">
            Starting import...
        </div>

        <div style="margin-top:18px; font-size:12px; color:#94a3b8;">
            Reading Excel, extracting products, prices and images.
        </div>
    </div>
</div>


<div class="space-y-8">

    @if(session('success'))
        <div class="alert alert-success">
            <span>{{ session('success') }}</span>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-error">
            <span>{{ session('error') }}</span>
        </div>
    @endif

    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
        <div>
            <h1 class="text-3xl font-black">SOH Library</h1>
            <p class="text-base-content/60">
                Manage supplier SOH files stored on the server.
            </p>
        </div>

        <div class="badge badge-primary badge-lg">
            {{ $productsCount }} Products
        </div>
    </div>

    <div class="card bg-base-100 shadow-xl border border-base-300">
        <div class="card-body">

            <h2 class="card-title">Import SOH From Server</h2>

            <div class="alert alert-info">
                <span>
                    Upload the large SOH file by File Manager or SFTP to:
                    <b>storage/app/private/soh</b>
                </span>
            </div>

            @if(count($serverFiles))
                <form method="POST" action="{{ route('soh.import-from-server') }}" class="soh-import-form" class="space-y-5">
                    @csrf

                    <div class="overflow-x-auto">
                        <table class="table table-zebra">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>File</th>
                                    <th>Size</th>
                                    <th>Modified</th>
                                </tr>
                            </thead>

                            <tbody>
                                @foreach($serverFiles as $file)
                                    <tr>
                                        <td>
                                            <input type="radio"
                                                   name="server_file"
                                                   value="{{ $file['name'] }}"
                                                   class="radio radio-primary"
                                                   required>
                                        </td>
                                        <td>{{ $file['name'] }}</td>
                                        <td>{{ $file['size'] }} MB</td>
                                        <td>{{ $file['modified'] }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <div class="flex justify-end">
                        <button class="btn btn-primary">
                            Import Selected SOH
                        </button>
                    </div>
                </form>
            @else
                <div class="text-center py-12 border border-dashed border-base-300 rounded-3xl">
                    <div class="text-5xl mb-4">📂</div>
                    <h3 class="text-xl font-bold">No SOH files found on server</h3>
                    <p class="text-base-content/60 mt-2">
                        Upload your .xlsx file to storage/app/private/soh first.
                    </p>
                </div>
            @endif

        </div>
    </div>

    <div class="card bg-base-100 shadow-xl border border-base-300">
        <div class="card-body">
            <h2 class="card-title">Import History</h2>

            <div class="overflow-x-auto">
                <table class="table table-zebra">
                    <thead>
                        <tr>
                            <th>File</th>
                            <th>Status</th>
                            <th>Products</th>
                            <th>Images</th>
                            <th>Date</th>
                            <th>Version</th>
                        </tr>
                    </thead>

                    <tbody>
                        @forelse($imports as $import)
                            <tr>
                                <td>{{ $import->original_file }}</td>
                                <td>
                                    <span class="badge badge-info">
                                        {{ $import->status }}
                                    </span>
                                </td>
                                <td>{{ $import->products_count }}</td>
                                <td>{{ $import->images_count }}</td>
                                <td>{{ $import->created_at->format('Y-m-d H:i') }}</td>
                                <td>{{ $import->effective_date?->format('Y-m-d') ?: '—' }} @if($import->is_active)<span class="badge badge-success badge-sm">Active</span>@endif</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center text-base-content/60">
                                    No SOH files imported yet.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

        </div>
    </div>

</div>


<script>
document.addEventListener('DOMContentLoaded', function () {
    const forms = document.querySelectorAll('.soh-import-form');
    const overlay = document.getElementById('sohImportOverlay');
    const bar = document.getElementById('sohImportBar');
    const text = document.getElementById('sohImportText');

    forms.forEach(function(form) {
        form.addEventListener('submit', function () {
            if (!overlay || !bar || !text) return;

            overlay.style.display = 'flex';

            let progress = 8;

            const messages = [
                'Reading Excel file...',
                'Detecting columns...',
                'Extracting product data...',
                'Matching SKUs and barcodes...',
                'Extracting images...',
                'Saving products...',
                'Finalizing import...'
            ];

            let msgIndex = 0;

            setInterval(function () {
                if (progress < 92) {
                    progress += Math.floor(Math.random() * 7) + 2;
                    if (progress > 92) progress = 92;
                    bar.style.width = progress + '%';
                }

                if (msgIndex < messages.length) {
                    text.innerText = messages[msgIndex];
                    msgIndex++;
                }
            }, 1200);
        });
    });
});
</script>

@endsection