@extends('admin.layouts.master')
@section('title', 'Add New Product')
@section('css')
    <!-- Plugins css -->
    <link href="{{ asset('assets/admin/assets/libs/dropzone/dropzone.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
    <div class="container-fluid">

        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                    <h4 class="mb-sm-0">Create Product</h4>

                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="javascript: void(0);">Products</a></li>
                            <li class="breadcrumb-item active">Create Product</li>
                        </ol>
                    </div>

                </div>
            </div>
        </div>
        <!-- end page title -->

        <form id="productForm" autocomplete="off" method="POST" action="{{ route('admin.product.store') }}"
            enctype="multipart/form-data">
            @csrf
            <div class="row">
                <div class="col-md-12">
                    <x-alert />
                </div>
            </div>
            <div class="row">
                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-body">
                            <div class="row mb-3">
                                <div class="col-lg-12">
                                    <label for="name" class="form-label"><b>Product Name <span
                                                class="text-danger">*</span> </b></label>
                                    <input type="text" class="form-control" id="name" name="name"
                                        value="{{ old('name') }}" placeholder="Enter Product Name Here" required>
                                    @if ($errors->has('name'))
                                        <p class="text-danger"> {{ $errors->first('name') }} </p>
                                    @endif
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 mb-3">
                                    <label for="name" class="form-label"><b>Product Category <span
                                                class="text-danger">*</span> </b></label>
                                    <select class="form-select" id="choices-category-input" name="category_id" data-choices
                                        data-choices-search-false>
                                        @foreach ($categories as $category)
                                            <option
                                                value="{{ $category->id }}"{{ old('category_id') == $category->id ? 'selected' : '' }}>
                                                {{ ucwords($category->name) }}</option>
                                        @endforeach
                                    </select>
                                    @error('category_id')
                                        <p class="text-danger"> {{ $message }} </p>
                                    @enderror
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label for="unit" class="form-label"><b>Select Brand <span
                                                class="text-danger">*</span> </b></label>
                                    <select class="form-select mb-3" name="brand_id" aria-label="Select Brand" required
                                        data-choices data-choices-search-false>
                                        <option selected value="">Select Brand </option>
                                        @foreach ($brands as $brand)
                                            <option value="{{ $brand->id }}"
                                                {{ old('brand_id') == $brand->id ? 'selected' : '' }}>
                                                {{ ucwords($brand->name) }}</option>
                                        @endforeach
                                    </select>
                                    @if ($errors->has('brand_id'))
                                        <p class="text-danger"> {{ $errors->first('brand_id') }} </p>
                                    @endif
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label for="unit" class="form-label"><b>Select Unit <span
                                                class="text-danger">*</span> </b></label>
                                    <select class="form-select mb-3" name="unit_id" aria-label="Select Unit" required
                                        data-choices data-choices-search-false>
                                        <option selected value="">Select Unit </option>
                                        @foreach ($units as $unit)
                                            <option
                                                value="{{ $unit->id }}"{{ old('unit_id') == $unit->id ? 'selected' : '' }}>
                                                {{ ucwords($unit->name) }}</option>
                                        @endforeach
                                    </select>
                                    @if ($errors->has('unit'))
                                        <p class="text-danger"> {{ $errors->first('unit') }} </p>
                                    @endif
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label for="status" class="form-label">Product Label</label>
                                    <select class="form-select" id="choices-category-input" name="label_id" data-choices
                                        data-choices-search-false>
                                        <option value="" selected>Select Label</option>
                                        @foreach ($labels as $label)
                                            <option
                                                value="{{ $label->id }}"{{ old('label_id') == $label->id ? 'selected' : '' }}>
                                                {{ ucwords($label->name) }}</option>
                                        @endforeach
                                    </select>
                                    @error('label_id')
                                        <p class="text-danger"> {{ $message }} </p>
                                    @enderror
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-lg-4">
                                    <label for="cost_price" class="form-label"><b>Cost Price </b></label>
                                    <input type="decimal" class="form-control" id="price" name="cost_price"
                                        value="{{ old('cost_price') }}" placeholder="Enter Cost Price">
                                    @if ($errors->has('cost_price'))
                                        <p class="text-danger"> {{ $errors->first('cost_price') }} </p>
                                    @endif
                                </div>
                                <div class="col-lg-4">
                                    <label for="price" class="form-label"><b>Sale Price <span
                                                class="text-danger">*</span> </b></label>
                                    <input type="decimal" class="form-control" id="price" name="unit_price"
                                        value="{{ old('unit_price') }}" placeholder="Enter Sale Price" required>
                                    @if ($errors->has('unit_price'))
                                        <p class="text-danger"> {{ $errors->first('unit_price') }} </p>
                                    @endif
                                </div>

                                <div class="col-lg-4">
                                    <label for="off_price" class="form-label"><b>Old Sale Price </b></label>
                                    <input type="decimal" class="form-control" id="off_price" name="off_price"
                                        value="{{ old('off_price') }}" placeholder="Enter Old Sale">
                                    @if ($errors->has('off_price'))
                                        <p class="text-danger"> {{ $errors->first('off_price') }} </p>
                                    @endif
                                </div>
                            </div>
                            
                            <div class="row mb-3">

                                <div class="col-lg-6">
                                    <label for="minimum_purchase_quantity" class="form-label"><b>Enter Minimum Purchase
                                            Quantity<span class="text-danger">*</span> </b></label>
                                    <input type="number" class="form-control" id="minimum_purchase_quantity"
                                        name="minimum_purchase_quantity" value="{{ old('minimum_purchase_quantity') }}"
                                        placeholder="Enter Minimum Purchase Quantity" required>
                                    @if ($errors->has('minimum_purchase_quantity'))
                                        <p class="text-danger"> {{ $errors->first('minimum_purchase_quantity') }} </p>
                                    @endif
                                </div>


                                {{--  maximum_purchase_quantity  --}}
                                <div class="col-lg-6">
                                    <label for="maximum_purchase_quantity" class="form-label"><b>Enter Maximum Purchase
                                            Quantity<span class="text-danger">*</span> </b></label>
                                    <input type="number" class="form-control" id="maximum_purchase_quantity"
                                        name="maximum_purchase_quantity" value="{{ old('maximum_purchase_quantity') }}"
                                        placeholder="Enter Maximum Purchase Quantity">
                                    @if ($errors->has('maximum_purchase_quantity'))
                                        <p class="text-danger"> {{ $errors->first('maximum_purchase_quantity') }} </p>
                                    @endif
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-lg-6 mb-3">
                                    <label for="qrcode" class="form-label">QR Code</label>
                                    <input type="text" class="form-control" id="qrcode" name="qrcode"
                                        value="{{ old('qrcode') ?? '' }}" placeholder="Enter QR Code">
                                    @error('qrcode')
                                        <p class="text-danger"> {{ $message }} </p>
                                    @enderror
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="specification" class="form-label">Sepcification</label>
                                        <input type="text" class="form-control" id="specification"
                                            name="specification" value="{{ old('specification') }}"
                                            placeholder="Enter Product Specification">
                                        @error('specification')
                                            <p class="text-danger"> {{ $message }} </p>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-3">

                                <div class="col-lg-12">
                                    <div class="form-check form-switch form-switch-lg" dir="ltr">
                                        <input type="checkbox" class="form-check-input" value="1"
                                            id="is_refundable" name="is_refundable">
                                        <label class="form-check-label" for="is_refundable"><b>Is Refundable ? <span
                                                    class="text-danger">*</span> </b></label>
                                    </div>
                                    @if ($errors->has('is_refundable'))
                                        <p class="text-danger"> {{ $errors->first('is_refundable') }} </p>
                                    @endif
                                </div>
                            </div>
                            <div>
                                <label for="long_description" class="form-label"><b>Product Short Description<span
                                            class="text-danger">*</span> </b></label>
                                {{--  <div id="ckeditor-classic">
                                    <p> this is dummy description </p>
                                </div>  --}}
                                <textarea class="form-control" name="short_description" placeholder="Must enter minimum of a 100 characters"rows="3">{{ old('short_description') }}</textarea>
                                @error('short_description')
                                    <p class="text-danger"> {{ $message }} </p>
                                @enderror
                            </div>
                            <div>
                                <label for="ckeditor-classic" class="form-label"><b>Product Long Description<span
                                            class="text-danger">*</span> </b></label>
                                <textarea name="long_description" id="ckeditor-classic">
                                    {!! old('long_description') !!}
                                </textarea>
                                @error('long_description')
                                    <p class="text-danger"> {{ $message }} </p>
                                @enderror
                            </div>
                            <div class="my-4">
                                <div class="form-check form-switch form-switch-lg" dir="ltr">
                                    <input type="checkbox" class="form-check-input" value="1"
                                        @if (old('show_purchase_note') == 1) checked @endif id="show_purchase_note"
                                        name="show_purchase_note">
                                    <label class="form-check-label" for="show_purchase_note"><b>show purchase note ?
                                            <span class="text-danger">*</span> </b></label>
                                </div>
                                @if ($errors->has('show_purchase_note'))
                                    <p class="text-danger"> {{ $errors->first('show_purchase_note') }} </p>
                                @endif
                            </div>
                            <div>
                                <label for="purchase_note" class="form-label"><b>Purchase Note<span
                                            class="text-danger">*</span></b></label>
                                <textarea name="purchase_note" id="ckeditor-classic2">
                                    {!! old('purchase_note') !!}
                                </textarea>
                                @error('purchase_note')
                                    <p class="text-danger">{{ $message }}</p>
                                @enderror
                            </div>

                        </div>
                    </div>
                    <!-- end card -->
                    <div class="card">
                        <div class="card-header">
                            <ul class="nav nav-tabs-custom card-header-tabs border-bottom-0" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" data-bs-toggle="tab" href="#addproduct-general-info"
                                        role="tab">
                                        General Info
                                    </a>
                                </li>
                                {{-- <li class="nav-item">
                                            <a class="nav-link" data-bs-toggle="tab" href="#addproduct-discountdata"
                                                role="tab">
                                                Discount
                                            </a>
                                        </li> --}}
                            </ul>
                        </div>
                        <!-- end card header -->
                        <div class="card-body">
                            <div class="tab-content">
                                <div class="tab-pane active" id="addproduct-general-info" role="tabpanel">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="sku" class="form-label"><b>Product SKU<span
                                                            class="text-danger">*</span> </b></label>
                                                <input type="text" class="form-control" id="sku" name="sku"
                                                    value="{{ old('sku') }}" placeholder="Enter Product SKU" required>
                                                @if ($errors->has('sku'))
                                                    <p class="text-danger"> {{ $errors->first('sku') }} </p>
                                                @endif
                                            </div>
                                        </div>
                                           <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="warehouse_no" class="form-label"><b>Warehouse No<span
                                                            class="text-danger">*</span> </b></label>
                                                <input type="text" class="form-control" id="warehouse_no" name="warehouse_no"
                                                    value="{{ old('warehouse_no') }}" placeholder="Enter Warehouse No">
                                                @if ($errors->has('warehouse_no'))
                                                    <p class="text-danger"> {{ $errors->first('warehouse_no') }} </p>
                                                @endif
                                            </div>
                                        </div>

                                    </div>
                                    <!-- end row -->

                                    <div class="row">
                                        {{-- <div class="col-lg-6 col-sm-6">
                                                    <div class="mb-3">
                                                        <label for="price" class="form-label"><b>Product Unit Price <span
                                                                    class="text-danger">*</span> </b></label>
                                                        <input type="number" class="form-control" id="price" name="unit_price"
                                                            value="{{ old('unit_price') }}" placeholder="Enter Product Unit Price" required>
                                                        @if ($errors->has('weight'))
                                                            <p class="text-danger"> {{ $errors->first('price') }} </p>
                                                        @endif
                                                    </div>
                                                </div> --}}
                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="weight" class="form-label"><b>Product Weight </b></label>
                                                <input type="number" class="form-control" id="weight" name="weight"
                                                    value="{{ old('weight') }}" placeholder="Enter Product Weight">
                                                @if ($errors->has('weight'))
                                                    <p class="text-danger"> {{ $errors->first('weight') }} </p>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-lg-6 col-sm-6">
                                            <div class="mb-3">
                                                <label for="quantity" class="form-label"><b>Product Quantity <span
                                                            class="text-danger">*</span> </b></label>
                                                <input type="decimal" class="form-control" id="quantity" name="quantity"
                                                    value="{{ old('quantity') }}" placeholder="Enter Product Quantity" required>
                                                @if ($errors->has('quantity'))
                                                    <p class="text-danger"> {{ $errors->first('quantity') }} </p>
                                                @endif
                                            </div>
                                        </div>

                                        <!-- end col -->
                                    </div>
                                    <!-- end row -->
                                </div>
                                <!-- end tab-pane -->

                                <div class="tab-pane" id="addproduct-discountdata" role="tabpanel">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label class="form-label" for="discount-input">Discount</label>
                                                <input type="number" name="discount" value="{{ old('discount') }}"
                                                    class="form-control" placeholder="Enter discount" id="discount-input">
                                            </div>
                                            @error('discount')
                                                <p class="text-danger"> {{ $message }} </p>
                                            @enderror
                                        </div>
                                        <!-- end col -->

                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label class="form-label" for="discount_type-input">Discount Type</label>
                                                <select class="form-select" name="discount_type" id="discount_type-input"
                                                    data-choices data-choices-search-false>
                                                    <option value="fixed"
                                                        {{ old('discount_type') == 'fixed' ? 'selected' : '' }}>Fixed
                                                    </option>
                                                    <option value="percentage"
                                                        {{ old('discount_type') == 'percentage' ? 'selected' : '' }}>
                                                        percentageage</option>
                                                </select>
                                                @error('discount_type')
                                                    <p class="text-danger"> {{ $message }} </p>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label class="form-label" for="discount_start_date-input">Discount Start
                                                    Date</label>
                                                <input type="datetime" name="discount_start_date" data-provider="flatpickr"
                                                    data-date-format="Y-m-d" data-enable-time class="form-control flatpickr-input"
                                                    value="{{ old('discount_start_date') }}"
                                                    placeholder="Enter discount start date" id="discount_start_date-input">
                                                @error('discount_start_date')
                                                    <p class="text-danger"> {{ $message }} </p>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label class="form-label" for="discount_end_date-input">Discount End
                                                    Date</label>
                                                <input type="datetime" name="discount_end_date"
                                                    value="{{ old('discount_end_date') }}" data-provider="flatpickr"
                                                    data-date-format="Y-m-d" data-enable-time class="form-control flatpickr-input"
                                                    placeholder="Enter discount end date" id="discount_end_date-input">
                                                @error('discount_end_date')
                                                    <p class="text-danger"> {{ $message }} </p>
                                                @enderror
                                            </div>
                                        </div>



                                        <!-- end col -->
                                    </div>
                                    <!-- end row -->
                                </div>
                                <!-- end tab pane -->
                            </div>
                            <!-- end tab content -->
                        </div>
                        <!-- end card body -->
                    </div>


                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Product Gallery</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-4">
                                <h5 class="fs-14 mb-1">Thumbnail</h5>
                                <p class="text-muted">Add Product thumbnail Image.</p>
                                <div class="text-center">
                                    <div class="position-relative d-inline-block">
                                        <div class="position-absolute top-100 start-100 translate-middle">
                                            <label for="product-image-input" class="mb-0" data-bs-toggle="tooltip"
                                                data-bs-placement="right" title="Select Image">
                                                <div class="avatar-xs">
                                                    <div
                                                        class="avatar-title bg-light border rounded-circle text-muted cursor-pointer">
                                                        <i class="ri-image-fill"></i>
                                                    </div>
                                                </div>
                                            </label>
                                            <input class="form-control product-image-input d-none" name="thumbnail_image"
                                                value="" id="product-image-input" type="file" accept="image/*"
                                                required>
                                        </div>
                                        <div class="avatar-lg">
                                            <div class="avatar-title bg-light rounded">
                                                <img src="" id="product-img" class="avatar-md h-auto" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @error('thumbnail_image')
                                    <p class="text-danger"> {{ $message }} </p>
                                @enderror
                            </div>
                            <div>
                                <h5 class="fs-14 mb-1">Product Gallery</h5>
                                <p class="text-muted">Add Product Gallery Images.</p>
                                <input name="product_images[]" type="file" class="form-control" multiple="multiple">

                                @error('product_images')
                                    <p class="text-danger"> {{ $message }} </p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="card d-none">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Wholesale Price</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-4">
                                <div class="row">

                                    <div class="col-6">
                                        <div class="row mb-3">
                                            <div class="col-lg-12">
                                                <div class="form-check form-switch form-switch-lg" dir="ltr">
                                                    <input type="checkbox" class="form-check-input" value="1"
                                                        @if (old('is_wholesale') == 1) checked @endif id="is_wholesale"
                                                        name="is_wholesale">
                                                    <label class="form-check-label" for="is_wholesale"><b>Is Wholesale ?
                                                            <span class="text-danger">*</span> </b></label>
                                                </div>
                                                @if ($errors->has('is_wholesale'))
                                                    <p class="text-danger"> {{ $errors->first('is_wholesale') }} </p>
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-6">

                                        <div class="row">

                                            <div class="col-lg-12 text-end">
                                                <button type="button" class="btn btn-primary" id="addMoreWholePrice">Add
                                                    Wholesale Price</button>
                                            </div>
                                        </div>
                                    </div>

                                    <div id="wholeSalePriceContainer">
                                        @php
                                            $oldMinQuantity = old('min_quantity', []);
                                            $oldMaxQuantity = old('max_quantity', []);
                                            $oldPricePerUnit = old('price_per_unit', []);
                                            $count = max(count($oldMinQuantity), count($oldMaxQuantity), count($oldPricePerUnit));
                                        @endphp

                                        @for ($i = 0; $i < $count; $i++)
                                            <div class="row">
                                                <div class="col-lg-3">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="min-quantity-input">Min
                                                            Quantity</label>
                                                        <input type="number" min="2" name="min_quantity[]"
                                                            value="{{ $oldMinQuantity[$i] ?? ($product->wholesalePrices[$i]->min_quantity ?? '') }}"
                                                            class="form-control min_quantity" placeholder="Min Quantity"
                                                            id="min-quantity-input" required>
                                                    </div>
                                                </div>
                                                <!-- end col -->

                                                <div class="col-lg-3">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="max-quantity-input">Max
                                                            Quantity</label>
                                                        <input type="number" name="max_quantity[]"
                                                            value="{{ $oldMaxQuantity[$i] ?? ($product->wholesalePrices[$i]->max_quantity ?? '') }}"
                                                            class="form-control max_quantity" placeholder="Max Quantity"
                                                            id="max-quantity-input" required>
                                                    </div>
                                                </div>

                                                <div class="col-lg-3">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="price-per-unit-input">Price Per
                                                            Unit</label>
                                                        <input type="text" class="form-control" name="price_per_unit[]"
                                                            value="{{ $oldPricePerUnit[$i] ?? ($product->wholesalePrices[$i]->price_per_unit ?? '') }}"
                                                            placeholder="Price per unit" id="price-per-unit-input" required>
                                                    </div>
                                                </div>

                                                <div class="col-lg-2 d-flex">
                                                    <a href="#"
                                                        class="text-danger d-inline-block d-flex mt-1 align-items-center remove-item-btn"
                                                        id="deleteWholeSalePriceProduct">
                                                        <i class="ri-delete-bin-5-fill fs-2"></i>
                                                    </a>
                                                </div>
                                                <!-- end col -->
                                            </div>
                                        @endfor
                                    </div>
                                    <!-- end row -->
                                </div>
                            </div>
                        </div>
                    </div>



                    <!-- end card -->


                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Product Attributes</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-4">
                                <div class="row">
                                    <div class="col-lg-12 text-end">
                                        <button type="button" class="btn btn-primary" id="addProductAttribute">Add
                                            Product Attribute</button>
                                    </div>
                                </div>
                                <div id="productAttributeContainer">
                                    @php
                                        $oldTitle = old('title', []);
                                        $oldValue = old('value', []);
                                        $count = max(count($oldTitle), count($oldValue));
                                    @endphp

                                    @for ($i = 0; $i < $count; $i++)
                                        <div class="row">
                                            <div class="col-lg-4">
                                                <div class="mb-3">
                                                    <label class="form-label" for="title-input">Title</label>
                                                    <input type="text" name="title[]"
                                                        value="{{ $oldTitle[$i] ?? ($product->productAttributes[$i]['title'] ?? '') }}"
                                                        class="form-control" placeholder="Enter title" id="title-input">
                                                </div>
                                            </div>
                                            <!-- end col -->

                                            <div class="col-lg-4">
                                                <div class="mb-3">
                                                    <label class="form-label" for="value-input">Value</label>
                                                    <input type="text" name="value[]"
                                                        value="{{ $oldValue[$i] ?? ($product->productAttributes[$i]['value'] ?? '') }}"
                                                        class="form-control" placeholder="Enter value" id="value-input">
                                                </div>
                                            </div>

                                            <div class="col-lg-2 d-flex">
                                                <a href="#"
                                                    class="text-danger d-inline-block d-flex mt-1 align-items-center remove-item-btn"
                                                    id="removeProductAttribute">
                                                    <i class="ri-delete-bin-5-fill fs-2"></i>
                                                </a>
                                            </div>
                                        </div>
                                    @endfor
                                </div>
                                <!-- end row -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Publish</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="status" class="form-label">Status</label>

                                <select class="form-select" id="status" name="status" data-choices data-choices-search-false>
                                    <option value="1" selected>Published</option>
                                    <option value="0">Draft</option>
                                </select>
                                @error('status')
                                    <p class="text-danger"> {{ $message }} </p>
                                @enderror

                            </div>

                            <div>
                                <label for="is_fea" class="form-label">Visibility</label>
                                <select class="form-select" name="is_featured" id="choices-publish-visibility-input" data-choices
                                    data-choices-search-false>
                                    <option value="1" selected>Featured</option>
                                    <option value="0">Not Featured</option>
                                </select>
                                @error('visibility')
                                    <p class="text-danger"> {{ $message }} </p>
                                @enderror
                            </div>
                        </div>
                        <!-- end card body -->
                    </div>
                    <!-- end card -->

                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Product Tags</h5>
                        </div>
                        <div class="card-body">
                            <div class="hstack gap-3 align-items-start">
                                <div class="flex-grow-1">
                                    <input class="form-control" name="tags" data-choices data-choices-multiple-remove="true"
                                        placeholder="Enter tags" type="text" value="{{ old('tags') }}" />
                                    @error('tags')
                                        <p class="text-danger"> {{ $message }} </p>
                                    @enderror
                                </div>
                            </div>

                        </div>
                        <!-- end card body -->
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Specification</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="status" class="form-label">Pdf Sepcification</label>
                                <input type="file" class="form-control" id="pdf_specification" name="pdf_specification"
                                    value="{{ old('pdf_specification') }}" accept="application/pdf">
                                @error('pdf_specification')
                                    <p class="text-danger"> {{ $message }} </p>
                                @enderror
                            </div>
                        </div>
                        <!-- end card body -->
                    </div>

                    <!-- end card -->

                    {{-- <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title mb-0">Product Categories</h5>
                                    </div>
                                    <div class="card-body">
                                        <p class="text-muted mb-2"> <a href="#" class="float-end text-decoration-underline">Add
                                                New</a>Select product category</p>
                                        <select class="form-select" id="choices-category-input" name="category_id"
                                            data-choices data-choices-search-false>
                                            @foreach ($categories as $category)
                                                <option value="{{ $category->id }}"{{ old('category_id') == $category->id ? 'selected' : '' }}>{{ ucwords($category->name) }}</option>
                                            @endforeach
                                        </select>
                                        @error('category_id')
                                            <p class="text-danger"> {{ $message }} </p>
                                        @enderror
                                    </div>
                                    <!-- end card body -->
                                </div> --}}


                    <!-- end card -->

                    <!-- end card -->


                    <!-- end card -->



                    {{-- <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title mb-0">Label</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="mb-3">
                                            <label for="status" class="form-label">Product Label</label>
                                            <select class="form-select" id="choices-category-input" name="label_id"
                                                data-choices data-choices-search-false>
                                                <option value="" selected>Select Label</option>
                                                @foreach ($labels as $label)
                                                    <option value="{{ $label->id }}"{{ old('label_id') == $label->id ? 'selected' : '' }}>{{ ucwords($label->name) }}</option>
                                                @endforeach
                                            </select>
                                            @error('label_id')
                                                <p class="text-danger"> {{ $message }} </p>
                                            @enderror
                                        </div>
                                    </div>
                                    <!-- end card body -->
                                </div> --}}

                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Product External Info</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="status" class="form-label">External Link</label>
                                <input type="url" class="form-control" id="external_link" name="external_link"
                                    value="{{ old('external_link') }}" placeholder="Enter External Link">
                                @error('external_link')
                                    <p class="text-danger"> {{ $message }} </p>
                                @enderror
                            </div>

                            <div>
                                <label for="is_fea" class="form-label">External Link Button Name</label>
                                <input type="text" class="form-control" id="external_link_button_name"
                                    name="external_link_button_name" value="{{ old('external_link_button_name') }}"
                                    placeholder="Enter External Link Button Name">
                                @error('external_link_button_name')
                                    <p class="text-danger"> {{ $message }} </p>
                                @enderror
                            </div>


                            {{--
                                        <div class="mt-2">
                                            <label for="qrcode" class="form-label">QR Code</label>
                                            <input type="text" class="form-control" id="qrcode" name="qrcode"
                                                value="{{ old('qrcode') ?? '' }}" placeholder="Enter QR Code">
                                            @error('qrcode')
                                                <p class="text-danger"> {{ $message }} </p>
                                            @enderror
                                        </div> --}}
                        </div>
                        <!-- end card body -->
                    </div>

                    <div class="card d-none">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Video Provider</h5>
                        </div>
                        <div class="card-body">
                            <div>
                                <select class="form-select" id="choices-category-input" name="video_provider" data-choices
                                    data-choices-search-false>
                                    <option value="youtube" {{ old('video_provider' == 'youtube') }}>Youtube</option>
                                    <option value="tiktok" {{ old('video_provider' == 'tiktok') }}>Tiktok</option>
                                </select>
                                @error('video_provider')
                                    <p class="text-danger"> {{ $message }} </p>
                                @enderror
                            </div>
                            <div class="mt-2">
                                <label for="video_url" class="form-label">Video Url</label>
                                <input type="url" class="form-control" id="video_url" name="video_url"
                                    value="{{ old('video_url') }}" placeholder="Enter Video Url">
                                @error('video_url')
                                    <p class="text-danger"> {{ $message }} </p>
                                @enderror
                            </div>
                        </div>
                        <!-- end card body -->

                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Meta Data</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-4">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="mb-3">
                                            <label class="form-label" for="meta-title-input">Meta title</label>
                                            <input type="text" name="meta_title" class="form-control"
                                                value="{{ old('meta_title') }}" placeholder="Enter meta title"
                                                id="meta-title-input">
                                            @error('meta_title')
                                                <p class="text-danger"> {{ $message }} </p>
                                            @enderror
                                        </div>
                                    </div>
                                    <!-- end col -->

                                    <div class="col-lg-12">
                                        <div class="mb-3">
                                            <label class="form-label" for="meta-keywords-input">Meta Keywords</label>
                                            <input type="text" name="meta_keywords" value="{{ old('meta_keywords') }}"
                                                class="form-control" placeholder="Enter meta keywords" id="meta-keywords-input">
                                            @error('meta_keywords')
                                                <p class="text-danger"> {{ $message }} </p>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-12">
                                        <div class="mb-3">
                                            <label class="form-label" for="meta-image-input">Meta Image</label>
                                            <input type="file" name="meta_image" class="form-control"
                                                placeholder="Enter meta image" id="meta-image-input">
                                            @error('meta_image')
                                                <p class="text-danger"> {{ $message }} </p>
                                            @enderror
                                        </div>
                                    </div>
                                    <!-- end col -->
                                </div>
                                <!-- end row -->
                                <div>
                                    <label class="form-label" for="meta-description-input">Meta Description</label>
                                    <textarea class="form-control" name="meta_description" id="meta-description-input"
                                        placeholder="Enter meta description" rows="3">{!! old('meta_description') !!}</textarea>
                                    @error('meta_description')
                                        <p class="text-danger"> {{ $message }} </p>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
            <!-- end card -->

            <!-- end card -->
            <div class="text-end mb-3">
                <button type="submit" class="btn btn-success w-sm">Save Product</button>
            </div>
        </form>
    </div>
    <!-- end col -->


    <!-- end col -->
    </div>


    </div>
    <!-- container-fluid -->
@endsection

@section('js')

    <script src="{{ asset('assets/admin/assets/libs/@ckeditor/ckeditor5-build-classic/build/ckeditor.js') }}"></script>

    <!-- dropzone js -->
    <script src="{{ asset('assets/admin/assets/libs/dropzone/dropzone-min.js') }}"></script>
    <script>
        ClassicEditor.create(document.querySelector("#ckeditor-classic"))
            .then(function(e) {
                e.ui.view.editable.element.style.height = "200px";
            })
            .catch(function(e) {
                console.error(e);
            });
    </script>
    <script>
        ClassicEditor.create(document.querySelector("#ckeditor-classic1"))
            .then(function(e) {
                e.ui.view.editable.element.style.height = "200px";
            })
            .catch(function(e) {
                console.error(e);
            });
    </script>
    <script>
        ClassicEditor.create(document.querySelector("#ckeditor-classic2"))
            .then(function(e) {
                e.ui.view.editable.element.style.height = "200px";
            })
            .catch(function(e) {
                console.error(e);
            });
    </script>
    <script>
        $(document).ready(function() {
            const wholeSalePriceContainer = $('#wholeSalePriceContainer');
            const addMoreWholePrice = $('#addMoreWholePrice');
            const singleWholeSalePriceHtml = `<div class="row">
                <div class="col-lg-3">
                    <div class="mb-3">
                        <label class="form-label" for="min-quantity-input">Min Qunatity</label>
                        <input type="number" min="2" name="min_quantity[]" class="form-control min_quantity" placeholder="Min Quantity"
                            id="meta-title-input" required>
                    </div>
                </div>
                <!-- end col -->

                <div class="col-lg-3">
                    <div class="mb-3">
                        <label class="form-label" for="meta-keywords-input">Max Quantity</label>
                        <input type="number" name="max_quantity[]" class="form-control max_quantity" placeholder="Max Quantity"
                            id="meta-keywords-input" required>
                    </div>
                </div>

                <div class="col-lg-3">
                    <div class="mb-3">
                        <label class="form-label" for="meta-keywords-input">Price Per Unit</label>
                        <input type="text" class="form-control" name="price_per_unit[]" placeholder="Price per unit"
                            id="meta-keywords-input" required>
                    </div>
                </div>

                <div class="col-lg-2 d-flex">
                    <a href="#" class="text-danger d-inline-block d-flex mt-1 align-items-center remove-item-btn" id="deleteWholeSalePriceProduct">
                        <i class="ri-delete-bin-5-fill fs-2"></i>
                    </a>
                </div>
                <!-- end col -->
            </div>`;

            addMoreWholePrice.on('click', function(e) {
                e.preventDefault();
                wholeSalePriceContainer.append(singleWholeSalePriceHtml);
            });

            wholeSalePriceContainer.on('click', '#deleteWholeSalePriceProduct', function(e) {
                e.preventDefault();
                $(this).closest('.row').remove();
            });

            wholeSalePriceContainer.on('change', '.min_quantity', function(e) {
                e.preventDefault();
                const minQty = $(this).val();

                let minQtyElements = wholeSalePriceContainer.find('.min_quantity');
                if (minQtyElements.length == 1) {
                    //min qty must be 2
                    let minQty = minQtyElements.val();
                    if (minQty < 2) {
                        $(this).val('');
                        fireError('Min quantity must be greater than 1', 'error');
                    }
                } else {
                    validateAllWholeSalePrices(minQty, $(this));
                }

            });

            wholeSalePriceContainer.on('change', '.max_quantity', function(e) {
                e.preventDefault();
                const maxQty = $(this).val();

                let maxQtyElements = wholeSalePriceContainer.find('.max_quantity');
                if (maxQtyElements.length == 1) {
                    //max qty should be greater than closest min qty
                    let minQty = wholeSalePriceContainer.find('.min_quantity').val();
                    if (maxQty > minQty) {
                        $(this).val('');
                        fireError('Max quantity must be greater than ' + minQty, 'error');
                    }
                } else {
                    validateAllWholeSalePrices(maxQty, $(this));
                }


            });

            function validateAllWholeSalePrices(requiredQty, targetElement) {
                //action can be min_quantity or max_quantity
                requiredQty = parseInt(requiredQty);
                let isValid = true;
                allMaxQtys = [];
                allMinQts = [];


                let minQtyElements = wholeSalePriceContainer.find('.min_quantity');
                let maxQtyElements = wholeSalePriceContainer.find('.max_quantity');

                minQtyElements.each(function(index, element) {
                    let minQty = $(element).val();
                    if (minQty) {
                        allMinQts.push(parseInt(minQty));
                    }
                });

                maxQtyElements.each(function(index, element) {
                    let maxQty = $(element).val();
                    if (maxQty) {
                        allMaxQtys.push(parseInt(maxQty));
                    }
                });

                //check if target element is min_quantity element
                if (targetElement.hasClass('min_quantity')) {
                    allMinQts.pop();
                } else {
                    allMaxQtys.pop();
                }

                console.log(allMinQts, allMaxQtys);

                const maxFromMaxQts = allMaxQtys.length > 0 ? Math.max(...allMaxQtys) : 0;
                const maxFromMinQts = allMinQts.length > 0 ? Math.max(...allMinQts) : 0;

                const maximumNoFromMinAndMax = Math.max(maxFromMaxQts, maxFromMinQts);

                console.log(maximumNoFromMinAndMax, requiredQty, maxFromMinQts, maxFromMaxQts);

                if (requiredQty <= maximumNoFromMinAndMax) {
                    isValid = false;
                    targetElement.val('');
                    fireError('Required quantity must be greater than ' + maximumNoFromMinAndMax, 'error');
                }

            }

            function fireError(message = '', type = 'error') {
                Swal.fire({
                    icon: type,
                    title: 'Oops...',
                    text: message,
                });
            }

            // product attribute
            const productAttributeContainer = $('#productAttributeContainer');
            const addProductAttribute = $('#addProductAttribute');
            const productAttributeHtml = `  <div class="row">
                <div class="col-lg-4">
                    <div class="mb-3">
                        <label class="form-label" for="title-input">Title</label>
                        <input type="text" name="title[]"  class="form-control" placeholder="Enter title"
                            id="title-input">
                    </div>
                </div>
                <!-- end col -->

                <div class="col-lg-4">
                    <div class="mb-3">
                        <label class="form-label" for="value-input">Value</label>
                        <input type="text" name="value[]"  class="form-control" placeholder="Enter value"
                            id="value-input">
                    </div>
                </div>

                <div class="col-lg-2 d-flex">
                    <a href="#" class="text-danger d-inline-block d-flex mt-1 align-items-center remove-item-btn" id="removeProductAttribute">
                        <i class="ri-delete-bin-5-fill fs-2"></i>
                    </a>
                </div>
            </div>`

            addProductAttribute.on('click', function(e) {
                e.preventDefault();
                productAttributeContainer.append(productAttributeHtml);
            });

            productAttributeContainer.on('click', '#removeProductAttribute', function(e) {
                e.preventDefault();
                $(this).closest('.row').remove();
            });

        });
    </script>

@endsection