@extends('layouts.app')
@section('title')
    Material Planning
@endsection
@section('button')
    <button class="btn btn-info" onclick="window.history.back()">
        <i class="bi bi-arrow-left"></i> Back
    </button>
@endsection
@section('content')
    <style>
        #productTable input {
            width: 130px;
        }
    </style>
    <form method="post" action="{{ route('material_planning.update', $planning->id) }}" enctype="multipart/form-data">
        @csrf

        <div class="card">
            <div class="card-body">
                <div class="row">
                    <h5>Material Planning Form Details</h5>
                </div>
                <br>
                <div class="row">
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="pro_order_no1" class="form-label col-4">Production Order No.</label>
                            <div class="col-6">
                                <select name="pro_order_no1" disabled id="pro_order_no1" class="form-select"
                                    style="width: 100% !important;">
                                    <option value="" selected disabled>Please Select</option>
                                    @foreach ($production_orders as $production_order)
                                        <option value="{{ $production_order->id }}" @selected($planning->dppd_id == $production_order->id)>
                                            {{ $production_order->pro_order_no }}</option>
                                    @endforeach
                                </select>
                                <input type="hidden" name="pro_order_no" id="pro_order_no">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="ref_no" class="form-label col-4">MRF No.</label>
                            <div class="col-6">
                                <input type="text" readonly value="{{ $planning->ref_no }}" name="ref_no" id="ref_no"
                                    class="form-control rounded-4">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="request_date" class="form-label col-4">Request Date</label>
                            <div class="col-6">
                                <input type="text" name="request_date" value="{{ $planning->request_date }}"
                                    id="request_date" class="form-control datepicker-current-date rounded-4">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="shift" class="form-label col-4">Shift</label>
                            <div class="col-6">
                                <input type="hidden" name="shift" id="shift" class="form-control rounded-4">
                                <select name="shift1" disabled id="shift1" class="form-select"
                                    style="width: 100% !important;">
                                    <option value="AM">AM</option>
                                    <option value="PM">PM</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="request_from" class="form-label col-4">Department</label>
                            <div class="col-6">
                                <select name="request_from" id="request_from" class="form-select"
                                    style="width: 100% !important;">
                                    <option value="" selected disabled>Please Select</option>
                                    @foreach ($depts as $dept)
                                        <option value="{{ $dept->id }}" @selected($planning->department_id == $dept->id)>
                                            {{ $dept->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        @php
                            $string = $production_order->pro_order_no;
                            $parts = explode(' ', $string);
                            $firstPart = explode('/', $parts[0]);
                            $secondPart = explode('/', $parts[1]);

                        @endphp
                        <div class="row align-items-center">
                            <label for="process" class="form-label col-4">Process</label>
                            <div class="col-6">
                                <input type="text" readonly name="process" id="process"
                                    value="{{ $planning->process }}" class="form-control rounded-4"
                                    placeholder="auto based on order no">
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="plan_date" class="form-label col-4">Planned Date</label>
                            <div class="col-6">
                                <input type="text" readonly name="plan_date" value="{{ $planning->plan_date }}"
                                    id="plan_date" class="form-control datepicker-current-date rounded-4">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="total_planned_qty" class="form-label col-4">Total Planned Qty</label>
                            <div class="col-6">
                                <input type="text" readonly value="{{ $planning->total_planned_qty }}"
                                    name="total_planned_qty" id="total_planned_qty" class="form-control rounded-4">
                            </div>
                        </div>
                    </div>


                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="remarks" class="form-label col-4">Remarks:</label>
                            <div class="col-6">
                                <textarea name="remarks" id="remarks" rows="1" class="form-control rounded-4">{{ $planning->remarks }}</textarea>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="machine" class="form-label col-4">Machine</label>
                            <div class="col-6">
                                <input type="text" readonly name="machine" id="machine" rows="1"
                                    class="form-control rounded-4" placeholder="auto based on order no">
                            </div>
                        </div>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-12">
                        <div class="table-responsive">
                            <table class="table table-bordered m-0" id="productTable">
                                <thead>
                                    <tr>
                                        <th>No.</th>
                                        <th>Part No.</th>
                                        <th>Part Name</th>
                                        <th>UOM</th>
                                        <th>Required Qty(BOM)</th>
                                        <th>Current Inventory Qty</th>
                                        <th>Request Qty</th>
                                        <th>Difference</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($details as $detail)
                                        <tr>
                                            <td>
                                                {{ $loop->iteration }}
                                                <input type="hidden" value="{{ $detail->product_id }}"
                                                    class="product_id"
                                                    name="products[{{ $loop->iteration }}][product_id]">
                                            </td>
                                            <td>
                                                {{ $detail->products->part_no ?? '' }}
                                            </td>
                                            <td>
                                                {{ $detail->products->part_name ?? '' }}
                                            </td>
                                            <td>
                                                {{ $detail->products->units->name ?? '' }}
                                            </td>
                                            <td>
                                                <input type="text" readonly value="{{ $detail->required_qty }}"
                                                    class="form-control required_bom_qty"
                                                    name="products[{{ $loop->iteration }}][required_qty]">
                                            </td>
                                            <td>
                                                <input type="text" readonly value="{{ $detail->inventory_qty }}"
                                                    class="form-control inventory_qty"
                                                    name="products[{{ $loop->iteration }}][inventory_qty]">
                                            </td>
                                            <td>
                                                <input type="number" step="0.001" value="{{ $detail->request_qty }}"
                                                    class="form-control request_qty"
                                                    name="products[{{ $loop->iteration }}][request_qty]">
                                            </td>
                                            <td>
                                                <input type="text" readonly value="{{ $detail->difference }}"
                                                    class="form-control difference"
                                                    name="products[{{ $loop->iteration }}][difference]">
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <div class="row">
                    <div class="d-flex gap-2 justify-content-end col-12">
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <!-- Include Bootstrap Datepicker CSS and JS -->
    <link rel="stylesheet"
        href="{{ asset('assets/css/bootstrap-datepicker.min.css') }}">
    <script src="{{ asset('assets/js/bootstrap-datepicker.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            $('#request_date').datepicker({
                format: 'dd/mm/yyyy', // Set the desired date format
                autoclose: true, // Automatically close the datepicker after selection
                todayHighlight: true,
                orientation: 'bottom' // Ensures the date picker opens below the input
                // Highlight today's date
            }).datepicker("setDate", new Date()); // Set today's date as the default

            var production_orders = {!! json_encode($production_orders) !!};

            var production_orderId = $("#pro_order_no1").val();
            var production_order = production_orders.find(p => p.id == production_orderId);
            console.log(production_order)
            if (production_order) {
                $('#shift1').val(production_order.shift);
                $('#shift1').trigger('change');
                $('#machine').val(production_order.machines?.name);
            }
        });
    </script>

    <script>
        $(document).on('keyup', '.request_qty', function() {
            var request_qty = $(this).val(); // `this` now refers to the input field (request_qty)
            var required_qty = $(this).closest('tr').find('.required_bom_qty').val(); // Get the required_qty value
            var result = parseFloat(required_qty) - parseFloat(request_qty); // Calculate the difference
            $(this).closest('tr').find('.difference').val(result); // Set the result in the difference field
        });
    </script>
@endsection