@extends('appshell::layouts.private')

@section('title')
    Product Sync
@stop

@section('content')

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

    @if(session('import_result'))
        @php $result = session('import_result'); @endphp
        <div class="alert alert-{{ count($result['errors']) ? 'warning' : 'success' }}">
            <strong>Import complete.</strong>
            {{ count($result['added']) }} added,
            {{ count($result['skipped']) }} skipped,
            {{ count($result['errors']) }} errors.
        </div>

        @if(count($result['added']))
            <div class="alert alert-success py-2">
                <strong>Added:</strong> {{ implode(', ', $result['added']) }}
            </div>
        @endif
        @if(count($result['skipped']))
            <div class="alert alert-warning py-2">
                <strong>Skipped (SKU already exists):</strong> {{ implode(', ', $result['skipped']) }}
            </div>
        @endif
        @if(count($result['errors']))
            <div class="alert alert-danger py-2">
                <strong>Errors:</strong>
                <ul class="mb-0 mt-1">
                    @foreach($result['errors'] as $err)
                        <li>{{ $err }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
    @endif

    <div class="row">

        {{-- Left: current products --}}
        <div class="col-md-8">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span>Products in this environment <span class="badge badge-secondary ml-1">{{ $products->count() }}</span></span>
                    <a href="{{ route('appshell.product_sync.export') }}" class="btn btn-sm btn-success">
                        Export JSON
                    </a>
                </div>
                <div class="card-body p-0">
                    <table class="table table-hover mb-0">
                        <thead>
                            <tr>
                                <th>SKU</th>
                                <th>Name</th>
                                <th>Price</th>
                                <th>State</th>
                            </tr>
                        </thead>
                        <tbody>
                        @forelse($products as $product)
                            <tr>
                                <td><code>{{ $product->sku }}</code></td>
                                <td>{{ $product->name }}</td>
                                <td>${{ number_format($product->price, 2) }}</td>
                                <td>
                                    @if($product->state == 'active')
                                        <span class="badge badge-success">Active</span>
                                    @else
                                        <span class="badge badge-secondary">{{ $product->state }}</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center text-muted py-4">No products.</td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- Right: import --}}
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">Import Products</div>
                <div class="card-body">
                    <p class="text-muted small mb-3">
                        Upload a JSON file exported from another environment. Products whose SKU already exists here will be skipped. New products are always imported as <strong>inactive</strong>.
                    </p>
                    <form method="POST" action="{{ route('appshell.product_sync.import') }}" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group">
                            <label class="font-weight-bold">JSON File</label>
                            <input type="file" name="file" class="form-control-file" accept=".json" required>
                            @error('file')
                                <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                        <button type="submit" class="btn btn-primary btn-block">Import</button>
                    </form>
                </div>
            </div>
        </div>

    </div>

@stop