@extends('layouts.modals.modal-base.index')
@section('title', 'Add Product')
@section('modal-class', 'modal-xl')
@section('content')
    <!--begin:Form-->
    <form id="kt_modal_new_target_form" class="form product-create-modal-form m-8" action="{{ url('seller/onboardings') }}"
        method="POST">
        @csrf

        <div class="card-body overflow-x-hidden">

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

            {{-- CATEGORY --}}
            <div class="row mb-6">
                <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 category form-control-solid" name="category_id"
                        id="category" required>
                    </select>
                    <input class="category-lable form-control form-control-lg form-control-solid " type="hidden" disabled>
                </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-8 fv-row">
                    <input type="text" name="title" class="form-control form-control-lg form-control-solid "
                        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"></textarea>
                </div>
            </div>
            {{-- DESCRIPTION --}}

            {{-- CONDITION --}}
            <div class="row mb-6 radio-btns">
                <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 --}}

            <span class="remove-non-variant-elements">
                <div class="row mb-5">
                    <div class="col-4 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-8 fv-row">
                            <input type="text" name="sku" class="form-control form-control-lg form-control-solid"
                                required />
                        </div>
                    </div>

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

                            </select>
                        </div>
                    </div>
                </div>
                <div class="row mb-3">

                    <div class="col-4 row mb-6">
                        <!--begin::Label-->
                        <label class="col-lg-2 col-form-label fw-semibold fs-6">
                            <span class="required">QTY:</span>
                        </label>
                        <!--end::Label-->
                        <!--begin::Col-->
                        <div class="col-lg-10 fv-row">
                            <input type="number" name="quantity"
                                class="form-control form-control-lg form-control-solid quantity-field preventMinusValue"
                                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-4 row mb-6">
                        <!--begin::Label-->
                        <label class="col-lg-2 col-form-label fw-semibold fs-6">
                            <span class="required">Price:</span>
                        </label>
                        <!--end::Label-->
                        <!--begin::Col-->
                        <div class="col-lg-10 fv-row">
                            <input type="number" name="price" step="0.01"
                                class="form-control form-control-lg form-control-solid price-field preventMinusValue"
                                onwheel="this.blur()" required />
                        </div>
                        <!--end::Col-->
                    </div>

                    <div class="col-4 row mb-6">
                        <!--begin::Label-->
                        <label class="col-lg-2 col-form-label fw-semibold fs-6">
                            <span class="required">Rsp:</span>
                        </label>
                        <!--end::Label-->
                        <!--begin::Col-->
                        <div class="col-lg-10 fv-row">
                            <input type="number" name="rsp" step="0.01"
                                class="form-control form-control-lg form-control-solid rsp-field preventMinusValue"
                                onwheel="this.blur()" required />
                            <small class="text-gray-400">Rsp Must Be Greater than Price You Enter</small>
                        </div>
                        <!--end::Col-->
                    </div>
                </div>
            </span>

            <div class="row">
                <div class="col-6 row">
                    <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 h-25">
                        <input type="number" name="dispatch_time"
                            class="form-control w-50 form-control-lg form-control-solid preventMinusValue" step="0.01"
                            onwheel="this.blur()" required />
                        <input class="form-control form-control-lg form-control-solid w-50" 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>
                    <div class="parent col-lg-8">
                        <div class="row">
                            <div class='col text-center'>
                                <input type="radio" name="courier" id="img1" class="d-none imgbgchk"
                                    value="{{ \App\Models\Product::COURIER_ROYAL_MAIL }}">
                                <label for="img1">
                                    <img src="{{ asset('assets/media/stock/600x400/royalmail.png') }}" alt="Image 1">
                                    <div class="tick_container">
                                        <div class="tick"><i class="fa fa-check text-white"></i></div>
                                    </div>
                                </label>
                            </div>
                            <div class='col text-center'>
                                <input type="radio" name="courier" id="img2" class="d-none imgbgchk"
                                    value="{{ \App\Models\Product::COURIER_HERMES }}">
                                <label for="img2">
                                    <img src="{{ asset('assets/media/stock/600x400/hermes.png') }}" alt="Image 2">
                                    <div class="tick_container">
                                        <div class="tick"><i class="fa fa-check text-white"></i></div>
                                    </div>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-6">
                    <div class="row mb-7">
                        <label class="col-lg-4 fw-semibold fs-6">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"> Letter - Up to 24cm x 16.5cm x
                                    0.5cm
                                </option>
                                <option value="Largeletter"> Large Letter - Up to 35.3cm
                                    x 25cm x 2.5cm
                                </option>
                                <option value="Smallparcel"> Small Parcel - Up to 45cm x
                                    35cm x 16cm
                                </option>
                                <option value="Mediumparcel"> Medium Parcel - Up to 61cm
                                    x 46cm x 46cm
                                </option>
                                <option value="Largeparcel"> 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 fs-6">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">
                                    BPL1 - ROYAL MAIL 1st CLASS
                                </option>
                                <option
                                        value="BPL2">
                                    BPL2 - ROYAL MAIL 2nd CLASS
                                </option>
                                <option
                                        value="BPR1">
                                    BPR1 - ROYAL MAIL SIGNED 1ST CLASS
                                </option>
                                <option
                                        value="BPR2">
                                    BPR2 - ROYAL MAIL SIGNED 2ND CLASS
                                </option>
                                <option
                                        value="CRL1">
                                    CRL1 - ROYAL MAIL 24
                                </option>
                                <option
                                        value="CRL2">
                                    CRL2 - ROYAL MAIL 48
                                </option>
                                <option
                                        value="SD1">
                                    SD1 - SD GUARANTEED BY 1PM (750)
                                </option>
                                <option
                                        value="SD2">
                                    SD2 - SD GUARANTEED BY 1PM (1000)
                                </option>
                                <option
                                        value="SD3">
                                    SD3 - SD GUARANTEED BY 1PM (2500)
                                </option>
                                <option
                                        value="SD4">
                                    SD4 - SD GUARANTEED BY 9AM (750)
                                </option>
                                <option
                                        value="SD5">
                                    SD5 - SD GUARANTEED BY 9AM (1000)
                                </option>
                                <option
                                        value="SD6">
                                    SD6 - SD GUARANTEED BY 9AM (2500)
                                </option>
                                <option
                                        value="STL1">
                                    STL1 - 1ST CLASS ACCOUNT MAIL
                                </option>
                                <option
                                        value="STL2">
                                    STL2 - 2ND CLASS ACCOUNT MAIL
                                </option>
                                <option
                                        value="TPNN">
                                    TPNN - ROYAL MAIL TRACKED 24 NO SIGNATURE
                                </option>
                                <option
                                        value="TPNS">
                                    TPNS - ROYAL MAIL TRACKED 24 SIGNATURE
                                </option>
                                <option
                                        value="TPSN">
                                    TPSN - ROYAL MAIL TRACKED 48 NO SIGNATURE
                                </option>
                                <option
                                        value="TPSS">
                                    TPSS - ROYAL MAIL TRACKED 48 SIGNATURE
                                </option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>


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




            {{-- VARIATION BUTTON --}}
            <div class="card-body border-top p-9 scroll-y append-next-variant d-none">
                <div class="row mb-6 d-flex w-50">
                    <div class="form-check w-50">
                        <input class="form-check-input" type="radio" name="hasVariation" id="variation"
                            value="1">
                        <label class="form-check-label" for="exampleRadios1">
                            Variation Product
                        </label>
                    </div>
                    <div class="form-check w-50">
                        <input class="form-check-input" type="radio" name="hasVariation" id="nonvariation"
                            value="0" checked>
                        <label class="form-check-label" for="exampleRadios2">
                            Non Variation Product
                        </label>
                    </div>
                </div>
            </div>
            {{-- VARIATION BUTTON --}}


            <div class="text-center mt-5">
                <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 add-product-btn button-switch">
                    <span class="indicator-label">Add</span>
                    <span class="indicator-progress">Please wait...
                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                </button>
            </div>

    </form>
    <!--end:Form-->
@endsection