@extends('vendor.app')

@section('title') Order TM{{ $order->order_id }} @endsection
@section('styles')
@endsection
@push('head-scripts')
<!-- Bootstrap CSS -->
<link rel="shortcut icon" type="image/x-icon" href="{{ asset('/img/trust.jpg') }}">


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet">

<link rel="stylesheet" href="{{ asset('/wrd_file/tachyons.min.css') }}">
<link href="{{ asset('/wrd_file/css') }}" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('/wrd_file/style.css') }}">
<link href="{{ asset('/css/vendor.css') }}" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.add-input-area@4.11.0/dist/jquery.add-input-area.min.js" integrity="sha256-yOwGvcRp3I8/XWkeARhJkgdfLREQygbFA5W2bUpM2FY=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<style>
    .product-status-wrap .modal-content {
        width: 1200px;
        margin: 0px auto;
    }

    .rb-container ul.rb li.current::before {
        border-color: green;
    }
</style>
@endpush

@section('content')

<div class="container-fluid">
    <div class="row dataList" style="margin: auto;">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="text-align: left;">
            @if(session('success'))
            <div class="alert alert-success alert-dismissible">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            @endif
            <div class="product-status-wrap" style="width: 95vw; margin: auto;">
                <div class="modal-content" style="background-color: #f3f3f3">
                    <div class="modal-header">
                        <h5 class="modal-title">Order TM{{ $order->order_id }}</h5>
                        <h5 class="modal-title">Invoice {{ $order->invoice_num }}</h5>
                        <h5 class="modal-title">
                            @if($order->orderStatuses->isEmpty())
                            <a class="" href="#" onclick="event.preventDefault(); document.getElementById('confirm-order-form').submit();">
                                <button type="button" class="btnreq">Confirm</button>
                            </a>
                            <form id="confirm-order-form" action="{{ route('vendor.orders.confirm', $order) }}" method="POST" style="display: none;">
                                @csrf
                            </form>
                            @endif
                        </h5>
                    </div>
                    <div class="row mb-2">
                        {{-- Sender --}}
                        <div class="col-6 mb-2">
                            <div class="card  mb-2">
                                <h5 class="card-header">Sender</h5>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-6">
                                            <div class="row">
                                                <div class="col-4">
                                                    <p class="text-muted">Name</p>
                                                </div>
                                                <div class="col-8">
                                                    <p class="card-text">{{ $vendor->vendor_name }}</p>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-4">
                                                    <p class="text-muted">Address</p>
                                                </div>
                                                <div class="col-8">
                                                    <p class="card-text"></p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="row">
                                                <div class="col-3">
                                                    <p class="text-muted">Email</p>
                                                </div>
                                                <div class="col-9">
                                                    <p class="card-text">{{ $vendor->email }}</p>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-3">
                                                    <p class="text-muted">Phone</p>
                                                </div>
                                                <div class="col-9">
                                                    <p class="card-text">{{ $vendor->vendor_mobile_num }}</p>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-5">
                                                    <p class="text-muted">Pickup Date</p>
                                                </div>
                                                <div class="col-7">
                                                    <p class="card-text">{{ $order->pickup_date }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {{-- Estimate --}}
                            <div class="card">
                                <h5 class="card-header">Estimate</h5>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-6">
                                            <p class="text-muted">Estimated Delivery Cost</p>
                                        </div>
                                        <div class="col-6">
                                            <p class="card-text">$ {{ $order->estimated_delivery_charge }}</p>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-6">
                                            <p class="text-muted">Estimated Distance</p>
                                        </div>
                                        <div class="col-6">
                                            <p class="card-text">{{ $order->estimated_distance }} km</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Receiver --}}
                        <div class="col-6 mb-2">
                            <div class="card">
                                <h5 class="card-header">Receiver</h5>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-6">
                                            <div class="row">
                                                <div class="col-4">
                                                    <p class="text-muted">Name</p>
                                                </div>
                                                <div class="col-8">
                                                    <p class="card-text">{{ $order->receiver_first_name }} {{ $order->receiver_last_name }}</p>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-4">
                                                    <p class="text-muted">Address</p>
                                                </div>
                                                <div class="col-8">
                                                    <p class="card-text"></p>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-6">
                                                    <p class="text-muted">Drop Off Access</p>
                                                </div>
                                                <div class="col-6">
                                                    <p class="card-text">{{ $order->drop_off_access }}</p>
                                                </div>
                                                <div class="col-6">
                                                    <p class="text-muted">Floor</p>
                                                </div>
                                                <div class="col-6">
                                                    <p class="card-text">
                                                        @if ( $order->drop_off_access === "Ground" )
                                                            0
                                                        @else
                                                            {{ $order->floor }}
                                                        @endif
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="row">
                                                <div class="col-3">
                                                    <p class="text-muted">Email</p>
                                                </div>
                                                <div class="col-9">
                                                    <p class="card-text">{{ $order->receiver_email }}</p>
                                                </div>
                                                <div class="col-3">
                                                    <p class="text-muted">Phone</p>
                                                </div>
                                                <div class="col-9">
                                                    <p class="card-text">{{ $order->receiver_phone }}</p>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-5">
                                                    <p class="text-muted">Delivery Date</p>
                                                </div>
                                                <div class="col-7">
                                                    <p class="card-text">{{ $order->delivery_date }}</p>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-3">
                                                    <p class="text-muted">Notes</p>
                                                </div>
                                                <div class="col-9">
                                                    <p class="card-text">{{ $order->delivery_note }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Freight Details --}}
                        <div class="col-12 mb-2">
                            <div class="card" >
                                <h5 class="card-header">Freight Details</h5>
                                <div class="card-body">
                                    <div class="row">
                                        <table id="orderTable">
                                            <thead>
                                                <tr class="table-header">
                                                    <th>Reference #</th>
                                                    <th>Product Type</th>
                                                    <th>Description</th>
                                                    <th>Quantity</th>
                                                    <th>Length</th>
                                                    <th>Width</th>
                                                    <th>Height</th>
                                                    <th>Total Cubic</th>
                                                    <th>Weight</th>
                                                    <th>Installation</th>
                                                    <th>Unwrap</th>
                                                    <th>Fragile</th>
                                                <th><a href="{{ route('vendor.orders.print', $order) }}" target="_blank">Print All</a><br> (Thermal/A4)</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($order->packages as $package)
                                                <tr class="table-border">
                                                    <td>{{$package->reference_id}}</td>
                                                    <td>{{$package->product_type}}</td>
                                                    <td style="word-break:break-all">{{$package->product_description}}</td>
                                                    <td>{{$package->quantity}}</td>
                                                    <td>{{$package->length}} {{$package->unit}}</td>
                                                    <td>{{$package->width}} {{$package->unit}}</td>
                                                    <td>{{$package->height}} {{$package->unit}}</td>
                                                    <td>{{$package->cubic}} ㎥</td>
                                                    <td>{{$package->weight}} Kg</td>
                                                    <td>
                                                        @if ($package->installation === 1)
                                                        <i class="fas fa-check"></i>
                                                        @else
                                                        <i class="fas fa-times"></i>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if ($package->unwrap === 1)
                                                        <i class="fas fa-check"></i>
                                                        @else
                                                        <i class="fas fa-times"></i>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if ($package->fragile === 1)
                                                        <i class="fas fa-check"></i>
                                                        @else
                                                        <i class="fas fa-times"></i>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        <a href="{{ route('vendor.packages.print', $package) }}" target="_blank">
                                                            <i class="fa fa-print" aria-hidden="true"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- History --}}
                        <div class="col-12 mb-2">
                            <div class="card">
                                <h5 class="card-header"><i class="fas fa-route"></i> HISTORY</h5>
                                <div class="card-body">
                                <link rel="stylesheet" href="{{ asset('/css1/app.css') }}">
                                <div class="trust">
                                    <div class="tab-panel" id="ex2-tabs-2" role="tabpanel" aria-labelledby="ex2-tab-2">
                                
                                            <div class="row content">
                                                <div class="container">
                                                    <div class="rb-container">
                                                        <ul class="rb">
                                                            @foreach($order->orderStatuses as $orderStatus)
                                                            <li @class(['rb-item', 'current'=> $orderStatus->pivot->current]) ng-repeat="itembx">
                                                                <h5>{{ $orderStatus->order_status_name }}</h5>
                                                                <div class="timestamp">{{ $orderStatus->pivot->created_at->format('d/m/Y') }}</div>
                                                                {{-- <div class="item-title">{{ $orderStatus->pivot->remarks }}</div> --}}
                                                            </li>
                                                            @endforeach
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                    </div>
                                </div>
                                </div>
                            </div>
                        </div>


                        {{-- Attachments --}}
                        <div class="col-12 mb-2">
                            <div class="card">
                                <h5 class="card-header">Attachments</h5>
                                <div class="card-body">
                                    <div class="row">
                                        <table id="orderTable">
                                            <thead>
                                                <tr class="table-header">
                                                    <th>DATE</th>
                                                    <th>FILE NAME</th>
                                                    <th>REMARKS</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($order->images as $image)
                                                <tr class="table-border">
                                                    <td>{{ $image->created_at }}</td>
                                                    <td><a href="/storage/{{$image->image_path}}" target="_blank">{{ $image->original_file_name }}</a></td>
                                                    <td>{{ $image->remarks }}</td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>

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

                        {{-- <div class="modal-body">
                            <div class="row">
                                <legend>Delivery Details</legend>
                                <div class="col-md-6">
                                    <h6>Pickup Address</h6>
                                    <div class="row">
                                        <div class="col-md-12 col-sm-12">
                                                                                    </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <h6>Delivery Address</h6>
                                    <div class="row">
                                        <div class="col-md-12 col-sm-12">
                                                                                    </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <h6>Pickup Date</h6>
                                    <div class="row">
                                        <div class="col-md-12 col-sm-12">
                                            {{ $order->pickup_date }}
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <h6>Delivery Date</h6>
                                    <div class="row">
                                        <div class="col-md-12 col-sm-12">
                                            {{ $order->delivery_date }}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-4">
                                    <h6>Drop Off Access</h6>
                                    <div class="row">
                                        <div class="col-md-12 col-sm-12">
                                            {{ $order->drop_off_access }}
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <h6>Floor</h6>
                                    <div class="row">
                                        <div class="col-md-12 col-sm-12">
                                            {{ $order->floor }}
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <h6>Estimated Delivery Cost</h6>
                                    <div class="row">
                                        <div class="col-md-12 col-sm-12">
                                            $ {{ $order->estimated_delivery_charge }}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-4">
                                    <h6>Estimated Distance</h6>
                                    <div class="row">
                                        <div class="col-md-12 col-sm-12">
                                            {{ $order->estimated_distance }} km
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-8">
                                    <h6>Delivery Notes</h6>
                                    <div class="row">
                                        <div class="col-md-12 col-sm-12">
                                            {{ $order->delivery_note }}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <legend>Customer Details</legend>
                                <div class="col-md-6">
                                    <h6>First Name</h6>
                                    <div class="row">
                                        <div class="col-md-12 col-sm-12">
                                            {{ $order->receiver_first_name }}
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <h6>Last Name</h6>
                                    <div class="row">
                                        <div class="col-md-12 col-sm-12">
                                            {{ $order->receiver_last_name }}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <h6>Email</h6>
                                    <div class="row">
                                        <div class="col-md-12 col-sm-12">
                                            {{ $order->receiver_email }}
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <h6>Contact Number</h6>
                                    <div class="row">
                                        <div class="col-md-12 col-sm-12">
                                            {{ $order->receiver_phone }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <table id="orderTable">
                                    <thead>
                                        <tr class="table-header">
                                            <th>Reference #</th>
                                            <th>Product Type</th>
                                            <th>Description</th>
                                            <th>Quantity</th>
                                            <th>Length</th>
                                            <th>Width</th>
                                            <th>Height</th>
                                            <th>Total Cubic</th>
                                            <th>Weight</th>
                                            <th>Installation</th>
                                            <th>Unwrap</th>
                                            <th>Fragile</th>
                                        <th>Print<br> (Thermal/A4)</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($order->packages as $package)
                                        <tr class="table-border">
                                            <td>{{$package->reference_id}}</td>
                                            <td>{{$package->product_type}}</td>
                                            <td>{{$package->product_description}}</td>
                                            <td>{{$package->quantity}}</td>
                                            <td>{{$package->length}} {{$package->unit}}</td>
                                            <td>{{$package->width}} {{$package->unit}}</td>
                                            <td>{{$package->height}} {{$package->unit}}</td>
                                            <td>{{$package->cubic}} ㎥</td>
                                            <td>{{$package->weight}} Kg</td>
                                            <td>
                                                @if ($package->installation === 1)
                                                <i class="fas fa-check"></i>
                                                @else
                                                <i class="fas fa-times"></i>
                                                @endif
                                            </td>
                                            <td>
                                                @if ($package->unwrap === 1)
                                                <i class="fas fa-check"></i>
                                                @else
                                                <i class="fas fa-times"></i>
                                                @endif
                                            </td>
                                            <td>
                                                @if ($package->fragile === 1)
                                                <i class="fas fa-check"></i>
                                                @else
                                                <i class="fas fa-times"></i>
                                                @endif
                                            </td>
                                            <td>
                                                <a href="{{ route('vendor.packages.print', $package) }}" target="_blank">
                                                    <i class="fa fa-print" aria-hidden="true"></i>
                                                </a>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            <div class="mt-4">
                                <h3 class="modal-title text-center">
                                    @if($order->orderStatuses->isEmpty())
                                    <a class="" href="#" onclick="event.preventDefault(); document.getElementById('confirm-order-form').submit();">
                                        <button type="button" class="btn btnConfirm">Confirm Order</button>
                                    </a>
                                    <form id="confirm-order-form" action="{{ route('vendor.orders.confirm', $order) }}" method="POST" style="display: none;">
                                        @csrf
                                    </form>
                                    @endif
                                </h3>
                            </div>
                        </div> --}}


                    </div>

            </div>
        </div>
    </div>
</div>
{{-- <link rel="stylesheet" href="{{ asset('/css1/app.css') }}">
<div class="trust">
    <div class="tab-panel" id="ex2-tabs-2" role="tabpanel" aria-labelledby="ex2-tab-2">

        <div class="container" style="width: 1250px;">
            <div class="row content">
                <h4 class="content_title"><i class="fas fa-route"></i> HISTORY</h4>
                <div class="container">
                    <div class="rb-container">
                        <ul class="rb">
                            @foreach($order->orderStatuses as $orderStatus)
                            <li @class(['rb-item', 'current'=> $orderStatus->pivot->current]) ng-repeat="itembx">
                                <h5>{{ $orderStatus->order_status_name }}</h5>
                                <div class="timestamp">{{ $orderStatus->pivot->created_at->format('d/m/Y') }}</div>
                                <div class="item-title">{{ $orderStatus->pivot->remarks }}</div>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> --}}


@endsection

@push('body-scripts')
<script>
    function calcOrderNumAndRefNum() {
        var e = e || window.event;
        var elem = e.target || e.srcElement;
        var elemId = elem.id;
        var arryElemId = elemId.split('_');
        elemId = arryElemId[1];
        console.log('elemId: ' + elemId);
        var ref = 'refNum_' + elemId;
        if (!document.getElementById("orderNum").value) {
            document.getElementById("orderNum").value = "Order" + Math.floor(Math.random() * 2000);
        }
        if (!document.getElementById(ref).value) {
            document.getElementById(ref).value = "Ref" + Math.floor(Math.random() * 1000);
        }
    }
</script>

<script>
    function openShelf() {
        document.getElementById("nav_shelf").style.width = "300px";
    }

    function closeShelf() {
        document.getElementById("nav_shelf").style.width = "0";
    }
    jQuery('.site-content').click(function() {
        return closeShelf();
    });
    $(document).ready(function() {
        $(".close").click(function() {
            $(".modal").fadeOut(1000);
        });
        $("#myBtn").click(function() {
            $(".modal").fadeIn(1000);
        });
        $("#myBtn1").click(function() {
            $(".modal").fadeIn(1000);
        });

        $(".close").click(function() {
            $(".btnreq").removeClass("active");
        });
        $(".close").click(function() {
            $(".active1").addClass("active");
        });
    });
</script>

<!-- Google API -->
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDVAjuVd5ARnE_xmdbKnlLTw8nyBnihK6Y&libraries=places"></script>
<script>
    $(document).ready(function() {
        $("#latitudeArea").addClass("d-none");
        $("#longtitudeArea").addClass("d-none");
    });
</script>
<script>
    // google.maps.event.addDomListener(window, 'load', initSenderAddress);
    geocoder = new google.maps.Geocoder();
    map = new google.maps.Map(document.getElementById("map"), {
        center: {
            lat: -36.859482,
            lng: 174.4259345
        },
        zoom: 10,
        mapTypeControl: false,
    });
    // function initSenderAddress() {
    //     var input = document.getElementById('sender_address');
    //     var options = {
    //             componentRestrictions: {country: "nz"}
    //         };
    //     var autocomplete = new google.maps.places.Autocomplete(input, options);

    //     autocomplete.addListener('place_changed', function () {
    //         var place = autocomplete.getPlace();
    //         var pickupLat = place.geometry['location'].lat();
    //         var pickupLng = place.geometry['location'].lng();

    //         document.getElementById('pickupLat').value = pickupLat;
    //         document.getElementById('pickupLng').value = pickupLng;

    //         const pickupLatLng = { lat: pickupLat, lng: pickupLng };
    //         map = new google.maps.Map(document.getElementById("map"), {
    //             zoom: 10,
    //             center: pickupLatLng,
    //         });

    //         new google.maps.Marker({
    //             position: pickupLatLng,
    //             map,
    //             title: "Pickup Address",
    //         });
    //     });
    // }
    function codeAddress() {
        var address = document.getElementById('sender_address').value;
        console.log(address);
        geocoder.geocode({
            'address': address
        }, function(results, status) {
            if (status == 'OK') {
                document.getElementById('pickupLat').value = results[0].geometry.location.lat();
                document.getElementById('pickupLng').value = results[0].geometry.location.lng();
                console.log(results[0].geometry.location.lat());
                console.log(results[0].geometry.location.lng());
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });
    }
</script>
<script>
    google.maps.event.addDomListener(window, 'load', initReceiverAddress);

    function initReceiverAddress() {
        var input = document.getElementById('receiver_address');
        // var autocomplete = new google.maps.places.Autocomplete(input);

        var options = {
            componentRestrictions: {
                country: "nz"
            }
        };
        var autocomplete = new google.maps.places.Autocomplete(input, options);

        autocomplete.addListener('place_changed', function() {
            var place = autocomplete.getPlace();
            var deliveryLat = place.geometry['location'].lat();
            var deliveryLng = place.geometry['location'].lng();

            const deliveryLatLng = {
                lat: deliveryLat,
                lng: deliveryLng
            };
            map = new google.maps.Map(document.getElementById("map"), {
                zoom: 10,
                center: deliveryLatLng,
            });

            pickupLat = document.getElementById('pickupLat').value;
            pickupLng = document.getElementById('pickupLng').value;

            const pickupLatLng = {
                lat: pickupLat,
                lng: pickupLng
            };
            pickup = new google.maps.Marker({
                position: pickupLatLng,
                map,
                title: "Pickup Address",
            });

            delivery = new google.maps.Marker({
                position: deliveryLatLng,
                map,
                title: "Delivery Address",
            });
        });
    }
</script>

<script>
    let selected = document.querySelector('[name="unit"]');

    selected.onchange = event => {
        var idx = selected.selectedIndex;
        var val = selected.options[idx].text;
        document.getElementsByClassName('unit')[0].textContent = val;
        document.getElementsByClassName('unit')[1].textContent = val;
        document.getElementsByClassName('unit')[2].textContent = val;
        measurementcubis();
    }
</script>

<!-- Measurement & Unit -->
<script>
    function cubic() {
        var e = e || window.event;
        var elem = e.target || e.srcElement;
        var elemId = elem.id;
        var arryElemId = elemId.split('_');
        elemId = arryElemId[1];
        console.log('elemId: ' + elemId);

        var c = 'cubic_' + elemId;

        document.getElementById('length_' + elemId).value = "";
        document.getElementById('height_' + elemId).value = "";
        document.getElementById('width_' + elemId).value = "";
    }

    function units() {
        var e = e || window.event;
        var elem = e.target || e.srcElement;
        var elemId = elem.id;
        var arryElemId = elemId.split('_');
        elemId = arryElemId[1];
        console.log('elemId: ' + elemId);

        var u = 'unit_' + elemId;
        console.log('u: ' + u)
        var selected = document.querySelector('[name="' + u + '"]');

        var idx = selected.selectedIndex;
        console.log('idx:' + idx);
        var val = selected.options[idx].text;
        console.log('val:' + val);
        document.getElementById('unit_l_' + elemId).textContent = val;
        document.getElementById('unit_h_' + elemId).textContent = val;
        document.getElementById('unit_w_' + elemId).textContent = val;
        measurements()
    }

    function measurements() {
        var e = e || window.event;
        var elem = e.target || e.srcElement;
        var elemId = elem.id;
        var arryElemId = elemId.split('_');
        elemId = arryElemId[1];
        console.log('elemId: ' + elemId);

        var length = document.getElementById('length_' + elemId).value;
        var height = document.getElementById('height_' + elemId).value;
        var width = document.getElementById('width_' + elemId).value;
        var result = parseFloat(height) * parseFloat(width) * parseFloat(length);
        var cubic = document.getElementById('cubic_' + elemId).value;
        var unit = document.getElementById('unit_' + elemId).value;

        if (unit === 'mm') {
            result = parseFloat(result) / 1000 / 1000 / 1000;
        } else if (unit === 'cm') {
            result = parseFloat(result) / 100 / 100 / 100;
        } else if (unit === 'm') {
            result = result;
        }
        result = Math.round(result * 100) / 100;

        if (result < 0.01) {
            document.getElementById('cubic_' + elemId).value = 0.01;
        } else {
            document.getElementById('cubic_' + elemId).value = result;
        }
    }
</script>

<!-- Duplicate inputs -->
<script type="text/javascript">
    $(function() {
        $('#list').addInputArea({
            maximum: 50
        });
    });
</script>

<!-- Tracking Details -->
<script>
    function trackingSubmit() {
        var trackingNum = document.getElementById("trackingId").value;
        if (trackingNum) {
            document.getElementById("trackingDetails").style.display = "block";
        } else {
            document.getElementById("trackingDetails").style.display = "none";
        }
    }
</script>
@endpush