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

@section('css')
    <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>
@endsection
@section('content')



    <div class="row">
        <div class="col-12">
            {{ $errors }}
            <div class="card card-primary">
                <div class="card-header d-flex align-items-center">
                    <h3 class="card-title">Item Window</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.store') }}" method="post" enctype="multipart/form-data">

                    @csrf
                    <!-- /.card-header -->
                    <div class="card-body">
                        <div class="row"><!--first 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 js-select2 @error('product_type_id') is-invalid @enderror"
                                            style="width: 100%">
                                            <option value="" disabled selected>Type Of Group</option>
                                            @foreach ($types as $type)
                                                <option @if (old('product_type_id') == $type->id) selected @endif
                                                    value="{{ $type->id }}">{{ $type->type_name }}</option>
                                            @endforeach
                                        </select>
                                        @error('product_type_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.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>
                                </div><!--end type-->

                                <div class="row">
                                    <div class="col-3">
                                        <div class="form-group">
                                            <label for="product_group_id">Sub Categories </span></label>
                                        </div>
                                    </div>
                                    <div class="col-7">
                                        <select id="product_group_id" name="product_group_id"
                                            class="form-control form-control-sm js-select2 @error('product_group_id') is-invalid @enderror"
                                            style="width: 100%">
                                            <option value="" disabled selected>Car/Bike/Scooty/Auto</option>
                                            @foreach ($groups as $group)
                                                <option @if (old('product_group_id') == $group->id) selected @endif
                                                    value="{{ $group->id }}">{{ $group->group_name }}</option>
                                            @endforeach
                                        </select>
                                        @error('product_group_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.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>
                                </div><!--end sub group-->

                                <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 @error('company') is-invalid @enderror"
                                            style="width: 100%">
                                            <option value="" disabled selected>Company Name</option>
                                            @foreach ($bikes as $bike)
                                                <option @if (old('company') == $bike->id) selected @endif
                                                    value="{{ $bike->id }}" company="{{ $bike->brand }}">
                                                    {{ $bike->brand }}</option>
                                            @endforeach
                                        </select>
                                        @error('company')
                                            <span class="invalid-feedback d-block" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </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><!--end company-->

                                <div class="row">
                                    <div class="col-3">
                                        <div class="form-group">
                                            <label for="vehicle_id">Type Of Vehicle</label>
                                        </div>
                                    </div>
                                    <div class="col-7">
                                        <select id="vehicle_id" name="vehicle_type"
                                            class="form-control form-control-sm js-select2 @error('vehicle_type') is-invalid @enderror">
                                            <option value="" disabled selected>Type of Vehicle</option>
                                            @foreach ($vehicles as $vehicle)
                                                <option @if (old('vehicle_type') == $vehicle->id) selected @endif
                                                    value="{{ $vehicle->id }}">{{ $vehicle->vehicle_name }}</option>
                                            @endforeach
                                        </select>
                                        @error('vehicle_type')
                                            <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><!--end vehicle type-->

                                <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 id="model" name="model"
                                            class="form-control form-control-sm js-select2 @error('model') is-invalid @enderror"
                                            style="width: 100%">
                                            <option value="" disabled selected>Bike Or Car Name</option>
                                            @foreach ($models as $model)
                                                <option @if (old('model') == $model->id) selected @endif
                                                    value="{{ $model->id }}" model="{{ $model->model }}">
                                                    {{ $model->model }}</option>
                                            @endforeach
                                        </select>
                                        @error('model')
                                            <span class="invalid-feedback d-block" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </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>
                                    <div class="col-2">
                                        <div class="form-group">
                                            <label for="model_year">Model Year</label>
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <input value="{{ old('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">
                                        @error('model_year')
                                            <span class="invalid-feedback d-block" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div><!--end model-->

                                <div class="row">
                                    <input type="hidden" name="product_item_id" id="product_item_id" value="0">
                                    <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 @error('product_name') is-invalid @enderror">
                                            <option value="" disabled selected>Item Name</option>
                                            @foreach ($items as $item)
                                                <option @if (old('product_name') == $item->id) 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><!--end product-->

                                <div class="row">
                                    <div class="col-3">
                                        <div class="form-group">
                                            <label for="product_part_no">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 js-select2 @error('product_part_no') is-invalid @enderror">
                                            <option value="" disabled selected>Part Numbers</option>
                                        </select>
                                        @error('product_part_no')
                                            <span class="invalid-feedback d-block" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                    <div class="col-2">
                                        <div class="form-group">
                                            <label for="product_barcode">Barcode</label>
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <input value="{{ old('product_barcode', $barcode) }}" type="text"
                                            class="form-control form-control-sm @error('product_barcode') is-invalid @enderror"
                                            placeholder="Duplicate Not Allowed" name="product_barcode"
                                            id="product_barcode">
                                        @error('product_barcode')
                                            <span class="invalid-feedback d-block" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </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">
                                        <!-- Placeholder for dynamic part number count -->
                                    </div>
                                    <div class="col-2">
                                        <input class="form-check-input" type="radio" name="product_type"
                                            id="product_type_primary" value="Primary"
                                            @if (old('product_type') == 'Primary') checked @endif>
                                        <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"
                                            @if (old('product_type') == 'Secondary') checked @endif>
                                        <label class="form-check-label" for="product_type_secondary">Secondary</label>
                                    </div>
                                    @error('product_type')
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div><!--end product type-->

                                <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 @error('brand_id') is-invalid @enderror"
                                            style="width: 100%">
                                            <option value="" disabled selected>Home Brand, Polo etc.</option>
                                            @foreach ($brands as $brand)
                                                <option @if (old('brand_id') == $brand->id) selected @endif
                                                    value="{{ $brand->id }}">{{ $brand->brand_name }}</option>
                                            @endforeach
                                        </select>
                                        @error('brand_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.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>
                                </div><!--end brand-->

                                <div class="row">
                                    <div class="col-3">
                                        <div class="form-group">
                                            <label for="group_of_filter_id">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 @error('group_of_filter_id') is-invalid @enderror"
                                            style="width: 100%" required>
                                            <option value="" disabled selected>Select Group Filter</option>
                                            @foreach ($filters as $filter)
                                                <option @if (old('group_of_filter_id') == $filter->id) selected @endif
                                                    value="{{ $filter->id }}">{{ $filter->filter_name }}</option>
                                            @endforeach
                                        </select>
                                        <span class="error-message" id="group_of_filter_id_error"></span>
                                        @error('group_of_filter_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.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><!--end color-->
                                {{-- <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 @error('color') is-invalid @enderror">
                                            <option value="" disabled selected>Product Color</option>
                                            @foreach ($colors as $color)
                                                <option @if (old('color') == $color->id) selected @endif
                                                    value="{{ $color->id }}">{{ $color->color_name }}</option>
                                            @endforeach
                                        </select>
                                        @error('color')
                                            <span class="invalid-feedback d-block" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </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><!--end color--> --}}

                                <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">
                                            <option value="" disabled selected>Product Size</option>
                                            @foreach ($sizes as $size)
                                                <option @if (old('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><!--end size-->

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

                                <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><!--end firstcolumn-->

                            <div class="col-6">

                                <div class="row no-gutters mb-2">
                                    <div class="col-md-4 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="{{ asset('noimage.jpg') }}" alt="" class="img-fluid"
                                                    id="product-image-img-1" onclick=""
                                                    style="max-width: 150px; max-height: 150px;"><br>

                                                <input name="product_image_1"
                                                    class="form-control form-control-sm-file image-select w-100 d-none"
                                                    type="file" accept="image/*" id="product_image_1"
                                                    data-img="#product-image-img-1" style="z-index:83">

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

                                                <div class="row no-gutters">
                                                    <div class="col-7 px-1 pt-2">
                                                        <button type="button"
                                                            class="btn btn-info rounded-0 btn-sm btn-block"
                                                            onclick="triggerFileInput()" style="font-size: 14px;">
                                                            Select Image
                                                        </button>
                                                    </div>
                                                    <div class="col-5 px-1 pt-2">
                                                        <button type="button"
                                                            class="btn btn-info rounded-0 btn-sm btn-block"
                                                            onclick="take_snapshot('#product-image-img-1', '#product_input_1')"
                                                            style="font-size: 14px;">
                                                            Capture
                                                        </button>
                                                    </div>
                                                </div>

                                                {{-- Error Message --}}
                                                <div id="image-error-msg" class="text-danger mt-2"
                                                    style="font-size: 14px;"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 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="{{ asset('noimage.jpg') }}" alt="" class="img-fluid"
                                                    id="product-image-img-2" onclick=""
                                                    style="max-width: 150px; max-height: 150px;"><br>

                                                <input name="product_image_2"
                                                    class="form-control form-control-sm-file image-select w-100 d-none"
                                                    type="file" accept="image/*" id="product_image_2"
                                                    data-img="#product-image-img-2" style="z-index:83">

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

                                                <div class="row no-gutters">
                                                    <div class="col-7 px-1 pt-2">
                                                        <button type="button"
                                                            class="btn btn-info rounded-0 btn-sm btn-block"
                                                            onclick="triggerFileInput2()">
                                                            Select Image
                                                        </button>
                                                    </div>
                                                    <div class="col-5 px-1 pt-2">
                                                        <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>

                                                {{-- Error Message --}}
                                                <div id="image-error-msg-2" class="text-danger mt-2"
                                                    style="font-size: 14px;"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 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="{{ asset('noimage.jpg') }}" alt="" class="img-fluid"
                                                id="product-image-img-3" onclick=""
                                                style="max-width: 150px; max-height: 150px;"><br>

                                            <input name="product_image_3"
                                                class="form-control form-control-sm-file image-select w-100 d-none"
                                                type="file" accept="image/*" id="product_image_3"
                                                data-img="#product-image-img-3" style="z-index:83">

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

                                            <div class="row no-gutters">
                                                <div class="col-7 px-1 pt-2">
                                                    <button type="button" class="btn btn-info rounded-0 btn-sm btn-block"
                                                        onclick="triggerFileInput3()">
                                                        Select Image
                                                    </button>
                                                </div>
                                                <div class="col-5 px-1 pt-2">
                                                    <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>

                                            {{-- Error Message --}}
                                            <div id="image-error-msg-3" class="text-danger mt-2"
                                                style="font-size: 14px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4 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="{{ asset('noimage.jpg') }}" alt="" class="img-fluid"
                                                id="product-image-img-4" onclick=""
                                                style="max-width: 150px; max-height: 150px;"><br>

                                            <input name="product_image_4"
                                                class="form-control form-control-sm-file image-select w-100 d-none"
                                                type="file" accept="image/*" id="product_image_4"
                                                data-img="#product-image-img-4" style="z-index:83">

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

                                            <div class="row no-gutters">
                                                <div class="col-7 px-1 pt-2">
                                                    <button type="button" class="btn btn-info rounded-0 btn-sm btn-block"
                                                        onclick="triggerFileInput4()">
                                                        Select Image
                                                    </button>
                                                </div>
                                                <div class="col-5 px-1 pt-2">
                                                    <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>

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

                                <div class="col-md-4 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="{{ asset('noimage.jpg') }}" alt="" class="img-fluid"
                                                id="product-image-img-5" onclick=""
                                                style="max-width: 150px; max-height: 150px;"><br>

                                            <input name="product_image_5"
                                                class="form-control form-control-sm-file image-select w-100 d-none"
                                                type="file" accept="image/*" id="product_image_5"
                                                data-img="#product-image-img-5" style="z-index:83">

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

                                            <div class="row no-gutters">
                                                <div class="col-7 px-1 pt-2">
                                                    <button type="button" class="btn btn-info rounded-0 btn-sm btn-block"
                                                        onclick="triggerFileInput5()">
                                                        Select Image
                                                    </button>
                                                </div>
                                                <div class="col-5 px-1 pt-2">
                                                    <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">
                                                        </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">
                                                        </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">
                                                        </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">
                                                        </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">
                                                        </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">
                                                        </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">
                                                        </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">
                                                        </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">
                                                        </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">
                                                        </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">
                                                        </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">
                                                        </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">
                                                        </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">
                                                        </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">
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </div><!--end first row-->

            <div class="card-body">
                <div class="row"><!--second row-->
                    <div class="col-4">
                        <div class="row">
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="color">Product Color</label>
                                </div>
                            </div>
                            <div class="col-4">
                                <select id="color" name="color"
                                    class="form-control form-control-sm js-select2 @error('color') is-invalid @enderror">
                                    <option value="" disabled selected>Product Color</option>
                                    @foreach ($colors as $color)
                                        <option @if (old('color') == $color->id) selected @endif
                                            value="{{ $color->id }}">{{ $color->color_name }}</option>
                                    @endforeach
                                </select>
                                @error('color')
                                    <span class="invalid-feedback d-block" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </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-6">
                                <div class="form-group">
                                    <label for="hsn_code">HSN Code</label>
                                </div>
                            </div>
                            <div class="col-6">
                                <input value="{{ old('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><!--end hsn-->

                        <!--unit-->
                        <div class="row">
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="tax_id">GST Tax</label>
                                </div>
                            </div>
                            <div class="col-4">
                                <select id="tax_id" name="tax_id" class="form-control form-control-sm js-select2"
                                    style="width: 100%">
                                    <option value="" disabled selected>GST Tax</option>
                                    @foreach ($taxes as $tax)
                                        <option @if (old('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><!-- gst tax-->
                        <div class="row">
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="unit">Primery Unit </label>
                                </div>
                            </div>
                            <div class="col-4">
                                <select id="unit" name="unit" class="form-control form-control-sm "
                                    style="width: 100%">
                                    <option value="" disabled selected>pcs,Box,Etc.</option>
                                    @foreach ($units as $unit)
                                        <option @if (old('unit') == $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-6">
                                <div class="form-group">
                                    <label for="op_qty">OP Qty</label>
                                </div>
                            </div>
                            <div class="col-3">
                                <input value="{{ old('op_qty') }}" type="number"
                                    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-3">
                                <input value="{{ old('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><!-- quantity-->
                        <div class="row">
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="op_val">Op Val</label>
                                </div>
                            </div>
                            <div class="col-6">
                                <input value="{{ old('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><!--end op-->
                        <div class="row">
                            <div class="col-6">
                                <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') == $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') == $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><!--stoke position-->
                    </div><!--end fcolumn-->
                    <div class="col-4">

                        <div class="row">
                        </div><!--model-->
                        <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="{{ old('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') }}" type="text"
                                    class="form-control form-control-sm @error('mrp_alfa') is-invalid @enderror"
                                    placeholder="MRP Alfa" name="mrp_alfa" id="mrp_alfa" readonly>
                            </div>
                            @error('mrp')
                                <span class="invalid-feedback d-block" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div><!--mrp-->

                        <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="{{ old('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="{{ old('sale_alfa') }}" type="text"
                                    class="form-control form-control-sm @error('sale_alfa') is-invalid @enderror"
                                    placeholder="Sale Alfa" name="sale_alfa" id="sale_alfa" readonly>
                            </div>
                            @error('sale_price')
                                <span class="invalid-feedback d-block" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div><!-- sale price-->
                        <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="{{ old('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') }}" type="text"
                                    class="form-control form-control-sm @error('cost_alfa') is-invalid @enderror"
                                    placeholder="Cost Alfa" name="cost_alfa" id="cost_alfa" readonly>
                            </div>
                            @error('cost_price')
                                <span class="invalid-feedback d-block" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div><!--end cost price-->

                        <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="{{ old('supplier_pricing_desc') }}" type="text"
                                    class="form-control form-control-sm @error('supplier_pricing_desc') is-invalid @enderror"
                                    placeholder="Sp %" name="supplier_pricing_desc" id="supplier_pricing_desc">
                            </div>
                            <div class="col-2">
                                <input value="{{ old('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="{{ old('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="{{ old('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><!--supplier-->

                        <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="{{ old('customer_pricing_desc') }}" type="text"
                                    class="form-control form-control-sm @error('customer_pricing_desc') is-invalid @enderror"
                                    placeholder="CP %" name="customer_pricing_desc" id="customer_pricing_desc">
                            </div>
                            <div class="col-2">
                                <input value="{{ old('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="{{ old('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="{{ old('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_pric_alfa')
                                <span class="invalid-feedback d-block" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div><!--pricing desc-->
                        <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="{{ old('mechanic_pricing_desc') }}" type="text"
                                    class="form-control form-control-sm @error('mechanic_pricing_desc') is-invalid @enderror"
                                    placeholder="MP %" name="mechanic_pricing_desc" id="mechanic_pricing_desc">
                            </div>
                            <div class="col-2">
                                <input value="{{ old('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="{{ old('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-md-2">
                                <input value="{{ old('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><!--mechanic-->
                        <div class="row">
                            <div class="col-4">
                                <div class="form-group">

                                    <label for="b2b_pricing_desc">B2B Pric Desc %</label>
                                </div>
                            </div>
                            <div class="col-2">
                                <input value="{{ old('b2b_pricing_desc') }}" type="text"
                                    class="form-control form-control-sm @error('b2b_pricing_desc') is-invalid @enderror"
                                    placeholder="B2B %" name="b2b_pricing_desc" id="b2b_pricing_desc">
                            </div>
                            <div class="col-2">
                                <input value="{{ old('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="{{ old('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="{{ old('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_pric_alfa')
                                <span class="invalid-feedback d-block" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div><!--end b2b-->
                        {{-- <div class="row">
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="printing"> Print View </label>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <input value="{{ old('printing') }}" type="text"
                                            class="form-control form-control-sm @error('printing') is-invalid @enderror"
                                            placeholder="Part Name , Item Name , Brand " name="printing" id="printing">
                                    </div>
                                    @error('printing')
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div><!--end print--> --}}





                    </div><!--end seccolumn-->
                    <div class="col-4">


                        {{-- <div class="row">
                                    <div class="col-5">
                                        <div class="form-group">
                                            <label for="vehicle_id">Type Of vehicle </label>
                                        </div>
                                    </div>
                                    <div class="col-5">

                                        <select id="vehicle_id" name="vehicle_type"
                                            class="form-control form-control-sm js-select2">
                                            <option value="" disabled selected>Type of vehicle</option>
                                            @foreach ($vehicles as $vehicle)
                                                <option @if (old('vehicle_id') == $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><!--end vehicle type--> --}}
                        <div class="row">
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="usage">Usage </label>
                                </div>
                            </div>
                            <div class="col-6">
                                <select id="usage" name="usage" class="form-control form-control-sm js-select2"
                                    style="width: 100%">
                                    <option value="" disabled {{ old('usage') === null ? 'selected' : '' }}>
                                        Fast Moving / Medium Moving / Slow Moving
                                    </option>
                                    <option value="fast" data-color="green"
                                        {{ old('usage') == 'fast' ? 'selected' : '' }}>Fast Moving</option>
                                    <option value="medium" data-color="orange"
                                        {{ old('usage') == 'medium' ? 'selected' : '' }}>Medium Moving</option>
                                    <option value="slow" data-color="red"
                                        {{ old('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><!--end usage-->
                        <div class="row">
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="maximum_level">MAXIMUM LEVEL</label>
                                </div>
                            </div>
                            <div class="col-6">
                                <input value="{{ old('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><!--end max-->
                        <div class="row">
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="minimum_level">MINIMUM LEVEL</label>
                                </div>
                            </div>
                            <div class="col-6">
                                <input value="{{ old('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><!--end level-->

                        <div class="row">
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="reorder_level">REORDER LEVEL</label>
                                </div>
                            </div>
                            <div class="col-6">
                                <input value="{{ old('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><!--end reorder-->
                        <div class="row">
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="serial_number">SERAL NUMBER</label>
                                </div>
                            </div>
                            <div class="col-6 mb-2">
                                <input type="text" value="" 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><!--end max-->


                    </div><!--end thirdcoloumn-->
                </div><!--end secondrow-->

                <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="{{ old('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 (old('model') == $model->id) selected @endif value="{{ $model->id }}"
                                    model="{{ $model->model }}">
                                    {{ $model->model }}</option>
                            @endforeach
                        </select>

                    </div>

                </div><!--end remark-->


                <div class="row">
                    <div class="col-12">
                        <h5>App Entry</h5>
                        <hr>
                    </div>
                </div>
                <div class="row">
                    <div class="col-5">
                        <div class="form-group">
                            <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-5">
                        <div class="form-group">
                            <x-admin-input type="number" label="Sale Price" id="sale-price" name="saleprice"
                                step=".01" />
                        </div>
                    </div>
                    <div class="col-1">
                        <div class="form-group">
                            <button class="btn btn-success" type="submit">Save</button>
                        </div>

                    </div>
                    <div class="col-1">
                        <div class="form-group">
                            <button class="btn btn-success" type="">Close</button>
                        </div>

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


            <input type="hidden" name="alternate_unit" id="alternate_unit">
            <input type="hidden" name="conversion_factor" id="conversion_factor">
            <input type="hidden" name="price_per" id="price_per">

            <!-- /.card-body -->
            <div class="card-footer">


            </div>
            </form>
        </div>
    </div>
    </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>
    <!-- /.card -->
    </div>
    </div>


    <!-- Modal -->
    <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 selected>pcs,Box,Etc.</option>
                                @foreach ($units as $unit)
                                    <option @if (old('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="{{ old('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 selected>pcs,Box,Etc.</option>
                                @foreach ($units as $unit)
                                    <option @if (old('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>

    <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('plugins.Select2', true)

@section('js')
    <script>
        $(document).ready(function() {
            $('.js-example-basic-multiple').select2();
            $('.js-select2').select2();

            let setting = JSON.parse(localStorage.getItem('systemSetting'));
            if (setting['item_description'] == 1) {
                // 1. Prevent opening the collapse
                $('#collapseThree').removeClass('show'); // hide if already open
                $('#collapseThree').addClass('collapse'); // keep it collapsed
                $('#collapseThree').removeAttr('aria-expanded');

                // 2. Disable the toggle button
                $('#accordion button[data-target="#collapseThree"]').prop('disabled', true);

                // 3. Optionally, visually indicate it's locked (e.g., greyed out)
                $('#accordion button[data-target="#collapseThree"]').addClass('text-muted');
            }
            if (setting['type_of_group'] == 1) {
                $('#product_type_id').prop('disabled', true);
            }
            if (setting['sub_category'] == 1) {
                $('#product_group_id').prop('disabled', true);
            }
            if (setting['company_name'] == 1) {
                $('#company').prop('disabled', true);
            }
            if (setting['vehicle_type'] == 1) {
                $('#vehicle_id').prop('disabled', true);
            }
            if (setting['vehicle_name'] == 1) {
                $('#model').prop('disabled', true);
            }
            if (setting['model_year'] == 1) {
                $('#model_year').prop('disabled', true);
            }
            if (setting['brand_name'] == 1) {
                $('#brand_id').prop('disabled', true);
            }
            if (setting['product_color'] == 1) {
                $('#color').prop('disabled', true);
            }
            if (setting['product_size'] == 1) {
                $('#size_id').prop('disabled', true);
            }
            if (setting['description'] == 1) {
                $('#desc').prop('disabled', true);
            }
            if (setting['filter_group'] == 1) {
                $('#group_of_filter_id').prop('disabled', true);
            }
            if (setting['alt_cb_name'] == 1) {
                $('#remark').prop('disabled', true);
            }
            if (setting['alt_cb_name'] == 1) {
                $('#remark').prop('disabled', true);
            }
            if (setting['serial_number'] == 1) {
                $('#serial_number_input').prop('disabled', true);
            }


        });
    </script>
    <<script src="{{ asset('bootstrap-tagsinput/bootstrap-tagsinput.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            // Initialize Select2
            $('.js-select2').select2();
            $('.js-example-basic-multiple').select2();

            // Initialize Bootstrap Tagsinput
            $('#serial_number_input').tagsinput({
                trimValue: true
            });

            // Form submission handler for client-side validation
            $('#productForm').on('submit', function(e) {
                let isValid = true;
                let firstInvalidField = null;

                // Clear previous error messages
                $('.error-message').text('');
                $('.is-invalid').removeClass('is-invalid');

                // List of required fields
                const requiredFields = [{
                        id: 'product_type_id',
                        label: 'Type Of Group'
                    },
                    {
                        id: 'product_group_id',
                        label: 'Sub Categories'
                    },
                    {
                        id: 'company',
                        label: 'Company Name'
                    },
                    {
                        id: 'model',
                        label: 'Bike Or Car Name'
                    },
                    {
                        id: 'product_name',
                        label: 'Product Name'
                    },
                    {
                        id: 'product_part_no',
                        label: 'Part No.'
                    },
                    {
                        id: 'brand_id',
                        label: 'Brand Name'
                    },
                    {
                        id: 'group_of_filter_id',
                        label: 'Group Of Filter'
                    }
                ];

                // Validate each required field
                requiredFields.forEach(field => {
                    const $field = $('#' + field.id);
                    const value = $field.is('select') ? $field.val() : $field.val().trim();
                    if (!value || value === '') {
                        isValid = false;
                        $field.addClass('is-invalid');
                        $('#' + field.id + '_error').text(field.label + ' is required.');
                        if (!firstInvalidField) {
                            firstInvalidField = $field;
                        }
                    }
                });

                // If validation fails, prevent submission and focus on first invalid field
                if (!isValid) {
                    e.preventDefault();
                    if (firstInvalidField.is('select')) {
                        firstInvalidField.select2('open'); // Open Select2 dropdown
                    } else {
                        firstInvalidField.focus();
                    }
                }

                // Check system settings for disabled fields
                let setting = JSON.parse(localStorage.getItem('systemSetting')) || {};
                const disabledFields = [{
                        id: 'product_type_id',
                        setting: 'type_of_group'
                    },
                    {
                        id: 'product_group_id',
                        setting: 'sub_category'
                    },
                    {
                        id: 'company',
                        setting: 'company_name'
                    },
                    {
                        id: 'model',
                        setting: 'vehicle_name'
                    },
                    {
                        id: 'brand_id',
                        setting: 'brand_name'
                    },
                    {
                        id: 'group_of_filter_id',
                        setting: 'filter_group'
                    }
                ];

                disabledFields.forEach(field => {
                    if (setting[field.setting] == 1) {
                        $('#' + field.id).prop('disabled', true);
                    }
                });

                return isValid;
            });

            // Optional: Handle Select2 change to clear error
            $('.js-select2').on('change', function() {
                const $field = $(this);
                $field.removeClass('is-invalid');
                $('#' + $field.attr('id') + '_error').text('');
            });
        });
    </script>
    @include('admin.product.product-script')

@endsection