@include('layouts.header')
@include('layouts.sidebar')

<!-- ========================
   Start Page Content
  ========================= -->

<style>
    div#sidebar {
        display: none;
    }

    .page-wrapper {
        margin: 0;
        width: 100%;
    }

    header.navbar-header {
        margin: 0 !important;
    }
</style>

<div class="page-wrapper">

    <!-- Start Content -->
    <div class="content" id="purchases">

        <!-- Start Page Header -->
        <div class="d-flex align-items-sm-center flex-sm-row flex-column gap-2 mb-3 pb-3 border-bottom">
            <div class="flex-grow-1">
                <a href=" {{ $route }}" class="btn btn-primary">Back</a>
            </div>
            <div class="flex-grow-1">
                <h4 class="fw-bold mb-0">New {{ $module }}</h4>
            </div>

        </div>
        <!-- End Page Header -->

        <form action="{{ $route }}" method="POST">
            @csrf
            <div class="card">
                <div class="card-body">

                    <div class="row">
                        <div class="col-md-4">
                            <label class="form-label">Vendor</label>
                            <select name="vendor_id" id="" class="form-control select2" required>
                                <option value="">Select Vendor</option>
                                @foreach ($vendors as $item)
                                    <option value="{{ $item->id }}">{{ $item->name }} - {{ $item->address }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-2">
                            <label class="form-label">Balance</label>
                            <input type="text" class="form-control" value="23,000" disabled>
                        </div>

                        <div class="col-md-2">
                            <label class="form-label">Date</label>
                            <input type="date" class="form-control" value="{{ date('Y-m-d') }}" disabled>
                        </div>

                        <div class="col-md-2">
                            <label class="form-label">Purchase Id</label>
                            <input type="text" class="form-control" value="PU-{{ mt_rand(1000, 9999) }}" disabled>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Invoice No</label>
                            <input type="text" name="invoice_no" class="form-control">
                        </div>
                    </div>

                </div>
            </div>


            <div class="card">
                <div class="card-body">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>HSN</th>
                                <th>Item Code</th>
                                <th width="20%">Item</th>
                                <th>Batch No</th>
                                <th>Packing</th>
                                <th>Item Per Pack</th>
                                <th>Qty</th>
                                <th>Rate</th>
                                <th>Disc Type</th>
                                <th>Disc Value</th>
                                <th>Disc Amount</th>
                                <th>Tax Rate</th>
                                <th>Tax Amount</th>
                                <th>Tot Amount</th>
                                <th>Exp. Date</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <input name="hsn[]" type="text" class="form-control">
                                </td>
                                <td>
                                    <input name="item_code[]" type="text" class="form-control">
                                </td>
                                <td>
                                    <select name="item[]" class="form-control select2" required>
                                        <option value="">Select Item</option>
                                        <option value="1">Paracetamol</option>
                                        <option value="2">Dolo 200</option>
                                    </select>
                                </td>
                                <td>
                                    <input name="batch_no[]" type="text" class="form-control">
                                </td>
                                <td>
                                    <input name="packing[]" type="number" class="form-control">
                                </td>
                                <td>
                                    <input name="item_per_pack[]" type="number" class="form-control">
                                </td>
                                <td>
                                    <input name="qty[]" type="number" class="form-control qty" required>
                                </td>
                                <td>
                                    <input name="rate[]" type="text" class="form-control qty" required>
                                </td>
                                <td>
                                    <div class="px-2" style="font-size: 12px;">
                                        <div class="form-check" style="min-height: unset;margin: 0;">
                                            <input class="form-check-input" type="radio" name="disc_type[]"
                                                >
                                            <label class="form-check-label">
                                                Fixed
                                            </label>
                                        </div>
                                        <div class="form-check" style="min-height: unset;margin: 0;">
                                            <input class="form-check-input" type="radio" name="disc_type[]"
                                                checked>
                                            <label class="form-check-label">
                                                Percentage
                                            </label>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <input name="disc_value" type="text" class="form-control">
                                </td>
                                <td>
                                    <input name="disc_amount" type="text" class="form-control">
                                </td>
                                <td>
                                    <input name="tax_rate" type="text" class="form-control">
                                </td>
                                <td>
                                    <input name="tax_amount" type="text" class="form-control">
                                </td>
                                <td>
                                    <input name="tot_amount" type="text" class="form-control">
                                </td>
                                <td>
                                    <input name="expiry_date" type="Date" class="form-control" required>
                                </td>
                                <td>
                                    <button type="button" class="btn btn-success addBtn">+</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="card" id="purchase-tot-area">
                <div class="card-body">
                    <div class="d-flex justify-items-center align-items-center">
                        <div class="hglt">
                            Total Items:  <b><span id="totItems">0.00</span></b>
                        </div>
                        <div class="hglt">
                            Total Pur. Rate:  <b><span id="totPurchaseRate">0.00</span></b>
                        </div>
                        <div class="hglt">
                            Total Sale. Rate:  <b><span id="totSaleRate">0.00</span></b>
                        </div>
                        <div style="width: 60%">
                            <button type="submit" class="btn btn-lg btn-primary w-100">Add Purchase</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>


    </div>
    <!-- End Content -->

</div>

<!-- ========================
   End Page Content
  ========================= -->


<script>
    $(document).on('click', '.addBtn', function() {

        let newRow = `
    <tr>
                                <td>
                                    <input name="hsn[]" type="text" class="form-control">
                                </td>
                                <td>
                                    <input name="item_code[]" type="text" class="form-control">
                                </td>
                                <td>
                                    <select name="item[]" class="form-control select2" required>
                                        <option value="">Select Item</option>
                                        <option value="1">Paracetamol</option>
                                        <option value="2">Dolo 200</option>
                                    </select>
                                </td>
                                <td>
                                    <input name="batch_no[]" type="text" class="form-control">
                                </td>
                                <td>
                                    <input name="packing[]" type="number" class="form-control">
                                </td>
                                <td>
                                    <input name="item_per_pack[]" type="number" class="form-control">
                                </td>
                                <td>
                                    <input name="qty[]" type="number" class="form-control qty" required>
                                </td>
                                <td>
                                    <input name="rate[]" type="text" class="form-control qty" required>
                                </td>
                                <td>
                                    <div class="px-2" style="font-size: 12px;">
                                        <div class="form-check" style="min-height: unset;margin: 0;">
                                            <input class="form-check-input" type="radio" name="disc_type[]"
                                                id="">
                                            <label class="form-check-label" for="">
                                                Fixed
                                            </label>
                                        </div>
                                        <div class="form-check" style="min-height: unset;margin: 0;">
                                            <input class="form-check-input" type="radio" name="disc_type[]"
                                                id="" checked>
                                            <label class="form-check-label" for="">
                                                Percentage
                                            </label>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <input name="disc_value" type="text" class="form-control">
                                </td>
                                <td>
                                    <input name="disc_amount" type="text" class="form-control">
                                </td>
                                <td>
                                    <input name="tax_rate" type="text" class="form-control">
                                </td>
                                <td>
                                    <input name="tax_amount" type="text" class="form-control">
                                </td>
                                <td>
                                    <input name="tot_amount" type="text" class="form-control">
                                </td>
                                <td>
                                    <input name="expiry_date" type="Date" class="form-control" required>
                                </td>
                                <td>
                                    <button type="button" class="btn btn-success addBtn">+</button>
                                </td>
                            </tr>
    `;

        $('table tbody').append(newRow);

        // reinitialize select2 for new row
        $('.select2').select2();

        calculateTotals();

    });

    $(document).on('click', '.removeBtn', function() {
        $(this).closest('tr').remove();
        calculateTotals();
    });


    function calculateTotals() {

        let totalItems = 0;
        let totalPurchase = 0;
        let totalSale = 0;

        $('table tbody tr').each(function() {

            let qty = parseFloat($(this).find('.qty').val()) || 0;
            let purchase = parseFloat($(this).find('.purchase_rate').val()) || 0;
            let sale = parseFloat($(this).find('.sale_rate').val()) || 0;

            totalItems += qty;
            totalPurchase += (qty * purchase);
            totalSale += (qty * sale);
        });

        $('#totItems').text(totalItems.toFixed(2));
        $('#totPurchaseRate').text(totalPurchase.toFixed(2));
        $('#totSaleRate').text(totalSale.toFixed(2));
    }

    $(document).on('blur keyup', '.qty, .purchase_rate, .sale_rate', function() {
        calculateTotals();
    });
</script>

@include('layouts.footer')