@extends('layouts.app')
@section('title')
BOM VIEW
@endsection
@section('button')
<a type="button" class="btn btn-info" href="{{ route('bom') }}">
    <i class="bi bi-arrow-left"></i> Back
</a>
@endsection
@section('content')
<style>
    #mainTable input {
        width: 100px;
    }
</style>
<div class="card">
    <div class="card-body">
        <div class="row">
            <div class="col-lg-12">

                <div class="col-lg-3 col-sm-4 col-12">
                    <h5>PRODUCT INFORMATION</h5>
                </div>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-lg-6 col-sm-6 col-12">
                <div class="row align-items-center">

                    <label for="rev_no" class="form-label col-4">Rev No.</label>
                    <div class="col-6">
                        <input type="text" disabled name="rev_no" value="{{ $bom->rev_no }}" id="rev_no"
                            class="form-control rounded-4">
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-sm-6 col-12">
                <div class="row align-items-center">
                    <label for="created_date" class="form-label col-4">Created Date</label>
                    <div class="col-6">
                        <div class="input-group">
                            <span class="input-group-text">
                                <i class="bi bi-calendar4"></i>
                            </span>
                            <input type="text" id="abc3" name="created_date" disabled
                                value="{{ $bom->created_date }}" class="form-control datepicker">
                        </div>
                    </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">Ref No.</label>
                    <div class="col-6">
                        <input type="text" disabled name="ref_no" id="ref_no" class="form-control rounded-4"
                            value="{{ $bom->ref_no }}">
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-sm-6 col-12 mt-3">
                <div class="row align-items-center">
                    <label for="created_by" class="form-label col-4">Created By</label>
                    <div class="col-6">
                        <input type="text" disabled name="created_by" id="created_by" class="form-control rounded-4"
                            value="{{ $bom->user->user_name ?? '' }}">
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-sm-6 col-12 mt-3">
                <div class="row align-items-center">
                    <label for="product_id" class="form-label col-4">Part No.</label>
                    <div class="col-6">
                        <select disabled name="product_id" onchange="product_change()" id="product_id"
                            class="form-select" style="width: 100% !important;">
                            <option disabled value="{{$bom->product_id }}" selected>
                                {{ $bom->products->part_no }}
                            </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="part_weight" class="form-label col-4">Part Weight:</label>
                    <div class="col-6">
                        <input type="text" disabled name="part_weight" id="part_weight"
                            class="form-control rounded-4" value="{{ $bom->products->part_weight ?? '' }}">
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-sm-6 col-12 mt-3">
                <div class="row align-items-center">
                    <label for="part_name" class="form-label col-4">Part Name:</label>
                    <div class="col-6">
                        <input type="text" disabled id="part_name" class="form-control rounded-4"
                            value="{{ $bom->products->part_name ?? '' }}">
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-sm-6 col-12 mt-3">
                <div class="row align-items-center">
                    <label for="customer_name" class="form-label col-4">Customer:</label>
                    <div class="col-6">
                        <input type="text" disabled id="customer_name" class="form-control rounded-4"
                            value="{{ optional($bom->products->customers)->name ?? optional($bom->products->suppliers)->name }}">
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-sm-6 col-12 mt-3">
                <div class="row align-items-center">
                    <label for="customer_product_code" class="form-label col-4">Type of Product:</label>
                    <div class="col-6">
                        <input type="text" disabled id="type_of_product" class="form-control rounded-4"
                            value="{{ $bom->products->type_of_products->type ?? '' }}">
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-sm-6 col-12 mt-3">
                <div class="row align-items-center">
                    <label for="inputGroupFile02" class="form-label col-4">Attachment 1:</label>
                    <div class="col-6">
                        @if (isset($bom->attachment1))
                        <div class="d-flex align-items-center">
                            <a href="{{ asset('/bom-attachments/') }}/{{ $bom->attachment1 }}" target="_blank"
                                class="btn btn-outline-secondary me-2" id="inputGroupFileAddon03" disabled readonly>
                                <i class="bi bi-file-text"></i> {{ substr($bom->attachment1, 14) }}
                            </a>
                        </div>
                        @endif
                        <input type="file" class="form-control rounded-4 mt-2" name="attachment1"
                            id="inputGroupFile02">
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-sm-6 col-12 mt-3">
                <div class="row align-items-center">
                    <label for="model" class="form-label col-4">Model:</label>
                    <div class="col-6">
                        <input type="text" disabled name="model" id="model" class="form-control rounded-4"
                            value="{{ $bom->products->model }}">
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-sm-6 col-12 mt-3">
                <div class="row align-items-center">
                    <label for="inputGroupFile02" class="form-label col-4">Attachment 2:</label>
                    <div class="col-6">
                        @if (isset($bom->attachment2))
                        <div class="d-flex align-items-center">
                            <a href="{{ asset('/bom-attachments/') }}/{{ $bom->attachment2 }}" target="_blank"
                                class="btn btn-outline-secondary me-2" id="inputGroupFileAddon03" disabled readonly>
                                <i class="bi bi-file-text"></i> {{ substr($bom->attachment2, 14) }}
                            </a>
                        </div>
                        @endif
                        <input type="file" class="form-control rounded-4 mt-2" name="attachment2"
                            id="inputGroupFile02">
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-sm-6 col-12 mt-3">
                <div class="row align-items-center">
                    <label for="variance" class="form-label col-4">Variance:</label>
                    <div class="col-6">
                        <input type="text" disabled name="variance" id="variance" class="form-control rounded-4"
                            value="{{ $bom->products->variance }}">
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-sm-6 col-12 mt-3">
                <div class="row align-items-center">
                    <label for="inputGroupFile02" class="form-label col-4">Attachment 3:</label>
                    <div class="col-6">
                        @if (isset($bom->attachment3))
                        <div class="d-flex align-items-center">
                            <a href="{{ asset('/bom-attachments/') }}/{{ $bom->attachment3 }}" target="_blank"
                                class="btn btn-outline-secondary me-2" id="inputGroupFileAddon03" disabled readonly>
                                <i class="bi bi-file-text"></i> {{ substr($bom->attachment3, 14) }}
                            </a>
                        </div>
                        @endif
                        <input type="file" class="form-control rounded-4 mt-2" name="attachment3"
                            id="inputGroupFile02">
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-sm-6 col-12 mt-3">
                <div class="row align-items-center">
                    <label for="kanban_no" class="form-label col-4">Kanban No:</label>
                    <div class="col-6">
                        <input disabled type="text" name="kanban_no" id="kanban_no"
                            class="form-control rounded-4" value="{{ $bom->kanban_no }}">
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-sm-6 col-12 mt-3">
                <div class="row align-items-center">
                    <label for="inputGroupFile02" class="form-label col-4">Kanban Card:</label>
                    <div class="col-6">
                        @if (isset($bom->kanbon_card))
                        <div class="d-flex align-items-center">

                            <a href="{{ asset('/bom-attachments/') }}/{{ $bom->kanbon_card }}" target="_blank"
                                class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03" disabled readonly>
                                <i class="bi bi-file-text"></i>{{ substr($bom->kanbon_card, 14) }}
                            </a>
                        </div>
                        @endif
                        <input type="file" class="form-control rounded-4 mt-2" name="kanban_no"
                            id="inputGroupFile02">


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



        </div>
        <br>
        {{-- Material and Purchase Part --}}
        <div class="row">
            <div class="col-12 d-flex justify-content-between">
                <h5>Material and Purchase Part</h5>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="table-responsive">
                <table class="table table-bordered m-0" id="material_pruchase_part_Table">
                    <thead>
                        <tr>
                            <th>Sr No</th>
                            <th>Part No</th>
                            <th>Part Name</th>
                            <th>Type of Product</th>
                            <th>UOM</th>
                            <th>Qty / Length Required</th>

                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($purchase_parts as $purchase_part)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $purchase_part->product->part_no ?? '' }}</td>
                            <td>{{ $purchase_part->product->part_name ?? '' }}</td>
                            <td>{{ $purchase_part->product->type_of_products->type ?? '' }}</td>
                            <td>{{ $purchase_part->product->units->name ?? '' }}</td>
                            <td>{{ $purchase_part->qty }}</td>

                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        <br>

        {{-- Sub Part --}}
        <div class="row">
            <div class="col-12 d-flex justify-content-between">
                <h5>Circuit / Kanban</h5>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="table-responsive">
                <table class="table table-bordered m-0" id="subpart_Table">
                    <thead>
                        <tr>
                            <th>Sr No</th>
                            <th>Part No</th>
                            <th>Part Name</th>
                            <th>Type of Product</th>
                            <th>UOM</th>
                            <th>Qty Required</th>

                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($sub_parts as $sub_part)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $sub_part->product->part_no ?? '' }}</td>
                            <td>{{ $sub_part->product->part_name ?? '' }}</td>
                            <td>{{ $sub_part->product->type_of_products->type ?? '' }}</td>
                            <td>{{ $sub_part->product->units->name ?? '' }}</td>
                            <td>{{ $sub_part->qty }}</td>

                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        <br>
        {{-- Crushing Material --}}
        <div class="row">
            <div class="col-12 d-flex justify-content-between">
                <h5>Process</h5>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="table-responsive">
                <table class="table table-bordered m-0" id="process_Table">
                    <thead>
                        <tr>
                            <th>Sr No</th>
                            <th>Process</th>
                            <th>Process No</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($processes as $sub_process)
                        <tr>
                            <td>
                                {{ $loop->iteration }}
                            </td>
                            <td>
                                {{ $sub_process->process->name ?? '' }}
                            </td>
                            <td>
                                {{ $sub_process->process_no }}
                            </td>
                            <td>
                                <input type="hidden" value="{{ $sub_process->cavity }}" class="rowId">
                                <button type="button" class="btn btn-primary btn-sm openModal"><i
                                        class="bi bi-plus"></i></button>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        <br>
    </div>
</div>
{{-- PROCESS MODAL --}}
<div class="modal fade" id="processModal" tabindex="-1" aria-labelledby="processModalTitle" aria-modal="true"
    role="dialog" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="processModalTitle">
                    Process
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-6">
                        <label>Process:</label>
                        <select class="form-control process" id="process" disabled>
                        </select>
                    </div>
                    <div class="col-6">
                        <label>Cycle Time (s):</label>
                        <input type="number" disabled step="0.001" class="form-control cycle_time">
                    </div>
                    <br>
                    <div class="col-6 mt-3">
                        <label>Process No:</label>
                        <input type="text" disabled class="form-control process_no">
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-12 d-flex justify-content-between">
                        <label>Material & Purhase Part</label>
                    </div>
                </div>
                <br>
                <div class="table-responsive">
                    <table class="table table-bordered m-0 w-100" id="materialModalTable">
                        <thead>
                            <tr>
                                <th>Part No</th>
                                <th>Part Name</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <br>
                <div class="row">
                    <div class="col-12 d-flex justify-content-between">
                        <label>Circuit / Kanban</label>
                    </div>
                </div>
                <br>
                <div class="table-responsive">
                    <table class="table table-bordered m-0 w-100" id="subpartModalTable">
                        <thead>
                            <tr>
                                <th>Part No</th>
                                <th>Part Name</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondry" data-bs-dismiss="modal">
                    CANCEL
                </button>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        $('#material_pruchase_part_Table').DataTable();
        $('#crushing_Table').DataTable();
        $('#subpart_Table').DataTable();
    });
</script>
<script>
    var process_Table; 
    var subpartModalTable;
    var materialModalTable; 
    $(document).ready(function() {
        process_Table = $('#process_Table').DataTable({
            paging: false,
            searching: false,
            lengthChange: false,
            ordering: true
        });
        subpartModalTable = $('#subpartModalTable').DataTable({
            paging: false,
            searching: false,
            lengthChange: false,
            ordering: true
        });
        materialModalTable = $('#materialModalTable').DataTable({
            paging: false,
            searching: false,
            lengthChange: false,
            ordering: true
        });

        sessionStorage.clear();

        var products = @json($products);

        var process = @json($processes);
        process.forEach(element => {
            let data = {};

            data['process'] = element.process_id;
            data['process_name'] = element.process.name;
            data['cycle_time'] = element.ct;
            data['process_no'] = element.process_no;
            data['rowId'] = element.cavity;

            data['circuit'] = [];
            let subPartIds = JSON.parse(element.sub_part_ids);
            if (subPartIds != null) {
                subPartIds.forEach(function(element) {
                    let productFound = products.filter(p => p.id == element);
                    let rowData = {};
                    rowData['product_id'] = element;
                    rowData['part_no'] = productFound[0]?.part_no ?? '';
                    rowData['part_name'] = productFound[0]?.part_name ?? '';
                    data['circuit'].push(rowData);
                });
            }

            data['raw'] = [];
            let rawPartIds = JSON.parse(element.raw_part_ids);
            if (rawPartIds != null) {
                rawPartIds.forEach(function(element) {
                    let productFound = products.filter(p => p.id == element);
                    let rowData = {};
                    rowData['product_id'] = element;
                    rowData['part_no'] = productFound[0]?.part_no ?? '';
                    rowData['part_name'] = productFound[0]?.part_name ?? '';
                    data['raw'].push(rowData);
                });
            }

            sessionStorage.setItem(`StoreProcess${element.cavity}`, JSON.stringify(data));
        });

        $('#process').empty().append('<option value="" disabled selected>Select Process</option>');

        let lastProcessId = null;

        for (let i = 0; i < sessionStorage.length; i++) {
            let key = sessionStorage.key(i);
            if (key.startsWith('StoreProcess')) {
                let data = JSON.parse(sessionStorage.getItem(key));
                let optionText = `${data.process_name}`;
                $('#process').append(
                    $('<option>', {
                        value: data.process,
                        text: optionText
                    })
                );

                lastProcessId = data.process;
            }
        }

        if (lastProcessId) {
            $('#process').val(lastProcessId).trigger('change');
        }

    });

    $(document).on('click', '.openModal', function() {
        $rowId = $(this).closest('tr').find('.rowId').val();
        if ($rowId) {
            $('.hiddenRowId').val($rowId);
        } else {
            $('.hiddenRowId').val('');
        }
        storedData = sessionStorage.getItem(`StoreProcess${$rowId}`);
        SelectedRow = $(this).closest('tr');
        $('.modal-body .process').val('');
        $('.modal-body .cycle_time').val('');
        $('.modal-body .process_no').val('');

        $('#processModal').modal('show');

        subpartModalTable.clear().draw(false);
        materialModalTable.clear().draw(false);

        if (storedData) {
            let data = JSON.parse(storedData);

            console.log('Parsed Data:', data);
            setTimeout(function() {
                $('.modal-body .process').val(data.process).trigger('change');
                $('.modal-body .cycle_time').val(+data.cycle_time).trigger('input');
                $('.modal-body .process_no').val(data.process_no).trigger('input');
            }, 100);

            data.circuit.forEach(function(item) {
                if (item.part_no != "No data available in table") {
                    subpartModalTable.row.add([
                        `<input type="hidden" class="product_id" value="${item.product_id}"/>
                ${item.part_no}`,
                        item.part_name,
                    ]).draw(false);
                }
            });

            data.raw.forEach(function(item) {
                if (item.part_no != "No data available in table") {
                    materialModalTable.row.add([
                        `<input type="hidden" class="product_id" value="${item.product_id}"/>
                ${item.part_no}`,
                        item.part_name,
                    ]).draw(false);
                }
            });
        }
    });
</script>
@endsection