@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')
                                Xx yhe
                                <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 --}}




            <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>


            <div class="row">
                <div class="col-6">
                    <div class="row mb-7">
                        <label class="col-lg-4 fw-semibold text-muted">Package
                            type</label>
                        <div class="col-lg-8">
                            <select class="form-control form-select float-right form-control-solid service-type"
                                    name="package_type" data-control="select2" data-hide-search="true" required>
                                <option value="Letter" {{ $product->package_type == 'Letter' ? 'selected' : '' }}> Letter
                                    -
                                    Up to 24cm x 16.5cm x
                                    0.5cm
                                </option>
                                <option value="Largeletter"
                                        {{ $product->package_type == 'Largeletter' ? 'selected' : '' }}>
                                    Large Letter - Up to 35.3cm
                                    x 25cm x 2.5cm
                                </option>
                                <option value="Smallparcel"
                                        {{ $product->package_type == 'Smallparcel' ? 'selected' : '' }}>
                                    Small Parcel - Up to 45cm x
                                    35cm x 16cm
                                </option>
                                <option value="Mediumparcel"
                                        {{ $product->package_type == 'Mediumparcel' ? 'selected' : '' }}> Medium Parcel - Up to
                                    61cm
                                    x 46cm x 46cm
                                </option>
                                <option value="Largeparcel"
                                        {{ $product->package_type == 'Largeparcel' ? 'selected' : '' }}>
                                    Large Parcel - Up to 1.5m
                                    length and girth combined and up to 20kg in weight
                                </option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="row mb-7">
                        <div class="col-lg-1"></div>
                        <label class="col-lg-4 fw-semibold text-muted">Service type
                        </label>
                        <div class="col-lg-7">
                            <select class="form-control form-select float-right form-control-solid service-type"
                                    name="service_type" data-control="select2" data-hide-search="true" required>
                                <option value="BPL1" {{ $product->service_type == 'BPL1' ? 'selected' : '' }}>
                                    BPL1 - ROYAL MAIL 1st CLASS
                                </option>
                                <option value="BPL2" {{ $product->service_type == 'BPL2' ? 'selected' : '' }}>
                                    BPL2 - ROYAL MAIL 2nd CLASS
                                </option>
                                <option value="BPR1" {{ $product->service_type == 'BPR1' ? 'selected' : '' }}>
                                    BPR1 - ROYAL MAIL SIGNED 1ST CLASS
                                </option>
                                <option value="BPR2" {{ $product->service_type == 'BPR2' ? 'selected' : '' }}>
                                    BPR2 - ROYAL MAIL SIGNED 2ND CLASS
                                </option>
                                <option value="CRL1" {{ $product->service_type == 'CRL1' ? 'selected' : '' }}>
                                    CRL1 - ROYAL MAIL 24
                                </option>
                                <option value="CRL2" {{ $product->service_type == 'CRL2' ? 'selected' : '' }}>
                                    CRL2 - ROYAL MAIL 48
                                </option>
                                <option value="SD1" {{ $product->service_type == 'SD1' ? 'selected' : '' }}>
                                    SD1 - SD GUARANTEED BY 1PM (750)
                                </option>
                                <option value="SD2" {{ $product->service_type == 'SD2' ? 'selected' : '' }}>
                                    SD2 - SD GUARANTEED BY 1PM (1000)
                                </option>
                                <option value="SD3" {{ $product->service_type == 'SD3' ? 'selected' : '' }}>
                                    SD3 - SD GUARANTEED BY 1PM (2500)
                                </option>
                                <option value="SD4" {{ $product->service_type == 'SD4' ? 'selected' : '' }}>
                                    SD4 - SD GUARANTEED BY 9AM (750)
                                </option>
                                <option value="SD5" {{ $product->service_type == 'SD5' ? 'selected' : '' }}>
                                    SD5 - SD GUARANTEED BY 9AM (1000)
                                </option>
                                <option value="SD6" {{ $product->service_type == 'SD6' ? 'selected' : '' }}>
                                    SD6 - SD GUARANTEED BY 9AM (2500)
                                </option>
                                <option value="STL1" {{ $product->service_type == 'STL1' ? 'selected' : '' }}>
                                    STL1 - 1ST CLASS ACCOUNT MAIL
                                </option>
                                <option value="STL2" {{ $product->service_type == 'STL2' ? 'selected' : '' }}>
                                    STL2 - 2ND CLASS ACCOUNT MAIL
                                </option>
                                <option value="TPNN" {{ $product->service_type == 'TPNN' ? 'selected' : '' }}>
                                    TPNN - ROYAL MAIL TRACKED 24 NO SIGNATURE
                                </option>
                                <option value="TPNS" {{ $product->service_type == 'TPNS' ? 'selected' : '' }}>
                                    TPNS - ROYAL MAIL TRACKED 24 SIGNATURE
                                </option>
                                <option value="TPSN" {{ $product->service_type == 'TPSN' ? 'selected' : '' }}>
                                    TPSN - ROYAL MAIL TRACKED 48 NO SIGNATURE
                                </option>
                                <option value="TPSS" {{ $product->service_type == 'TPSS' ? 'selected' : '' }}>
                                    TPSS - ROYAL MAIL TRACKED 48 SIGNATURE
                                </option>
                            </select>
                        </div>
                    </div>
                </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 specification-jumbotron mb-8 specifications-container d-none">
                <h3 class="fw-bold mb-7 text-uppercase">Specification</h3>
                <div class="card-body  mt-4 d-flex">

                </div>
                <h5 class="mb-7">Required</h5>
                <div class="required-fields">
                    <h3 class="text-gray-400 mb-4">There are no fields required for this category.</h3>
                </div>

                <div class="optional-fields" style="position: relative;">
                    <h5 class="mb-7">Additional</h5>
                    <button type="button"
                            class="btn btn-primary Specification-add-btn first btn-sm h-40px w-50px mb-8 position-absolute top-0 end-0"
                            data-bs-toggle="tooltip" data-bs-placement="top" title="add Variant" style="margin:auto;"><i
                                class="bi bi-plus-lg"></i></button>

                </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) }},
        });

        $(document).ready(async function() {
            if (await MakeEbayCall({{ $product->category_id }})) {

                @foreach ($productSpecifications as $sp)
                if ($('[name="{{ $sp->specification_name }}[]"]').length > 0) {

                    $('[name="{{ $sp->specification_name }}[]"]').find(
                        '[value="{{ $sp->specification_value }}"]').prop('selected', true);

                } else {
                    $('.Specification-add-btn').remove();

                    $(".optional-fields").append(
                        '\n<div class="card-body">\n  <div class="row w-100">\n <span style="border:1px solid #d3d3d3; border-radius:5px; margin:10px; padding:1rem; width:98.5%;"\nclass="product-specification-container">\n  <div class="col-lg-12 fv-row mt-4 d-flex" style="gap:10px;">\n<input type="text" class="form-control  w-50 h-50px" name="specification_type[]" placeholder="Specification Type" value="{{$sp->specification_name}}"/>\n    <input type="text" class="form-control w-50 min-h-50px" name="specification_type_value[]" placeholder="Specification Value" value="{{$sp->specification_value}}"/>\n<span class="w-30px"></span>\n <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>\n <button type="button" class="btn btn-primary Specification-add-btn btn-sm h-40px"\ndata-bs-toggle="tooltip" data-bs-placement="top" title="add Variant">\n      <i class="bi bi-plus-lg"></i></button>\n </div>\n </span>\n</div>\n </div>\n\n'
                    );
                }
                @endforeach

                $(".cu_selector").select2({
                    dropdownParent: $('.modal'),
                    tags: true,
                    placeholder: "Free Text"
                });

                $(".cu_selector_m").select2({
                    dropdownParent: $('.modal'),
                    multiple: true,
                    tags: true,
                    placeholder: "Multiple Free Text"
                });

                $(".s_cu_selector").select2({
                    dropdownParent: $('.modal'),
                    placeholder: "Selection Only"
                });

                $(".s_cu_selector_m").select2({
                    dropdownParent: $('.modal'),
                    multiple: true,
                    placeholder: "Multiple Selection Only"
                });

                if ($('.optional-fields .delete-Specification-btn').length > 0) {
                    $('.Specification-add-btn.first').hide();
                }


                $(this).closest('div').find('span').hide();
                $('.category-lable').val($(this).find('option').text()).attr('type', 'text');

                $('.specifications-container').removeClass('d-none');

                $('.loader-section').fadeOut('slow');

            }
        })
    </script>
@endsection