@extends('admin.layouts')
@section('title', 'Product Variants')
@section('content')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="container-fluid mt-4">
    <h3 class="fw-bold"> <button type="button" class="btn btn-icon bg-white me-2 mb-2"
            style="box-shadow: 0px 9px 12px -2px #66328E1F;">
            <a href="{{ route('products2') }}">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="icon icon-tabler">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path d="M15 6l-6 6l6 6" />
                </svg>
            </a>
        </button>View Variant</h3>
    <form action="{{ route('add_variant') }}" method="POST" class="mb-4"> @csrf <input type="hidden"
            name="product_id" value="{{ $product->product_id }}">
        {{-- Row 1 --}}
        <div class="row g-2 mb-2">
            <div class="col-md-3"> <input type="text" name="variant_name" class="form-control"
                    placeholder="Variant Name" required> </div>
            <div class="col-md-3"> <input type="number" name="mrp" class="form-control" placeholder="MRP" required>
            </div>
            <div class="col-md-3"> <input type="number" name="purchase_price" class="form-control"
                    placeholder="Purchase Price"> </div>
            <div class="col-md-3"> <input type="number" name="sell_price" class="form-control"
                    placeholder="Selling Price" required> </div>
        </div>
        {{-- Row 2 --}}
        <div class="row g-2 mb-2">
            <div class="col-md-3"> <input type="number" name="stock" class="form-control" placeholder="Stock"> </div>
            <div class="col-md-3"> <input type="text" name="barcode1" class="form-control"
                    placeholder="e.g., BAC1001"> </div>
            <!-- <div class="col-md-3">                            <input type="text" name="barcode2" class="form-control" placeholder="e.g., BAC1002">                        </div> -->
            <div class="col-md-3"> <button class="btn btn-primary w-100"> <i class="bi bi-plus"></i> Add Variant
                </button> </div>
        </div>
    </form>
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Variants - {{ $product->title }}</h5>
        </div>
        <div class="card-body">
            <table id="variantTable" class="table table-bordered table-striped align-middle">
                <thead class="table-light">
                    <tr>
                        <th>#</th>
                        <th>Variant ID</th>
                        <th>Variant Name</th>
                        <th>MRP</th>
                        <th>Purchase Price</th>
                        <th>Selling Price</th>
                        <th>Stock</th>
                        <th>BarCode</th>
                        <th>Action</th>
                    </tr>
                </thead>
                {{-- <tbody>
                    @foreach ($variants as $variant)
                    <tr data-variant-id="{{ $variant->id }}">
                        <td>{{ $loop->iteration }}</td>
                        <td>{{ $variant->product_id }}</td>
                        <td> <input type="text" class="form-control form-control-sm"
                                value="{{ $variant->title }}" style="border:none;"> </td>
                        <td> <input type="number" class="form-control form-control-sm" value="{{ $variant->mrp }}"
                                style="border:none;"> </td>
                        <td> <input type="number" class="form-control form-control-sm"
                                value="{{ $variant->purchase_price }}" style="border:none;"> </td>
                        <td> <input type="number" class="form-control form-control-sm"
                                value="{{ $variant->sell_price }}" style="border:none;"> </td>
                        <td> <input type="number" class="form-control form-control-sm"
                                value="{{ $variant->stock }}" style="border:none;"> </td>
                        <td> <input type="text" class="form-control form-control-sm"
                                value="{{ $variant->barcode1 }}" style="border:none;"> </td>
                        <td> <button type="submit" class="btn btn-sm btn-success" title="Save"> <i
                                    class="bi bi-check"></i>
                            </button>
                            <a href="#" class="btn btn-sm btn-danger" data-bs-toggle="modal"
                                data-bs-target="#deleteConfirmModal" data-variant-id="{{ $variant->id }}"
                                onclick="setDeleteId(this)"> <i class="fa-regular fa-trash-can"></i> </a>
                           <button type="button" class="btn btn-sm btn-outline-secondary p-1 viewBarcodeBtn"
    data-id="{{ $variant->product_id }}"
    data-title="{{ $variant->title }}"
    data-sellprice="{{ $variant->sell_price }}"
    data-productid="{{ $variant->id }}"
    title="View Barcode">
    <i class="bi bi-upc-scan"></i>
</button>
                            <button type="button" class="btn btn-sm btn-outline-warning p-1 addExpiryBtn"
                                data-product-id="{{ $variant->id }}" data-bs-toggle="modal"
                                data-bs-target="#expiryModal" title="Add Expiry Date">
                                <i class="bi bi-calendar-event"></i>
                            </button>
                        </td>
                    </tr>
                    @endforeach
                </tbody> --}}
                <tbody>

    {{-- ✅ PARENT PRODUCT ROW FIRST --}}
    <tr class="table-primary fw-bold">
        <td>#</td>
        <td>{{ $product->product_id }}</td>

        <td>{{ $product->title }}</td>

        <td>{{ number_format($product->mrp ?? 0, 2) }}</td>

        <td>{{ number_format($product->purchase_price ?? 0, 2) }}</td>

        <td>{{ number_format($product->sell_price ?? 0, 2) }}</td>

        <td>{{ $product->stock ?? 0 }}</td>

        <td>{{ $product->barcode1 ?? '-' }}</td>

        <td>
            <span class="badge bg-success">Main Product</span>
        </td>
    </tr>

    {{-- ✅ VARIANTS --}}
    @foreach ($variants as $variant)
    <tr data-variant-id="{{ $variant->id }}">

        <td>{{ $loop->iteration }}</td>

        <td>{{ $variant->product_id }}</td>

        <td>
            <input type="text" class="form-control form-control-sm"
                value="{{ $variant->title }}" style="border:none;">
        </td>

        <td>
            <input type="number" class="form-control form-control-sm"
                value="{{ $variant->mrp }}" style="border:none;">
        </td>

        <td>
            <input type="number" class="form-control form-control-sm"
                value="{{ $variant->purchase_price }}" style="border:none;">
        </td>

        <td>
            <input type="number" class="form-control form-control-sm"
                value="{{ $variant->sell_price }}" style="border:none;">
        </td>

        <td>
            <input type="number" class="form-control form-control-sm"
                value="{{ $variant->stock }}" style="border:none;">
        </td>

        <td>
            <input type="text" class="form-control form-control-sm"
                value="{{ $variant->barcode1 }}" style="border:none;">
        </td>

        <td>
            <button type="submit" class="btn btn-sm btn-success">
                <i class="bi bi-check"></i>
            </button>

            <a href="#" class="btn btn-sm btn-danger"
                data-bs-toggle="modal"
                data-bs-target="#deleteConfirmModal"
                data-variant-id="{{ $variant->id }}"
                onclick="setDeleteId(this)">
                <i class="fa-regular fa-trash-can"></i>
            </a>

            <button type="button"
                class="btn btn-sm btn-outline-secondary viewBarcodeBtn"
                data-id="{{ $variant->product_id }}"
                data-title="{{ $variant->title }}"
                data-sellprice="{{ $variant->sell_price }}"
                data-productid="{{ $variant->id }}">
                <i class="bi bi-upc-scan"></i>
            </button>

            <button type="button"
                class="btn btn-sm btn-outline-warning addExpiryBtn"
                data-product-id="{{ $variant->id }}"
                data-bs-toggle="modal"
                data-bs-target="#expiryModal">
                <i class="bi bi-calendar-event"></i>
            </button>
        </td>

    </tr>
    @endforeach

</tbody>
            </table>
        </div>
    </div>
    <div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered">
            <div class="modal-content  rounded-4 text-center p-4 py-5">
                <div class="mb-3"> <i class="fa-solid fa-trash-can fa-2x text-danger"></i> </div>
                <h5 class="fw-bold mb-2">Are you sure?</h5>
                <p class="text-muted">You want to delete this variant?</p>
                <div class="d-flex justify-content-center align-items-center gap-3 mt-4"> <button type="button"
                        class="btn btn-outline-secondary px-4 fw-semibold" data-bs-dismiss="modal">Cancel</button>
                    <form method="POST" action="{{ route('delete_variant') }}" id="DeleteForm" class="d-flex m-0">
                        @csrf <input type="hidden" id="delete_id" name="delete_id">
                        <button type="submit" class="btn btn-secondary px-4 fw-semibold" id="submit_delete">Yes,
                            Delete</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="barcodeModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Barcode</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center" id="barcode-content-to-print">
                    <h5 class="modal-title mb-2" id="modalRole"></h5>
                    <svg id="barcodeModalSvg"></svg>
                    <div class="mt-3 text-center">
                        <p><strong>Item Code:</strong> <span id="modalItemCode"></span></p>
                        <p><strong>Title:</strong> <span id="modalTitle"></span></p>
                        <p><strong>SP:</strong> <span id="modalSellPrice"></span></p>
                        <p><strong>Expiry Date:</strong> <span id="modalExpiryDate">-</span></p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="downloadBarcodeBtnModal" class="btn btn-sm btn-primary">Download as PDF</button>
                    <button id="printBarcodeBtnModal" class="btn btn-sm btn-success">Print Label</button>
                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="expiryModal" tabindex="-1">
        <div class="modal-dialog">
            <form id="expiryForm">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Add Expiry Date</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <input type="text" name="product_id" id="expiry_product_id">
                        <label>Expiry Option</label>
                        <select class="form-control" name="expiry">
                            <option value="">None</option>
                            <option value="3">3 Months</option>
                            <option value="6">6 Months</option>
                        </select>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-warning">Save</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
<style>
    table th,
    table td {
        vertical-align: middle;
        white-space: nowrap;
    }
    .dataTables_wrapper .dataTables_length {
        float: left;
    }
    .dataTables_wrapper .dataTables_filter {
        float: right;
        text-align: right;
    }
    .dataTables_wrapper .dataTables_filter label {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .dataTables_wrapper .dataTables_filter input {
        margin-left: 0.5em;
    }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.6/dist/JsBarcode.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script>
    $(document).on('click', '.btn-success', function(e) {
        e.preventDefault();
        let row = $(this).closest('tr');
        let variantId = row.data('variant-id');
        let data = {
            variant_name: row.find('input').eq(0).val(),
            mrp: row.find('input').eq(1).val(),
            purchase_price: row.find('input').eq(2).val(),
            sell_price: row.find('input').eq(3).val(),
            stock: row.find('input').eq(4).val(),
            barcode1: row.find('input').eq(5).val(),
            _token: $('meta[name="csrf-token"]').attr('content'),
            variant_id: variantId
        };
        $.ajax({
            url: '{{ route('update_variant') }}',
            type: 'POST',
            data: data,
            success: function(response) {
                if (response.status === 'success') {
                    alert(response.message);
                } else {
                    alert(response.message);
                }
            },
            error: function(xhr) {
                console.log(xhr.responseText);
                alert('Something went wrong!');
            }
        });
    });
    $(document).ready(function() {
        $(document).on('click', '.addExpiryBtn', function() {
            let productId = $(this).data('product-id');
            $('#expiry_product_id').val(productId);
        });
        $('#expiryForm').on('submit', function(e) {
            e.preventDefault();
            $.ajax({
                url: "{{ route('updateExpiry') }}",
                type: "POST",
                data: $(this).serialize(),
                success: function(res) {
                    if (res.status) {
                        // Properly close modal
                        let modal = bootstrap.Modal.getInstance(document.getElementById('expiryModal'));
                        modal.hide();
                        alert(res.message);
                        // Optional: refresh page automatically
                        location.reload();
                    }
                },
                error: function() {
                    alert('Something went wrong');
                }
            });
        });
    });
</script>
<script>
    $(document).ready(function() {
        $('#variantTable').DataTable({
            responsive: true,
            paging: true,
            searching: true,
            ordering: true,
            pageLength: 10,
            lengthMenu: [10, 25, 50, 100],
            language: {
                search: "Search Variant:",
                lengthMenu: "Show _MENU_ variants",
                info: "Showing _START_ to _END_ of _TOTAL_ variants"
            },
            columnDefs: [{
                orderable: false,
                targets: -1
            }],
        });
    });
</script>
<script>
    function setDeleteId(button) {
        var deleteId = button.getAttribute('data-variant-id');
        document.getElementById('delete_id').value = deleteId;
    }
</script>
<script>
    $(document).ready(function() {
        const companyName = "{{ Auth::user()->branch_name ?? (Auth::user()->name ?? 'My Company') }}";
        $(document).on('click', '.viewBarcodeBtn', function() {
            const itemCode = $(this).data('id');
            const title = $(this).data('title');
            const sellPrice = $(this).data('sellprice');
            const productId = $(this).data('productid');
            $('#barcodeModalSvg').empty();
            if (typeof JsBarcode === "undefined") {
                alert("JsBarcode not loaded");
                return;
            }
            JsBarcode("#barcodeModalSvg", itemCode, {
                format: "CODE128",
                lineColor: "#000",
                width: 2,
                height: 50,
                displayValue: true
            });
            $('#modalRole').text(companyName);
            $('#modalItemCode').text(itemCode);
            $('#modalTitle').text(title || '(No Title)');
            $('#modalSellPrice').text(sellPrice || '(No Price)');
             $('#modalExpiryDate').text('Calculating...');
           $.ajax({
                url: "{{ route('calculateExpiry') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    product_id: productId
                },
                success: function(res) {
                    if (res.status && res.expiry) {
                        $('#modalExpiryDate').text(res.expiry);
                    } else {
                        $('#modalExpiryDate').text('No Expiry');
                    }
                },
                error: function() {
                    $('#modalExpiryDate').text('N/A');
                }
            });
            new bootstrap.Modal(document.getElementById('barcodeModal')).show();
        });
        const printBtn = document.getElementById('printBarcodeBtnModal');
        if (printBtn) {
            printBtn.addEventListener('click', function() {
                const itemCode = document.getElementById('modalItemCode').innerText;
                const title = document.getElementById('modalTitle').innerText;
                const sellPrice = document.getElementById('modalSellPrice').innerText;
                const barcodeSvg = document.getElementById('barcodeModalSvg').outerHTML;
                const companyName = document.getElementById('modalRole').innerText;
                 const packedDate = new Date().toLocaleDateString('en-GB'); // dd/mm/yyyy
let expiryDate = document.getElementById('modalExpiryDate') ?
    document.getElementById('modalExpiryDate').innerText.trim() :
    '';
if (
    !expiryDate ||
    expiryDate.toLowerCase() === 'no expiry' ||
    expiryDate === '-' ||
    expiryDate.toLowerCase() === 'n/a'
) {
    expiryDate = '';
}
                const numberOfLabelsToPrint = 3; // 3x4 sheet
                const labelHTML = `
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Print Barcode</title>
<style>
    @page {
        size: auto;
        margin: 0;
    }
    body {
        margin: 0;
        padding: 0;
        font-family: 'Poppins', sans-serif; /* Corrected font name */
    }
    .label-container {
        display: grid;
        grid-template-columns: 35mm 35mm 35mm; /* 3 columns */
        grid-auto-rows: 25mm; /* Fixed height */
        width: 105mm;
    }
    .label {
        width: 35mm;
        height: 25mm;
        box-sizing: border-box;
        padding: 1mm;
        border: 1px dotted #ddd; /* Optional: remove for final print */
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .header-section {
        text-align: center;
    }
    .company {
        font-size: 8pt;
        font-weight: bold;
        line-height: 1;
        margin-bottom: 4px;
    }
    .title-box {
        background: #000;
        color: #fff;
        font-size: 7pt;
        font-weight: bold;
        text-align: center;
        padding: 1px 0;
        margin-bottom: 1px;
    }
    /* TABLE LAYOUT FOR BARCODE & PRICE (The Fix) */
    .layout-table {
        width: 100%;
        border-collapse: collapse;
        margin: 0;
    }
    .layout-table td {
        vertical-align: middle;
        padding: 0;
    }
    .barcode-cell {
        width: 75%;
        text-align: left;
    }
    .price-cell {
        width: 30%;
        text-align: right;
    }
    /* Force SVG to fit the cell */
    .barcode-cell svg {
        width: 100%;
        height: auto;
        max-height: 10mm;
        display: block; /* Removes bottom spacing */
    }
    .price-text {
        font-size: 11pt;
        font-weight: bold;
        white-space: nowrap;
    }
    .footer {
        font-size: 5pt;
        font-weight: bold;
        display: flex;
        justify-content: space-between;
        margin-top: 1px;
    }
</style>
</head>
<body>
    <div class="label-container">
        ${[...Array(numberOfLabelsToPrint)].map(() => `
            <div class="label">
                <div class="header-section">
                    <div class="company">${companyName.slice(0, 20)}</div>
                    <div>${title.slice(0, 20)} - 250g</div>
                </div>
                <table class="layout-table">
                    <tr>
                        <td class="barcode-cell">
                            ${barcodeSvg}
                        </td>
                        <td class="price-cell">
                            <div class="price-text">Rs. ${Math.round(Number(sellPrice))}</div>
                        </td>
                    </tr>
                </table>
${expiryDate ? `
    <div class="footer">
        <span>PKD: ${packedDate}</span>
        <span>EXP: ${expiryDate}</span>
    </div>
` : ''}
            </div>
        `).join('')}
    </div>
</body>
</html>
`;
                const printWindow = window.open('', '_blank', 'width=900,height=1200');
                printWindow.document.write(labelHTML);
                printWindow.document.close();
                printWindow.onload = function() {
                    printWindow.print();
                    setTimeout(() => printWindow.close(), 500);
                };
            });
        }
        document.getElementById('downloadBarcodeBtnModal').addEventListener('click', function() {
            const {
                jsPDF
            } = window.jspdf;
            const pdf = new jsPDF('l', 'mm', [110, 25]);
            const companyEl = document.getElementById('modalRole');
            const companyName = companyEl ? companyEl.innerText : 'Company';
            const itemCode = document.getElementById('modalItemCode').innerText;
            const title = document.getElementById('modalTitle').innerText;
            const sellPrice = document.getElementById('modalSellPrice').innerText;
            const canvas = document.createElement('canvas');
            canvas.width = 400;
            canvas.height = 80;
            JsBarcode(canvas, itemCode, {
                format: "CODE128",
                width: 2,
                height: 50,
                displayValue: false
            });
            const imgData = canvas.toDataURL("image/png");
            const labelW = 110 / 3;
            function drawLabel(xOffset) {
                const centerX = xOffset + labelW / 2;
                let y = 2;
                pdf.setFontSize(6.5);
                pdf.text(companyName.slice(0, 25), centerX, y, {
                    align: 'center'
                });
                y += 1;
                pdf.addImage(imgData, 'PNG', centerX - 15, y, 30, 10);
                y += 11;
                pdf.setFontSize(6);
                pdf.text(itemCode, centerX, y, {
                    align: 'center'
                });
                y += 2.5;
                pdf.text(title.slice(0, 25), centerX, y, {
                    align: 'center'
                });
                y += 2.5;
                pdf.text(`SP: ${sellPrice}`, centerX, y, {
                    align: 'center'
                });
            }
            drawLabel(0);
            drawLabel(labelW);
            drawLabel(labelW * 2);
            pdf.save(`barcode_${itemCode}.pdf`);
        });
    });
</script>