@extends('backend.partials.master')
@section('title')
    Outward View
@endsection
@section('maincontent')
<main class="content">
    <div class="container-fluid p-0">

        <div class="mb-3">
            <h1 class="h3 d-inline align-middle">View Outward</h1>
        </div>

        <div class="row">

            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <form action="@if(!empty($old)){{route('outwards.update')}}@else{{route('outwards.store')}}@endif" method="POST" enctype="multipart/form-data">
                            @csrf
                            @if(!empty($old))
                             @method('PUT')
                                <input type="hidden" name="id" id="id" value="{{$old->id}}"/>
                            @endif
                            <div class="row">
                                <div class="mb-3 col-md-3">
                                    <label class="form-label" for="date">Date <small class="text-danger">*</small></label>
                                    <input type="date" class="form-control @error('date') is-invalid @enderror" value="{{ old('date', !empty($old) ? $old->date : date('Y-m-d')) }}" name="date" id="date"  required readonly>
                                    @error('date')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                                <div class="mb-3 col-md-3">
                                    <label class="form-label" for="invoice_no">Invoice Number <small class="text-danger">*</small></label>
                                    <input type="text" class="form-control @error('invoice_no') is-invalid @enderror" value="@if(!empty($old)){{ $old->invoice_no }}@else{{$invoice_no}}@endif" name="invoice_no" id="invoice_no" placeholder="Invoice Number" required readonly>
                                    @error('invoice_no')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                                <div class="mb-3 col-md-3">
                                    <label class="form-label" for="customer_id">Customer <small class="text-danger">*</small></label>
                                    <select id="customer_id" name="customer_id" class="form-control choices-single" required>
                                        <option selected disabled value=""> Select Customer</option>
                                        @foreach($customers as $customer)
                                        <option @if(!empty($old)) {{ $old->customer_id == $customer->id ? 'selected' : '' }} {{ $old->customer_id != $customer->id ? 'disabled' : '' }} @endif value="{{$customer->id}}">{{$customer->name}}</option>
                                        @endforeach
                                    </select>
                                    @error('customer_id')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                                <div class="mb-3 col-md-3">
                                    <label class="form-label" for="warehouse_id">Warehouse <small class="text-danger">*</small></label>
                                    <select id="warehouse_id" name="warehouse_id" class="form-control choices-single-warehouse" onchange="getracks(this.value);" required>
                                        <option disabled selected value="">Select Warehouse</option>
                                        @foreach($warehouses as $wr)
                                            <option 
                                                value="{{ $wr->id }}" 
                                                @if(!empty($old) && $old->warehouse_id == $wr->id) selected @endif
                                                @if(!empty($old) && $old->warehouse_id != $wr->id) disabled @endif
                                            >
                                                {{ $wr->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('warehouse_id')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>

                                <div class="mb-3 col-md-3">
                                    <label class="form-label" for="rack">Rack <small class="text-danger">*</small></label>
                                    <select id="rack" name="rack_id" class="form-control choices-single-rack" onchange="getPartition(this.value);" required>
                                        <option value="">Select Rack</option>
                                        @foreach($racks as $rack)
                                            <option 
                                                value="{{ $rack->id }}" 
                                                @if(!empty($old) && $old->rack_id == $rack->id) selected @endif
                                                @if(!empty($old) && $old->rack_id != $rack->id) disabled @endif
                                            >
                                                {{ $rack->rack_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('rack_id')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>

                                <div class="mb-3 col-md-3">
                                    <label class="form-label" for="partition_id">Partitions <small class="text-danger">*</small></label>
                                    <select id="partition_id" name="partition_id" class="form-control choices-single-partition" required onchange="getInwardProducts(this.value);">
                                        <option selected disabled value="">Select Partition</option>
                                        @foreach($partitions as $prt)
                                            <option 
                                                value="{{ $prt->id }}" 
                                                @if(!empty($old) && $old->partition_id == $prt->id) selected @endif
                                            >
                                                {{ $prt->partition_code }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('partition_id')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>

                                <div class="mb-3 col-md-3">
                                    <label class="form-label" for="video">Upload video</label>
                                    <input type="file" class="form-control @error('video') is-invalid @enderror"
                                        name="video" id="video" accept="video/*" disabled>
                                    @error('video')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                                @if (!empty($old) && !empty($old->video))
                                <div class="mb-3 col-md-3">
                                        <label class="form-label">Current Video:</label>
                                        <video width="100%" height="100" controls>
                                            <source src="{{ asset('backend/video_uploads/' . $old->video) }}" type="video/mp4">
                                            Your browser does not support the video tag.
                                        </video>
                                </div>
                                @endif
                                
                            </div>

                            <div class="row justify-content-center">
                                <div class="mb-3 col-md-6">
                                    <label class="form-label" for="product">Products <small class="text-danger">*</small></label>
                                    <select class="form-control choices-single-product" id="product" onchange="handleProductChange(this);">
                                        <option selected disabled value="">Select Product</option>
                                        @foreach($products as $product)
                                            <option disabled value="{{ $product->id }}">SKU({{ $product->sku }}) {{ $product->name }}</option>
                                        @endforeach
                                    </select>
                                    <input type="hidden" id="productarray" value='@json($products)' />
                                </div>
                            </div>

                            <div class="row">
                                <table class="table" id="mytable">
                                    <thead>
                                        <tr>
                                            <th>SKU</th>
                                            <th>Products</th>
                                            <th>Quantity</th>
                                            <th>Gst %</th>
                                            <th>Rate</th>
                                            <th>Total</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php $i = 0; @endphp
                                        @if(!empty($outwardDetails))
                                            @foreach($outwardDetails as $outward)
                                                @php
                                                    $i++;
                                                    $rate = $outward->rate;
                                                    $areaPerUnit = $outward->l * $outward->w * $outward->h;
                                                    $totalArea = $areaPerUnit * $outward->quantity;
                                                    $totalAmount = $rate * $outward->quantity;
                                                @endphp
                                                <tr id="row_{{ $i }}">
                                                    <td><input type="text" class="form-control" id="sku_{{ $i }}" name="sku_{{ $i }}" value="{{ $outward->sku }}" readonly></td>
                                                    <td>
                                                        <input type="text" class="form-control" id="product_{{ $i }}" name="product_{{ $i }}" value="{{ $outward->productname->name }}" readonly>
                                                        <input type="hidden" class="form-control" id="productid_{{ $i }}" name="productid_{{ $i }}" value="{{ $outward->product_id }}" readonly>
                                                    </td>
                                                    <td>
                                                        <input type="number" class="form-control" id="quantity_{{ $i }}" name="quantity_{{ $i }}" value="{{ $outward->quantity }}" oninput="updateRow({{ $i }}); availableQuantity({{$i}});" required readonly>
                                                        <input type="hidden" class="form-control" id="l_{{ $i }}" name="l_{{ $i }}" value="{{ $outward->l }}" readonly>
                                                        <input type="hidden" class="form-control" id="w_{{ $i }}" name="w_{{ $i }}" value="{{ $outward->w }}" readonly>
                                                        <input type="hidden" class="form-control" id="h_{{ $i }}" name="h_{{ $i }}" value="{{ $outward->h }}" readonly>
                                                        <input type="hidden" class="form-control" id="psqft_{{ $i }}" name="psqft_{{ $i }}" value="{{ $totalArea }}" readonly>
                                                    </td>
                                                    <td><input type="text" class="form-control" id="gst_{{ $i }}" name="gst_{{ $i }}" value="{{ $outward->gst ?? 0 }}" readonly></td>
                                                    <td><input type="text" class="form-control" id="rate_{{ $i }}" name="rate_{{ $i }}" value="{{ $rate ?? 0 }}" readonly></td>
                                                    <td><input type="text" class="form-control" id="total_{{ $i }}" name="total_{{ $i }}" value="{{ $totalAmount ?? 0 }}" readonly></td>
                                                    <td>
                                                        {{-- <i class="fa fa-trash text-danger" style="cursor:pointer;" id="deleteRow_{{ $i }}" onclick="delete_row('deleteRow_{{ $i }}')"></i> --}}
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @endif
                                    </tbody>
                                    <input type="hidden" name="cnt" id="cnt" value="{{ $i }}">
                                </table>
                            </div>
                        
                            <div class="mt-2 row"> 
                                <div class="mb-3 col-md-3">
                                    <label class="form-label" for="total_sqft">Total sqft <small class="text-danger">*</small></label>
                                    <input type="text" class="form-control @error('total_sqft') is-invalid @enderror" value="@if(!empty($old)){{ $old->total_sqft }}@endif" name="total_sqft" id="total_sqft" placeholder="Total sqft" required readonly>
                                    @error('total_sqft')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                    <div id="sqftError" class="text-danger mt-1" style="display:none;"></div>
                                </div>
                                <div class="mb-3 col-md-3">
                                    <label class="form-label" for="total_pallets">Total Pallets <small class="text-danger">*</small></label>
                                    <input type="number" class="form-control @error('total_pallets') is-invalid @enderror" value="@if(!empty($old)){{ $old->total_pallets }}@endif" name="total_pallets" id="total_pallets" placeholder="Total pallets" required readonly>
                                    @error('total_pallets')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                                <div class="mb-3 col-md-3">
                                    <label class="form-label" for="custom_fleld1">Custom Field 1</label>
                                    <input type="text" class="form-control @error('custom_fleld1') is-invalid @enderror" value="@if(!empty($old)){{ $old->custom_fleld1 }}@endif" name="custom_fleld1" id="custom_fleld1" placeholder="custom_fleld1" readonly>
                                    @error('custom_fleld1')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                                <div class="mb-3 col-md-3">
                                    <label class="form-label" for="custom_fleld1">Custom Field 2</label>
                                    <input type="text" class="form-control @error('custom_fleld2') is-invalid @enderror" value="@if(!empty($old)){{ $old->custom_fleld2 }}@endif" name="custom_fleld2" id="custom_fleld2" placeholder="custom_fleld2" readonly>
                                    @error('custom_fleld2')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                                <div class="mb-3 col-md-3">
                                    <label class="form-label" for="custom_fleld1">Custom Field 3</label>
                                    <input type="text" class="form-control @error('custom_fleld3') is-invalid @enderror" value="@if(!empty($old)){{ $old->custom_fleld3 }}@endif" name="custom_fleld3" id="custom_fleld3" placeholder="custom_fleld3" readonly>
                                    @error('custom_fleld3')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                                <div class="mb-3 col-md-3">
                                    <label class="form-label" for="custom_fleld4">Custom Field 4</label>
                                    <input type="text" class="form-control @error('custom_fleld4') is-invalid @enderror" value="@if(!empty($old)){{ $old->custom_fleld4 }}@endif" name="custom_fleld4" id="custom_fleld4" placeholder="custom_fleld4" readonly>
                                    @error('custom_fleld4')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>

                            {{-- <button type="submit" class="btn btn-primary">{{ !empty($old) ? 'Update' : 'Save' }}</button> --}}
                            <a href="{{ route('customers.customeroutwards') }}" class="btn btn-secondary">Cancel</a>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection
<script>
    let partitionChoices;
    let rackChoices;
    let productChoices;

    document.addEventListener("DOMContentLoaded", function() {
        new Choices(document.querySelector(".choices-single-warehouse"), { shouldSort: false });
        productChoices = new Choices(document.querySelector(".choices-single-product"), { shouldSort: false });
        rackChoices = new Choices(document.querySelector(".choices-single-rack"), { shouldSort: false });
        partitionChoices = new Choices(document.querySelector(".choices-single-partition"), { shouldSort: false });
    });

    function getInwardProducts(patitionId) {
        var customerID = $("#customer_id").val();
        var warehouseID = $("#warehouse_id").val();
        var rackID = $("#rack").val();
        $.ajax({
            url: "{{ route('getInwardProducts') }}",
            type: "GET",
            data: { customer_id:customerID,warehouse_id:warehouseID,rack_id:rackID,partition_id:patitionId },
            success: function(response) {
                productChoices.clearChoices();
                productChoices.setChoices([{
                    value: '',
                    label: 'Select Product',
                    selected: true,
                    disabled: true
                }], 'value', 'label', false);

                const choices = response.map(product => ({
                    value: product.id,
                    label: `SKU(${product.sku}) ${product.name}`
                }));

                productChoices.setChoices(choices, 'value', 'label', false);

                // ✅ Set updated products array in hidden input
                document.getElementById('productarray').value = JSON.stringify(response);

            },
            error: function () {
                console.error('Failed to load Products.');
            }
        });
    }

    function getracks(warehouseId) {
        $.ajax({
            url: "{{ route('getracksbywarehouse') }}",
            type: "GET",
            data: { warehouse_id: warehouseId },
            success: function (response) {
                rackChoices.clearChoices();
                rackChoices.setChoices([{
                    value: '',
                    label: 'Select Rack',
                    selected: true,
                    disabled: true
                }], 'value', 'label', false);

                const choices = response.map(rack => ({
                    value: rack.id,
                    label: rack.rack_name
                }));

                rackChoices.setChoices(choices, 'value', 'label', false);
            },
            error: function () {
                console.error('Failed to load racks.');
            }
        });
    }

    function getPartition(rackId) {
        $.ajax({
            url: "{{ route('getpartitionsbyrack') }}",
            type: "GET",
            data: { rack_id: rackId },
            success: function(response) {
                partitionChoices.clearChoices();
                partitionChoices.setChoices([{
                    value: '',
                    label: 'Select Partition',
                    selected: true,
                    disabled: true
                }], 'value', 'label', false);

                const choices = response.map(partition => ({
                    value: partition.id,
                    label: partition.partition_code
                }));

                partitionChoices.setChoices(choices, 'value', 'label', false);
            },
            error: function () {
                console.error('Failed to load Partition.');
            }
        });
    }

</script>

<script>
    function handleProductChange(select) {
        const selectedId = select.value;
        if (!selectedId) return;

        const products = JSON.parse(document.getElementById('productarray').value);
        const product = products.find(p => p.id == selectedId);

        if (product) {
            addRow('mytable', product);
            select.value = '';
        }
    }

    function addRow(tableID, product) {
        const count = parseInt($("#cnt").val());
        const i = count + 1;

        const rate = product.selling_price_tax_type === "inclusive"
            ? product.sale_inc_tx
            : product.sale_exc_tx;

        const areaPerUnit = (product.l * product.b * product.h).toFixed(2);

        const row = `
            <tr id="row_${i}">
                <td><input type="text" class="form-control" id="sku_${i}" name="sku_${i}" value="${product.sku}" readonly></td>
                <td>
                    <input type="text" class="form-control" id="product_${i}" name="product_${i}" value="${product.name}" readonly>
                    <input type="hidden" class="form-control" id="productid_${i}" name="productid_${i}" value="${product.id}" readonly>
                </td>
                <td>
                    <input type="number" class="form-control" id="quantity_${i}" name="quantity_${i}" oninput="updateRow(${i}); availableQuantity(${i})" required>
                    <input type="hidden" class="form-control" id="l_${i}" name="l_${i}" value="${product.l}" readonly>
                    <input type="hidden" class="form-control" id="w_${i}" name="w_${i}" value="${product.b}" readonly>
                    <input type="hidden" class="form-control" id="h_${i}" name="h_${i}" value="${product.h}" readonly>
                    <input type="hidden" class="form-control" id="psqft_${i}" name="psqft_${i}" value="0" readonly>
                </td>
                <td><input type="number" class="form-control" id="gst_${i}" name="gst_${i}" value="${product.gst}" readonly></td>
                <td><input type="number" class="form-control" id="rate_${i}" name="rate_${i}" value="${rate}" readonly></td>
                <td><input type="number" class="form-control" id="total_${i}" name="total_${i}" value="0" readonly></td>
                <td><i class="fa fa-trash text-danger" style="cursor:pointer;" id="deleteRow_${i}" onclick="delete_row(this.id)"></i></td>
            </tr>`;

        $(`#${tableID} tbody`).append(row);
        $("#cnt").val(i);
        Totalsqft();
    }

    function updateRow(i) {
        const qty = parseFloat($(`#quantity_${i}`).val()) || 0;
        const l = parseFloat($(`#l_${i}`).val()) || 0;
        const w = parseFloat($(`#w_${i}`).val()) || 0;
        const h = parseFloat($(`#h_${i}`).val()) || 0;
        const rate = parseFloat($(`#rate_${i}`).val()) || 0;
        const gst = parseFloat($(`#gst_${i}`).val()) || 0;

        const areaPerUnit = (l * w * h).toFixed(2);
        const totalArea = (areaPerUnit * qty).toFixed(2);
        $(`#psqft_${i}`).val(totalArea);

        const totalAmount = (rate * qty).toFixed(2);
        $(`#total_${i}`).val(totalAmount);

        Totalsqft();
    }

    function availableQuantity(i){
        var qty = parseFloat($(`#quantity_${i}`).val()) || 0;
        var productID = parseFloat($(`#productid_${i}`).val()) || 0;
        var customerID = $("#customer_id").val();
        var warehouseID = $("#warehouse_id").val();
        var rackID = $("#rack").val();
        var partitionID = $("#partition_id").val();
        
        // alert(qty);

        $.ajax({
            url: "{{ route('availableQuantity') }}",
            type: "GET",
            data: { product_id:productID, customer_id:customerID, warehouse_id:warehouseID, rack_id:rackID, partition_id:partitionID },
            success: function(response) {
                console.log(response);
                var availableqty = response['availableQuantity'];
                if(qty > availableqty){
                    alert("Product stock is exceeded");
                    $(`#quantity_${i}`).val('');
                }
            },
            error: function () {
                console.error('Failed to load available quantity.');
            }
        });

    }

    function Totalsqft() {
        var totsqft = 0;
        $("[id^='psqft_']").each(function () {
            var sqft = parseFloat($(this).val()) || 0;
            totsqft += sqft;
        });
        $("#total_sqft").val(totsqft.toFixed(2));

        calculatepallets();
    }

    function calculatepallets() {
        const totalsqft = parseFloat($('#total_sqft').val()) || 0;
        const customerId = parseFloat($('#customer_id').val()) || 0;

        $.ajax({
            url: "{{ route('getbillingtype') }}",
            type: "GET",
            data: { customer_id: customerId },
            success: function(response) {
                var billingtype = response[0].billing_type;
                // console.log(billingtype);
                let totalpallets = 0;
                if (billingtype === 'monthly') {
                    totalpallets = Math.ceil(totalsqft / 22);
                }
                $('#total_pallets').val(totalpallets);
            },
            error: function() {
                console.error('Failed to load billing type.');
            }
        });
    }

    function delete_row(rwcnt) {
        var id = rwcnt.split("_");
        var cnt = id[1];
        var count = $("#cnt").val();

        if (count > 1) {
            var r = confirm("Are you sure!");
            if (r == true) {
                $("#row_" + cnt).remove();

                for (var k = parseInt(cnt) + 1; k <= count; k++) {
                    var newId = k - 1;

                    $("#row_" + k).attr('id', 'row_' + newId);

                    $("#sku_" + k).attr({ id: 'sku_' + newId, name: 'sku_' + newId });
                    $("#product_" + k).attr({ id: 'product_' + newId, name: 'product_' + newId });
                    $("#productid_" + k).attr({ id: 'productid_' + newId, name: 'productid_' + newId });
                    $("#quantity_" + k).attr({ id: 'quantity_' + newId, name: 'quantity_' + newId, oninput: `updateRow(${newId})` });
                    $("#l_" + k).attr({ id: 'l_' + newId, name: 'l_' + newId });
                    $("#w_" + k).attr({ id: 'w_' + newId, name: 'w_' + newId });
                    $("#psqft_" + k).attr({ id: 'psqft_' + newId, name: 'psqft_' + newId });
                    $("#gst_" + k).attr({ id: 'gst_' + newId, name: 'gst_' + newId });
                    $("#rate_" + k).attr({ id: 'rate_' + newId, name: 'rate_' + newId });
                    $("#total_" + k).attr({ id: 'total_' + newId, name: 'total_' + newId });
                    $("#deleteRow_" + k).attr('id', 'deleteRow_' + newId).attr('onclick', `delete_row('deleteRow_${newId}')`);
                }

                $("#cnt").val(parseInt(count - 1));
            }
        } else {
            alert("Can't remove row. At least one row is required");
        }
        Totalsqft();
    }

    $(document).ready(function () {
        Totalsqft(); // calculate total sqft on load

        const count = parseInt($("#cnt").val());
        for (let i = 1; i <= count; i++) {
            updateRow(i); // trigger update for each row to ensure totals reflect actual quantity
        }
    });
</script>