@extends('layouts.app')
@section('title', __('purchase.order.order'))

        @section('content')
     <div class="page-wrapper">
    <div class="page-content">
  <div class="container-fluid px-4">
            
          <div class="row">
            <div class="col-12">

                    <h4 class="mb-3">Create GRN</h4>

                  <form id="purchaseReceiveForm" action="{{ route('purchase.receive.store') }}" method="POST">
                        @csrf

                     <div class="row">

    <!-- Vendor -->
    <div class="col-md-4">
        <label>Select Vendor</label>
        <select name="party_id" id="vendor" class="form-control">
            <option value="">-- Select Vendor --</option>
            @foreach($vendors as $vendor)
                <option value="{{ $vendor->id }}">{{ $vendor->name }}</option>
            @endforeach
        </select>
    </div>

    <!-- PO -->
    <div class="col-md-4">
        <label>Select Purchase Order</label>
        <select name="purchase_order_id" id="po" class="form-control">
            <option value="">-- Select PO --</option>
        </select>
    </div>

    <!-- GRN Number -->
    <div class="col-md-4">
        <label>GRN No</label>
        <input type="text" name="grn_no" class="form-control" value="{{ $grn_no }}" readonly>
    </div>

</div>

<div class="row mt-3">

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

</div>
<div class="mb-3">
    <label>Items</label>

 <table class="table table-bordered" id="items_table">
    <thead class="table-light">
        <tr>
            <th width="40%">Item Name</th>
            <th width="20%">Pending Qty</th>
            <th width="20%">Quantity</th>
            <th width="20%">Action</th>
        </tr>
    </thead>

    <tbody id="items_table_body">
        <tr>
            <td colspan="4" class="text-center">No items</td>
        </tr>
    </tbody>

    <tfoot>
        <tr style="background:#f8f9fa; font-weight:bold;">
            <td>
                Total Products: <span id="total_products">0</span>
            </td>

            <td></td>

            <td class="text-start">
                Total Qty: <span id="total_qty">0.00</span>
            </td>

            <td></td>
        </tr>
    </tfoot>
</table>
                        <div class="mt-3">
                           <button type="submit"
            class="btn btn-success"
            id="grnSubmitBtn">

        Submit GRN
    </button>
                        </div>

                    </form>

                </div>
            </div>

        </div>

    </div>

</div>
</div>
@section('js')
<script>

$(document).ready(function() {

    $('#vendor').on('change', function() {
        let party_id = $(this).val();

        $('#po').html('<option>Loading...</option>');

        if (party_id) {
            $.ajax({
             url: "{{ url('get-pos') }}/" + party_id,
                type: 'GET',
                success: function(data) {
                    let options = '<option value="">-- Select PO --</option>';

                    data.forEach(function(po) {
                        options += `<option value="${po.id}">${po.order_code}</option>`;
                    });

                    $('#po').html(options);
                }
            });
        } else {
            $('#po').html('<option value="">-- Select PO --</option>');
        }
    });

});
</script>
<script>        
$(document).off('change', '#po').on('change', '#po', function()  {

    let po_id = $(this).val();

    $('#items_table tbody').html('<tr><td colspan="2">Loading...</td></tr>');

    if (po_id) {
        $.ajax({
            url: "{{ url('get-po-items') }}/" + po_id,
            type: 'GET',
            success: function(data) {

                let rows = '';

      if (data.length > 0) {

    data.forEach(function(item) {

        let remaining = item.pending_qty > 0
            ? item.pending_qty
            : item.quantity;

        rows += `
            <tr>

                <td>${item.item.name}</td>

                <!-- Pending Qty -->
                <td>
                    ${parseFloat(remaining).toFixed(2)}
                </td>

                <!-- Receive Qty -->
              <td>
    <input type="number"
        name="receive_qty[]"
        class="form-control receive_qty"
        value=""
        placeholder="Enter Qty"
        min="0"
        max="${remaining}"
        step="0.01">

    <input type="hidden"
        name="item_id[]"
        value="${item.item_id}">
</td>

                <!-- Delete Button -->
                <td>
                    <button type="button"
                        class="btn btn-danger btn-sm remove-row">
                        Delete
                    </button>
                </td>

            </tr>
        `;
    });

} else {

    rows = `
        <tr>
            <td colspan="4" class="text-center">
                No items found
            </td>
        </tr>
    `;
}

               $('#items_table_body').empty();   // 🔥 clear first
$('#items_table_body').html(rows);

// 🔥 IMPORTANT
calculateTotal();
            }
        });
    } else {
        $('#items_table tbody').html('<tr><td colspan="2">No items</td></tr>');
    }

});

$(document).ready(function() {

    $('#purchaseReceiveForm').on('submit', function(e) {
        e.preventDefault();

        let formData = $(this).serialize();

        $.ajax({
            url: $(this).attr('action'),
            type: "POST",
            data: formData,
          success: function(response) {
console.log(response);
    alert('Purchase Receive Saved Successfully');

window.location.href = response.redirect;
    $('#purchaseReceiveForm')[0].reset();
    $('#items_table tbody').html('<tr><td colspan="2">No items</td></tr>');

   
   
},
            error: function(xhr) {
                console.log(xhr.responseText);
                alert('Something went wrong!');
            }
        });
    });

});
</script>
<script>
function calculateTotal() {
    let total = 0;
    let count = 0;

    $('.receive_qty').each(function () {
        let val = parseFloat($(this).val()) || 0;

        if (val > 0) {
            count++;
        }

        total += val;
    });

    $('#total_qty').text(total.toFixed(2));
    $('#total_products').text(count);
}



// input change pe
$(document).on('input', '.receive_qty', function () {
    calculateTotal();
});
$(document).on('click', '.remove-row', function () {

    $(this).closest('tr').remove();

    // agar sab delete ho gaye
    if ($('#items_table_body tr').length == 0) {

        $('#items_table_body').html(`
            <tr>
                <td colspan="4" class="text-center">
                    No items
                </td>
            </tr>
        `);
    }

    calculateTotal();
});
</script>
<script>
    $(document).on('submit', '#purchaseReceiveForm', function () {

    $('#grnSubmitBtn')
        .html('<span class="spinner-border spinner-border-sm"></span> Submitting...')
        .prop('disabled', true);

});

</script>
@endsection