@extends('admin.layouts.master')
@section('title', 'Edit 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">Edit Product ({{ ucwords($product->name) }})</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">Edit Product</li>
                        </ol>
                    </div>

                </div>
            </div>
        </div>
        <!-- end page title -->
        <div class="row">
            <div class="col-lg-12">
                <x-alert />
            </div>
        </div>
        <form id="productForm" autocomplete="off" method="POST"
            action="{{ route('admin.product.update', ['id' => $product->id]) }}" enctype="multipart/form-data">
            @csrf
            <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') ?? $product->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">
                                    <label for="unit" 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>
                                        <option value="">Select Category</option>
                                        @php
                                            $selected_id = old('category_id') ?? $product->category_id;
                                        @endphp
                                        @foreach ($categories as $category)
                                            <option @if ($selected_id == $category->id) selected @endif
                                                value="{{ $category->id }}">
                                                {{ ucwords($category->name) }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-6">
                                    <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>
                                        <option selected value="">Select Brand </option>
                                        @php
                                            $selected_id = old('brand_id') ?? $product->brand_id;
                                        @endphp
                                        @foreach ($brands as $brand)
                                            <option value="{{ $brand->id }}"
                                                @if ($selected_id == $brand->id) selected @endif>
                                                {{ 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">
                                    <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>
                                        <option selected value="">Select Unit </option>
                                        @php
                                            $selected_id = old('unit_id') ?? $product->unit_id;
                                        @endphp
                                        @foreach ($units as $unit)
                                            <option
                                                value="{{ $unit->id }}"@if ($selected_id == $unit->id) selected @endif>
                                                {{ 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">
                                    <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>
                                        @php
                                            $selected = old('label_id') ?? $product->label_id;
                                        @endphp
                                        @foreach ($labels as $label)
                                            <option
                                                value="{{ $label->id }}"{{ $selected == $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') ?? $product->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') ?? $product->unit_price }}"
                                        placeholder="Enter Sale Price" required>
                                    @if ($errors->has('weight'))
                                        <p class="text-danger"> {{ $errors->first('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', $product->off_price) }}"
                                        placeholder="Enter Old Sale Price">
                                    @if ($errors->has('off_price'))
                                        <p class="text-danger"> {{ $errors->first('off_price') }} </p>
                                    @endif
                                </div>
                            </div>
                            <div class="row mb-3">
                                {{--  maximum_purchase_quantity  --}}
                                <div class="col-lg-12">
                                    <label for="qrcode" class="form-label">QR Code</label>
                                    <input type="text" class="form-control" id="qrcode" name="qrcode"
                                        value="{{ old('qrcode', $product->qrcode) }}" placeholder="Enter QR Code">
                                    @error('qrcode')
                                        <p class="text-danger"> {{ $message }} </p>
                                    @enderror
                                </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') ?? $product->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') ?? $product->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 mb-3">
                                <div class="col-lg-12">
                                    <div class="form-check form-switch form-switch-lg" dir="ltr">
                                        @php
                                            $selected_ = old('is_refundable') ?? $product->is_refundable;
                                        @endphp
                                        <input type="checkbox" class="form-check-input"
                                            @if ($selected_) checked @endif 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>
                    </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') ?? $product->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') ?? $product->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="weight" class="form-label"><b>Product Weight </b></label>
                                                <input type="number" class="form-control" id="weight" name="weight"
                                                    value="{{ old('weight') ?? $product->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="number" class="form-control" id="quantity"
                                                    name="quantity" value="{{ old('quantity') ?? $product->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" class="form-control"
                                                    value="{{ old('discount') ?? $product->discount }}"
                                                    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>
                                                    @php
                                                        $selected = old('discount_type') ?? $product->discount_type;
                                                    @endphp
                                                    <option value="fixed"
                                                        @if ($selected == 'fixed') selected @endif>
                                                        Fixed</option>
                                                    <option value="percentage"
                                                        @if ($selected == 'percentage') selected @endif>
                                                        percentage</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') ?? $product->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" data-provider="flatpickr"
                                                    data-date-format="Y-m-d" data-enable-time
                                                    value="{{ old('discount_end_date') ?? $product->discount_end_date }}"
                                                    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 Description Section</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-4">
                                <div class="row">

                                    <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') ?? $product->short_description }}</textarea>
                                        @error('short_description')
                                            <p class="text-danger"> {{ $message }} </p>
                                        @enderror
                                    </div>
                                    <!-- end card body -->

                                    <div class="mt-3 mb-3">
                                        <label for="long_description" class="form-label"><b>Product Long Description<span
                                                    class="text-danger">*</span> </b></label>
                                        {{--  <div id="ckeditor-classic">
                                    <p> this is dummy description </p>
                                </div>  --}}
                                        <textarea name="long_description" id="ckeditor-classic" required>
                                    {!! old('long_description') ?? $product->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 || $product->show_purchase_note) 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') ?? $product->purchase_note !!}
                                </textarea>
                                        @error('purchase_note')
                                            <p class="text-danger">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>

                                <!-- end row -->
                            </div>
                        </div>
                    </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/png, image/gif, image/jpeg">
                                        </div>
                                        <div class="avatar-lg">
                                            <div class="avatar-title bg-light rounded">
                                                <img src="{{ asset($product->thumbnail_image) }}" 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>
                                <div class="image-gallery-preview-wrapper">
                                    <div class="image-preview-wrapper">
                                        <div class="row">
                                            @if ($product->productImages()->count() > 0)
                                                @foreach ($product->productImages as $image)
                                                    <div class="col-lg-3 col-sm-6">
                                                        <div class="mb-3 position-relative">
                                                            <img src="{{ asset($image->path) }}"
                                                                class="img-fluid rounded" width="150px" height="100px"
                                                                style="max-height: 100px; max-width: 350px;"
                                                                alt="gallery-image">
                                                            <a href="#" class="text-danger delete-image-btn"
                                                                onclick="return confirm('Are you sure?')"
                                                                data-image-id="{{ $image->id }}"
                                                                style="position: absolute; top: 0px; right: 0px;">
                                                                <i class="bg-danger-subtle ri-close-fill"></i>
                                                            </a>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <input type="hidden" name="delete_image_gallery" id="deleteImageGalleryField">

                                <input name="product_images[]" type="file" class="form-control" multiple="multiple">
                                {{--  <div class="dropzone">
                                    <div class="fallback">
                                        <input name="product_images[]" type="file" multiple="multiple" required>
                                    </div>
                                    <div class="dz-message needsclick">
                                        <div class="mb-3">
                                            <i class="display-4 text-muted ri-upload-cloud-2-fill"></i>
                                        </div>

                                        <h5>Drop files here or click to upload.</h5>
                                    </div>
                                </div>

                                <ul class="list-unstyled mb-0" id="dropzone-preview">
                                    <li class="mt-2" id="dropzone-preview-list">
                                        <!-- This is used as the file preview template -->
                                        <div class="border rounded">
                                            <div class="d-flex p-2">
                                                <div class="flex-shrink-0 me-3">
                                                    <div class="avatar-sm bg-light rounded">
                                                        <img data-dz-thumbnail class="img-fluid rounded d-block"
                                                            src="#" alt="Product-Image" />
                                                    </div>
                                                </div>
                                                <div class="flex-grow-1">
                                                    <div class="pt-1">
                                                        <h5 class="fs-14 mb-1" data-dz-name>&nbsp;</h5>
                                                        <p class="fs-13 text-muted mb-0" data-dz-size></p>
                                                        <strong class="error text-danger" data-dz-errormessage></strong>
                                                    </div>
                                                </div>
                                                <div class="flex-shrink-0 ms-3">
                                                    <button data-dz-remove class="btn btn-sm btn-danger">Delete</button>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>  --}}
                                <!-- end dropzon-preview -->

                                @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-lg-6 text-end">
                                        <div class="row mb-3">
                                            <div class="col-lg-12">
                                                <div class="form-check form-switch form-switch-lg" dir="ltr">
                                                    @php
                                                        $selected = old('is_wholesale') ?? $product->is_wholesale;
                                                    @endphp
                                                    <input type="checkbox" class="form-check-input" value="0"
                                                        @if ($selected) 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-lg-6 text-end">
                                        <button type="button" class="btn btn-primary" id="addMoreWholePrice">Add
                                            Wholesale Price</button>
                                    </div>
                                </div>
                                <div id="wholeSalePriceContainer">
                                    @php
                                        $oldMinQuantity = old('min_quantity', []);
                                        $oldMaxQuantity = old('max_quantity', []);
                                        $oldPricePerUnit = old('price_per_unit', []);
                                        $product_wholesale_prices = $product
                                            ->wholesalePrices()
                                            ->where('user_id', null)
                                            ->get();
                                        $count = max(count($oldMinQuantity), count($oldMaxQuantity), count($oldPricePerUnit), count($product_wholesale_prices));
                                    @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_wholesale_prices[$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_wholesale_prices[$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_wholesale_prices[$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>



                    <!-- 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), count($product->productAttributes));
                                    @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>





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

                <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>
                                    @php
                                        $selected = old('status') ?? $product->status;
                                    @endphp

                                    <option value="0" @if ($selected == 0) selected @endif>Draft
                                    </option>
                                    <option value="1" @if ($selected == 1) selected @endif>Published
                                    </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>
                                    @php
                                        $selected = old('is_featured') ?? $product->is_featured;
                                    @endphp
                                    <option value="0" @if ($selected == 0) selected @endif>Not Featured
                                    </option>
                                    <option value="1" @if ($selected == 1) selected @endif>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">
                                    @php
                                        if (old('tags')) {
                                            $tags = old('tags');
                                        } else {
                                            $tags = $product->tags->pluck('tag')->toArray();
                                            $tags = implode(',', $tags);
                                        }
                                    @endphp
                                    <input class="form-control" name="tags" data-choices
                                        data-choices-multiple-remove="true" value="{{ $tags }}"
                                        placeholder="Enter tags" type="text" />
                                    @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" accept="application/pdf">
                                @if ($product->pdf_specification)
                                    <a href="{{ asset($product->pdf_specification) }}" target="_blank">Download</a>
                                @endif
                                @error('pdf_specification')
                                    <p class="text-danger"> {{ $message }} </p>
                                @enderror
                            </div>
                            <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') ?? $product->specification }}"
                                    placeholder="Enter Product Specification">
                                @error('specification')
                                    <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') ?? $product->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') ?? $product->external_link_button_name }}"
                                    placeholder="Enter External Link Button Name">
                                @error('external_link_button_name')
                                    <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">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>
                                    @php
                                        $selected = old('video_provider') ?? $product->video_provider;
                                    @endphp
                                    <option value="youtube" @if ($selected == 'youtube') selected @endif>Youtube
                                    </option>
                                    >Youtube</option>
                                    <option value="tiktok" @if ($selected == 'tiktok') selected @endif>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') ?? $product->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') ?? $product->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" class="form-control"
                                                value="{{ old('meta_keywords') ?? $product->meta_keywords }}"
                                                placeholder="Enter meta keywords" id="meta-keywords-input">
                                            @error('meta_keywords')
                                                <p class="text-danger"> {{ $message }} </p>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="card">
                                        <div class="card-header">
                                            <h5 class="card-title mb-0">Meta Image</h5>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-4">
                                                <div class="text-center">
                                                    <div class="position-relative d-inline-block">
                                                        <div class="position-absolute top-100 start-100 translate-middle">
                                                            <label for="meta-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 d-none product-image-input"
                                                                name="meta_image" id="meta-image-input" type="file"
                                                                accept="image/png, image/gif, image/jpeg">
                                                        </div>
                                                        <div class="avatar-lg">
                                                            <div class="avatar-title bg-light rounded">
                                                                @if ($product->meta_image)
                                                                    <img src="{{ asset($product->meta_image) }}"
                                                                        id="meta-img" class="avatar-md h-auto" />
                                                                @else
                                                                    <img src="" id="meta-img"
                                                                        class="avatar-md h-auto" />
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                @error('thumbnail_image')
                                                    <p class="text-danger"> {{ $message }} </p>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    {{--  <div class="col-lg-6">
                                        <div class="mb-3">
                                            <label class="form-label" for="meta-image-input">Meta Image</label>
                                            <input type="file" name="meta_image" class="form-control"
                                                value="{{ old('meta_image') ?? $product->meta_image }}"
                                                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') ?? $product->meta_description }}</textarea>
                                    @error('meta_description')
                                        <p class="text-danger"> {{ $message }} </p>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

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

    </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() {
            $('.delete-image-btn').on('click', function(e) {
                e.preventDefault();
                var imageId = $(this).data('image-id');
                var deleteImageField = $('#deleteImageGalleryField');

                if (deleteImageField.val() === '') {
                    deleteImageField.val(imageId);
                } else {
                    console.log(deleteImageField.val());
                    deleteImageField.val(deleteImageField.val() + ',' + imageId);
                }
                console.log(deleteImageField.val());

                $(this).closest('.position-relative').parent().remove();
            });
        });

        $(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 Quantity</label>
                        <input type="number" min="2" name="min_quantity[]" class="form-control min_quantity" placeholder="Min Quantity" 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[]" class="form-control max_quantity" placeholder="Max Quantity" 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[]" placeholder="Price per unit" 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);
                updateMinQuantityValues();
            });

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

            wholeSalePriceContainer.on('change', '.min_quantity', function(e) {
                e.preventDefault();
                const minQuantityInput = $(this);
                const minQuantity = parseInt(minQuantityInput.val());
                const maxQuantity = minQuantityInput.closest('.row').find('input[name="max_quantity[]"]');
                maxQuantity.attr('min', minQuantity);

                const prevRowMaxQuantity = minQuantityInput.closest('.row').prev().find(
                    'input[name="max_quantity[]"]');
                validMinQty = 0;
                if (prevRowMaxQuantity.length > 0) {
                    validMinQty = parseInt(prevRowMaxQuantity.val()) + 1;
                } else {
                    validMinQty = 2;
                }

                if (minQuantity != validMinQty) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: `Minimum Quantity must be ${validMinQty}`,
                    });
                    minQuantityInput.val(validMinQty);
                }

            });

            wholeSalePriceContainer.on('change', '.max_quantity', function(e) {
                const maxQuantity = $(this).val();
                const minQuantity = $(this).closest('.row').find('input[name="min_quantity[]"]').val();


                if (parseInt(maxQuantity) <= parseInt(minQuantity)) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: 'Maximum Quantity must be greater than Minimum Quantity',
                    });
                    $(this).val(parseInt(minQuantity) + 1);
                }
            });

            function updateMinQuantityValues() {
                wholeSalePriceContainer.find('.row').each(function(index) {
                    const minQuantity = $(this).find('.min_quantity');
                    const prevRowMaxQuantity = $(this).prev().find('input[name="max_quantity[]"]');
                    if (index === 0) {
                        minQuantity.attr('min', 2);
                    } else {
                        minQuantity.attr('min', parseInt(prevRowMaxQuantity.val()) + 1);
                    }
                    if (parseInt(minQuantity.val()) < 2) {
                        minQuantity.val(2);
                    }
                });
            }

            function showAlertIfInvalidQuantity(maxQuantityInput, nextMinQuantityInput) {
                const maxQuantity = parseInt(maxQuantityInput.val());
                const nextMinQuantity = parseInt(nextMinQuantityInput.val());
                if (!isNaN(maxQuantity) && !isNaN(nextMinQuantity) && maxQuantity <= nextMinQuantity) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: 'Maximum Quantity must be greater than Minimum Quantity',
                    });
                    maxQuantityInput.val(nextMinQuantity - 1);
                }
            }
        });



        $(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" required>
                    </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" 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="removeProductAttribute" required>
                        <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