@extends('layouts.master')

@section('title', 'Invoice | ')
@section('content')
<!-- Select2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<!-- jQuery + Select2 JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    @include('partials.header')
    @include('partials.sidebar')
    <main class="app-content">
        <div class="app-title">
            <div>
                <h1><i class="fa fa-edit"></i>New Invoice Entry</h1>
            </div>
            <ul class="app-breadcrumb breadcrumb">
                <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
                <li class="breadcrumb-item">Invoices</li>
                <li class="breadcrumb-item"><a href="#">Create</a></li>
            </ul>
        </div>


         <div class="row">
             <div class="clearix"></div>
            <div class="col-md-12">
                <div class="tile">
                    <h3 class="tile-title">Invoice Entry</h3>
                    <div class="tile-body">
                        <form  method="POST" action="{{route('invoice.store')}}">
                            @csrf
{{-- ✅ Show Validation Errors --}}
    @if($errors->any())
        <div class="alert alert-danger mt-2">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
                            <div class="form-group col-md-3">
                                <label class="control-label">Customer Name</label>
<select name="customer_id" class="form-control select2">
    <option>Select Customer</option>
    @foreach($customers as $customer)
        <option value="{{ $customer->customer_id }}">{{ $customer->name }}</option>
    @endforeach
</select>
                    </div>
                            <div class="form-group col-md-3">
                                <label class="control-label">Date</label>
                                <input name="date"  class="form-control datepicker"  value="2025-08-20" type="date" placeholder="Enter your email">
                            </div>


<div class="table-responsive" style="overflow-x: auto;">
                         <table class="table table-bordered" style="width: 100%; min-width: 1500px; font-size: 9pt;">
 <thead>
    <tr>
        <th>Item</th>
        <th>Qty</th>
        <th>Price</th>
        <th>Discount (%)</th>
        <th>Amount</th> <!-- Added here -->
        <th>Batch No.</th>
        <th>Pack Size</th>
        <th>Bonus</th>
<th scope="col"><a class="addRow badge badge-success text-white"><i class="fa fa-plus"></i> Add Row</a></th>
    </tr>
</thead>
                            <tbody>
                            <tr>
<td>
<select name="product_id[]" class="form-control select2 productname">
    <option value="">Select Product</option>
    @foreach($products as $product)
        <option 
            value="{{ $product->item_id }}"
            data-price="{{ $product->sales_price }}"
            data-batch="{{ $product->batch_no }}"
            data-pack="{{ $product->Unit_One_Packing }}">
            {{ $product->name }}
        </option>
    @endforeach
</select>
</td>
                                <td><input type="text" name="qty[]" class="form-control qty" style="font-size: 9pt;" ></td>
                                <td><input type="text" name="price[]" class="form-control price" style="font-size: 9pt;"></td>
                                <td><input type="text" name="dis[]" class="form-control dis" value="0" style="font-size: 9pt;"></td>
                                <td><input type="text" name="amount[]" class="form-control amount" style="font-size: 9pt;"></td>
    <td>
        <input type="text" name="batch_no[]" class="form-control" value="{{ $product->batch_no }}" disabled style="font-size: 9pt;">
    </td>
    <td>
        <input type="text" name="pack_size[]" class="form-control" value="{{ $product->Unit_One_Packing }} disabled style="font-size: 9pt;"" >
    </td>
    <td>
        <input type="number" name="bonus[]" class="form-control" value="0" style="font-size: 9pt;">
    </td>
                                <td><a   class="btn btn-danger remove"> <i class="fa fa-remove"></i></a></td>
                             </tr>
                            </tbody>
                            <tfoot>
                            <tr>
                                <td></td>
                               
                                <td><b>Total</b></td>
                                <td><b class="total"></b></td>
                                <td></td>
                            </tr>
                            </tfoot>

                        </table>

                            <div >
                                <button class="btn btn-primary" type="submit">Submit</button>
                            </div>
                     </form>
                    </div>
                </div>


                </div>
            </div>







    </main>

@endsection
@push('js')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="{{ asset('/') }}js/multifield/jquery.multifield.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    // Initialize all select2s on page load
    $('.select2').select2({
        placeholder: "Select Product",
        allowClear: true,
        width: 'resolve',
        dropdownAutoWidth: true
    });

    // Set price when product is selected
$(document).on('change', '.productname', function () {
    var selected = $(this).find('option:selected');
    var price = selected.data('price');
    var batch = selected.data('batch');
    var pack = selected.data('pack');

    var row = $(this).closest('tr');
    row.find('.price').val(price);
    row.find('.batch_no').val(batch);
    row.find('.pack_size').val(pack);
    row.find('.qty').focus();
});

    // Recalculate amount when qty/price/discount is typed
    $('tbody').on('keyup', '.qty, .price, .dis', function () {
        var tr = $(this).closest('tr');
        var qty = parseFloat(tr.find('.qty').val()) || 0;
        var price = parseFloat(tr.find('.price').val()) || 0;
        var dis = parseFloat(tr.find('.dis').val()) || 0;
        var amount = (qty * price) - ((qty * price * dis) / 100);
        tr.find('.amount').val(amount.toFixed(2));
        total();
    });

    // Calculate total
    function total() {
        var total = 0;
        $('.amount').each(function () {
            total += parseFloat($(this).val()) || 0;
        });
        $('.total').html(total.toFixed(2));
    }

    // Add new row
    $('.addRow').on('click', function () {
        addRow();
    });

function addRow() {
    var newRow = `<tr>
        <td>
            <select name="product_id[]" class="form-control select2 productname">
                <option value="">Select Product</option>
                @foreach($products as $product)
                    <option 
                        value="{{ $product->item_id }}" 
                        data-price="{{ $product->sales_price }}" 
                        data-batch="{{ $product->batch_no }}" 
                        data-pack="{{ $product->Unit_One_Packing }}">
                        {{ $product->name }}
                    </option>
                @endforeach
            </select>
        </td>
        <td><input type="text" name="qty[]" class="form-control qty" small-font"></td>
        <td><input type="text" name="price[]" class="form-control price" small-font"></td>
        <td><input type="text" name="dis[]" class="form-control dis" value="0" small-font"></td>
        <td><input type="text" name="amount[]" class="form-control amount" small-font"></td>
        <td><input type="text" name="batch_no[]" class="form-control batch_no" readonly small-font"></td>
        <td><input type="text" name="pack_size[]" class="form-control pack_size" readonly small-font"></td>
        <td><input type="number" name="bonus[]" class="form-control" value="0" small-font"></td>
        <td><a class="btn btn-danger remove"><i class="fa fa-remove" small-font"></i></a></td>
    </tr>`;

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

    // Re-initialize select2 for new dropdown
    $('select.select2').select2({
        placeholder: "Select Product",
        allowClear: true,
        width: 'resolve',
        dropdownAutoWidth: true
    });
}

    // Remove row
    $(document).on('click', '.remove', function () {
        var rowCount = $('tbody tr').length;
        if (rowCount <= 1) {
            alert('You cannot delete the last row.');
        } else {
            $(this).closest('tr').remove();
            total();
        }
    });
});


    $(document).on('change', 'select[name="product_id[]"]', function () {
        var selected = $(this).find(':selected');
        var batch = selected.data('batch');
        var pack = selected.data('pack');

        var row = $(this).closest('tr');
        row.find('input[name="batch_no[]"]').val(batch);
        row.find('input[name="pack_size[]"]').val(pack);
    });
</script>
@endpush