@extends('backend.layouts.app')

@section('content')

<div class="p-3">
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-2">
                    <img src="{{ asset('uploads/product/' . $data->thumbnail_image)}}" class="img-fluid" alt="" style="height:20rem">
                </div>
                <div class="col-10">
                    <p>Product ID: {{$data->prodId}}</p>
                    <p>Brand Name: {{$data->brandname}}</p>
                    <p>Model: {{$data->model}}</p>
                    <p>Product Type: {{$data->typeProd}}</p>
                    <p>Product Type: {{$data->typeSafe}}</p>
                </div>
            </div>
           
        </div>
    </div>


    <div class="card">
        <div class="card-header fw-bold">
            Add Specification
        </div>
        <div class="card-body">
            <form action="{{ url('admin/spec/'. $data->prodId) }}" method="POST" enctype="multipart/form-data">@csrf @method('put')
                <div class="row">
                    {{-- <div class="col-2 mb-3">
                        <label for="">Product Id</label>
                        <input type="text" class="form-control" required name="prodId" value="{{ old('model') }}" />
                        @error('prodId')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div> --}}

                    {{-- <div class="col-3 mb-3">
                        <label for="">Model</label>
                        <input type="text" class="form-control" required name="model" value="{{ old('model') }}" />
                        @error('model')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div> --}}

                    <div class="col-3 mb-3">
                        <label for="">Specific Lock</label>
                        <input type="text" class="form-control"  name="specTypelock" value="{{ $list->specTypelock }}" />
                        @error('specTypelock')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>

                    <div class="col-3 mb-3">
                        <label for="">Data/Media Protection</label>
                        <input type="text" class="form-control"  name="dmProtect" value="{{ $list->dmProtect }}" />
                        @error('dmProtect')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>

                    <div class="col-6 mb-3">
                        <label for="">Security Level</label>
                        {{-- <input type="text" class="form-control"  name="security" value="{{ $list->security }}" /> --}}
                        <select class="form-select" name="security" aria-label="Default select example">
                            <option >{{ $list->security }}</option>
                            <option value="Basic">Basic</option>
                            <option value="High">High</option>
                            <option value="Maximum">Maximum</option>
                            <option value="Moderate">Moderate</option>
                            <option value="S1">S1</option>
                            <option value="S2">S2</option>
                            <option value="N/A">N/A</option>
                            <option value="NONE">NONE</option>
                        </select>
                        @error('security')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>

                    <div class="col-6 mb-3">
                        <label for="">Fire Rating</label>
                        {{-- <input type="text" class="form-control"  name="fireRating" value="{{ $list->fireRating }}" /> --}}
                        <select class="form-select"  name="fireRating" aria-label="Default select example">
                            <option >{{ $list->fireRating }}</option>
                            <option value="1hr30min">1hr30min</option>
                            <option value="1hr">1hr</option>
                            <option value="2hr">2hr</option>
                            <option value="N/A">N/A</option>
                            <option value="NONE">NONE</option>
                          </select>
                        @error('fireRating')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>

                    <div class="col-6 mb-3">
                        <label for="">Water Rating</label>
                        {{-- <input type="text" class="form-control"  name="waterRating" value="{{ $list->waterRating }}" /> --}}
                        <select class="form-select" name="waterRating" aria-label="Default select example">
                            <option>{{ $list->waterRating }}</option>
                            <option value="Water Resistant">Water Resistant</option>
                            <option value="Waterproof">Waterproof</option>
                            <option value="N/A">N/A</option>
                            <option value="NONE">NONE</option>
                        </select>
                        @error('waterRating')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>


                    <div class="col-6 mb-3">
                        <h3 class="fs-bold">Capacity</h3>
                    </div>

                    <div class="col-6 mb-3">
                        <h3 class="fs-bold">Weight</h3>
                    </div>

                    <div class="col-3 mb-3">
                        <label for="">Capacity Liters</label>
                        {{-- <input type="text" class="form-control" required name="capacityLiter" value="{{ $list->capacityLiter }}" /> --}}
                        <input type="text" class="form-control numberInput" name="capacityLiter" id="numberInput" placeholder="Enter a number" value="{{ $list->capacityLiter }}">
                        @error('capacityLiter')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>

                    <div class="col-3 mb-3">
                        <label for="">Capacity cu.ft</label>
                        <input type="text" class="form-control numberInput"  name="capacityCft" value="{{ $list->capacityCft }}" />
                        @error('capacityCft')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>

                    

                    <div class="col-3 mb-3">
                        <label for="">Weight kg</label>
                        <input type="text" class="form-control numberInput"  name="weightKg" value="{{ $list->weightKg }}" />
                        @error('weightKg')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>

                    <div class="col-3 mb-3">
                        <label for="">Weight lbs</label>
                        <input type="text" class="form-control numberInput"  name="weightLbs" value="{{ $list->weightLbs }}" />
                        @error('weightLbs')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>

                    <div class="col-12 mb-3">
                        <h3 class="fs-bold">External Dimension</h3>
                    </div>


                    <div class="col-4 mb-3">
                        <label for="">External Height mm</label>
                        <input type="text" class="form-control numberInput"  name="externalHm" value="{{ $list->externalHm }}" />
                        @error('externalHm')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>

                    <div class="col-4 mb-3">
                        <label for="">External Width mm</label>
                        <input type="text" class="form-control numberInput" name="externalWm" value="{{ $list->externalWm }}" />
                        @error('externalWm')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>

                    <div class="col-4 mb-3">
                        <label for="">External Depth mm</label>
                        <input type="text" class="form-control numberInput" name="externalDm" value="{{ $list->externalDm }}" />
                        @error('externalDm')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>

                    <div class="col-4 mb-3">
                        <label for="">External Height inches</label>
                        <input type="text" class="form-control numberInput" name="externalHi" value="{{ $list->externalHi }}" />
                        @error('externalHi')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>

                    <div class="col-4 mb-3">
                        <label for="">External Width inches</label>
                        <input type="text" class="form-control numberInput" name="externalWi" value="{{ $list->externalWi }}" />
                        @error('externalWi')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>

                    <div class="col-4 mb-3">
                        <label for="">External Depth inches</label>
                        <input type="text" class="form-control numberInput" name="externalDi" value="{{ $list->externalDi }}" />
                        @error('externalDi')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>


                    <div class="col-12 mb-3">
                        <h3 class="fs-bold">Internal Dimension</h3>
                    </div>

                    <div class="col-4 mb-3">
                        <label for="">Internal Height mm</label>
                        <input type="text" class="form-control numberInput" name="internalHm" value="{{ $list->internalHm }}" />
                        @error('internalHm')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>

                    <div class="col-4 mb-3">
                        <label for="">Internal Width mm</label>
                        <input type="text" class="form-control numberInput" name="internalWm" value="{{ $list->internalWm }}" />
                        @error('internalWm')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>

                    <div class="col-4 mb-3">
                        <label for="">Internal Depth mm</label>
                        <input type="text" class="form-control numberInput" name="internalDm" value="{{ $list->internalDm }}" />
                        @error('internalDm')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>

                    <div class="col-4 mb-3">
                        <label for="">Internal Height inches</label>
                        <input type="text" class="form-control numberInput" name="internalHi" value="{{ $list->internalHi }}" />
                        @error('internalHi')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>

                    <div class="col-4 mb-3">
                        <label for="">Internal Width inches</label>
                        <input type="text" class="form-control numberInput" name="internalWi" value="{{ $list->internalWi }}" />
                        @error('internalWi')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>

                    <div class="col-4 mb-3">
                        <label for="">Internal Depth inches</label>
                        <input type="text" class="form-control numberInput" name="internalDi" value="{{ $list->internalDi }}" />
                        @error('internalDi')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>

                    <div class="col-12 mb-3">
                        <h3 class="fs-bold">Shipping Information</h3>
                    </div>

                    <div class="col-4 mb-3">
                        <label for="">Shipping Package Length mm </label>
                        <input type="text" class="form-control numberInput" name="shiplengthmm" value="{{ $list->shiplengthmm }}" />
                        @error('internalDi')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>

                    <div class="col-4 mb-3">
                        <label for="">Shipping Package Width mm </label>
                        <input type="text" class="form-control numberInput" name="shipwidthmm" value="{{ $list->shipwidthmm }}" />
                        @error('internalDi')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>

                    <div class="col-4 mb-3">
                        <label for="">Shipping Package Height mm </label>
                        <input type="text" class="form-control numberInput" name="shipheightmm" value="{{ $list->shipheightmm }}" />
                        @error('internalDi')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>

                    <div class="col-4 mb-3">
                        <label for="">Shipping Package length inches </label>
                        <input type="text" class="form-control numberInput" name="shiplengthInch" value="{{ $list->shiplengthInch }}" />
                        @error('internalDi')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>

                    <div class="col-4 mb-3">
                        <label for="">Shipping Package Width inches </label>
                        <input type="text" class="form-control numberInput" name="shipwidthInch" value="{{ $list->shipwidthInch }}" />
                        @error('internalDi')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>

                    <div class="col-4 mb-3">
                        <label for="">Shipping Package Height inches </label>
                        <input type="text" class="form-control numberInput" name="shipheightInch" value="{{ $list->shipheightInch }}" />
                        @error('internalDi')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>

                    <div class="col-4 mb-3">
                        <label for="">Shipping Package Weight in Kg </label>
                        <input type="text" class="form-control numberInput" name="shipWeightKg" value="{{ $list->shipWeightKg }}" />
                        @error('internalDi')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>

                    <div class="col-4 mb-3">
                        <label for="">Shipping Package Weight in Lbs </label>
                        <input type="text" class="form-control numberInput" name="shipHeightLbs" value="{{ $list->shipHeightLbs }}" />
                        @error('internalDi')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>


                    <div class="col-12 text-right">
                        <button type="submit" class="btn btn-success">Save</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>


<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
</style>


<script>
   var numberInputs = document.getElementsByClassName('numberInput');

// Loop through each element and add an input event listener
for (var i = 0; i < numberInputs.length; i++) {
    numberInputs[i].addEventListener('input', function(event) {
        var input = event.target;

        // Remove any non-numeric characters or symbols
        input.value = input.value.replace(/[^0-9.]/g, '');

        // Check if there are multiple decimal points and remove all but the first
        var dotIndex = input.value.indexOf('.');
        if (dotIndex !== -1) {
            var count = input.value.slice(dotIndex + 1).split('.').length;
            if (count > 1) {
                input.value = input.value.substr(0, dotIndex + 1) + input.value.substr(dotIndex + 1).replace(/\./g, '');
            }
        }
    });
}
</script>

@endsection