@extends('layouts.admin')
@section('title', 'Product | Mintavia Admin')

@section('content')
    <link href="{{ asset('bootstrap-tagsinput/bootstrap-tagsinput.css') }}" rel="stylesheet" />

    <style>
        .bootstrap-tagsinput {
            line-height: 29px
        }

        /* Input Options  Css */
        .bootstrap-tagsinput {
            height: 37px;
            background-color: #fff;
            border: 1px solid #ccc;
            box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
            display: inline-block;
            padding: 4px 6px;
            color: #555;
            vertical-align: middle;
            border-radius: 4px;
            max-width: 100%;
            line-height: 29px;
            cursor: text;
            width: 100%;
            height: auto;
            max-height: 200px;
            overflow-y: scroll;
        }

        .label-info {
            background-color: #364574;
        }

        .label {
            display: inline;
            padding: 0.2em 0.6em 0.3em;
            font-size: 100%;
            font-weight: 700;
            line-height: 1;
            color: #fff;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: 0.25em;
        }
    </style>

    <div class="row">
        <div class="col-12">
            <div class="card card-primary">
                <div class="card-header d-flex align-items-center">
                    <h3 class="card-title">Edit Product</h3>
                    <div class="ml-auto">
                        <a href="{{ route('admin.products.index') }}">
                            <button class="btn btn-sm btn-flat shadow rounded-0 btn-danger"><i
                                    class="fa fa-arrow-circle-left"></i> Back</button>
                        </a>
                    </div>
                </div>
                <form action="{{ route('admin.products.update', $product->id) }}" method="post"
                    enctype="multipart/form-data">
                    @csrf
                    @method('PATCH')
                    <!-- /.card-header -->
                    <div class="card-body">


                        <div class="row">
                            <div class="col-6">
                                <div class="row">
                                    <div class=" col-3">

                                        <div class="form-group">
                                            <label for="product_type_id">Type Of Group </label>
                                        </div>
                                    </div>
                                    <div class="col-7">

                                        <select id="product_type_id" name="product_type_id"
                                            class="form-control form-control-sm " style="width: 100%">
                                            @foreach ($types as $type)
                                                <option @if ($product->product_type_id == $type->id) selected @endif
                                                    value="{{ $type->id }}">{{ $type->type_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-1 px-1">
                                        <a href="{{ route('admin.types.index') }}" target="_blank">
                                            <button type="button" class="btn btn-block btn-sm btn-success"><i
                                                    class="fas fa-plus"></i></button>
                                        </a>
                                    </div>

                                    <div class="col-1 px-1">
                                        <button type="button" data-type="types"
                                            class="refresh-button btn-block btn-sm btn btn-info"><i
                                                class="fas fa-sync"></i></button>
                                    </div>
                                    @error('product_type_id')
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>

                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="product_group_id">Sub Categories </label>
                                        </div>
                                    </div>
                                    <div class="col-7">
                                        <select id="product_group_id" name="product_group_id"
                                            class="form-control form-control-sm js-select2" style="width: 100%">
                                            @foreach ($groups as $group)
                                                <option @if ($product->product_group_id == $group->id) selected @endif
                                                    value="{{ $group->id }}">{{ $group->group_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-1 px-1">
                                        <a href="{{ route('admin.productgroup.index') }}" target="_blank">
                                            <button type="button" class="btn btn-block btn-sm btn-success"><i
                                                    class="fas fa-plus"></i></button>
                                        </a>
                                    </div>
                                    <div class="col-1 px-1">
                                        <button type="button" data-type="groups"
                                            class="refresh-button btn-block btn-sm btn btn-info"><i
                                                class="fas fa-sync"></i></button>
                                    </div>

                                    @error('product_group_id')
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="row">
                                    <div class=" col-3">
                                        <div class="form-group">
                                            <label for="company">Company Name <span style="color: red;">*</span></label>
                                        </div>
                                    </div>
                                    <div class="col-7">
                                        <select id="company" name="company"
                                            class="form-control form-control-sm js-select2" style="width: 100%">
                                            @foreach ($bikes as $bike)
                                                <option @if ($product->bike_id == $bike->id) selected @endif
                                                    value="{{ $bike->id }}">{{ $bike->brand }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-1 px-1">
                                        <a href="{{ route('admin.bikes.index') }}" target="_blank">
                                            <button type="button" class="btn btn-block btn-sm btn-success"><i
                                                    class="fas fa-plus"></i></button>
                                        </a>
                                    </div>
                                    <div class="col-1 px-1">
                                        <button type="button" data-type="bikes"
                                            class="refresh-button btn-block btn-sm btn btn-info"><i
                                                class="fas fa-sync"></i></button>
                                    </div> <!-- </div> -->
                                    @error('company')
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="row">
                                    <div class="col-3">
                                        <div class="form-group">
                                            <label for="vehicle_id">Type Of vehicle <span
                                                    style="color: red;">*</span></label>
                                        </div>
                                    </div>
                                    <div class="col-7">

                                        {{-- <select id="vehicle_type" name="vehicle_type"
                                            class="form-control form-control-sm " style="width: 100%">
                                            @foreach (\App\Models\Product::VEHICLETYPE as $key => $vtype)
                                                <option @if ($product->vehicle_type == $key) selected @endif
                                                    value="{{ $key }}">{{ $vtype }}</option>
                                            @endforeach
                                        </select> --}}


                                        <select id="vehicle_type" name="vehicle_type"
                                            class="form-control form-control-sm js-select2">
                                            <option value="">Type of vehicle</option>
                                            @foreach ($vehicles as $vehicle)
                                                <option @if (old('vehicle_id', $product->vehicle_type) == $vehicle->id) selected @endif
                                                    value="{{ $vehicle->id }}">{{ $vehicle->vehicle_name }} </option>
                                            @endforeach

                                        </select>
                                        @error('vehicle_id')
                                            <span class="invalid-feedback d-block" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror

                                    </div>
                                    <div class="col-1 px-1">
                                        <a href="{{ route('admin.vehicles.index') }}" target="_blank">
                                            <button type="button" class="btn btn-block btn-sm btn-success"><i
                                                    class="fas fa-plus"></i></button>
                                        </a>
                                    </div>
                                    <div class="col-1 px-1">
                                        <button type="button" data-type="vehicles"
                                            class="refresh-button btn-block btn-sm btn btn-info"><i
                                                class="fas fa-sync"></i></button>

                                    </div>

                                </div>
                                <div class="row">
                                    <div class=" col-3">

                                        <div class="form-group">
                                            <label for="model"> Bike Or Car Name <span
                                                    style="color: red;">*</span></label>
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <select data-old-value="{{ $product->p_model_id }}" id="model"
                                            name="model" class="form-control form-control-sm js-select2"
                                            style="width: 100%">
                                        </select>
                                    </div>
                                    <div class="col-1 px-1">
                                        <a href="{{ route('admin.models.index') }}" target="_blank">
                                            <button type="button" class="btn btn-block btn-sm btn-success"><i
                                                    class="fas fa-plus"></i></button>
                                        </a>
                                    </div>
                                    @error('model')
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                    <div class="col-2">
                                        <div class="form-group">
                                            <label for="model_year">Model Year</label>
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <input value="{{ $product->model_year }}" list="model_year_list" type="text"
                                            class="form-control form-control-sm @error('model_year') is-invalid @enderror"
                                            placeholder="Model Year" name="model_year" id="model_year">
                                    </div>
                                </div>

                                <div class="row">
                                    <div class=" col-3">
                                        <div class="form-group">
                                            <label for="product_name">Product Name <span
                                                    style="color: red;">*</span></label>
                                        </div>
                                    </div>
                                    <div class=" col-7">
                                        <select id="product_name" name="product_name"
                                            class="form-control form-control-sm js-select2">
                                            <option value="">Item name</option>
                                            @foreach ($items as $item)
                                                <option @if (old('product_name', $product->product_name) == $item->item_name) selected @endif
                                                    value="{{ $item->item_name }}" product-item-id="{{ $item->id }}"
                                                    product-part_no="{{ $item->part_no }}">{{ $item->item_name }}
                                                </option>
                                            @endforeach

                                        </select>
                                        @error('product_name')
                                            <span class="invalid-feedback d-block" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror

                                    </div>
                                    <div class="col-1 px-1">
                                        <a href="{{ route('admin.items.index') }}" target="_blank">
                                            <button type="button" class="btn btn-block btn-sm btn-success"><i
                                                    class="fas fa-plus"></i></button>
                                        </a>
                                    </div>
                                    <div class="col-1 px-1">
                                        <button type="button" data-type="items"
                                            class="refresh-button btn-block btn-sm btn btn-info"><i
                                                class="fas fa-sync"></i></button>

                                    </div>


                                </div>
                                <div class="row">

                                    <div class="col-3">
                                        <div class="form-group">
                                            <label for="">Part No. <span style="color: red;">*</span></label>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <select id="product_part_no" name="product_part_no"
                                            class="form-control form-control-sm">
                                            <option value="{{ $product->product_part_no }}" selected>
                                                {{ $product->product_part_no }}</option>
                                        </select>
                                        @error('product_part_no')
                                            <span class="invalid-feedback d-block" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                    @error('')
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror

                                    <div class="col-1.5">
                                        <div class="form-group">
                                            <label for="product_barcode">Barcode</label>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <input value="{{ $product->barcode }}" type="text"
                                            class="form-control form-control-sm @error('barcode') is-invalid @enderror"
                                            placeholder="Product Barcode" name="barcode" id="product_barcode">
                                    </div>
                                    @error('product_barcode')
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror

                                </div><!--end part-->
                                <div class="row">
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label for=""></label>
                                        </div>
                                    </div>
                                    <div class="col-4" id="part_number_count" style="color: red">

                                    </div>
                                    <div class="col-2">
                                        <input class="form-check-input" type="radio" name="product_type"
                                            id="product_type_primary" value="Primary" >
                                        <label class="form-check-label" for="product_type_primary">
                                            Primary
                                        </label>
                                    </div>
                                    <div class="col-2">
                                        <input class="form-check-input" type="radio" name="product_type"
                                            id="product_type_secondary" value="Secondary" >
                                        <label class="form-check-label" for="product_type_secondary">
                                            Secondary
                                        </label>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class=" col-3">

                                        <div class="form-group">
                                            <label for="brand_id"> Brand Name <span style="color: red;">*</span></label>
                                        </div>
                                    </div>
                                    <div class=" col-7">
                                        <select id="brand_id" name="brand_id"
                                            class="form-control form-control-sm js-select2" style="width: 100%">
                                            @foreach ($brands as $brand)
                                                <option @if ($product->brand_id == $brand->id) selected @endif
                                                    value="{{ $brand->id }}">{{ $brand->brand_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-1 px-1">
                                        <a href="{{ route('admin.brands.index') }}" target="_blank">
                                            <button type="button" class="btn btn-block btn-sm btn-success"><i
                                                    class="fas fa-plus"></i></button>
                                        </a>
                                    </div>
                                    <div class="col-1 px-1">
                                        <button type="button" data-type="brands"
                                            class="refresh-button btn-block btn-sm btn btn-info"><i
                                                class="fas fa-sync"></i></button>
                                    </div>
                                    @error('brand_id')
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="row">
                                    <div class=" col-3">
                                        <div class="form-group">
                                            <label for="">Group Of Filter <span
                                                    style="color: red;">*</span></label>
                                        </div>
                                    </div>
                                    <div class=" col-7">
                                        <select id="group_of_filter_id" name="group_of_filter_id"
                                            class="form-control form-control-sm js-select2" style="width: 100%">
                                            <option value="">Select Group Filter </option>
                                            @foreach ($filters as $filter)
                                                <option @if (old('filter', $product->group_of_filter_id) == $filter->id) selected @endif
                                                    value="{{ $filter->id }}">{{ $filter->filter_name }}</option>
                                            @endforeach
                                        </select>

                                        @error('fiter')
                                            <span class="invalid-feedback d-block" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror

                                    </div>
                                    <div class="col-1 px-1">
                                        <a href="{{ route('admin.filters.index') }}" target="_blank">
                                            <button type="button" class="btn btn-block btn-sm btn-success"><i
                                                    class="fas fa-plus"></i></button>
                                        </a>
                                    </div>
                                    <div class="col-1 px-1">
                                        <button type="button" data-type="filters"
                                            class="refresh-button btn-block btn-sm btn btn-info"><i
                                                class="fas fa-sync"></i></button>
                                    </div>

                                </div>
                                {{-- <div class="row">
                                    <div class=" col-3">
                                        <div class="form-group">
                                            <label for="color">Product Color </label>
                                        </div>
                                    </div>
                                    <div class=" col-7">
                                        <select id="color" name="color"
                                            class="form-control form-control-sm js-select2">
                                            <option value=""></option>
                                            @foreach ($colors as $color)
                                                <option @if ((int) $product->color == $color->id) selected @endif
                                                    value="{{ $color->id }}">{{ $color->color_name }}</option>
                                            @endforeach
                                        </select>


                                    </div>
                                    @error('color')
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                    <div class="col-1 px-1">
                                        <a href="{{ route('admin.colors.index') }}" target="_blank">
                                            <button type="button" class="btn btn-block btn-sm btn-success"><i
                                                    class="fas fa-plus"></i></button>
                                        </a>
                                    </div>
                                    <div class="col-1 px-1">
                                        <button type="button" data-type="colors"
                                            class="refresh-button btn-block btn-sm btn btn-info"><i
                                                class="fas fa-sync"></i></button>
                                    </div>

                                </div> --}}

                                <div class="row">
                                    <div class="col-3">
                                        <div class="form-group">
                                            <label for="size">Product Size</label>
                                        </div>
                                    </div>
                                    <div class="col-7">

                                        <select id="size_id" name="size_id"
                                            class="form-control form-control-sm js-select2">

                                            @foreach ($sizes as $size)
                                                <option @if (old('size_id', $product->size_id) == $size->id) selected @endif
                                                    value="{{ $size->id }}">{{ $size->size_name }} </option>
                                            @endforeach

                                        </select>

                                    </div>
                                    @error('size')
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                    <div class="col-1 px-1">
                                        <a href="{{ route('admin.sizes.index') }}" target="_blank">
                                            <button type="button" class="btn btn-block btn-sm btn-success"><i
                                                    class="fas fa-plus"></i></button>
                                        </a>
                                    </div>
                                    <div class="col-1 px-1">
                                        <button type="button" data-type="sizes"
                                            class="refresh-button btn-block btn-sm btn btn-info"><i
                                                class="fas fa-sync"></i></button>
                                    </div>

                                </div>

                                <div class="row">
                                    <div class="col-3">
                                        <div class="form-group">
                                            <label for="desc">Description</label>
                                        </div>
                                    </div>
                                    <div class="col-9">
                                        <input value="{{ $product->desc }}" type="text"
                                            class="form-control form-control-sm @error('desc') is-invalid @enderror"
                                            placeholder="Desc" name="desc" id="desc">
                                    </div>
                                    @error('desc')
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>

                                <div class="row">
                                    <div class="col-12">
                                        NOTE (Explanation about the usage of item) & also it should be saved at the back
                                        end,
                                        so that this note will be reused again for same item & also create a master based on
                                        items
                                        at reset.
                                    </div>
                                </div>
                            </div>

                            <div class="col-6">
                                <div class="row no-gutters mb-2">
                                    <!-- Product Image 1 -->
                                    <div class="col-md-3 px-1 text-center">
                                        <div class="row no-gutters">
                                            <div class="col-12">
                                                <label class="w-100">Product Image 1</label>
                                            </div>
                                            <div class="col-md-12 text-center">
                                                <img src="{{ $product_image_1_url ? asset($product_image_1_url) : asset('noimage.jpg') }}"
                                                    alt="" class="img-fluid" id="product-image-img-1"><br>

                                                <input name="product_image_1"
                                                    class="form-control form-control-sm-file image-select w-100 d-none"
                                                    type="file" id="product_image_1" data-img="#product-image-img-1">

                                                <input type="hidden" name="product_input_1" id="product_input_1">

                                                <div class="row no-gutters">
                                                    <div class="col-6 px-1 pt-1">
                                                        <button type="button"
                                                            class="btn btn-info rounded-0 btn-sm btn-block"
                                                            onclick="triggerFileInput1()">
                                                            Select Image
                                                        </button>
                                                    </div>
                                                    <div class="col-6 px-1 pt-1">
                                                        <button type="button"
                                                            class="btn btn-info rounded-0 btn-sm btn-block"
                                                            onclick="take_snapshot('#product-image-img-1', '#product_input_1')">
                                                            Capture
                                                        </button>
                                                    </div>
                                                </div>

                                                <div id="image-error-msg-1" class="text-danger mt-2"
                                                    style="font-size: 14px;"></div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Product Image 2 -->
                                    <div class="col-md-3 px-1 text-center">
                                        <div class="row no-gutters">
                                            <div class="col-12">
                                                <label class="w-100">Product Image 2</label>
                                            </div>
                                            <div class="col-md-12 text-center">
                                                <img src="{{ $product_image_2_url ? asset($product_image_2_url) : asset('noimage.jpg') }}"
                                                    alt="" class="img-fluid" id="product-image-img-2"><br>

                                                <input name="product_image_2"
                                                    class="form-control form-control-sm-file image-select w-100 d-none"
                                                    type="file" id="product_image_2" data-img="#product-image-img-2">

                                                <input type="hidden" name="product_input_2" id="product_input_2">

                                                <div class="row no-gutters">
                                                    <div class="col-6 px-1 pt-1">
                                                        <button type="button"
                                                            class="btn btn-info rounded-0 btn-sm btn-block"
                                                            onclick="triggerFileInput2()">
                                                            Select Image
                                                        </button>
                                                    </div>
                                                    <div class="col-6 px-1 pt-1">
                                                        <button type="button"
                                                            class="btn btn-info rounded-0 btn-sm btn-block"
                                                            onclick="take_snapshot('#product-image-img-2', '#product_input_2')">
                                                            Capture
                                                        </button>
                                                    </div>
                                                </div>

                                                <div id="image-error-msg-2" class="text-danger mt-2"
                                                    style="font-size: 14px;"></div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Product Image 3 -->
                                    <div class="col-md-3 px-1 text-center">
                                        <div class="row no-gutters">
                                            <div class="col-12">
                                                <label class="w-100">Product Image 3</label>
                                            </div>
                                            <div class="col-md-12 text-center">
                                                <img src="{{ $product_image_3_url ? asset($product_image_3_url) : asset('noimage.jpg') }}"
                                                    alt="" class="img-fluid" id="product-image-img-3"><br>

                                                <input name="product_image_3"
                                                    class="form-control form-control-sm-file image-select w-100 d-none"
                                                    type="file" id="product_image_3" data-img="#product-image-img-3">

                                                <input type="hidden" name="product_input_3" id="product_input_3">

                                                <div class="row no-gutters">
                                                    <div class="col-6 px-1 pt-1">
                                                        <button type="button"
                                                            class="btn btn-info rounded-0 btn-sm btn-block"
                                                            onclick="triggerFileInput3()">
                                                            Select Image
                                                        </button>
                                                    </div>
                                                    <div class="col-6 px-1 pt-1">
                                                        <button type="button"
                                                            class="btn btn-info rounded-0 btn-sm btn-block"
                                                            onclick="take_snapshot('#product-image-img-3', '#product_input_3')">Capture</button>
                                                    </div>
                                                </div>

                                                <div id="image-error-msg-3" class="text-danger mt-2"
                                                    style="font-size: 14px;"></div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Product Image 4 -->
                                    <div class="col-md-3 px-1 text-center">
                                        <div class="row no-gutters">
                                            <div class="col-12">
                                                <label class="w-100">Product Image 4</label>
                                            </div>
                                            <div class="col-md-12 text-center">
                                                <img src="{{ $product_image_4_url ? asset($product_image_4_url) : asset('noimage.jpg') }}"
                                                    alt="" class="img-fluid" id="product-image-img-4"><br>

                                                <input name="product_image_4"
                                                    class="form-control form-control-sm-file image-select w-100 d-none"
                                                    type="file" id="product_image_4" data-img="#product-image-img-4">

                                                <input type="hidden" name="product_input_4" id="product_input_4">

                                                <div class="row no-gutters">
                                                    <div class="col-6 px-1 pt-1">
                                                        <button type="button"
                                                            class="btn btn-info rounded-0 btn-sm btn-block"
                                                            onclick="triggerFileInput4()">
                                                            Select Image
                                                        </button>
                                                    </div>
                                                    <div class="col-6 px-1 pt-1">
                                                        <button type="button"
                                                            class="btn btn-info rounded-0 btn-sm btn-block"
                                                            onclick="take_snapshot('#product-image-img-4', '#product_input_4')">Capture</button>
                                                    </div>
                                                </div>

                                                <div id="image-error-msg-4" class="text-danger mt-2"
                                                    style="font-size: 14px;"></div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Product Image 5 -->
                                    <div class="col-md-3 px-1 text-center">
                                        <div class="row no-gutters">
                                            <div class="col-12">
                                                <label class="w-100">Product Image 5</label>
                                            </div>
                                            <div class="col-md-12 text-center">
                                                <img src="{{ $product_image_5_url ? asset($product_image_5_url) : asset('noimage.jpg') }}"
                                                    alt="" class="img-fluid" id="product-image-img-5"><br>

                                                <input name="product_image_5"
                                                    class="form-control form-control-sm-file image-select w-100 d-none"
                                                    type="file" id="product_image_5" data-img="#product-image-img-5">

                                                <input type="hidden" name="product_input_5" id="product_input_5">

                                                <div class="row no-gutters">
                                                    <div class="col-6 px-1 pt-1">
                                                        <button type="button"
                                                            class="btn btn-info rounded-0 btn-sm btn-block"
                                                            onclick="triggerFileInput5()">
                                                            Select Image
                                                        </button>
                                                    </div>
                                                    <div class="col-6 px-1 pt-1">
                                                        <button type="button"
                                                            class="btn btn-info rounded-0 btn-sm btn-block"
                                                            onclick="take_snapshot('#product-image-img-5', '#product_input_5')">Capture</button>
                                                    </div>
                                                </div>

                                                <div id="image-error-msg-5" class="text-danger mt-2"
                                                    style="font-size: 14px;"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12">
                                        <div id="accordion">
                                            <div class="card">
                                                <div class="card-header" id="headingThree">
                                                    <h5 class="mb-0">
                                                        <button type="button" class="btn btn-link collapsed"
                                                            data-toggle="collapse" data-target="#collapseThree"
                                                            aria-expanded="false" aria-controls="collapseThree">
                                                            Item Description
                                                        </button>
                                                    </h5>
                                                </div>
                                                <div id="collapseThree" class="collapse" aria-labelledby="headingThree"
                                                    data-parent="#accordion">
                                                    <div class="card-body">
                                                        <div class="row">
                                                            <div class="col-md-1">
                                                                <label for="rim_size">Rim Size</label>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <input type="text" id="rim_size", name="rim_size"
                                                                    class="form-control"
                                                                    value="{{ $product->rim_size }}">
                                                            </div>
                                                            <div class="col-md-1">
                                                                <label for="section_width">Section width</label>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <input type="text" id="section_width",
                                                                    name="section_width" class="form-control"
                                                                    value="{{ $product->section_width }}">
                                                            </div>
                                                            <div class="col-md-1">
                                                                <label for="tyre_aspect_ration">Tyre Aspect ration</label>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <input type="text" id="tyre_aspect_ration",
                                                                    name="tyre_aspect_ration" class="form-control"
                                                                    value="{{ $product->tyre_aspect_ration }}">
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-md-1">
                                                                <label for="construction_type">Construction Type</label>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <input type="text" id="construction_type",
                                                                    name="construction_type" class="form-control"
                                                                    value="{{ $product->construction_type }}">
                                                            </div>
                                                            <div class="col-md-1">
                                                                <label for="lode_index">Lode Index</label>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <input type="text" id="lode_index", name="lode_index"
                                                                    class="form-control"
                                                                    value="{{ $product->lode_index }}">
                                                            </div>
                                                            <div class="col-md-1">
                                                                <label for="speed_rating">Speed Rating</label>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <input type="text" id="speed_rating",
                                                                    name="speed_rating" class="form-control"
                                                                    value="{{ $product->speed_rating }}">
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-md-1">
                                                                <label for="load_capacity">load Capacity</label>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <input type="text" id="load_capacity",
                                                                    name="load_capacity" class="form-control"
                                                                    value="{{ $product->load_capacity }}">
                                                            </div>
                                                            <div class="col-md-1">
                                                                <label for="tread_depth">Tread depth</label>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <input type="text" id="tread_depth",
                                                                    name="tread_depth" class="form-control"
                                                                    value="{{ $product->tread_depth }}">
                                                            </div>
                                                            <div class="col-md-1">
                                                                <label for="rim_width">Rim width</label>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <input type="text" id="rim_width", name="rim_width"
                                                                    class="form-control"
                                                                    value="{{ $product->rim_width }}">
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-md-1">
                                                                <label for="Item_diameter">Item Diameter</label>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <input type="text" id="Item_diameter",
                                                                    name="Item_diameter" class="form-control"
                                                                    value="{{ $product->Item_diameter }}">
                                                            </div>
                                                            <div class="col-md-1">
                                                                <label for="item_weight">Item Weight</label>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <input type="text" id="item_weight",
                                                                    name="item_weight" class="form-control"
                                                                    value="{{ $product->item_weight }}">
                                                            </div>
                                                            <div class="col-md-1">
                                                                <label for="battery_warranty">Battery warranty</label>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <input type="text" id="battery_warranty",
                                                                    name="battery_warranty" class="form-control"
                                                                    value="{{ $product->battery_warranty }}">
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-md-1">
                                                                <label for="narration_1 ">Narration 1 </label>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <input type="text" id="narration_1",
                                                                    name="narration_1" class="form-control"
                                                                    value="{{ $product->narration_1 }}">
                                                            </div>
                                                            <div class="col-md-1">
                                                                <label for="narration_2">Narration 2</label>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <input type="text" id="narration_2",
                                                                    name="narration_2" class="form-control"
                                                                    value="{{ $product->narration_2 }}">
                                                            </div>
                                                            <div class="col-md-1">
                                                                <label for="narration_3">Narration 3</label>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <input type="text" id="narration_3",
                                                                    name="narration_3" class="form-control"
                                                                    value="{{ $product->narration_3 }}">
                                                            </div>
                                                        </div>

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

                    </div>

                    <div class="card-body">

                        <div class="row"><!--second row-->
                            <div class="col-4">
                                <div class="row">
                                    <div class="col-5">
                                        <div class="form-group">
                                            <label for="color">Product Color </label>
                                        </div>
                                    </div>
                                    <div class="col-5">
                                        <select id="color" name="color"
                                            class="form-control form-control-sm js-select2">
                                            <option value=""></option>
                                            @foreach ($colors as $color)
                                                <option @if ((int) $product->color == $color->id) selected @endif
                                                    value="{{ $color->id }}">{{ $color->color_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-1 px-1">
                                        <a href="{{ route('admin.colors.index') }}" target="_blank">
                                            <button type="button" class="btn btn-block btn-sm btn-success"><i
                                                    class="fas fa-plus"></i></button>
                                        </a>
                                    </div>
                                    <div class="col-1 px-1">
                                        <button type="button" data-type="colors"
                                            class="refresh-button btn-block btn-sm btn btn-info"><i
                                                class="fas fa-sync"></i></button>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-5">
                                        <div class="form-group">
                                            <label for="hsn_code">HSN Code</label>
                                        </div>
                                    </div>
                                    <div class="col-7">
                                        <input value="{{ $product->hsn_code }}" type="text"
                                            class="form-control form-control-sm @error('hsn_code') is-invalid @enderror"
                                            placeholder="HSN Code" name="hsn_code" id="hsn_code">
                                    </div>
                                    @error('hsn_code')
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="row">
                                    <div class="col-5">
                                        <div class="form-group">
                                            <label for="tax_id">GST Tax</label>
                                        </div>
                                    </div>
                                    <div class="col-5">
                                        <select id="tax_id" name="tax_id"
                                            class="form-control form-control-sm js-select2" style="width: 100%">
                                            @foreach ($taxes as $tax)
                                                <option @if ($product->tax_id == $tax->id) selected @endif
                                                    value="{{ $tax->id }}">{{ $tax->tax_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-1 px-1">
                                        <a href="{{ route('admin.taxes.index') }}" target="_blank">
                                            <button type="button" class="btn btn-block btn-sm btn-success"><i
                                                    class="fas fa-plus"></i></button>
                                        </a>
                                    </div>
                                    <div class="col-1 px-1">
                                        <button type="button" data-type="taxes"
                                            class="refresh-button btn-block btn-sm btn btn-info"><i
                                                class="fas fa-sync"></i></button>
                                    </div>

                                    @error('tax_id')
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="row">
                                    <div class="col-5">
                                        <div class="form-group">
                                            <label for="unit">Primery Unit </label>
                                        </div>
                                    </div>
                                    <div class="col-5">
                                        <select id="unit" name="unit" class="form-control form-control-sm "
                                            style="width: 100%">
                                            <option value="" disabled></option>
                                            @foreach ($units as $unit)
                                                <option @if (old('unit', $product->unit_id) == $unit->id) selected @endif
                                                    value="{{ $unit->id }}">{{ $unit->unit_name }}</option>
                                            @endforeach
                                        </select>
                                        @error('unit')
                                            <span class="invalid-feedback d-block" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                    <div class="col-1 px-1">
                                        <a href="{{ route('admin.units.index') }}" target="_blank">
                                            <button type="button" class="btn btn-block btn-sm btn-success"><i
                                                    class="fas fa-plus"></i></button>
                                        </a>
                                    </div>
                                    <div class="col-1 px-1">
                                        <button type="button" class="btn-block btn-sm btn btn-info"
                                            onclick="openPrimeryUnitModal()">
                                            <i class="fas fa-superscript"></i></button>
                                    </div>

                                </div>
                                <div class="row">
                                    <div class="col-5">
                                        <div class="form-group">
                                            <label for="op_qty">OP Qty</label>
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <input value="{{ old('op_qty', $product->op_qty) }}" type="text"
                                            class="form-control form-control-sm @error('op_qty') is-invalid @enderror"
                                            placeholder="Opening Qty" name="op_qty" id="op_qty">
                                    </div>
                                    <div class="col-4">
                                        <input value="{{ old('op_qty', $product->alternate_qty) }}" type="number"
                                            class="form-control form-control-sm @error('alternate_qty') is-invalid @enderror"
                                            placeholder="Opening Qty" name="alternate_qty" id="alternate_qty">
                                    </div>
                                    @error('op_qty')
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="row">
                                    <div class="col-5">
                                        <div class="form-group">
                                            <label for="op_val">Op Val</label>
                                        </div>
                                    </div>
                                    <div class="col-7">
                                        <input value="{{ $product->op_val }}" type="text"
                                            class="form-control form-control-sm @error('op_val') is-invalid @enderror"
                                            placeholder="Opening Value" name="op_val" id="op_val">
                                    </div>
                                    @error('op_val')
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="row">
                                    <div class="col-5">
                                        <div class="form-group">
                                            <label for="">Stock Position</label>
                                        </div>
                                    </div>

                                    <div class="col-3">
                                        <div class="form-group">
                                            <select id="rack_no" name="rack_no" class="form-control form-control-sm "
                                                style="width: 100%">
                                                <option value="">Select Rack No</option>
                                                @foreach ($racks as $rack)
                                                    <option @if (old('rack_no', $product->rack_no) == $rack->id) selected @endif
                                                        value="{{ $rack->id }}">{{ $rack->name }}</option>
                                                @endforeach
                                            </select>
                                            @error('rack_no')
                                                <span class="invalid-feedback d-block" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-3">
                                        <div class="form-group">
                                            <select id="box_no" name="box_no" class="form-control form-control-sm "
                                                style="width: 100%">
                                                <option value="">Select Box No</option>
                                                @foreach ($boxes as $box)
                                                    <option @if (old('box_no', $product->box_no) == $box->id) selected @endif
                                                        value="{{ $box->id }}">{{ $box->name }}</option>
                                                @endforeach
                                            </select>
                                            @error('box_no')
                                                <span class="invalid-feedback d-block" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-4">
                                <div class="row">
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label for="mrp">MRP <i class="fa fa-info-circle" data-toggle="tooltip"
                                                    title="Inclusive Tax" style="cursor: pointer;"></i></label>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <input value="{{ $product->mrp }}" type="text"
                                            class="form-control form-control-sm @error('mrp') is-invalid @enderror"
                                            placeholder="MRP" name="mrp" id="mrp">
                                    </div>
                                    <div class="col-4">
                                        <input value="{{ old('mrp_alfa', $product->mrp_alfa) }}" type="text"
                                            class="form-control form-control-sm @error('mrp_alfa') is-invalid @enderror"
                                            placeholder="MRP Alfa" name="mrp_alfa" id="mrp_alfa">
                                    </div>
                                    @error('mrp')
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>

                                <div class="row">
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label for="sale_price">Sale Price <i class="fa fa-info-circle"
                                                    data-toggle="tooltip" title="Without Tax"
                                                    style="cursor: pointer;"></i></label>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <input value="{{ $product->sale_price }}" type="text"
                                            class="form-control form-control-sm @error('sale_price') is-invalid @enderror"
                                            placeholder="Sale Price" name="sale_price" id="sale_price">
                                    </div>
                                    <div class="col-4">
                                        <input value="{{ $product->sale_alfa }}"
                                            class="form-control form-control-sm @error('sale_alfa') is-invalid @enderror"
                                            placeholder="Sale Alfa" name="sale_alfa" id="sale_alfa">
                                    </div>
                                    @error('sale_price')
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="row">
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label for="cost_price">Cost Price <i class="fa fa-info-circle"
                                                    data-toggle="tooltip" title="Without Tax"
                                                    style="cursor: pointer;"></i></label>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <input value="{{ $product->cost_price }}" type="text"
                                            class="form-control form-control-sm @error('cost_price') is-invalid @enderror"
                                            placeholder="Cost Price " name="cost_price" id="cost_price">
                                    </div>
                                    <div class="col-4">
                                        <input value="{{ old('cost_alfa', $product->cost_alfa) }}" type="text"
                                            class="form-control form-control-sm @error('cost_alfa') is-invalid @enderror"
                                            placeholder="Cost Alfa" name="cost_alfa" id="cost_alfa">
                                    </div>
                                    @error('cost_price')
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>


                                <div class="row">
                                    <div class="col-4">
                                        <div class="form-group">

                                            <label for="supplier_pricing_desc">Supplier Desc %</label>
                                        </div>
                                    </div>
                                    <div class="col-2">
                                        <input value="{{ $product->supplier_pricing_desc }}" type="text"
                                            class="form-control form-control-sm @error('supplier_pricing_desc') is-invalid @enderror"
                                            placeholder="Supplier Pricing Desc %" name="supplier_pricing_desc"
                                            id="supplier_pricing_desc">
                                    </div>
                                    <div class="col-2">
                                        <input value="{{ $product->supplier_pricing_alfa }}" type="text"
                                            class="form-control form-control-sm @error('supplier_pricing_alfa') is-invalid @enderror"
                                            placeholder="Alfa" name="supplier_pricing_alfa" id="supplier_pricing_alfa"
                                            readonly>
                                    </div>
                                    <div class="col-2">
                                        <input value="{{ $product->supplier_pric }}" type="text"
                                            class="form-control form-control-sm @error('supplier_pric') is-invalid @enderror"
                                            placeholder="Amount %" name="supplier_pric" id="supplier_pric">
                                    </div>
                                    <div class="col-2">
                                        <input value="{{ $product->supplier_pric_alfa }}" type="text"
                                            class="form-control form-control-sm @error('supplier_pric_alfa') is-invalid @enderror"
                                            placeholder="Alfa" name="supplier_pric_alfa" id="supplier_pric_alfa"
                                            readonly>
                                    </div>
                                    @error('supplier_pricing_desc')
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="row">
                                    <div class="col-4">
                                        <div class="form-group">

                                            <label for="customer_pricing_desc">Customer Desc %</label>
                                        </div>
                                    </div>
                                    <div class="col-2">
                                        <input value="{{ $product->customer_pricing_desc }}" type="text"
                                            class="form-control form-control-sm @error('customer_pricing_desc') is-invalid @enderror"
                                            placeholder="Customer Pricing Desc %" name="customer_pricing_desc"
                                            id="customer_pricing_desc">
                                    </div>
                                    <div class="col-2">
                                        <input value="{{ $product->customer_pricing_alfa }}" type="text"
                                            class="form-control form-control-sm @error('customer_pricing_alfa') is-invalid @enderror"
                                            placeholder="Alfa" name="customer_pricing_alfa" id="customer_pricing_alfa"
                                            readonly>
                                    </div>
                                    <div class="col-2">
                                        <input value="{{ $product->customer_pric }}" type="text"
                                            class="form-control form-control-sm @error('customer_pric') is-invalid @enderror"
                                            placeholder="Amount" name="customer_pric" id="customer_pric">
                                    </div>
                                    <div class="col-2">
                                        <input value="{{ $product->customer_pric_alfa }}" type="text"
                                            class="form-control form-control-sm @error('customer_pric_alfa') is-invalid @enderror"
                                            placeholder="Alfa" name="customer_pric_alfa" id="customer_pric_alfa"
                                            readonly>
                                    </div>
                                    @error('customer_pricing_desc')
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="row">
                                    <div class="col-4">
                                        <div class="form-group">

                                            <label for="mechanic_pricing_desc">Mechanic Desc %</label>
                                        </div>
                                    </div>
                                    <div class="col-2">
                                        <input value="{{ $product->mechanic_pricing_desc }}" type="text"
                                            class="form-control form-control-sm @error('mechanic_pricing_desc') is-invalid @enderror"
                                            placeholder="Mechanic Pricing Desc %" name="mechanic_pricing_desc"
                                            id="mechanic_pricing_desc">
                                    </div>
                                    <div class="col-md-2">
                                        <input value="{{ $product->mechanic_pric_alfa }}" type="text"
                                            class="form-control form-control-sm @error('mechanic_pric_alfa') is-invalid @enderror"
                                            placeholder="Alfa" name="mechanic_pric_alfa" id="mechanic_pric_alfa"
                                            readonly>
                                    </div>


                                    <div class="col-md-2">
                                        <input value="{{ $product->mechanic_pric }}" type="text"
                                            class="form-control form-control-sm @error('mechanic_pric') is-invalid @enderror"
                                            placeholder="Amount" name="mechanic_pric" id="mechanic_pric">
                                    </div>
                                    <div class="col-2">
                                        <input value="{{ $product->mechanic_alfa }}" type="text"
                                            class="form-control form-control-sm @error('mechanic_alfa') is-invalid @enderror"
                                            placeholder="Alfa" name="mechanic_alfa" id="mechanic_alfa" readonly>
                                    </div>


                                    @error('mechanic_pricing_desc')
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="row">
                                    <div class="col-4">
                                        <div class="form-group">

                                            <label for="b2b_pricing_desc">B2B Desc %</label>
                                        </div>
                                    </div>
                                    <div class="col-2">
                                        <input value="{{ $product->b2b_pricing_desc }}" type="text"
                                            class="form-control form-control-sm @error('b2b_pricing_desc') is-invalid @enderror"
                                            placeholder="B2B Pricing Desc %" name="b2b_pricing_desc"
                                            id="b2b_pricing_desc">
                                    </div>
                                    <div class="col-2">
                                        <input value="{{ $product->b2b_pricing_alfa }}" type="text"
                                            class="form-control form-control-sm @error('b2b_pricing_alfa') is-invalid @enderror"
                                            placeholder="Alfa" name="b2b_pricing_alfa" id="b2b_pricing_alfa" readonly>
                                    </div>
                                    <div class="col-2">
                                        <input value="{{ $product->b2b_pric }}" type="text"
                                            class="form-control form-control-sm @error('b2b_pric') is-invalid @enderror"
                                            placeholder="Amount" name="b2b_pric" id="b2b_pric">
                                    </div>
                                    <div class="col-2">
                                        <input value="{{ $product->b2b_pric_alfa }}" type="text"
                                            class="form-control form-control-sm @error('b2b_pric_alfa') is-invalid @enderror"
                                            placeholder="Alfa" name="b2b_pric_alfa" id="b2b_pric_alfa" readonly>
                                    </div>
                                    @error('b2b_pricing_desc')
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>

                            </div>
                            <div class="col-4">


                                {{-- <div class="row">

                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="model_year">Model Year</label>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <input value="{{ old('model_year', $product->model_year) }}" type="text"
                                            class="form-control form-control-sm @error('model_year') is-invalid @enderror"
                                            placeholder="Model Year" name="model_year" id="model_year">
                                    </div>
                                    @error('model_year')
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div> --}}
                                <div class="row">
                                    <div class="col-5">
                                        <div class="form-group">
                                            <label for="usage">Usage </label>
                                        </div>
                                    </div>
                                    <div class="col-7">
                                        <select id="usage" name="usage" class="form-control form-control-sm"
                                            style="width: 100%">
                                            <option value="fast" data-color="green"
                                                {{ old('usage', $product->usage ?? '') == 'fast' ? 'selected' : '' }}>
                                                Fast Moving
                                            </option>
                                            <option value="medium" data-color="orange"
                                                {{ old('usage', $product->usage ?? '') == 'medium' ? 'selected' : '' }}>
                                                Medium Moving
                                            </option>
                                            <option value="slow" data-color="red"
                                                {{ old('usage', $product->usage ?? '') == 'slow' ? 'selected' : '' }}>
                                                Slow Moving
                                            </option>
                                        </select>
                                    </div>
                                    @error('product_group_id')
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="row">
                                    <div class="col-5">
                                        <div class="form-group">
                                            <label for="maximum_level">MAXIMUM LEVEL</label>
                                        </div>
                                    </div>
                                    <div class="col-7">
                                        <input value="{{ $product->maximum_level }}" type="text"
                                            class="form-control form-control-sm @error('maximum_level') is-invalid @enderror"
                                            placeholder="MAXIMUM LEVEL" name="maximum_level" id="maximum_level">
                                    </div>
                                    @error('maximum_level')
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="row">
                                    <div class="col-5">
                                        <div class="form-group">
                                            <label for="minimum_level">MINIMUM LEVEL</label>
                                        </div>
                                    </div>
                                    <div class="col-7">
                                        <input value="{{ $product->minimum_level }}" type="text"
                                            class="form-control form-control-sm @error('minimum_level') is-invalid @enderror"
                                            placeholder="MINIMUM LEVEL" name="minimum_level" id="minimum_level">
                                    </div>
                                    @error('minimum_level')
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="row">
                                    <div class="col-5">
                                        <div class="form-group">
                                            <label for="reorder_level">REORDER LEVEL</label>
                                        </div>
                                    </div>
                                    <div class="col-7">
                                        <input value="{{ $product->reorder_level }}" type="text"
                                            class="form-control form-control-sm @error('reorder_level') is-invalid @enderror"
                                            placeholder="REORDER LEVEL" name="reorder_level" id="reorder_level">
                                    </div>
                                    @error('reorder_level')
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="row">
                                    <div class="col-5">
                                        <div class="form-group">
                                            <label for="serial_number">SERAL NUMBER</label>
                                        </div>
                                    </div>
                                    <div class="col-7 mb-2">
                                        <input type="text" value="{{ $serialnumbers }}" data-role="tagsinput"
                                            name="serial_number" id="serial_number_input">

                                        @error('serial_number')
                                            <span class="invalid-feedback d-block" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>


                                    @error('is_serial_number')
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>


                            </div>


                        </div>

                        <div class="row">
                            <div class="col-2">
                                <div class="form-group">
                                    <label for="godown">Godown SP</label>
                                </div>
                            </div>
                            <div class="col-2">
                                <input value="{{ $product->godown }}" type="text"
                                    class="form-control form-control-sm @error('godown') is-invalid @enderror"
                                    placeholder="Godown SP" name="godown" id="godown">
                            </div>

                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="remark">Alt C & B Name</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <select id="remark" name="remark[]"
                                    class="form-control form-control-sm js-example-basic-multiple @error('model') is-invalid @enderror"
                                    style="width: 100%" multiple="multiple">

                                    @foreach ($models as $model)
                                        <option
                                            @if (!empty($product->remark)) @foreach ($product->remark as $item)
                                                            {{ $model->id == $item ? 'selected' : '' }}
                                                        @endforeach @endif
                                            value="{{ $model->id }}" model="{{ $model->model }}">
                                            {{ $model->model }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <h5>App Entry</h5>
                                <hr>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-6">
                                <div class="form-group">
                                    <span class="text-danger">*</span>
                                    <x-admin-input label="Select Sale Type" type="select" id="sale_type_id"
                                        name="sale_type_id" class="js-select2">
                                        @foreach ($saleTypes as $type)
                                            <option value="{{ $type->id }}">{{ $type->name }}</option>
                                        @endforeach
                                    </x-admin-input>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <span class="text-danger">*</span>
                                    <x-admin-input value="{{ !empty($storeProduct->price) ? $storeProduct->price : 0 }}"
                                        type="number" label="Sale Price" id="sale-price" name="saleprice"
                                        step=".01" />
                                </div>
                            </div>
                        </div>

                        <input type="hidden" name="alternate_unit" id="alternate_unit" {{-- value="{{ $storeProduct->alternate_unit }}" --}}>
                        <input type="hidden" name="conversion_factor" id="conversion_factor" {{-- value="{{ $storeProduct->conversion_factor }}" --}}>
                        <input type="hidden" name="price_per" id="price_per " {{-- value="{{ $storeProduct->price_per }}" --}}>
                    </div>
                    <!-- /.card-body -->
                    <div class="card-footer">
                        <button class="btn btn-success" type="submit">Update</button>

                    </div>
                </form>

            </div>
            <!-- /.card -->
        </div>
        <div class="modal fade" id="CaptureImageModal" tabindex="-1" role="dialog"
            aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Capture Image</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        {{-- <div ></div> --}}
                        <video id="my_camera" style="width:320px; height:240px;" autoplay>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" onclick="CaptureVideoImage();">Capture</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="PrimeryUnitFormModal" tabindex="-1" role="dialog"
            aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Sub Unit</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-8">
                                <label for="modal_alternate_unit">Alternate Unit</label>
                                <select id="modal_alternate_unit" name="modal_alternate_unit"
                                    class="form-control form-control-sm js-select2" style="width: 100%">
                                    <option value="" disabled>pcs,Box,Etc.</option>
                                    @foreach ($units as $unit)
                                        <option @if (old('alternate_unit', $product->alternate_unit) == $unit->id) selected @endif
                                            value="{{ $unit->id }}">{{ $unit->unit_name }}</option>
                                    @endforeach
                                </select>

                            </div>
                            <div class="col-4">
                                <label for="modal_conversion_factor">Conversion Factor</label>
                                <input type="text" class="form-control" id="modal_conversion_factor"
                                    name="modal_conversion_factor" value="{{ $product->conversion_factor }}">
                            </div>
                        </div>

                        <div class="row mt-2">
                            <div class="col-md-12">
                                <label for="modal_price_per">Price Per</label>
                                <select id="modal_price_per" name="modal_price_per"
                                    class="form-control form-control-sm js-select2" style="width: 100%">
                                    <option value="" disabled>pcs,Box,Etc.</option>
                                    @foreach ($units as $unit)
                                        <option @if (old('price_per', $product->price_per) == $unit->id) selected @endif
                                            value="{{ $unit->id }}">{{ $unit->unit_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" onclick="submitSubUnitForm()">Continue</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <datalist id="rack_list">
        @foreach ($datalist['rackList'] as $rack)
            <option>{{ $rack->rack_no }}</option>
        @endforeach
    </datalist>
    <datalist id="box_list">
        @foreach ($datalist['boxList'] as $box)
            <option>{{ $box->box_no }}</option>
        @endforeach
    </datalist>
    <datalist id="model_year_list">
        @foreach ($datalist['modelYearList'] as $modelYear)
            <option>{{ $modelYear->model_year }}</option>
        @endforeach
    </datalist>
    <datalist id="color_list">
        @foreach ($datalist['colorList'] as $color)
            <option>{{ $color->color }}</option>
        @endforeach
    </datalist>
    <datalist id="size_list">
        @foreach ($datalist['sizeList'] as $size)
            <option>{{ $size->size }}</option>
        @endforeach
    </datalist>
@endsection

@section('css')

@endsection

@section('plugins.Select2', true)

@section('js')
    <script>
        $(document).ready(function() {
            $('.js-example-basic-multiple').select2();
        });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.26/webcam.min.js"></script>
    <script src="{{ asset('bootstrap-tagsinput/bootstrap-tagsinput.min.js') }}"></script>

    <script src="{{ asset('js/myfunc.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const usageSelect = document.getElementById('usage');

            function setUsageColor() {
                const selectedOption = usageSelect.options[usageSelect.selectedIndex];
                const color = selectedOption.getAttribute('data-color') || 'black';
                usageSelect.style.color = color;
            }

            setUsageColor(); // Set on page load
            usageSelect.addEventListener('change', setUsageColor); // Set on change
        });
    </script>
    <script>
        function triggerFileInput5() {
            document.getElementById('product_image_5').click();
        }

        document.getElementById('product_image_5').addEventListener('change', function() {
            const file = this.files[0];
            const errorDiv = document.getElementById('image-error-msg-5');
            errorDiv.innerHTML = '';

            if (file) {
                const fileSizeKB = file.size / 1024;

                if (fileSizeKB < 0 || fileSizeKB > 60) {
                    errorDiv.innerHTML = "Image size must be between 0 KB to 60 KB.";
                    this.value = '';
                    document.getElementById('product-image-img-5').src = "{{ asset('noimage.jpg') }}";
                    return;
                }

                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('product-image-img-5').src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        });

        function triggerFileInput4() {
            document.getElementById('product_image_4').click();
        }

        document.getElementById('product_image_4').addEventListener('change', function() {
            const file = this.files[0];
            const errorDiv = document.getElementById('image-error-msg-4');
            errorDiv.innerHTML = '';

            if (file) {
                const fileSizeKB = file.size / 1024;

                if (fileSizeKB < 0 || fileSizeKB > 60) {
                    errorDiv.innerHTML = "Image size must be between 0 KB to 60 KB.";
                    this.value = '';
                    document.getElementById('product-image-img-4').src = "{{ asset('noimage.jpg') }}";
                    return;
                }

                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('product-image-img-4').src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        });

        function triggerFileInput3() {
            document.getElementById('product_image_3').click();
        }

        document.getElementById('product_image_3').addEventListener('change', function() {
            const file = this.files[0];
            const errorDiv = document.getElementById('image-error-msg-3');
            errorDiv.innerHTML = '';

            if (file) {
                const fileSizeKB = file.size / 1024;

                if (fileSizeKB < 0 || fileSizeKB > 60) {
                    errorDiv.innerHTML = "Image size must be between 0 KB to 60 KB.";
                    this.value = '';
                    document.getElementById('product-image-img-3').src = "{{ asset('noimage.jpg') }}";
                    return;
                }

                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('product-image-img-3').src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        });

        function triggerFileInput2() {
            document.getElementById('product_image_2').click();
        }

        document.getElementById('product_image_2').addEventListener('change', function() {
            const file = this.files[0];
            const errorDiv = document.getElementById('image-error-msg-2');
            errorDiv.innerHTML = '';

            if (file) {
                const fileSizeKB = file.size / 1024;

                if (fileSizeKB < 0 || fileSizeKB > 60) {
                    errorDiv.innerHTML = "Image size must be between 0 KB to 60 KB.";
                    this.value = '';
                    document.getElementById('product-image-img-2').src = "{{ asset('noimage.jpg') }}";
                    return;
                }

                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('product-image-img-2').src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        });

        function triggerFileInput1() {
            document.getElementById('product_image_1').click();
        }

        document.getElementById('product_image_1').addEventListener('change', function() {
            const file = this.files[0];
            const errorDiv = document.getElementById('image-error-msg-1');
            errorDiv.innerHTML = '';

            if (file) {
                const fileSizeKB = file.size / 1024;

                if (fileSizeKB < 0 || fileSizeKB > 60) {
                    errorDiv.innerHTML = "Image size must be between 0 KB to 60 KB.";
                    this.value = '';
                    document.getElementById('product-image-img-1').src = "{{ asset('noimage.jpg') }}";
                    return;
                }

                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('product-image-img-1').src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        });
        $(document).ready(function() {
            $('[data-toggle="tooltip"]').tooltip();
        });

        function openPrimeryUnitModal() {
            $('#PrimeryUnitFormModal').modal('show');
        }

        function submitSubUnitForm() {
            $('#alternate_unit').val($('#modal_alternate_unit').val());
            $('#conversion_factor').val($('#modal_conversion_factor').val());
            $('#price_per').val($('#modal_price_per').val());
            $('#PrimeryUnitFormModal').modal('hide');
        }
        $(document).on('change', '#cost_price', function(event) {
            var cost_price = $(this).val();

            let sale_price = Number($("#sale_price").val());
            if (!sale_price) {
                sale_price = 0
            }

            if (cost_price > sale_price) {
                cost_price = sale_price.toString();
                $("#cost_price").val(cost_price)
            }

            if (!cost_price || cost_price === undefined) {
                return;
            }

            var char_array = ['I', 'O', 'M', 'G', 'A', 'N', 'E', 'S', 'H', 'J'];

            var anfa_cost_price = "";

            for (let index = 0; index < cost_price.length; index++) {
                let char = cost_price[index];

                if (char === ".") {
                    anfa_cost_price += ".";
                } else if (!isNaN(char)) {
                    anfa_cost_price += char_array[parseInt(char)];
                } else {
                    anfa_cost_price += char;
                }
            }

            $("#cost_alfa").val(anfa_cost_price);

        })

        $(document).on('change', '#sale_price', function(event) {
            var sale_price = $(this).val();
            let mrp = Number($("#mrp").val());

            if (!sale_price || sale_price === undefined) {
                return;
            }

            if (sale_price > mrp) {
                mrp = mrp.toString();
                $(this).val(mrp);
            }

            var char_array = ['I', 'O', 'M', 'G', 'A', 'N', 'E', 'S', 'H', 'J'];
            var anfa_sale_price = "";

            for (let index = 0; index < sale_price.length; index++) {
                let char = sale_price[index];

                if (char === ".") {
                    anfa_sale_price += ".";
                } else if (!isNaN(char)) {
                    anfa_sale_price += char_array[parseInt(char)];
                } else {
                    anfa_sale_price += char;
                }
            }

            $("#sale_alfa").val(anfa_sale_price);

        })
        $(document).on('change', '#mrp', function(event) {
            var mrp = $(this).val();
            if (!mrp || mrp === undefined) {
                return;
            }

            var char_array = ['I', 'O', 'M', 'G', 'A', 'N', 'E', 'S', 'H', 'J'];
            var anfa_mrp_price = "";

            for (let index = 0; index < mrp.length; index++) {
                let char = mrp[index];

                if (char === ".") {
                    anfa_mrp_price += ".";
                } else if (!isNaN(char)) {
                    anfa_mrp_price += char_array[parseInt(char)];
                } else {
                    anfa_mrp_price += char;
                }
            }

            $("#mrp_alfa").val(anfa_mrp_price);
        })
        $(document).on('change', '#mechanic_pricing_desc', function(event) {
            var mechanic_pricing_desc = $(this).val();
            if (!mechanic_pricing_desc || mechanic_pricing_desc == undefined) {
                return 0;
            }

            let b2b_pricing_desc = Number($("#b2b_pricing_desc").val());
            if (!b2b_pricing_desc) {
                b2b_pricing_desc = 0;
            }
            if (mechanic_pricing_desc > b2b_pricing_desc) {
                mechanic_pricing_desc = b2b_pricing_desc.toString();
                $(this).val(mechanic_pricing_desc);
            }

            var char_array = ['I', 'O', 'M', 'G', 'A', 'N', 'E', 'S', 'H', 'J'];
            mechanic_pricing_desc = mechanic_pricing_desc.split('');

            var anfa_mechanic_pricing = "";
            for (let index = 0; index < mechanic_pricing_desc.length; index++) {
                let char = mechanic_pricing_desc[index];

                // यदि कैरेक्टर '.' है, तो उसे वैसा ही रखें
                if (char === ".") {
                    anfa_mechanic_pricing += ".";
                } else {
                    let alfa_index = parseInt(char); // सुनिश्चित करें कि यह संख्या में कन्वर्ट हो
                    if (!isNaN(alfa_index) && alfa_index >= 0 && alfa_index < char_array.length) {
                        anfa_mechanic_pricing += char_array[alfa_index];
                    } else {
                        anfa_mechanic_pricing += char; // अगर यह मान्य नहीं है, तो वैसा ही रहने दें
                    }
                }
            }

            $("#mechanic_pric_alfa").val(anfa_mechanic_pricing);
        });


        function attachCamera() {
            Webcam.set({
                dest_width: 640,
                dest_height: 480,
                height: 250,
                image_format: 'jpeg',
                jpeg_quality: 90,
                force_flash: false
            });

            //Webcam.attach('#my_camera');
        }


        let snapshot_image_selector = '';
        let snapshot_input_selector = '';

        function take_snapshot(image_selector, input_selector) {
            snapshot_image_selector = image_selector;
            snapshot_input_selector = input_selector;
            $('#CaptureImageModal').modal('show')
            const video = document.querySelector('video');

            if (navigator.mediaDevices.getUserMedia) {
                navigator.mediaDevices.getUserMedia({
                        video: true
                    })
                    .then(stream => video.srcObject = stream).catch(error => console.log(error));
            }
            //attachCamera();

        }

        function CaptureVideoImage() {
            Webcam.snap(function(data_uri) {
                $(snapshot_input_selector).val(data_uri);
                $(snapshot_image_selector).attr("src", data_uri)
            });
            Webcam.attach('product-image-img-1');

            $('#CaptureImageModal').modal('hide')
        }
        let ajaxurl = '{{ route('admin.models.ajax') }}'

        function getModels() {
            $.ajax({
                url: ajaxurl,
                type: 'POST',
                data: {
                    'company_id': $('#company').val()
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
            }).then(function(res) {
                return JSON.parse(res)
            }).done(function(json) {
                let oldval = $('#model').attr('data-old-value')
                let html = ''
                json.forEach(function(row) {
                    let sel = ""
                    if (row.id == oldval) {
                        sel = "selected"
                    }
                    html += '<option ' + sel + ' value="' + row.id + '">' + row.model + '</option>'
                })
                $('#model').html(html)
                generateDesc()
            })
        }

        function generateDesc() {
            // const ParentCategory = $('#product_group_id option:selected').html()
            // const Category = $('#product_type_id option:selected').html()
            // const Company = $('#company option:selected').html()
            const Brand = $('#brand_id option:selected').html()
            const productName = $('#product_name').value()
            const productPartNo = $('#product_part_no').value()

            const desc = `${product_name} ${productPartNo} ${Brand}`
            $('#desc').val(desc)

        }


        $(document).ready(function() {
            getModels()
            // $('#company').on('change', function() {
            //     getModels()


            // })

            // $('#product_group_id').on('change', function() {
            //     generateDesc()
            // })
            // $('#product_type_id').on('change', function() {
            //     generateDesc()
            // })
            // $('#model').on('change', function() {
            //     generateDesc()
            // })
            $('#product_name').on('keyup', function() {
                generateDesc()
            })
            $('#brand_id').on('keyup', function() {
                generateDesc()
            })
            $('.js-select2').select2({
                width: '100%'
            });

            $('.image-select').on('change', function() {
                const $img = $(this).attr('data-img');
                window.readURL(this, $img)
            });
        });

        function openPrimeryUnitModal() {
            $('#PrimeryUnitFormModal').modal('show');
        }

        function submitSubUnitForm() {
            $('#alternate_unit').val($('#modal_alternate_unit').val());
            $('#conversion_factor').val($('#modal_conversion_factor').val());
            $('#price_per').val($('#modal_price_per').val());
            $('#PrimeryUnitFormModal').modal('hide');
        }

        $(document).on('change', '#product_name', function(event) {
            product_item_id = $(this).find(':selected').attr('product-item-id')
            $('#product_item_id').val(product_item_id)
            let product_part_no = $(this).find(':selected').attr('product-part_no');
            $('#product_part_no').val(product_part_no)
            getProductBarcode(product_part_no, product_item_id)
        })

        $(document).ready(function() {
            let product_item_id = $("#product_name").find(':selected').attr('product-item-id')
            //getProductBarcode(product_part_no, '')
        })

        function getProductBarcode(product_part_no, product_item_id) {
            $.ajax({
                url: '{{ route('admin.products.generate-barcode') }}',
                type: "POST",
                data: {
                    product_item_id: product_item_id
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
            }).then(function(response) {

                if (response.part_numbers) {
                    $('#product_part_no').empty()
                    let part_numbers = response.part_numbers
                    let part_no_barcode = '{{ $product->part_no_barcode }}'
                    $('#product_part_no').append('<option value="">Part Numbers</option>')
                    part_numbers.forEach(element => {
                        if (part_no_barcode == element.part_no) {
                            $('#product_part_no').append('<option value="' + element.part_no +
                                '" selected>' + element
                                .part_no + '</option>')
                        } else {
                            $('#product_part_no').append('<option value="' + element.part_no + '">' +
                                element
                                .part_no + '</option>')
                        }

                    });
                }
                //$('#product_barcode').val(response.barcode)
            }).done(function(response) {
                console.log("response1", response);

            })
        }

        $(document).on('change', '#product_part_no', function(event) {
            let product_part_no = $(this).val()
            $.ajax({
                url: '{{ route('admin.products.generate-barcode') }}',
                type: "POST",
                data: {
                    product_part_no: product_part_no
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
            }).then(function(response) {
                $('#product_barcode').val(response.barcode)
            }).done(function(response) {})
        })
        // $(document).on('change', '#mechanic_pricing_desc', function(event) {
        //     var mechanic_pricing_desc = $(this).val();
        //     if (!mechanic_pricing_desc && mechanic_pricing_desc == undefined) {
        //         return 0;
        //     }

        //     var char_array = ['J', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'];
        //     mechanic_pricing_desc = mechanic_pricing_desc.split('');

        //     var anfa_mechanic_pricing = "";
        //     for (let index = 0; index < mechanic_pricing_desc.length; index++) {
        //         //let alfa_index = char_array.indexOf();
        //         let alfa_vel = char_array[mechanic_pricing_desc[index]];
        //         anfa_mechanic_pricing = anfa_mechanic_pricing + alfa_vel;
        //     }
        //     $("#mechanic_alfa").val(anfa_mechanic_pricing);

        // })
        $(document).on('change', '#supplier_pricing_desc', function(event) {
            var supplier_pricing_desc = $(this).val();
            if (!supplier_pricing_desc || supplier_pricing_desc == undefined) {
                return 0;
            }

            var char_array = ['I', 'O', 'M', 'G', 'A', 'N', 'E', 'S', 'H', 'J'];
            supplier_pricing_desc = supplier_pricing_desc.split('');

            var anfa_supplier_pricing_desc = "";
            for (let index = 0; index < supplier_pricing_desc.length; index++) {
                let char = supplier_pricing_desc[index];

                // **अगर कैरेक्टर '.' (डॉट) है, तो उसे वैसा ही रखें**
                if (char === ".") {
                    anfa_supplier_pricing_desc += ".";
                } else {
                    let alfa_index = parseInt(char); // सुनिश्चित करें कि यह संख्या में कन्वर्ट हो
                    if (!isNaN(alfa_index) && alfa_index >= 0 && alfa_index < char_array.length) {
                        anfa_supplier_pricing_desc += char_array[alfa_index];
                    } else {
                        anfa_supplier_pricing_desc += char; // अगर यह मान्य नहीं है, तो वैसा ही रहने दें
                    }
                }
            }

            $("#supplier_pricing_alfa").val(anfa_supplier_pricing_desc);
        });
        $(document).on('change', '#supplier_pric', function(event) {
            var supplier_pric = $(this).val();
            if (!supplier_pric || supplier_pric == undefined) {
                return 0;
            }

            var char_array = ['I', 'O', 'M', 'G', 'A', 'N', 'E', 'S', 'H', 'J'];
            supplier_pric = supplier_pric.split('');

            var anfa_supplier_pric = "";
            for (let index = 0; index < supplier_pric.length; index++) {
                let char = supplier_pric[index];

                // If the character is '.', keep it unchanged
                if (char === ".") {
                    anfa_supplier_pric += ".";
                } else {
                    let alfa_index = parseInt(char); // Convert character to a number
                    if (!isNaN(alfa_index) && alfa_index >= 0 && alfa_index < char_array.length) {
                        anfa_supplier_pric += char_array[alfa_index];
                    } else {
                        anfa_supplier_pric += char; // Keep non-numeric characters unchanged
                    }
                }
            }

            $("#supplier_pric_alfa").val(anfa_supplier_pric);
        });
        $(document).on('change', '#b2b_pricing_desc', function(event) {
            var b2b_pricing_desc = $(this).val();
            if (!b2b_pricing_desc || b2b_pricing_desc == undefined) {
                return 0;
            }

            let supplier_pricing_desc = Number($("#supplier_pricing_desc").val());
            if (!supplier_pricing_desc) {
                supplier_pricing_desc = 0;
            }

            if (b2b_pricing_desc > supplier_pricing_desc) {
                b2b_pricing_desc = supplier_pricing_desc.toString();
                $(this).val(b2b_pricing_desc);
            }

            var char_array = ['I', 'O', 'M', 'G', 'A', 'N', 'E', 'S', 'H', 'J'];
            b2b_pricing_desc = b2b_pricing_desc.split('');

            var anfa_b2b_pricing_desc = "";
            for (let index = 0; index < b2b_pricing_desc.length; index++) {
                let char = b2b_pricing_desc[index];

                // If the character is '.', keep it unchanged
                if (char === ".") {
                    anfa_b2b_pricing_desc += ".";
                } else {
                    let alfa_index = parseInt(char); // Convert character to a number
                    if (!isNaN(alfa_index) && alfa_index >= 0 && alfa_index < char_array.length) {
                        anfa_b2b_pricing_desc += char_array[alfa_index];
                    } else {
                        anfa_b2b_pricing_desc += char; // Keep non-numeric characters unchanged
                    }
                }
            }

            $("#b2b_pricing_alfa").val(anfa_b2b_pricing_desc);
        });
        $(document).on('change', '#b2b_pric', function(event) {
            var b2b_pric = $(this).val();
            if (!b2b_pric || b2b_pric == undefined) {
                return 0;
            }

            var char_array = ['I', 'O', 'M', 'G', 'A', 'N', 'E', 'S', 'H', 'J'];
            b2b_pric = b2b_pric.split('');

            var anfa_b2b_pric = "";
            for (let index = 0; index < b2b_pric.length; index++) {
                let char = b2b_pric[index];

                // If the character is '.', keep it unchanged
                if (char === ".") {
                    anfa_b2b_pric += ".";
                } else {
                    let alfa_index = parseInt(char); // Convert character to a number
                    if (!isNaN(alfa_index) && alfa_index >= 0 && alfa_index < char_array.length) {
                        anfa_b2b_pric += char_array[alfa_index];
                    } else {
                        anfa_b2b_pric += char; // Keep non-numeric characters unchanged
                    }
                }
            }

            $("#b2b_pric_alfa").val(anfa_b2b_pric);
        });
        $(document).on('change', '#customer_pricing_desc', function(event) {
            var customer_pricing_desc = $(this).val();
            if (!customer_pricing_desc || customer_pricing_desc == undefined) {
                return 0;
            }

            let mechanic_pricing_desc = Number($("#mechanic_pricing_desc").val());
            if (!mechanic_pricing_desc) {
                mechanic_pricing_desc = 0;
            }
            if (customer_pricing_desc > mechanic_pricing_desc) {
                customer_pricing_desc = mechanic_pricing_desc.toString();
                $(this).val(customer_pricing_desc);
            }

            var char_array = ['I', 'O', 'M', 'G', 'A', 'N', 'E', 'S', 'H', 'J'];
            customer_pricing_desc = customer_pricing_desc.split('');

            var anfa_customer_pricing_desc = "";
            for (let index = 0; index < customer_pricing_desc.length; index++) {
                let char = customer_pricing_desc[index];

                // If the character is '.', keep it unchanged
                if (char === ".") {
                    anfa_customer_pricing_desc += ".";
                } else {
                    let alfa_index = parseInt(char); // Convert character to a number
                    if (!isNaN(alfa_index) && alfa_index >= 0 && alfa_index < char_array.length) {
                        anfa_customer_pricing_desc += char_array[alfa_index];
                    } else {
                        anfa_customer_pricing_desc += char; // Keep non-numeric characters unchanged
                    }
                }
            }

            $("#customer_pricing_alfa").val(anfa_customer_pricing_desc);
        });
        $(document).on('change', '#customer_pric', function(event) {
            var customer_pric = $(this).val();
            if (!customer_pric || customer_pric == undefined) {
                return 0;
            }

            var char_array = ['I', 'O', 'M', 'G', 'A', 'N', 'E', 'S', 'H', 'J'];
            customer_pric = customer_pric.split('');

            var anfa_customer_pric = "";
            for (let index = 0; index < customer_pric.length; index++) {
                let char = customer_pric[index];

                // If the character is '.', keep it unchanged
                if (char === ".") {
                    anfa_customer_pric += ".";
                } else {
                    let alfa_index = parseInt(char); // Convert character to a number
                    if (!isNaN(alfa_index) && alfa_index >= 0 && alfa_index < char_array.length) {
                        anfa_customer_pric += char_array[alfa_index];
                    } else {
                        anfa_customer_pric += char; // Keep non-numeric characters unchanged
                    }
                }
            }

            $("#customer_pric_alfa").val(anfa_customer_pric);
        });
        $(document).on('change', '#mechanic_pric', function(event) {
            var mechanic_pric = $(this).val();
            if (!mechanic_pric || mechanic_pric == undefined) {
                return 0;
            }

            var char_array = ['I', 'O', 'M', 'G', 'A', 'N', 'E', 'S', 'H', 'J'];
            mechanic_pric = mechanic_pric.split('');

            var anfa_mechanic_pric = "";
            for (let index = 0; index < mechanic_pric.length; index++) {
                let char = mechanic_pric[index];

                // If the character is '.', keep it unchanged
                if (char === ".") {
                    anfa_mechanic_pric += ".";
                } else {
                    let alfa_index = parseInt(char); // Convert character to a number
                    if (!isNaN(alfa_index) && alfa_index >= 0 && alfa_index < char_array.length) {
                        anfa_mechanic_pric += char_array[alfa_index];
                    } else {
                        anfa_mechanic_pric += char; // Keep non-numeric characters unchanged
                    }
                }
            }

            $("#mechanic_alfa").val(anfa_mechanic_pric);
        });

        function makeDescriptionValue() {
            let description = "";
            let company = $("#company option:selected").text();
            let model = $("#model option:selected").text();
            let product_name = $("#product_name option:selected").text();
            let brand_id = $("#brand_id option:selected").text();
            let productPartNo = $("#product_part_no option:selected").text();
            if (company) {
                // description = company;
            }

            if (model) {
                //description = description + ',' + model;
            }
            if (productPartNo) {
                productPartNo = productPartNo.trim();
                description = description + ',' + productPartNo;
            }
            if (product_name) {
                product_name = product_name.trim()
                description = description + ',' + product_name;
            }
            if (brand_id) {
                brand_id = brand_id.trim()
                description = description + ',' + brand_id;
            }





            $("#desc").val(description);
        }
    </script>
@endsection