@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="d-flex justify-content-between align-items-center mb-3">
    
    <h4 class="mb-0"> GRN List</h4>

    <a href="{{ route('purchase.receive.list') }}" class="btn btn-primary">
        + Create GRN
    </a>

</div>
    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif
     <div class="card shadow-sm">
                <div class="card-body">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>#</th>
                <th>GRN No</th>
                <th>Date</th>
                <th>No.of Items</th>
                <th>Vendor</th>
                <th>PO Code</th>
                <th>Total</th>
                <th>Action</th>
            </tr>
        </thead>

        <tbody>
            @foreach($receives as $key => $receive)
                <tr>
                    <td>{{ $key + 1 }}</td>
                    <td>{{ $receive->gr_no }}</td>
                   <td>{{ \Carbon\Carbon::parse($receive->gr_date)->format('d/m/Y') }}</td>
                    <td>{{ $receive->items->count() }}</td>
                    <td>{{ $receive->vendor->full_name ?? '' }}</td>
                    <td>{{ $receive->purchaseOrder->order_code ?? '' }}</td>
                       <td>{{ $receive->total_qty }}</td>
                      <td>
 <button class="btn btn-sm btn-primary view-btn"
    data-items='@json($receive->items)'
    data-grn="{{ $receive->gr_no }}"
    data-date="{{ $receive->gr_date }}"
    data-po="{{ $receive->purchaseOrder->order_code ?? '' }}"
    data-vendor="{{ $receive->vendor->full_name ?? '' }}"
    data-total="{{ $receive->total_qty ?? 0 }}">
    View
</button>
</td>
                    

                </tr>
            @endforeach
        </tbody>
    </table>
</div>
</div></div></div></div>
</div>
<div class="modal fade" id="itemsModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title">Grn Details</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

     <div class="modal-body">

  <div class="row mb-2">
    <div class="col-md-6">
        <b>GRN No:</b> <span id="modal_grn"></span>
    </div>
    <div class="col-md-6 text-end">
        <b>Date:</b> <span id="modal_date"></span>
    </div>
</div>

<div class="row mb-3">
    <div class="col-md-6">
        <b>Vendor:</b> <span id="modal_vendor"></span>
    </div>
    <div class="col-md-6 text-end">
        <b>PO No:</b> <span id="modal_po"></span>
    </div>
</div>


    <table class="table table-bordered">
    <thead class="table-light">
        <tr>
            <th>Item</th>
            <th>Order Qty</th>
            <th>Receive Qty</th>
            <th>Balance</th>
        </tr>
    </thead>

    <tbody id="modalItemsBody"></tbody>

 <tfoot>
<tr style="background:#f8f9fa;">

    <!-- 🔥 Products count -->
    <td>
        <b>Products: <span id="modal_count"></span></b>
    </td>

    <!-- empty -->
    <td></td>

    <!-- 🔥 Total under Receive Qty -->
    <td class="text-start">
        <b>Total: <span id="modal_total"></span></b>
    </td>

    <!-- empty -->
    <td></td>

</tr>
</tfoot>
</table>
</div>

    </div>
  </div>
</div>

@section('js')
<script>
$(document).on('click', '.view-btn', function() {

    let items = $(this).data('items');
    let grn = $(this).data('grn');
    let rawDate = $(this).data('date');
    
    let po = $(this).data('po');
    let vendor = $(this).data('vendor');

    let total = 0;
    let count = 0;
   // 🔥 date format fix
    let d = new Date(rawDate);
    let formattedDate = d.toLocaleDateString('en-GB');
    $('#modal_grn').text(grn);
    $('#modal_date').text(formattedDate);
    $('#modal_po').text(po);
    $('#modal_vendor').text(vendor);

    let rows = '';

    if (items.length > 0) {

        items.forEach(function(item) {

            let order_qty = item.transaction_quantity ?? 0;
            let receive = item.receive_qty ?? 0;
            let pending = item.pending_qty ?? 0;

            total += parseFloat(receive);
            count++;

            rows += `
                <tr>
                    <td>${item.item.name}</td>
                    <td>${parseFloat(order_qty).toFixed(2)}</td>
                    <td>${parseFloat(receive).toFixed(2)}</td>
                    <td>${parseFloat(pending).toFixed(2)}</td>
                </tr>
            `;
        });

    } else {
        rows = '<tr><td colspan="4">No items</td></tr>';
    }

    $('#modalItemsBody').html(rows);

    // 🔥 set values
    $('#modal_total').text(total.toFixed(2));
    $('#modal_count').text(count);

    $('#itemsModal').modal('show');
});
</script>
@endsection