@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">



    <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 }}" title="View Barcode">

                                                <i class="bi bi-upc-scan"></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>

                        </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>

@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!');



            }



        });



    });

</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');



        $('#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)');



        const modalEl = document.getElementById('barcodeModal');

        const barcodeModal = new bootstrap.Modal(modalEl);

        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 numberOfLabelsToPrint = 3; // 3x4 sheet



                const labelHTML = `



<!doctype html>



<html>



<head>



<meta charset="utf-8">



<title>Print Barcode</title>



<style>



@page {



    size: auto;



    margin: 0;



}



  html, body {



    width: 105mm;



    margin: 0;



    padding: 0;



    font-family: poppin;



}



.label-container {



    display: grid;



    grid-template-columns: 35mm 35mm 35mm;



    grid-auto-rows: 25mm;



    width: 105mm;



    padding: 0;



    margin: 0;



}



    /* Single label */



    .label {



        width: 35mm;



        height: 25mm;



        box-sizing: border-box;



        padding: 0.3mm 0.5mm; /* FIXED - better fit */



        display: flex;



        flex-direction: column;



        align-items: center;



        justify-content: flex-start;



        overflow: hidden;



        text-align: center;



    }



    /* Barcode */



    .barcode-wrapper {



        width: 100%;



        display: flex;



        justify-content: center;



        align-items: center;



    }



    .barcode-wrapper svg {



        width: 90%;



        height: auto;



        max-height: 10mm; /* FIXED - prevents clipping */



    }



    .company { 



        margin-top: 15px;



        font-size: 6px; 



        font-weight: bold; 



        line-height: 1;



    }



    .item-code { 



        font-size: 7px; 



        font-weight: bold; 



        margin-top: 0.5mm; /* FIXED for spacing */



        line-height: 1; 



    }



    .title { 



        font-size: 6px; 



        line-height: 1; 



    }



    .price { 



        font-size: 7px; 



        font-weight: bold; 



        line-height: 1; 



    }



</style>



</head>



<body>



    <div class="label-container">



        ${[...Array(numberOfLabelsToPrint)].map(() => `



                                                        <div class="label">



                                                            <div class="company">${companyName.slice(0, 25)}</div><br>



                                                            <div class="title">${title.slice(0, 25)}</div>



                                                            <div class="barcode-wrapper">${barcodeSvg}</div>



                                                            <div class="price">RS: ${sellPrice}</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>