@extends('admin.layouts.app')

@section('title', 'Print Labels')

@php
    $codeValue = $code ?: ($product->barcode ?: $product->product_code);
    $labelText = $bottomText !== '' ? $bottomText : $product->product_name;
@endphp

@section('content')
<style>
    .barcode-print-shell {
        max-width: 1500px;
        margin: 0 auto;
    }
    .barcode-top-card {
        background: #fff;
        border: 1px solid #dbe4f0;
        border-radius: 22px;
        box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
        padding: 22px;
        margin-bottom: 22px;
    }
    .barcode-label-sheet {
        background: #fff;
        border: 1px solid #dbe4f0;
        border-radius: 22px;
        box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
        padding: 20px;
    }
    .barcode-grid {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: 10px;
    }
    .barcode-label {
        border: 1px dashed #cbd5e1;
        border-radius: 10px;
        background: #fff;
        padding: 6px 4px;
        text-align: center;
        overflow: hidden;
        min-height: 96px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .barcode-label img {
        width: 100%;
        max-width: 150px;
        height: 42px;
        object-fit: fill;
        display: block;
        margin: 0 auto 4px;
    }
    .barcode-code {
        font-size: 13px;
        line-height: 1.1;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 2px;
        word-break: break-all;
    }
    .barcode-bottom {
        font-size: 11px;
        line-height: 1.15;
        color: #334155;
        word-break: break-word;
    }
    .barcode-form-label {
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 8px;
    }
    .barcode-action-btn {
        min-width: 110px;
        height: 46px;
        border-radius: 14px;
        font-weight: 700;
    }

    @media (max-width: 1600px) {
        .barcode-grid { grid-template-columns: repeat(6, 1fr); }
    }
    @media (max-width: 1200px) {
        .barcode-grid { grid-template-columns: repeat(4, 1fr); }
    }
    @media (max-width: 768px) {
        .barcode-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media print {
        @page {
            size: A4 portrait;
            margin: 8mm;
        }

        html, body {
            background: #fff !important;
        }

        body * {
            visibility: hidden;
        }

        .print-area, .print-area * {
            visibility: visible;
        }

        .print-area {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        .barcode-top-card,
        .main-sidebar,
        .topbar,
        .navbar,
        .bd-topbar,
        .app-header,
        .no-print {
            display: none !important;
        }

        .barcode-label-sheet {
            border: none !important;
            box-shadow: none !important;
            border-radius: 0 !important;
            padding: 0 !important;
            margin: 0 !important;
            background: #fff !important;
        }

        .barcode-grid {
            display: grid !important;
            grid-template-columns: repeat(8, 1fr) !important;
            gap: 4mm !important;
            align-items: start;
        }

        .barcode-label {
            border: 1px dashed #bbb !important;
            border-radius: 2mm !important;
            padding: 2mm 1mm !important;
            min-height: 27mm !important;
            page-break-inside: avoid;
            break-inside: avoid;
        }

        .barcode-label img {
            max-width: 100% !important;
            width: 100% !important;
            height: 12mm !important;
            margin-bottom: 1mm !important;
        }

        .barcode-code {
            font-size: 9pt !important;
            margin-bottom: 0.6mm !important;
        }

        .barcode-bottom {
            font-size: 7.5pt !important;
            line-height: 1.1 !important;
        }
    }
</style>

<div class="container-fluid">
    <div class="barcode-print-shell">
        <div class="barcode-top-card no-print">
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-3 mb-3">
                <div>
                    <h3 class="fw-bold mb-1">{{ $product->product_name }} এর জন্য প্রিন্ট লেবেল</h3>
                    <div class="text-muted">এই পেজটি শুধু A4 প্রিন্ট শিটের জন্য ডিজাইন করা হয়েছে। প্রতি লাইনে 8টি লেবেল যাবে।</div>
                </div>
                <a href="{{ route('admin.barcodes.index') }}" class="btn btn-light border rounded-3 px-4">← Back</a>
            </div>

            <form method="GET" action="{{ route('admin.barcodes.print', $product->id) }}">
                <div class="row g-3 align-items-end">
                    <div class="col-md-3">
                        <label class="barcode-form-label">Product Code</label>
                        <input type="text" name="code" class="form-control form-control-lg rounded-4" value="{{ $codeValue }}">
                    </div>
                    <div class="col-md-2">
                        <label class="barcode-form-label">Copies</label>
                        <input type="number" min="1" max="400" name="copies" class="form-control form-control-lg rounded-4" value="{{ $copies }}">
                    </div>
                    <div class="col-md-3">
                        <label class="barcode-form-label">Bottom Text</label>
                        <input type="text" name="bottom_text" class="form-control form-control-lg rounded-4" value="{{ $labelText }}">
                    </div>
                    <div class="col-md-auto">
                        <button type="submit" class="btn btn-light border barcode-action-btn">Update</button>
                    </div>
                    <div class="col-md-auto">
                        <button type="button" onclick="window.print()" class="btn btn-dark barcode-action-btn">Print</button>
                    </div>
                </div>
            </form>
        </div>

        <div class="barcode-label-sheet print-area">
            <div class="barcode-grid">
                @for($i = 0; $i < $copies; $i++)
                    <div class="barcode-label">
                        <img src="https://barcode.tec-it.com/barcode.ashx?data={{ urlencode($codeValue) }}&code=Code128&multiplebarcodes=false&translate-esc=false&unit=Fit&dpi=96&imagetype=Gif&rotation=0&color=&bgcolor=&qunit=Mm&quiet=0" alt="Barcode">
                        <div class="barcode-code">{{ $codeValue }}</div>
                        <div class="barcode-bottom">{{ $labelText }}</div>
                    </div>
                @endfor
            </div>
        </div>
    </div>
</div>
@endsection
