@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  scroll-y">

            {{-- 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="dropdown" required>
                    </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-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>

            {{-- SPECIFICATION --}}

            <div class="card-body specification-jumbotron mb-8">
                <label class="col-form-label fw-semibold fs-6">Specification</label>
                <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>
            {{-- 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