@extends('layouts.modals.modal-base.index')
@section('title','Edit Product')
@section('modal-class','modal-xl')
@section('content')
    <!--begin::Alert-->
    <div class="alert alert-primary d-flex align-items-center p-5">
        <!--begin::Icon-->
        <i class="ki-duotone ki-shield-tick fs-2hx text-success me-4"><span class="path1"></span><span class="path2"></span></i>
        <!--end::Icon-->

        <!--begin::Wrapper-->
        <div class="d-flex flex-column">
            <!--begin::Title-->
            <h4 class="mb-1 text-dark">Notice</h4>
            <!--end::Title-->

            <!--begin::Content-->
            <span>We want to inform you that when you make change on values. As a result, which may affect listings of the sellers who have imported.</span>
            <!--end::Content-->
        </div>
        <!--end::Wrapper-->
    </div>
    <!--end::Alert-->
    <!--begin:Form-->
    <form id="kt_modal_new_target_form" class="form product-edit-modal-form" action="{{url('seller/onboardings')}}"
          method="POST">
        @csrf

        @if($productVariation[0] == "non-variant")
            <input type="hidden" name="variant" value="non-variant">
        @else
            <input type="hidden" name="variant" value="variant">
        @endif

        <input type="hidden" name="productId" value="{{ $product->id }}">
        <div class="card-body border-top p-9 scroll-y">

            {{--CATEGORY--}}
            <div class="row mb-6 d-none">
                <label class="col-lg-2 col-form-label required fw-semibold fs-6">Categories:</label>
                <div class="col-lg-8 fv-row">
                    <select class="form-control form-select float-right  form-control-solid" name="category_id"
                            id="dropdown">
                        <option value="{{ $category->category_id }}"
                                selected>{{ $category->category_name_list }}</option>
                    </select>
                </div>
            </div>
            {{--CATEGORY--}}



            {{--TITLE--}}
            <div class="row mb-6">
                <label class="col-lg-2 col-form-label fw-semibold fs-6">
                    <span class="required">Title:</span>
                </label>
                <div class="col-lg-4 fv-row">
                    <input type="text" name="title"
                           class="form-control form-control-lg form-control-solid "
                           placeholder="Title" value="{{ $product->title }}" required/>
                </div>
            </div>
            {{--TITLE--}}



            {{--DESCRIPTION--}}
            <div class="row mb-6">
                <label class="col-lg-2 fw-semibold fs-6">
                    <span>Description:</span>
                </label>
                <div class="col-lg-8 fv-row">
            <textarea name="description" class="form-control form-control-lg form-control-solid"
                      placeholder="Description">{{ $product->description }}</textarea>
                </div>
            </div>
            {{--DESCRIPTION--}}



            {{--WEIGHT--}}
            <div class="row mb-6 pb-4  append-next">
                <label class="col-lg-2 fw-semibold fs-6">
                    <span>Weight:</span>
                </label>
                <div class="col-lg-4 fv-row w-50 d-flex" style="gap:10px;">
                    <input type="number"
                           name="weight"
                           class="form-control form-control-lg form-control-solid w-50 preventMinusValue"
                           step="0.01"
                           placeholder="WEIGHT" value="{{ $product->weight }}" onwheel="this.blur()"/>
                    <select class="form-control form-select float-right form-control-solid w-25 weight-unit"
                            name="weight_unit"
                            required>
                        @switch($product->weight_unit)
                            @case("gr")
                                <option value="lbs">lbs</option>
                                <option value="oz">oz</option>
                                <option value="kg">kg</option>
                                <option value="gr" selected>gr</option>
                                @break

                            @case("kg")
                                <option value="lbs">lbs</option>
                                <option value="oz">oz</option>
                                <option value="kg" selected>kg</option>
                                <option value="gr">gr</option>
                                @break

                            @case("oz")
                                <option value="lbs">lbs</option>
                                <option value="oz" selected>oz</option>
                                <option value="kg">kg</option>
                                <option value="gr">gr</option>
                                @break

                            @case("lbs")
                                <option value="lbs" selected>lbs</option>
                                <option value="oz">oz</option>
                                <option value="kg">kg</option>
                                <option value="gr">gr</option>
                                @break
                        @endswitch


                    </select>

                </div>
            </div>
            {{--WEIGHT--}}

            @if($productVariation[0] == "non-variant")
                <span class="remove-non-variant-elements">
                    <div class="row mt-5">
                        <div class="col-lg-3 row mb-6">
                            <label class="col-lg-2 col-form-label fw-semibold fs-6">
                                <span class="required">Sku:</span>
                            </label>
                            <div class="col-lg-1 fv-row"></div>
                            <div class="col-lg-9 fv-row">
                                <input type="text" name="sku"
                                       class="form-control form-control-lg form-control-solid"
                                       placeholder="Sku" value="{{ $productVariation['variants'][0]->sku }}" required
                                       disabled/>
                                 <small>
                                     <small class="text-gray-400"> Sku is Restricted to Edit
                                     </small>
                                 </small>
                            </div>
                        </div>

                        <div class="col-lg-3 row mb-6">
                            <!--begin::Label-->
                            <label class="col-lg-2 col-form-label fw-semibold fs-6">
                                <span class="required">QTY:</span>
                            </label>
                          <div class="col-lg-1 fv-row"></div>
                            <div class="col-lg-9 fv-row">
                                <input type="number" name="quantity"
                                       class="form-control form-control-lg form-control-solid quantity-field preventMinusValue"
                                       placeholder="QUANTITY" value="{{ $productVariation['variants'][0]->quantity }}"
                                       onwheel="this.blur()" required/>
                                     <small class="text-danger d-none quantity-field-alert">Maximum value of quantity reached (1000)</small>
                            </div>
                            <!--end::Col-->
                        </div>

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

                            <label class="col-lg-2 col-form-label fw-semibold fs-6">
                                <span class="required">Price:</span>
                            </label>
                            <div class="col-lg-1 fv-row"></div>
                            <div class="col-lg-9 fv-row">
                                <input type="number" name="price" step="0.01"
                                       class="form-control form-control-lg form-control-solid edit-price-field preventMinusValue"
                                       placeholder="PRICE" value="{{ $productVariation['variants'][0]->price }}"
                                       onwheel="this.blur()" required/>
                            </div>

                        </div>

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

                            <label class="col-lg-2 col-form-label fw-semibold fs-6">
                                <span class="required">RSP:</span>
                            </label>
                          <div class="col-lg-1 fv-row"></div>
                            <div class="col-lg-9 fv-row">
                                <input type="number" name="rsp" step="0.01"
                                       class="form-control form-control-lg form-control-solid edit-rsp-field preventMinusValue"
                                       placeholder="RSP" value="{{ $productVariation['variants'][0]->rsp }}"
                                       onwheel="this.blur()" required/>
                                 <small>
                                     <small class="text-gray-400"> Rsp Must Be Greater than Price You Enter
                                     </small>
                                 </small>
                            </div>

                        </div>
                        </div>
                    </span>
            @endif


            <div class="row">
                <div class="col-6 row mb-6 h-25">
                    <label class="col-lg-4 col-form-label fw-semibold fs-6">
                        <span>Dispatch Time:</span>
                    </label>
                    <div class="col-lg-8 fv-row d-flex gap-2">
                        <input type="number" name="dispatch_time"
                               class="form-control form-control-lg form-control-solid preventMinusValue"
                               step="0.01" placeholder="Days" onwheel="this.blur()"
                               value="{{ $product->dispatch_time }}"
                               required/>
                        <input class="form-control form-control-lg form-control-solid" placeholder="DAYS" disabled/>
                    </div>
                </div>
                <div class="col-6 row">
                    <label class="col-lg-4 col-form-label fw-semibold fs-6">
                        <span class="required">Select Courier:</span>
                    </label>
                    <!--begin::Row-->
                    <div class="col-lg-8 row mb-5" data-kt-buttons="true" data-kt-buttons-target=".form-check-image, .form-check-input">
                        <!--begin::Col-->
                        <div class="col-6">
                            <label class="form-check-image">
                                <div class="form-check-wrapper">
                                    <img src="{{ asset('assets/media/stock/600x400/royalmail.png') }}"/>
                                </div>

                                <div class="form-check form-check-custom form-check-solid">
                                    <input class="form-check-input" type="radio"
                                           @if($product->courier == \App\Models\Product::COURIER_ROYAL_MAIL)
                                               checked
                                           @endif
                                            value="{{ \App\Models\Product::COURIER_ROYAL_MAIL }}" name="courier"/>
                                    <div class="form-check-label">
                                        Royal Mail
                                    </div>
                                </div>
                            </label>
                        </div>
                        <!--end::Col-->

                        <!--begin::Col-->
                        <div class="col-6">
                            <label class="form-check-image">
                                <div class="form-check-wrapper">
                                    <img src="{{ asset('assets/media/stock/600x400/hermes.png') }}"/>
                                </div>

                                <div class="form-check form-check-custom form-check-solid me-10">
                                    <input class="form-check-input" type="radio"
                                           @if($product->courier == \App\Models\Product::COURIER_HERMES)
                                               checked
                                           @endif
                                           value="{{ \App\Models\Product::COURIER_HERMES }}" name="courier" id="text_wow"/>
                                    <div class="form-check-label">
                                        Hermes
                                    </div>
                                </div>
                            </label>
                        </div>
                        <!--end::Col-->

                    </div>
                    <!--end::Row-->
                </div>

            </div>



            {{--CONDITION--}}
            <div class="row mb-6 radio-btns d-none">
                <label class="col-lg-2 col-form-label required fw-semibold fs-6">Condition:</label>
                <div class="col-lg-8 fv-row">
                    <div class="d-flex align-items-center mt-3 justify-content-xl-around w-50">
                        <div class="form-check">
                            <input class="form-check-input" type="radio"
                                   name="condition"
                                   id="exampleRadios1" value="new" checked>
                            <label class="form-check-label" for="exampleRadios1">
                                New
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio"
                                   name="condition"
                                   id="exampleRadios2" value="used">
                            <label class="form-check-label" for="exampleRadios2">
                                Used
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            {{--CONDITION--}}




            {{--PRODUCT GALLERY--}}
            <div class="input-field mb-6 d-none">
                <label class="active">Gallery</label>
                <div class="input-images1" style="padding-top: .5rem;">

                </div>
            </div>
            {{--PRODUCT GALLERY--}}






            {{-- SPECIFICATION --}}

            <div class="card-body mt-4">
                <label class="col-form-label fw-semibold fs-6">Specification</label>
                <div class="row mb-2">
                    @foreach($productSpecifications as $productSpecification)
                        <span
                            style="border:1px solid #d3d3d3; border-radius:5px; margin:10px; padding:1rem; width:98.5%;"
                            class="product-specification-container">
            <div class="col-lg-12 fv-row mt-4 d-flex specification-wrap" style="gap:10px;">
                <input type="hidden" class="form-control w-50 h-50px" name="specification_id[]"
                       placeholder="Specification Type" value="{{ $productSpecification->id}}"/>
                <input type="text" class="form-control w-50 h-50px" name="specification_type[]"
                       placeholder="Specification Type" value="{{ $productSpecification->specification_name }}"/>
                <input type="text" class="form-control w-50 min-h-50px"
                       placeholder="Specification Value" name="specification_type_value[]"
                       value="{{ $productSpecification->specification_value }}"/>
             <span class="w-30px"></span>

                <button type="button" class="btn btn-danger delete-Specification-btn btn-sm h-40px"
                        data-bs-toggle="tooltip" data-bs-placement="top" title="Remove Variant"><i
                        class="bi bi-dash-lg"></i></button>
            </div>
           </span>
                    @endforeach
                    <div class="card-body  mt-4 d-flex">
                        <button type="button" class="btn btn-primary Specification-add-btn btn-sm h-40px w-50px mb-8"
                                data-bs-toggle="tooltip" data-bs-placement="top" title="add Variant"
                                style="margin:auto;"><i
                                class="bi bi-plus-lg"></i></button>
                    </div>
                </div>
            </div>

            {{-- SPECIFICATION --}}


            @if($productVariation[0] !== "non-variant")

                @foreach($productVariation[1] as $index => $variation)

                    <span class="variant-type-combination-container d-flex"
                          style="gap:10px; border:1px solid #d3d3d3; border-radius:5px; margin:2rem; padding:1rem; width:90%; flex-wrap: wrap">

                        <span class="variant-type-combination-container-combined d-flex w-100"
                              style="flex-wrap: wrap; gap:10px;">
                           <table class="table table-bordered  text-center">
                              <tbody><tr class="head" style="font-weight:bold;">
                                  @foreach($variation['combinations'] as $index => $combination)
                                      <th>{{ $combination['name'] }}</th>
                                  @endforeach
                              </tr>
                              <tr>

                                    @foreach($variation['combinations'] as $index => $combination)
                                      <td>{{ $combination['value'] }}</td>
                                  @endforeach

                              </tr>
                            </tbody></table><div class="col-lg-12 fv-row mt-4 d-flex variant-details"
                                                 style="gap:10px; width:100%;">
                               <span class="w-25 h-80px"> <label>SKU</label>
                         <input type="text" class="form-control" name="variant_sku[]" placeholder="SKU"
                                value="{{ $variation['variant']->sku }}" required readonly>
                                   </span>
                                     <span class="w-25 h-80px"> <label>PRICE</label>
                         <input type="number" class="form-control preventMinusValue" name="variant_price[]"
                                placeholder="PRICE" step="0.01" value="{{ $variation['variant']->price }}" required>
                                     </span>
                                  <span class="w-25 h-80px"> <label>RSP</label>
                         <input type="number" class="form-control preventMinusValue" name="variant_rsp[]" placeholder="RSP"
                                step="0.01" value="{{ $variation['variant']->rsp }}" required=>
                                  </span>
                                     <span class="w-25 h-80px"> <label>QUANTITY</label>
                         <input type="number" class="form-control preventMinusValue" name="variant_quantity[]"
                                placeholder="Quantity" value="{{ $variation['variant']->quantity }}" required="">
                                     </span>


                                <div class="form-group w-25">
                                <label>IMAGE</label>
                                <div class="image-field d-flex">
                                    <button type="button"
                                            style="display:block;width:120px; height:50px; border: solid 1px #dcdcdc; background-color: #ffffff;"
                                            onclick="document.getElementById('getFile{{ $index }}').click()" disabled>Select Image</button>
                                    <input type="file" name="variant-image[]" id="getFile{{ $index }}"
                                           class="image_input_tag form-control opacity upload-image-input d-none"
                                           onchange="uploaded_imagen{{ $index }}.src=window.URL.createObjectURL(this.files[0])"/>
{{--                                         <a type="button"--}}
                                    {{--                                            class="btn btn-light-danger fs-3 delete-variant-image-btn btn-sm h-40px"--}}
                                    {{--                                            data-bs-toggle="tooltip" data-bs-placement="top"--}}
                                    {{--                                            title="Remove Variant image">--}}
                                    {{--                                             <i class="bi bi-x-lg"></i>--}}
                                    {{--                                        </a>--}}
                                </div>
                            <div class="form-group hidden">
                                <div class="image-field">
                                    <img src="{{asset('storage')."/".$variation['image'][0][0]->storage_name }}"
                                         id="uploaded_imagen{{ $index }}" class="uploaded-image"
                                         style="height:100px; width:100px;"/>
                                </div>
                            </div>
                            </div>
                           </div>
                    </span>
                    </span>

                @endforeach

            @endif
            <div class="text-center mt-20">
                <button type="button" data-bs-dismiss="modal" class="btn btn-light me-3">
                    Cancel
                </button>
                <button type="submit" id="kt_modal_new_target_submit"
                        class="btn btn-primary edit-product-btn button-switch" disabled="false">
                    <span class="indicator-label">Update</span>
                </button>
            </div>


    </form>
    <!--end:Form-->
    <script>
        @php
            $images = [];
        foreach ($productImage as $image){
            $images[] = [
                "id"=> $image->id,
                "src"=>url('storage/product')."/".$image->storage_name
                ];
        }
        @endphp
        $('.input-images1').imageUploader({
            preloaded: {{ Illuminate\Support\Js::from($images) }},
        });
    </script>
@endsection