@extends('layouts.app')

@section('title', 'Label Preview - Batch ' . $batch->batch_number)

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1">
                <li class="breadcrumb-item"><a href="{{ route('manufacturing.batches.index') }}">Manufacturing</a></li>
                <li class="breadcrumb-item"><a href="{{ route('manufacturing.batches.show', $batch) }}">{{ $batch->batch_number }}</a></li>
                <li class="breadcrumb-item active">Label Preview</li>
            </ol>
        </nav>
        <h2 class="h3 fw-bold mb-0">Label Print Preview & Configuration</h2>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('manufacturing.batches.show', $batch) }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i> Back to Batch
        </a>
        <a href="{{ route('manufacturing.labels.print-batch', ['batch' => $batch->id, 'format' => $format, 'limit' => $limit]) }}" 
           target="_blank" class="btn btn-primary">
            <i class="bi bi-printer me-1"></i> Open Printable Sheet ({{ $units->count() }} Labels)
        </a>
    </div>
</div>

<div class="row g-4 mb-4">
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white py-3">
                <h5 class="card-title fw-bold mb-0">Print Settings</h5>
            </div>
            <div class="card-body">
                <form method="GET" action="{{ route('manufacturing.labels.preview-batch', $batch) }}">
                    <div class="mb-3">
                        <label for="format" class="form-label fw-semibold">Label Output Format</label>
                        <select name="format" id="format" class="form-select" onchange="this.form.submit()">
                            @foreach($formats as $fKey => $fLabel)
                                <option value="{{ $fKey }}" {{ $format === $fKey ? 'selected' : '' }}>
                                    {{ $fLabel }}
                                </option>
                            @endforeach
                        </select>
                        <div class="form-text">Choose between standard thermal roll printer or multi-up A4 sheet.</div>
                    </div>

                    <div class="mb-3">
                        <label for="limit" class="form-label fw-semibold">Preview Sample Limit</label>
                        <select name="limit" id="limit" class="form-select" onchange="this.form.submit()">
                            <option value="6" {{ $limit == 6 ? 'selected' : '' }}>6 units</option>
                            <option value="12" {{ $limit == 12 ? 'selected' : '' }}>12 units</option>
                            <option value="24" {{ $limit == 24 ? 'selected' : '' }}>24 units (Full A4 sheet)</option>
                            <option value="50" {{ $limit == 50 ? 'selected' : '' }}>50 units</option>
                        </select>
                    </div>

                    <button type="submit" class="btn btn-outline-primary w-100">
                        <i class="bi bi-arrow-clockwise me-1"></i> Refresh Preview
                    </button>
                </form>

                <hr class="my-4">

                <div class="bg-light p-3 rounded">
                    <h6 class="fw-bold mb-2">Batch Specifications</h6>
                    <ul class="list-unstyled mb-0 small">
                        <li class="mb-1"><strong>Product:</strong> {{ $batch->product->name }}</li>
                        <li class="mb-1"><strong>Size/Weight:</strong> {{ $batch->product->size_or_weight }} {{ $batch->product->unit_of_measurement }}</li>
                        <li class="mb-1"><strong>Batch No:</strong> <span class="font-monospace">{{ $batch->batch_number }}</span></li>
                        <li class="mb-1"><strong>Mfg Date:</strong> {{ $batch->manufacturing_date->format('d M Y') }}</li>
                        <li class="mb-1"><strong>Exp Date:</strong> {{ $batch->expiry_date->format('d M Y') }}</li>
                        <li class="mb-1"><strong>Total Generated Units:</strong> {{ $batch->units()->count() }}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-8">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                <h5 class="card-title fw-bold mb-0">
                    Live Visual Preview ({{ $formats[$format] ?? $format }})
                </h5>
                <span class="badge bg-secondary">Showing {{ $units->count() }} of {{ $batch->units()->count() }} units</span>
            </div>
            <div class="card-body bg-light p-4">
                @if($units->isEmpty())
                    <div class="text-center py-5 text-muted">
                        <i class="bi bi-exclamation-circle display-4 mb-3 d-block text-warning"></i>
                        <h5>No units generated for this batch yet</h5>
                        <p>Generate product units on the batch details page before previewing or printing labels.</p>
                        <a href="{{ route('manufacturing.batches.show', $batch) }}" class="btn btn-primary mt-2">
                            Go to Batch Details
                        </a>
                    </div>
                @else
                    <div class="row g-3">
                        @foreach($units as $unit)
                            <div class="{{ $format === 'sheet_a4_grid' ? 'col-md-4 col-sm-6' : ($format === 'thermal_100x50' ? 'col-md-6' : 'col-md-6 col-lg-4') }}">
                                <div class="label-preview-card p-3 bg-white border rounded shadow-sm position-relative">
                                    <div class="d-flex align-items-center justify-content-between border-bottom pb-1 mb-2">
                                        <div class="fw-bold small text-uppercase" style="letter-spacing: 0.5px; color: #198754;">
                                            Pavitram Agroz
                                        </div>
                                        <span class="badge bg-light text-dark border font-monospace" style="font-size: 0.65rem;">
                                            {{ $unit->status }}
                                        </span>
                                    </div>

                                    <div class="row g-2 align-items-center">
                                        <div class="col-4 text-center">
                                            <div class="qr-svg-wrapper border p-1 rounded bg-white d-inline-block">
                                                {!! $unit->qr_svg !!}
                                            </div>
                                            <div class="font-monospace text-muted mt-1" style="font-size: 0.6rem; word-break: break-all;">
                                                {{ substr($unit->qr_token, 0, 8) }}...
                                            </div>
                                        </div>
                                        <div class="col-8">
                                            <div class="fw-bold text-truncate" style="font-size: 0.82rem;" title="{{ $batch->product->name }}">
                                                {{ $batch->product->name }}
                                            </div>
                                            <div class="text-muted mb-1" style="font-size: 0.72rem;">
                                                Net Qty: {{ $batch->product->size_or_weight }} {{ $batch->product->unit_of_measurement }}
                                            </div>
                                            <div class="font-monospace small mb-1" style="font-size: 0.7rem;">
                                                <strong>B:</strong> {{ $batch->batch_number }}
                                            </div>
                                            <div class="text-muted" style="font-size: 0.68rem;">
                                                <strong>M:</strong> {{ $unit->manufacturing_date->format('d/m/y') }} | 
                                                <strong>E:</strong> {{ $unit->expiry_date->format('d/m/y') }}
                                            </div>
                                            <div class="font-monospace fw-bold text-primary mt-1 border-top pt-1" style="font-size: 0.72rem;">
                                                {{ $unit->serial_number }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection