@extends('layouts.admin')
@section('title', 'Product | Mintavia Admin')


@section('content')
    <div class="row">
        <div class="col-12">
            @if (isset($message) && $message)
                @switch($message['status'])
                    @case('success')
                        <script>
                            window.onload = function() {
                                toastr.success("{{ $message['message'] }}")
                            }
                        </script>
                    @break

                    @case('error')
                        <script>
                            window.onload = function() {
                                toastr.error("{{ $message['message'] }}")
                            }
                        </script>
                    @break
                @endswitch
            @endif
            <div class="card card-primary" wire:init="loadPosts">
                <div class="card-header d-flex align-items-center">
                    <h3 class="card-title">Trial Balance List</h3>

                </div>
                <div class="card-body">
                    <form class="" id="filter" method="post" action="{{ route('admin.products.generate') }}">
                        @csrf
                        <div class="row">
                            <div class="col-md-3">
                                <x-admin-input type="date" name="fromDate" id="from-date"
                                    value="{{ date('Y-m-d') }}"></x-admin-input>
                            </div>
                            <div class="col-md-3">
                                <x-admin-input type="date" name="toDate" id="to-date"
                                    value="{{ date('Y-m-d') }}"></x-admin-input>
                            </div>
                            <div class="col-md-3">
                                <x-admin-input type="select" name="type" id="type-select">
                                    <option value="1">Purchase Bill</option>
                                </x-admin-input>
                            </div>
                            <div class="col-md-3">
                                <button class="btn btn-success">OK</button>
                                <button type="button" onclick="document.getElementById('print-form').submit()"
                                    class="btn btn-primary">OK</button>
                            </div>
                        </div>
                    </form>
                    <form id="print-form" class="d-none" method="post" action="{{ route('admin.products.print') }}">
                        @csrf
                        <textarea class="d-none" name="print_data" id="print-data">[]</textarea>
                    </form>
                    <div style="max-height: 550px; overflow-y: auto;">
                        <table class="table table-sm table-striped table-bordered"
                            style="border-collapse: collapse; width: 100%;">
                            <thead style="position: sticky; top: 0; z-index: 1; background-color: white;">
                                <tr>
                                    <th style="white-space: nowrap;">#</th>
                                    <th style="white-space: nowrap;">Product Name</th>
                                    <th style="white-space: nowrap;">Barcode</th>
                                    <th style="white-space: nowrap;">Qty</th>
                                    <th style="white-space: nowrap;">Print Qty</th>
                                    <th style="white-space: nowrap;">Sale Price</th>
                                    <th style="white-space: nowrap;">MRP</th>
                                </tr>
                            </thead>
                            <tbody id="table-list">
                                <!-- dynamic rows will be inserted here -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('js')
    <script>
        (function($) {
            let myList = []
            $(function() {
                $('#filter').on('submit', function(e) {
                    e.preventDefault()
                    let url = $(this).attr('action')
                    const formdata = new FormData(this)
                    $.ajax({
                        url: url,
                        type: 'post',
                        contentType: false,
                        processData: false,
                        data: formdata,
                    }).then(function(res) {
                        return JSON.parse(res)
                    }).done(function(json) {
                        myList = []

                        $('#print-data').html(JSON.stringify(myList))
                        let Trow = ''
                        json.forEach(function(row, index) {
                            myList.push({
                                checkbox: false,
                                product_id: row.product_id,
                                barcode: row.barcode,
                                product_name: row.product_name,
                                mrp: row.mrp,
                                sale_price: row.sale_price,
                                qty: row.qty,
                                printqty: row.qty
                            })
                            Trow += '<tr>'
                            Trow += `
                            <td>
                            <input
data-index="${index}"
                                    type="checkbox"
                                    class="my-checkbox"
                                    id="my-class-${index}"
                                    value='${row.barcode}'>
                            </td>
                            <td>${row.product_name}</td>
                            <td>${row.barcode}</td>
                            <td>${row.qty}</td>
                            <td><input data-index="${index}" type="number" value="${Number(row.qty).toFixed(0)}" id="print-qty-${index}" class="form-control-sm print-qty"></td>
                            <td>${row.sale_price}</td>
                            <td>${row.mrp}</td>
                           `
                            Trow += '</tr>'
                        })
                        $('#print-data').html(JSON.stringify(myList))
                        $('#table-list').html(Trow)
                        $('.my-checkbox').on('change', function() {
                            let index = $(this).attr('data-index')
                            myList[index].checkbox = $(this).is(':checked')
                            console.log(myList)
                            $('#print-data').html(JSON.stringify(myList))
                        })
                        $('.print-qty').on('keyup', function() {
                            let index = $(this).attr('data-index')
                            myList[index].printqty = $(this).val()
                            console.log(myList)
                            $('#print-data').html(JSON.stringify(myList))
                        })
                    })

                })
            })
        })(jQuery)
    </script>
@endsection