@push('css')
    <!-- Select2 -->
    <link rel="stylesheet" href="/assets/plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="/assets/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.min.css" integrity="sha512-EZSUkJWTjzDlspOoPSpUFR0o0Xy7jdzW//6qhUkoZ9c4StFkVsp9fbbd0O06p9ELS3H486m4wmrCELjza4JEog==" crossorigin="anonymous" />
    <link rel="stylesheet" href="/assets/plugins/summernote/summernote-bs4.min.css">
    <link rel="stylesheet" href="/assets/plugins/dropzone/min/dropzone.min.css">
    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link type="text/css" rel="stylesheet" href="/assets/plugins/file-uploader/image-uploader.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/css/bootstrap-colorpicker.min.css" rel="stylesheet">
    <style>
        .spec{
            background: gainsboro;
        }
        .dropify-wrapper .dropify-message p {
            font-size: initial;
        }
        .custom-file::-webkit-file-upload-button {
            visibility: hidden;
        }
        .custom-file::before {
            content: 'Choose File';
            display: inline-block;
            background: linear-gradient(top, #f9f9f9, #e3e3e3);
            border: 1px solid #ced4da;
            border-radius: 3px;
            padding: 8px 8px;
            outline: none;
            white-space: nowrap;
            -webkit-user-select: none;
            cursor: pointer;
            text-shadow: 1px 1px #fff;
            font-weight: 700;
            font-size: 10pt;
            width: 100%;
            text-align: center;
        }
        .note-editor{
            box-shadow: none !important;
        }
    </style>
@endpush

@section('content')
<!-- Content Header (Page header) -->
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>
                    @isset($product)
                        Edit Product 
                    @else 
                        Add Product
                    @endisset
                </h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{routeHelper('dashboard')}}">Home</a></li>
                    <li class="breadcrumb-item active">
                        @isset($product)
                            Edit Product 
                        @else 
                            Add Product
                        @endisset
                    </li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

@if(session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@endif
@if(session('error'))
    <div class="alert alert-danger">
        {{ session('error') }}
    </div>
@endif

<!-- Main content -->
<section class="content">



    <!-- Default box -->
    @if($errors->any())
    {!! implode('', $errors->all('<div class="alert alert-danger">:message</div>')) !!}
    @endif

    <div class="card">
        
        <form id="product_form" action="{{ isset($product) ? routeHelper('product/'.$product->id) : routeHelper('product') }}" method="POST" enctype="multipart/form-data">
            @csrf
            @isset($product)
                <input type="hidden" value="{{$product->id}}" id="id">
                @method('PUT')
            @endisset
            <input type="hidden" value="{{$type??''}}" name="ptypen">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-2 bg-light py-2 rounded">
                        <div class="sticky-top product_add_form_left_nav" style="top:4.5rem;">
                            <ul class="d-flex flex-column">
                                <li class="nav-items cursor-pointer py-2 px-2 mb-1 rounded product_general" onclick="product_left_nav_action('product_general')"><i class="fas fa-info"></i> General</li>
                                <li class="nav-items cursor-pointer py-2 px-2 mb-1 rounded product_pricing" onclick="product_left_nav_action('product_pricing')"><i class="far fa-money-bill-alt"></i> Pricing</li>
                                <li class="nav-items cursor-pointer py-2 px-2 mb-1 rounded product_cat" onclick="product_left_nav_action('product_cat')"><i class="fab fa-buffer"></i> Category</li>
                                <li class="nav-items cursor-pointer py-2 px-2 mb-1 rounded product_media" onclick="product_left_nav_action('product_media')"><i class="fas fa-photo-video"></i> Media</li>
                                <li class="nav-items cursor-pointer py-2 px-2 mb-1 rounded product_description" onclick="product_left_nav_action('product_description')"><i class="fas fa-scroll"></i> Description</li>
                                <li class="nav-items cursor-pointer py-2 px-2 mb-1 rounded product_extra_data" onclick="product_left_nav_action('product_extra_data')"><i class="fab fa-product-hunt"></i> Data</li>
                                <li class="nav-items cursor-pointer py-2 px-2 mb-1 rounded product_offer" onclick="product_left_nav_action('product_offer')"><i class="fas fa-percent"></i> Offers & Campaign</li>
                                <li class="nav-items cursor-pointer py-2 px-2 mb-1 rounded product_variant" onclick="product_left_nav_action('product_variant')"><i class="fas fa-tshirt"></i> Variation</li>
                                @if(auth()->user()->role_id != 2)
                                <li class="nav-items cursor-pointer py-2 px-2 mb-1 rounded create_categories" onclick="product_left_nav_action('create_categories')"><i class="fab fa-buffer"></i> Create Categories</li>
                                <li class="nav-items cursor-pointer py-2 px-2 mb-1 rounded create_colors_tags" onclick="product_left_nav_action('create_colors_tags')"><i class="fas fa-fill-drip"></i> Create Colors & Tags</li>
                                @endif
                                @push('js')
                                <style>
                                    .product_add_form_left_nav .nav-items{
                                        transition: 0.3s ease;
                                    }
                                    .product_add_form_left_nav .nav-items:hover{
                                        background: #dedede;
                                    }
                                </style>
                                <script>
                                    // id = element id
                                    function product_left_nav_action(id){
                                        // toogle class and design for section and menu
                                        $(`.${id}`).toggleClass('bg-danger');
                                        $(`#${id}`).toggleClass('border border-danger');
                                        $(`#${id} h3`).toggleClass('bg-light');
                                        $(`#${id} h3`).toggleClass('bg-danger');

                                        // scrolling auto
                                        $('html, body').animate({
                                            scrollTop: $(`#${id}`).offset().top - 75
                                        }, 300);
                                    }
                                </script>
                                @endpush
                            </ul>
                            
                            <div class="border border-danger rounded px-2 py-3">
                                
                                @if(auth()->user()->role_id != 2)
                                <ul class="d-flex flex-row flex-wrap pt-3" style="gap:1rem;">
                                    <li class="nav-items">
                                        <div class="custom-control custom-switch">
                                            <input type="checkbox" class="custom-control-input" name="status" id="status" @isset ($product) {{ $product->status ? 'checked':'' }} @else checked @endisset>
                                            <label class="custom-control-label cursor-pointer" for="status">Status</label>
                                        </div>
                                        @error('status')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </li>
                                    <li class="nav-items">
                                        <div class="custom-control custom-switch">
                                            <input type="checkbox" class="custom-control-input" name="book" id="book" @isset ($product) {{ $product->book ? 'checked':'' }} @else  @endisset>
                                            <label class="custom-control-label cursor-pointer" for="book">book</label>
                                        </div>
                                        @error('book')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </li>
                                    <li class="nav-items">
                                        <div class="custom-control custom-switch">
                                            <input type="checkbox" class="custom-control-input" name="sheba" id="sheba" @isset ($product) {{ $product->sheba ? 'checked':'' }} @else  @endisset>
                                            <label class="custom-control-label cursor-pointer" for="sheba">sheba</label>
                                        </div>
                                        @error('sheba')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </li>
                                    <li class="nav-items">
                                        <div class="custom-control custom-switch">
                                            <input type="checkbox" class="custom-control-input" name="download_able" id="download_able" @isset($product){{ $product->download_able ? 'checked':''}} @endisset>
                                            <label class="custom-control-label cursor-pointer" for="download_able">Download able</label>
                                        </div>
                                        @error('download_able')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </li>
                                </ul>
                                @endif
    
                                <button id="product_submit" type="submit" class="mt-4 btn btn-danger product-done-btn">
                                    @isset($product)
                                        <i class="fas fa-arrow-circle-up"></i>
                                        Update
                                    @else
                                        <i class="fas fa-plus-circle"></i>
                                        Submit
                                    @endisset
                                </button>
                                <br>
                                <a href="{{routeHelper('product')}}" class="btn btn-dark mt-3">
                                    <i class="fas fa-long-arrow-alt-left"></i>
                                    Back
                                </a>

                                {{-- Another Form Submit BTN by JS - top of form fixed --}}
                                @push('admin_top_nav')
                                    <button id="product_done" class="btn btn-danger product-done-btn">
                                        @isset($product)
                                            <i class="fas fa-arrow-circle-up"></i>
                                            Update
                                        @else
                                            <i class="fas fa-plus-circle"></i>
                                            Submit
                                        @endisset
                                    </button>
                                    <script>
                                        document.getElementById('product_done').addEventListener('click', function() {
                                            document.getElementById('product_form').submit();
                                        });
                                    </script>
                                @endpush
                                @push('admin_top_nav_right')
                                    @isset($product)
                                    <a href="{{routeHelper('product/'. $product->id)}}" class="btn btn-light">
                                        <i class="fas fa-eye"></i>
                                        {{-- View --}}
                                    </a>
                                    @endisset
                                    @isset($product)
                                    <a href="{{url('product/'. $product->slug)}}" class="btn btn-light">
                                        <i class="fas fa-desktop"></i>
                                        {{-- Preview --}}
                                    </a>
                                    @endisset
                                    <a href="{{routeHelper('product')}}" class="btn btn-danger">
                                        <i class="fas fa-long-arrow-alt-left"></i>
                                        {{-- Back --}}
                                    </a>
                                @endpush
                                {{-- /Another Form Submit BTN by JS - top of form fixed --}}
                            </div>
                        </div>
                        {{-- Add top menu --}}
                        @push('admin_top_nav')
                        {{-- <li class="nav-item">
                            <span id="go_product_thumbnail_image" class="btn btn-light"><i class="fas fa-bell"></i>Image</span>
                        </li> --}}
                        @endpush
                    </div>



                    <div class="col-md-10 pl-md-5 product_form_right_data" {{-- style="padding-top:57px;" --}}>
                        <div id="product_general" class="form-row mb-5 px-2">
                            <h3 class="col-md-12 border bg-light mt-4 px-3 py-2 rounded">General</h3>
                            {{-- Name --}}
                            <div class="form-group col-md-12">
                                <label for="title">Product name <span class="text-danger">(*)</span>:</label>
                                <input type="text" name="title" id="title" placeholder="Write product title" class="form-control @error('title') is-invalid @enderror" value="{{ $product->title ?? old('title') }}" >
                                @error('title')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            {{-- SKU --}}
                            <div class="form-group col-md-3">
                                <label for="title">Product Code (SKU):</label>
                                <input type="text" name="sku" id="sku" placeholder="Product Code/SKU" class="form-control @error('title') is-invalid @enderror" value="{{ $product->sku ?? old('sku') }}" >
                                @error('title')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                @isset($product->sku)
                                    <a target="_blank" href="barcode" class="btn btn-sm btn-primary">Barcode</a>
                                @endisset
                            </div>
                            {{-- Shipping --}}
                            <div class="form-group col-md-3">
                                <label for="shipping_charge">Shipping <span class="text-danger">(*)</span>:</label>
                                <select name="shipping_charge" id="shipping_charge" data-placeholder="Shipping Charge" class="form-control select2 @error('shipping_charge') is-invalid @enderror">
                                        <option value="1" {{ isset($product) ? ($product->shipping_charge == 1) ? "selected" : "" : "selected"  }}>Paid</option>
                                        <option value="0" {{ isset($product) ? ($product->shipping_charge == 0) ? "selected" : "" : ""  }}>FREE</option>
                                </select>
                                @error('shipping_charge')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            {{-- Brand --}}
                            <div class="form-group col-md-3">
                                <label for="brand">Select Brand <span class="text-danger">(*)</span>:</label>
                                <select name="brand" id="brand" data-placeholder="Select Brand" class="form-control select2 @error('brand') is-invalid @enderror">
                                    <option value="">Select Brand</option>
                                    @foreach ($brands as $brand)
                                        <option value="{{$brand->id}}" @isset($product) {{$brand->id == $product->brand_id ? 'selected':''}} @endisset>{{$brand->name}}</option>
                                    @endforeach
                                </select>
                                @error('brand')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            {{-- Vendor --}}
                            @if(auth()->user()->role_id != 2)
                            <div class="form-group col-md-3">
                                <label for="full_description">Select Vendor <span class="text-danger">(*)</span>:</label>
                                <select class="form-control" name="vendor" required>
                                    <option value="">Select Vendor</option>
                                    @foreach(App\Models\ShopInfo::get(['name','user_id']) as $vend)
                                    <option @isset($product->user_id)@if($product->user_id==$vend->user_id)selected @endif
                                        @endisset value="{{$vend->user_id}}">{{$vend->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            @endif

                        </div>

                        <div id="product_pricing" class="form-row mb-5 px-2">
                            <h3 class="col-md-12 border bg-light mt-4 px-3 py-2 rounded">Pricing</h3>
                            {{-- Regular Price --}}
                            <div class="form-group col-md-6">
                                <label for="regular_price">Regular Price <span class="text-danger">(*)</span>:</label>
                                <input step="0.01" type="number" name="regular_price" id="regular_price" placeholder="Enter product regular price" class="form-control @error('regular_price') is-invalid @enderror" value="{{ $product->regular_price ?? old('regular_price') }}" required>
                                @error('regular_price')
                                    <div id="error_regular_price" class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                            @push('js')
                            <script>
                                $(document).ready(function() {
                                    $('.product-done-btn').on('click', function(e) {
                                        // Get the value of the regular_price input
                                        let regularPrice = parseFloat($('#regular_price').val());

                                        // Clear any previous error messages
                                        $('#error_regular_price').text('');

                                        // Check if the value is null, negative, or zero
                                        if (isNaN(regularPrice) || regularPrice <= 0) {
                                            // Prevent form submission
                                            e.preventDefault();  // This stops the form from submitting

                                            // Display an error message in the console for debugging
                                            console.error('Invalid regular price:', regularPrice);

                                            // Display an alert for debugging
                                            alert('The regular price must be greater than 0.');

                                            // Display an error message on the page
                                            $('#error_regular_price').text('The regular price must be greater than 0.');

                                            // Add the is-invalid class to the input for Bootstrap styling
                                            $('#regular_price').addClass('is-invalid');
                                        } else {
                                            // If the price is valid, remove any error styling
                                            $('#regular_price').removeClass('is-invalid');
                                        }
                                    });
                                });
                            </script>
                            @endpush
                            {{-- Qty --}}
                            <div class="form-group col-md-6">
                                <label for="quantity">Quantity <span class="text-danger">(*)</span>:</label>
                                <input type="number" name="quantity" id="quantity" placeholder="Enter product quantity" class="form-control @error('quantity') is-invalid @enderror" value="{{ $product->quantity ?? old('quantity') }}" required>
                                @error('quantity')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                            {{-- Buying Price --}}
                            <div class="form-group col-md-6">
                                <label for="buying_price">Buying Price:</label>
                                <input step="0.01" type="number" name="buying_price" id="buying_price" placeholder="Enter product buying price" class="form-control @error('buying_price') is-invalid @enderror" value="{{ $product->buying_price ?? old('buying_price') }}">
                                @error('buying_price')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                            {{-- Wholesell {Price} --}}
                            <div class="form-group col-md-6">
                                <label for="regular_price">Whole Sell Price:</label>
                                <input step="0.01" type="number" name="whole_price" id="whole_price" placeholder="Enter product whole sell price" class="form-control @error('whole_price') is-invalid @enderror" value="{{ $product->whole_price ?? old('whole_price') }}">
                                @error('whole_price')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div id="product_cat" class="form-row mb-5 px-2">
                            <h3 class="col-md-12 border bg-light mt-4 px-3 py-2 rounded">Categories</h3>
                            {{-- Category --}}
                            <div class="form-group col-md-6">
                                <label for="category">Select Category <span class="text-danger">(*)</span>:</label>
                                <select name="categories[]" id="category" multiple data-placeholder="Select Category" class="category form-control select2 @error('categories') is-invalid @enderror" required>
                                    <option value="">Select Category</option>
                                    @foreach ($categories as $category)
                                        <option value="{{$category->id}}" @isset($product) @foreach($product->categories as $pro_category) {{$category->id == $pro_category->id ? 'selected':''}} @endforeach @endisset>{{$category->name}}</option>
                                    @endforeach
                                </select>
                                @error('categories')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            {{-- Sub Category --}}
                            <div class="form-group col-md-6">
                                <label for="sub_category">Select Sub Category:</label>
                                <select name="sub_categories[]" id="sub_category" data-placeholder="Select Sub Category" class="sub_category form-control {{isset($product) ? 'select2':''}} @error('sub_categories') is-invalid @enderror"  {{isset($product) ? 'multiple':''}}>
                                    @isset($product)
                                        @foreach ($product->sub_categories as $sub_category)
                                            <option value="{{$sub_category->id}}" selected>{{$sub_category->name}}</option>
                                        @endforeach
                                    @endisset
                                </select>
                                @error('sub_categories')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            {{-- Mini Category --}}
                            <div class="form-group col-md-6">
                                <label for="mini_category">Select Mini Category:</label>
                                <select name="mini_categories[]" id="mini_category" data-placeholder="Select Mini Category" class="mini_category form-control {{isset($product) ? 'select2':''}} @error('mini_categories') is-invalid @enderror"  {{isset($product) ? 'multiple':''}}>
                                    @isset($product)
                                        @foreach ($product->mini_categories as $mini_category)
                                            <option value="{{$mini_category->id}}" selected>{{$mini_category->name}}</option>
                                        @endforeach
                                    @endisset
                                </select>
                                @error('mini_categories')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            {{-- Extra Category --}}
                            <div class="form-group col-md-6">
                                <label for="extra_categories">Select Extra Category:</label>
                                <select name="extra_categories[]" id="extra_category" data-placeholder="Select Mini Category" class="extra_categories form-control {{isset($product) ? 'select2':''}} @error('mini_categories') is-invalid @enderror"  {{isset($product) ? 'multiple':''}}>
                                    @isset($product)
                                        @foreach ($product->extra_categories as $extra_category)
                                            <option value="{{$extra_category->id}}" selected>{{$extra_category->name}}</option>
                                        @endforeach
                                    @endisset
                                </select>
                                @error('extra_categories')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div id="product_media" class="form-row mb-5 px-2">
                            <h3 class="col-md-12 border bg-light mt-4 px-3 py-2 rounded">Media</h3>
                            <div id="product_thumbnail_image" class="form-group col-md-12">
                                <label for="image">Product Thumbnail Image <span class="text-danger">(*)</span>:</label> | <span class="text-xs text-muted">Recommended size 1:1 ratio</span>
                                
                                @if(extension_loaded('imagick'))
                                    <div class="d-flex flex-row mb-2">
                                        <div class="form-check mr-4 d-flex">
                                            <input class="form-check-input" type="checkbox" name="thumb_required_img" id="thumb_required_img" value="1">

                                            <label class="form-check-label" for="thumb_required_img">
                                                Optimize Image
                                            </label>
                                        </div>
                                        <div class="form-group mr-4 d-none" id="width-height-inputs">
                                            <label for="thumb_required_img_width" class="d-block">Width:</label>
                                            <input placeholder="auto (take empty)" type="number" class="form-control" id="thumb_required_img_width" name="thumb_required_img_width">
                                        </div>
                                        <div class="form-group d-none" id="width-height-inputs2">
                                            <label for="thumb_required_img_height" class="d-block">Height:</label>
                                            <input placeholder="auto (take empty)" type="number" class="form-control" id="thumb_required_img_height" name="thumb_required_img_height">
                                        </div>
                                    </div>
                                    @push('js')
                                    <script>
                                        $(document).ready(function() {
                                            $('#thumb_required_img').change(function() {
                                                if ($(this).is(':checked')) {
                                                    $('#width-height-inputs, #width-height-inputs2').removeClass('d-none').addClass('d-flex').css('gap', '.4rem');
                                                } else {
                                                    $('#width-height-inputs, #width-height-inputs2').removeClass('d-flex').addClass('d-none').css('gap', '.4rem');
                                                }
                                            });
                                        });

                                    </script>
                                    @endpush
                                @else
                                    <div class="alert alert-danger">
                                        Imagick extension is not installed. Please install it to optimize the image.
                                    </div>
                                @endif


                                <input type="file" name="image" id="image" accept="image/*" class="form-control dropify @error('image') is-invalid @enderror" data-default-file="@isset($product)/uploads/product/{{$product->image}}@enderror" @isset($product) @else required @endisset>
                                @error('image')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>




                            <div class="form-group col-md-5">
                                {{-- color selection --}}
                                <label class="d-block py-2 px-2 bg-light" for="color">
                                    <span class="w-100 text-danger" type="button" data-toggle="collapse" data-target="#collapseExampleColor" aria-expanded="false" aria-controls="collapseExampleColor">
                                        Select Color: <i style="float: right;top: 8px;position: relative;" class="fas fa-arrow-down"></i>
                                    </span>
                                </label>
                                <div class="collapse border px-2 py-3" id="collapseExampleColor">
                                    <div style="display: flex;" class="input-group ">
                                            <select id="select_color"  data-placeholder="Select Color" class="form-control  @error('colors') is-invalid @enderror" >
                                                <option value="">Select Color</option>
                                                @foreach ($colors as $color)
                                                    <option  style="color:white;background: {{$color->code}}" value="{{$color->slug.','.$color->id}}" >{{$color->name}}</option>
                                                @endforeach
                                            </select>
                                            @error('colors')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                    </div>
                                    <div id="increment_color">
                                        @isset($product)
                                        @foreach($colors_product as $pro_color)
                                            <div class="input-group mt-2"> 
                                                <input class="form-control" type="hidden" readonly="" name="colors[]" value="{{$pro_color->id}}">
                                                <input class="form-control" type="text"  readonly="" value="{{$pro_color->name}}"> 
                                                <input class="form-control" type="number" placeholder="extra price" name="color_prices[]" value="{{$pro_color->price ?? 0 }}"> 
                                                <input class="form-control" type="number" placeholder="extra quantity" name="color_quantits[]" value="{{$pro_color->qnty}}">
                                                <div class="input-group-append" id="remove" style="cursor:context-menu">
                                                    <a href="{{route('admin.color.delete.n2',['cc'=>$pro_color->id,'pp'=>$product->id])}}">
                                                        <span class="input-group-text">Remove</span>
                                                    </a>
                                                </div>
                                            </div>
                                        @endforeach 
                                        @endisset
                                    </div>
                                </div>
                                {{-- /color selection --}}
                            </div>
                            <div class="form-group col-md-4">
                                <label>Product Gallery Image</label> | <span class="text-xs text-muted">Recommended size 1:1 ratio</span>
                                <div class="input-group" id="increment">
                                    <input type="file" class="form-control cursor-pointer" accept="image/*" id="images" name="images[]" style="padding:3px 4px;">
                                    <select name="imagesc[]" id="imagesc">
                                        <option value="">Select Color</option>
                                        @foreach ($colors as $color)
                                            <option  style="color:white;background: {{$color->code}}" value="{{$color->slug}}" >{{$color->name}}</option>
                                        @endforeach
                                    </select>
                                    <div class="input-group-append" id="add" style="cursor:context-menu">
                                        <span class="input-group-text cursor-pointer">Add More</span>
                                    </div>
                                </div>
                                {{-- <div class="input-images-1" style="padding-top: .5rem;"></div> --}}
                                @error('images')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                                <style type="text/css">
                                    .d {
                                        display: flex;
                                        align-items: center;
                                        padding: 10px;
                                        margin: 10px 0px;
                                        border-radius: 5px;
                                    }
                                </style>
                            </div>
                            <div class="form-group col-md-3">
                                @isset($product)
                                    <div class="row" style="gap:1rem;">
                                        @foreach($product->images as $image)
                                            <div class="col-md-5 product_gallery_imgs border border-dark p-2" @foreach ($colors as $color) @if($color->slug==$image->color_attri) title="Color: {{ $color->name }}" style="background:{{$color->code}}@endif @endforeach">
                                                <a class="product_gallery_img" target="_blank" href="{{asset('uploads/product/'.$image->name)}}">
                                                    <img title="View image: {{ $image->name }}" src="{{asset('uploads/product/'.$image->name)}}" style="width:100px;height:70px;object-fit:cover;">
                                                    
                                                    
                                                    @if ($product->image != $image->name)
                                                    @if(auth()->user()->role_id != 2)
                                                    <a title="Remote Image" class="btn btn-danger btn-xs" href="{{route('admin.idelte',$image->id)}}#product_media"><i class="fas fa-trash-alt"></i> <span>Delete</span></a>
                                                    @else
                                                    <a title="Remote Image" class="btn btn-danger btn-xs" href="{{route('vendor.idelte',$image->id)}}#product_media"><i class="fas fa-trash-alt"></i> <span>Delete</span></a>
                                                    @endif
                                                    @endif
                                                </a>
                                                <span type="button" class="btn btn-danger btn-xs" onclick="actionGalleryImg('{{ $image->id }}','{{ $image->name }}')">Optimize</span>
                                                <span id="galleryImgSize" class="text-muted text-xs">
                                                    @php
                                                        $imagePath = public_path('uploads/product/' . $image->name);
                                                        if (file_exists($imagePath)) {
                                                            $imageSize = filesize($imagePath);
                                                            if ($imageSize > 1024 * 1024) {
                                                                echo ' (' . round($imageSize / (1024 * 1024), 2) . ' MB)';
                                                            } else {
                                                                echo ' (' . round($imageSize / 1024, 2) . ' KB)';
                                                            }
                                                        }
                                                    @endphp
                                                </span>
                                            </div>
                                        @endforeach

                                        {{-- Popup for Image Optimization --}}
                                        <div class="modal fade" id="optimizeModal" tabindex="-1" role="dialog" aria-labelledby="optimizeModalLabel" aria-hidden="true">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="optimizeModalLabel">Image Optimization</h5>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <input type="hidden" id="optimizeImageId" value="">
                                                        <p id="optimizeImageSize"></p>
                                                        <img id="optimizeImageName" src="" alt="">
                                                        <div class="form-group">
                                                            <label for="optimizeWidth">Width:</label>
                                                            <input type="number" id="optimizeWidth" class="form-control" placeholder="Enter width" value="1000">
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="optimizeHeight">Height:</label>
                                                            <input type="number" id="optimizeHeight" class="form-control" placeholder="Enter height">
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <span id="optimizeImageSubmit" class="btn btn-secondary" onclick="optimizeImage()" data-dismiss="modal">Optimize</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @push('js')
                                            <script>
                                                function actionGalleryImg(id, name) {
                                                    console.log(id, name);
                                                    $('#optimizeModal').modal('show');
                                                    $('#optimizeImageId').val(id);
                                                    $('#optimizeImageName').attr('src', '/uploads/product/' + name);
                                                    var img = new Image();
                                                    img.src = '/uploads/product/' + name;
                                                    img.onload = function() {
                                                        var width = img.width;
                                                        var height = img.height;
                                                        var xhr = new XMLHttpRequest();
                                                        xhr.open('HEAD', img.src, true);
                                                        xhr.onreadystatechange = function() {
                                                            if (xhr.readyState == 4 && xhr.status == 200) {
                                                                var size = xhr.getResponseHeader('Content-Length') / 1024; // size in KB
                                                                if (size > 1024) {
                                                                    size = size / 1024; // size in MB
                                                                    $('#optimizeImageSize').text('Size: ' + size.toFixed(2) + ' MB (' + width + ' X ' + height + ')');
                                                                } else {
                                                                    $('#optimizeImageSize').text('Size: ' + size.toFixed(2) + ' KB (' + width + ' X ' + height + ')');
                                                                }
                                                            }
                                                        };
                                                        xhr.send(null);
                                                    };
                                                }
                                                function optimizeImage() {
                                                    var width = $('#optimizeWidth').val();
                                                    var height = $('#optimizeHeight').val();
                                                    var id = $('#optimizeImageId').val();
                                                    var form = $('<form>', {
                                                        action: "{{ routeHelper('product-edit-update/image/optimize/') }}" + id,
                                                        method: 'POST'
                                                    }).append($('<input>', {
                                                        type: 'hidden',
                                                        name: '_token',
                                                        value: "{{ csrf_token() }}"
                                                    })).append($('<input>', {
                                                        type: 'hidden',
                                                        name: 'width',
                                                        value: width
                                                    })).append($('<input>', {
                                                        type: 'hidden',
                                                        name: 'height',
                                                        value: height
                                                    }));
                                                    $('body').append(form);
                                                    form.submit();
                                                }
                                            </script>
                                        @endpush
                                        @push('css')
                                            <style>
                                                .product_gallery_imgs a.btn{
                                                    display: none;
                                                    position: absolute;
                                                    top: 1px;
                                                    right: 1px;
                                                }
                                                .product_gallery_imgs:hover a.btn{
                                                    display: inline;
                                                }
                                                .product_gallery_imgs:hover a.btn span{
                                                    display: none;
                                                    transition: 0.3s ease;
                                                }

                                                .product_gallery_imgs a.btn:hover span{
                                                    display: inline;
                                                }
                                            </style>
                                        @endpush
                                    </div>
                                @endisset
                            </div>
                            <div class="form-group col-md-4">
                                <label for="video">Product Video:</label>
                                @if(isset($product) && $product->video)
                                    <a target="_blank" href="{{ asset('uploads/product/video/'.$product->video) }}">Click View Video</a>
                                @else
                                    <span>No video available</span>
                                @endif
                                <input type="file" name="video" class="form-control @error('video') is-invalid @enderror" style="padding:3px 4px;">
                            </div>
                            <div class="form-group col-md-4">
                                <label for="video">OR Youtbe Video:</label>
                                <input value="{{ $product->yvideo ?? old('yvideo') }}" type="text" name="yvideo" class="form-control @error('yvideo') is-invalid @enderror" style="padding:3px 4px;">
                            </div>
                            <div class="form-group col-md-4">
                                <label for="video_thumb">Product Video Thumbnail:</label> @isset($product)<a target="_blank" href="{{asset('uploads/product/video/'.$product->video_thumb)}}">Click View Video Thumbnail</a>@endisset
                                <input type="file" name="video_thumb" class="form-control @error('video_thumb') is-invalid @enderror" style="padding:3px 4px;">
                                @error('video')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div id="product_description" class="form-row mb-5 px-2">
                            <h3 class="col-md-12 border bg-light mt-4 px-3 py-2 rounded">Description</h3>
                            {{-- Shoort Description --}}
                            <div class="form-group col-md-6">
                                <label for="short_description">Short Description:</label>
                                <textarea name="short_description" id="short_description" rows="3" placeholder="Write product short description" class="form-control @error('short_description') is-invalid @enderror" >{{ $product->short_description ?? old('short_description') }}</textarea>
                                @error('short_description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            {{-- Full Description --}}
                            <div class="form-group col-md-6">
                                <label for="full_description">Full Description <span class="text-danger">(*)</span>:</label>
                                <textarea name="full_description" id="full_description" class="form-control">{{$product->full_description??old('full_description')}}</textarea>
                                @error('full_description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div id="product_extra_data" class="form-row mb-5 px-2">
                            <h3 class="col-md-12 border bg-light mt-4 px-3 py-2 rounded">Product Data</h3>
                            {{-- is featured product --}}
                            @if(auth()->user()->role_id != 2)
                            <div class="form-group col-md-4">
                                <label for="is_featured" class="form-label">Is Featured Product:</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="is_featured" id="is_featured" value="1" @isset($product) @if($product->is_featured == 1) checked @endif @endisset>
                                    <label for="is_featured" class="form-check-label">Yes</label>
                                </div>
                                @error('is_featured')
                                    <div class="alert alert-danger" role="alert">{{ $message }}</div>
                                @enderror
                                <br>
                                <label for="vat">Vat Amount %</label>
                                <input type="number" name="vat" id="vat" placeholder="Vat Amount %" class="form-control @error('vat') is-invalid @enderror" value="{{ $product->vat ?? setting('VAT') ?? 0 }}" >
                                @error('vat')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                            @endif

                            {{-- Shipping Charge - Dedicated --}}
                            <div class="form-group col-md-4">
                                <label for="dedicated_shipping_charge">Dedicated Shipping Charge:</label>
                                <input type="number" name="dedicated_shipping_charge" id="dedicated_shipping_charge" placeholder="Dedicated shipping charge" class="form-control @error('dedicated_shipping_charge') is-invalid @enderror" value="{{ $product->dedicated_shipping_charge ?? old('dedicated_shipping_charge') }}" >
                                @error('dedicated_shipping_charge')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                                <small class="text-danger">This charge only applicable while buy now or single order</small>
                            </div>
                            {{-- Shipping duration --}}
                            <div class="form-group col-md-4">
                                <label for="shipping_duration">Shipping Duration:</label>
                                <input type="text" name="shipping_duration" id="shipping_duration" placeholder="e.g Home Delivery <small>Estimate 1/2 days</small>" class="form-control @error('shipping_duration') is-invalid @enderror" value="{{ $product->shipping_duration ?? old('shipping_duration') }}" >
                                @error('shipping_duration')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                            {{-- Unit Qty --}}
                            <div class="form-group col-md-6">
                                <label for="unit_qty">Quantity of unit:</label>
                                <input type="number" name="unit_qty" id="unit_qty" placeholder="Example: 1 KG" class="form-control @error('unit_qty') is-invalid @enderror" value="{{ $product->unit_qty ?? old('unit_qty') }}">
                                @error('unit_qty')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                            {{-- Unit --}}
                            <div class="form-group col-md-6">
                                <label for="unit">Unit type:</label>
                                <select name="unit" id="unit" data-placeholder="Select Unit" class="form-control select2 @error('unit') is-invalid @enderror">
                                    @if(isset($product->unit))
                                    <option value="{{ $product->unit ?? "" }}">{{ $product->unit ?? "Select Unit" }}</option>
                                    @else
                                    <option value="">Select Unit</option>
                                    @endif
                                    <option value="KG">KG</option>
                                    <option value="PCS">PCS</option>
                                    <option value="GM">GM</option>
                                    <option value="LTR">LTR</option>
                                    <option value="DUM">DUM</option>
                                    <option value="CM">CM</option>
                                    <option value="MM">MM</option>
                                    <option value="INC">INCH</option>
                                    <option value="INCH">INCH</option>
                                </select>
                                @error('unit')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            {{-- Warranty --}}
                            <div class="form-group col-md-6">
                                <label for="product_warranty">Warranty:</label>
                                <input type="text" name="product_warranty" id="product_warranty" placeholder="e.g 2 months" class="form-control @error('product_warranty') is-invalid @enderror" value="{{ $product->product_warranty ?? old('product_warranty') }}" >
                                @error('product_warranty')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                            {{-- Return --}}
                            <div class="form-group col-md-6">
                                <label for="product_return">Return:</label>
                                <input type="text" name="product_return" id="product_return" placeholder="e.g withing 2 days" class="form-control @error('product_return') is-invalid @enderror" value="{{ $product->product_return ?? old('product_return') }}" >
                                @error('product_return')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                            {{-- Tags --}}
                            <div class="form-group col-md-6">
                                <label for="tag">Select Tag:</label>
                                <select name="tags[]" id="tag" multiple data-placeholder="Select Tag" class="form-control select2 @error('tags') is-invalid @enderror" >
                                    <option value="">Select Tag</option>
                                    @foreach ($tags as $tag)
                                        <option value="{{$tag->id}}" @isset($product) @foreach($product->tags as $pro_tag) {{$tag->id == $pro_tag->id ? 'selected':''}} @endforeach @endisset>{{$tag->name}}</option>
                                    @endforeach
                                </select>
                                @error('tags')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            {{-- Product Extra Msg --}}
                            <div class="form-group col-md-6">
                                <label for="prdct_extra_msg">Product Extra Message:</label>
                                <input type="text" name="prdct_extra_msg" id="prdct_extra_msg" placeholder="Express Delivery in Dhaka" class="form-control @error('prdct_extra_msg') is-invalid @enderror" value="{{ $product->prdct_extra_msg ?? "" }}">
                                @error('prdct_extra_msg')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div id="product_offer" class="form-row mb-5 px-2">
                            <h3 class="col-md-12 border bg-light mt-4 px-3 py-2 rounded">Offers & Campaign</h3>
                            {{-- Discount Type --}}
                            <div class="form-group col-md-6">
                                <label for="dis_type">Discount Type:</label>
                                <select name="dis_type" id="dis_type" class="form-control @error('dis_type') is-invalid @enderror">
                                    <option value="0" @isset($product) {{$product->dis_type == '0' ? 'selected':''}} @endisset>None</option>
                                    <option value="1" @isset($product) {{$product->dis_type == '1' ? 'selected':''}} @endisset>Flat</option>
                                    <option value="2" @isset($product) {{$product->dis_type == '2' ? 'selected':''}} @endisset>Parcent %</option>
                                </select>
                                @error('dis_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            @isset($product) 
                                @if($product->dis_type == '2' && $product->regular_price > 0)
                                    @php($discount_price=(($product->regular_price - $product->discount_price) / ($product->regular_price ))*100)
                                @else

                                @if($product->discount_price<1)
                                    @php($discount_price='')
                                @else
                                    @php($discount_price=$product->regular_price-$product->discount_price)
                                    @endif
                                @endif
                            @endisset
                            {{-- Discount --}}
                            <div class="form-group col-md-6">
                                <label for="discount_price">Discount:</label>
                                <input step="0.01" type="number" name="discount_price" id="discount_price" placeholder="Enter product discount price" class="form-control @error('discount_price') is-invalid @enderror" value="{{ $discount_price ?? old('discount_price') }}" >
                                @error('discount_price')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                            {{-- Points --}}
                            <div class="form-group col-md-6">
                                <label for="point">Point:</label>
                                <input type="number" name="point" id="point" placeholder="Enter product point" class="form-control @error('point') is-invalid @enderror" >
                                @error('point')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                            {{-- Campaign --}}
                            @if(auth()->user()->role_id != 2)
                            <div class="form-group col-md-6">
                                <label for="category">Select Campaign:</label>
                                <select name="campaigns" id="campaign" data-placeholder="Select Campaign" class="category form-control select2 @error('campaigns') is-invalid @enderror">
                                    <option value="">Select Campaign</option>
                                        @foreach ($campaigns as $campaign)
                                            <option value="{{$campaign->id ?? ''}}"  @isset($product) @if(!empty($campaign_product->first()->campaign_id) && $campaign->id == $campaign_product->first()->campaign_id) selected @endif @endisset> {{ $campaign->name }}</option>
                                        @endforeach
                                    </select>
                                @error('campaigns')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <input type="number" name="campaign_price" id="campaign_price" placeholder="Enter campaign price" class="mt-2 form-control @error('campaign_price') is-invalid @enderror" @isset($product)value="{{  $campaign_product->first()->price ?? old('campaign_price') }}"@else value="{{ old('campaign_price') }}"@endisset >
                                @error('campaign_price')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                            @endif
                            {{-- Size --}}
                            {{-- <div class="form-group col-md-6">
                                <label for="size">Select Size:</label>
                                <select name="sizes[]" id="size" multiple data-placeholder="Select Size" class="form-control select2 @error('sizes') is-invalid @enderror" >
                                    <option value="">Select Size</option>
                                    @foreach ($sizes as $size)
                                        <option value="{{$size->id}}" @isset($product) @foreach($product->sizes as $pro_size) {{$size->id == $pro_size->id ? 'selected':''}} @endforeach @endisset>{{$size->name}}</option>
                                    @endforeach
                                </select>
                                @error('sizes')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div> --}}
                        </div>

                        <div id="product_variant" class="form-row mb-5 px-2">
                            <h3 class="col-md-12 border bg-light mt-4 px-3 py-2 rounded">Variation<br><small class="text-sm">If variable not found try first create the attribute for specific category then select the category from above. Color variation under the media.</small></h3>
                            
                            <div class="{{-- form-group --}} col-md-12">
                                {{-- attributes selection --}}
                                <div id="sho_attributes"></div>
                                {{-- /attributes selection --}}
                            </div>
                        </div>
                        @if(auth()->user()->role_id != 2)
                        <div id="product_book" class="form-row">
                            
                            <h4 class="col-12"> <button style="width: 100%;text-align:left;" type="button" data-toggle="collapse" data-target="#BookOpen"  aria-expanded="true" aria-controls="BookOpen">Specification for book:<i style="float: right;top: 8px;position: relative;" class="fas fa-arrow-down"></i> </button></h4>
                            <div class="form-row col-md-12 spec @if(!empty($product->download_able) && $product->download_able != 1) collapse @endif" id="BookOpen">
                                <div class="form-group col-md-6">
                                    <label for="full_description">Select Author:</label>
                                    <select class="form-control" name="author_id">
                                        <option value="">Select Vendor  </option>
                                        @foreach(App\Models\Author::get(['name','id']) as $author)
                                        <option @isset($product->author_id)@if($product->author_id==$author->id)selected @endif @endisset value="{{$author->id}}">{{$author->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="full_description">PDF file (for read book):</label>
                                    <input type="file" name="pdf">
                                    @isset($product->book_file)
                                        @if (file_exists(public_path('uploads/admin/book/' . $product->book_file)))
                                            <a href="{{ asset('uploads/admin/book/' . $product->book_file) }}" target="_blank">View PDF</a>
                                        @endif
                                    @endisset
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="title">isbn:</label>
                                    <input type="text" name="isbn" id="isbn" placeholder="Write product isbn" class="form-control @error('isbn') is-invalid @enderror" value="{{ $product->isbn ?? old('isbn') }}" >
                                    @error('isbn')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="title">edition:</label>
                                    <input type="text" name="edition" id="edition" placeholder="Write product edition" class="form-control @error('edition') is-invalid @enderror" value="{{ $product->edition ?? old('edition') }}" >
                                    @error('edition')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="title">pages:</label>
                                    <input type="text" name="pages" id="pages" placeholder="Write product edition" class="form-control @error('pages') is-invalid @enderror" value="{{ $product->pages ?? old('pages') }}" >
                                    @error('pages')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="title">country:</label>
                                    <input type="text" name="country" id="country" placeholder="Write product country" class="form-control @error('country') is-invalid @enderror" value="{{ $product->country ?? old('country') }}" >
                                    @error('country')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="title">language:</label>
                                    <input type="text" name="language" id="language" placeholder="Write product language" class="form-control @error('language') is-invalid @enderror" value="{{ $product->language ?? old('language') }}" >
                                    @error('language')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>{{-- /row --}}
            </div>{{-- /card-body --}}
            <div class="card-body">
                <div class="row">
                    @isset($product)
                        @if ($product->downloads->count() < 1)
                            <div class="modal fade" id="modal-default">
                                <div class="modal-dialog modal-xl">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h4 class="modal-title">Add Product Downloadable file</h4>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="form-horizontal">
                                                <div class="card-body">
                                                    <div class="form-group row">
                                                        <label for="inputEmail3" class="col-sm-2 col-form-label">Downloadable Files</label>
                                                        <div class="col-sm-10">
                                                            <div class="card border">
                                                                <div class="card-header">
                                                                    <div class="row">
                                                                        <div class="col-md-4">
                                                                            <strong>Name:</strong>
                                                                        </div>
                                                                        <div class="col-md-4"><strong>File URL:</strong></div>
                                                                    </div>
                                                                </div>
                                                                <div class="card-body px-1 py-2">
                                                                    <div class="row">
                                                                        <div class="col-12" id="increment-file">
                                                                            
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="card-footer">
                                                                    <span id="add-file" class="btn btn-success">Add File</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label for="download_limit" class="col-sm-2 col-form-label">Download Limit</label>
                                                        <div class="col-sm-4">
                                                            <input type="number" class="form-control" id="download_limit" name="download_limit" value="{{$product->download_limit ?? old('download_limit')}}">
                                                        </div>
                                                        <div class="col-sm-6">
                                                            <span>Leave blank for unlimited re-downloads</span>
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label for="download_expire" class="col-sm-2 col-form-label">Download Expire</label>
                                                        <div class="col-sm-4">
                                                            <input type="date" class="form-control" id="download_expire" name="download_expire" value="{{$product->download_expire ?? old('download_expire')}}">
                                                        </div>
                                                        <div class="col-sm-6">
                                                            <span>Enter the number of days before a downlink link expires, or leave blank</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer justify-content-between">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                            {{-- <button type="submit" class="btn btn-primary">Add</button> --}}
                                        </div>
                                    </div>
                                    <!-- /.modal-content -->
                                </div>
                                <!-- /.modal-dialog -->
                            </div>
                        @endif
                    @else
                        <div class="modal fade" id="modal-default">
                            <div class="modal-dialog modal-xl">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h4 class="modal-title">Add Product Downloadable file</h4>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="form-horizontal">
                                            <div class="card-body">
                                                <div class="form-group row">
                                                    <label for="inputEmail3" class="col-sm-2 col-form-label">Downloadable Files</label>
                                                    <div class="col-sm-10">
                                                        <div class="card border">
                                                            <div class="card-header">
                                                                <div class="row">
                                                                    <div class="col-md-4">
                                                                        <strong>Name:</strong>
                                                                    </div>
                                                                    <div class="col-md-4"><strong>File URL:</strong></div>
                                                                </div>
                                                            </div>
                                                            <div class="card-body px-1 py-2">
                                                                <div class="row">
                                                                    <div class="col-12" id="increment-file">
                                                                        
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="card-footer">
                                                                <span id="add-file" class="btn btn-success">Add File</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label for="download_limit" class="col-sm-2 col-form-label">Download Limit</label>
                                                    <div class="col-sm-4">
                                                        <input type="number" class="form-control" id="download_limit" name="download_limit" value="{{$product->download_limit ?? old('download_limit')}}">
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <span>Leave blank for unlimited re-downloads</span>
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label for="download_expire" class="col-sm-2 col-form-label">Download Expire</label>
                                                    <div class="col-sm-4">
                                                        <input type="date" class="form-control" id="download_expire" name="download_expire" value="{{$product->download_expire ?? old('download_expire')}}">
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <span>Enter the number of days before a downlink link expires, or leave blank</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- /.card-body -->
                                        </div>
                                    </div>
                                    <div class="modal-footer justify-content-between">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                        {{-- <button type="submit" class="btn btn-primary">Add</button> --}}
                                    </div>
                                </div>
                                <!-- /.modal-content -->
                            </div>
                            <!-- /.modal-dialog -->
                        </div>
                    @endisset
            </div>
        </form>
    </div>{{-- /.card --}}
    

    @if(isset($product->downloads) && $product->downloads->count() > 0)
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Update Product Download File</h3>
        </div>
        <form action="{{routeHelper('update/product/download')}}"  class="form-horizontal" method="POST" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="product_id" value="{{$product->id}}">
            <div class="card-body">
                <div class="form-group row">
                    <label for="inputEmail3" class="col-sm-2 col-form-label">Downloadable Files</label>
                    <div class="col-sm-10">
                        <div class="card border">
                            <div class="card-header">
                                <div class="row">
                                    <div class="col-md-4">
                                        <strong>Name:</strong>
                                    </div>
                                    <div class="col-md-4"><strong>File URL:</strong></div>
                                </div>
                            </div>
                            <div class="card-body px-1 py-2">
                                <div class="row">
                                    <div class="col-12" id="increment-file">
                                        @isset($product->downloads)
                                            @foreach ($product->downloads as $download)
                                                <div class="row mt-2">
                                                    <div class="col-md-4">
                                                        <input type="text" name="file_name[]" class="form-control" placeholder="Enter file name" value="{{$download->name}}">
                                                    </div>
                                                    <div class="col-md-4">
                                                        <input type="text" name="file_url[]" class="form-control" placeholder="Enter file url" value="{{$download->url}}">
                                                        
                                                    </div>
                                                    <div class="col-md-2">
                                                        <input type="file" name="files[]" class="custom-file">
                                                    </div>
                                                    <div class="col-md-2">
                                                        <input type="hidden" name="ids[]" value="{{$download->id}}">
                                                        <a href="#" id="remove-file" data-id="{{$download->id}}" class="btn btn-danger btn-sm"><i class="fa fa-trash-alt"></i></a>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @endisset
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <span id="add-file" class="btn btn-success">Add File</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="download_limit" class="col-sm-2 col-form-label">Download Limit</label>
                    <div class="col-sm-4">
                        <input type="number" class="form-control" id="download_limit" name="download_limit" value="{{$product->download_limit ?? old('download_limit')}}">
                    </div>
                    <div class="col-sm-6">
                        <span>Leave blank for unlimited re-downloads</span>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="download_expire" class="col-sm-2 col-form-label">Download Expire</label>
                    <div class="col-sm-4">
                        <input type="date" class="form-control" id="download_expire" name="download_expire" value="{{$product->download_expire ?? old('download_expire')}}">
                    </div>
                    <div class="col-sm-6">
                        <span>Enter the number of days before a downlink link expires, or leave blank</span>
                    </div>
                </div>
            </div>
            <!-- /.card-body -->
            <div class="card-footer sticky_btn position-sticky fixed-bottom float-right">
                <button type="submit" class="btn btn-primary">Update</button>
            </div>
        </form>
    </div> 
    @endif
</section>
<!-- /.content -->

@if(auth()->user()->role_id != 2)
<section class="add_attributes_others">
    <div class="bg-light">
        @include('components.product-sidebar')
    </div>
</section>
@endif


@endsection

@push('js')
    <!-- Select2 -->
    <script src="/assets/plugins/select2/js/select2.full.min.js"></script>
    <script src="{{ asset('/assets/plugins/dropify/dropify.min.js') }}"></script>
    <script src="/assets/plugins/summernote/summernote-bs4.min.js"></script>
    <script src="/assets/dist/extra.js"></script>
    
    <script type="text/javascript" src="/assets/plugins/file-uploader/image-uploader.min.js"></script>
    @isset($product)
        @if ($product->downloads->count() < 1)
        <script>
            $(document).on('click', '#download_able', function(e) {
                
                if (this.checked) {
                    $('#modal-default').modal('show')
                }
                else {
                    $('#modal-default').modal('hide')
                }
            })
        </script>
        @endif
    @else
    <script>
        $(document).on('click', '#download_able', function(e) {
            
            if (this.checked) {
                $('#modal-default').modal('show')
            }
            else {
                $('#modal-default').modal('hide')
            }
        })
    </script>
    @endisset
    
    <script>
        $(document).ready(function () {
            $('.select2').select2();
            $('.dropify').dropify();
            $('#full_description').summernote();
            // $('.input-images-1').imageUploader();

            $('#short_description').summernote();
            $('#spec').summernote();
            
            // increment
            $(document).on('click', '#add', function (e) { 
                
                let htmlData = '<div class="input-group mt-2">';
                htmlData += '<input type="file" class="form-control" accept="image/*" name="images[]" required>';
                htmlData += '<select name="imagesc[]">';
                htmlData += $('#imagesc').html();
                htmlData += '</select>';
                htmlData += '<div class="input-group-append" id="remove" style="cursor:context-menu">';
                htmlData += '<span class="input-group-text">Remove</span>';
                htmlData += '</div>';
                htmlData += '</div>';
                $('#increment').append(htmlData);
            });
            // increment
            $(document).on('change', '#select_color', function (e) { 
                let colors = $(this).val();
                var color = colors.split(',');

                let htmlData = '<div class="input-group mt-2">';
                htmlData += ' <input class="form-control" type="hidden" name="colors[]"  readonly value="'+color[1]+'">';
                htmlData += ' <input class="form-control" type="text"    readonly value="'+color[0]+'">';
                htmlData += ' <input class="form-control" type="number" placeholder="extra price" value="0" name="color_prices[]" value="">';
                htmlData += ' <input class="form-control" type="number" placeholder="extra quantity" name="color_quantits[]" value="">';

                htmlData += '<div class="input-group-append" id="remove" style="cursor:context-menu">';
                htmlData += '<span class="input-group-text">Remove</span>';
                htmlData += '</div>';
                htmlData += '</div>';
                $('#increment_color').append(htmlData);
            });
            // remove
            $(document).on('click', '#remove', function(e) {
                $(this).parent().remove();
            });

            // increment file
            $(document).on('click', '#add-file', function (e) {
                let htmlData = '<div class="row mt-2">';
                htmlData += '<div class="col-md-4"><input type="text" name="file_name[]" id="" class="form-control" placeholder="Enter file name"></div>';
                htmlData += '<div class="col-md-4"><input type="text" name="file_url[]" id="" class="form-control" placeholder="Enter file url"></div>';
                htmlData += '<div class="col-md-2"><input type="file" name="files[]" id="" class="custom-file"></div>';
                htmlData += '<div class="col-md-2">';
                htmlData += '<input type="hidden" name="ids[]" value="0">';
                htmlData += '<button type="button" data-id="0" id="remove-file" class="btn btn-danger btn-sm"><i class="fa fa-trash-alt"></i></button></div>';
                htmlData += '</div>';

                $('#increment-file').append(htmlData);
            });

            // remove file
            $(document).on('click', '#remove-file', function(e) {
                e.preventDefault();
                let btn = $(this);
                let id = $(this).data('id');

                if (id == 0) {
                    $(this).parent().parent().remove();
                } 
                else {
                    $.ajax({
                        type: 'GET',
                        url: @if(auth()->user()->desig == 1 && auth()->user()->role_id == 1)'/admin'@else '/vendor' @endif + '/delete/product/download/'+id,
                        dataType: "JSON",
                        beforeSend: function() {
                            $(btn).addClass('disabled');
                        },
                        success: function (response) {
                            $(btn).parent().parent().remove();
                        },
                        complete: function() {
                            $(btn).removeClass('disabled');
                        }
                    });
                }
                
            });


            $(document).on('change', '#category', function() {
                
                var options = document.getElementById('category').selectedOptions;
                var values = Array.from(options).map(({ value }) => value);
                
                $.ajax({
                    type: 'POST',
                    url: @if(auth()->user()->desig == 1 && auth()->user()->role_id == 1)'/admin'@else '/vendor' @endif + '/get/sub-categories',
                    data: {
                        'ids': values,
                        '_token': $('meta[name="csrf-token"]').attr('content'),
                    },
                    dataType: "JSON",
                    success: function (response) {
                        
                        let data = '<option value="">Select Sub Category</option>';
                        $.each(response, function (key, val) { 
                            data += '<option value="'+val.id+'">'+val.name+'</option>';
                            
                        });
                        $('#sub_category').html(data).attr('multiple', true).select2();
                    }
                });
            });
        
            $(document).on('change', '#sub_category', function() {
                
                var options = document.getElementById('sub_category').selectedOptions;
                var values = Array.from(options).map(({ value }) => value);
                
                $.ajax({
                    type: 'POST',
                    url: @if(auth()->user()->desig == 1 && auth()->user()->role_id == 1)'/admin'@else '/vendor' @endif + '/get/mini-categories',
                    data: {
                        'ids': values,
                        '_token': $('meta[name="csrf-token"]').attr('content'),
                    },
                    dataType: "JSON",
                    success: function (response) {
                        
                        let data = '<option value="">Select Mini Category</option>';
                        $.each(response, function (key, val) { 
                            data += '<option value="'+val.id+'">'+val.name+'</option>';
                            
                        });
                        $('#mini_category').html(data).attr('multiple', true).select2();
                    }
                });
            });
            
            $(document).on('change', '#mini_category', function() {
                
                var options = document.getElementById('mini_category').selectedOptions;
                var values = Array.from(options).map(({ value }) => value);
                
                $.ajax({
                    type: 'POST',
                    url: @if(auth()->user()->desig == 1 && auth()->user()->role_id == 1)'/admin'@else '/vendor' @endif + '/get/extra-categories',
                    data: {
                        'ids': values,
                        '_token': $('meta[name="csrf-token"]').attr('content'),
                    },
                    dataType: "JSON",
                    success: function (response) {
                        
                        let data = '<option value="">Select Mini Category</option>';
                        $.each(response, function (key, val) { 
                            data += '<option value="'+val.id+'">'+val.name+'</option>';
                            
                        });
                        $('#extra_category').html(data).attr('multiple', true).select2();
                    }
                });
            });
        });
    </script>
    @isset($product)
        <script>
            function productImages() {
                
                let id = '{!! $product->id !!}';
                // console.log(id);
                $.ajax({
                    type: 'GET',
                    url: '/admin/get/product/image/'+id,
                    dataType: 'JSON',
                    success: function (response) {
                        
                        let preloaded = [];
                        $.each(response, function (key, val) { 
                            preloaded.push({
                                id: val.id,
                                src: '/uploads/product/'+val.name
                            });
                        });

                        $('.input-images-1').imageUploader({
                            preloaded: preloaded,
                            imagesInputName: 'photos',
                            preloadedInputName: 'old'
                        });
                    }
                });
            }
            productImages();
            function attributes(){
                var options = document.getElementById('category').selectedOptions;
                var values = Array.from(options).map(({ value }) => value);
                var product_id = $('#id').val();
                
                $.ajax({
                    type: 'POST',
                    url: '/admin/get/attributes',
                    data: {
                        'ids': values,
                        'product_id': product_id,
                        '_token': $('meta[name="csrf-token"]').attr('content'),
                    },
                    dataType: "JSON",
                    success: function (response) {
                        $('#sho_attributes').html(response);
                    }
                });
            }
            attributes();
            $(document).on('change', '#category', function() {
                
                var options = document.getElementById('category').selectedOptions;
                var values = Array.from(options).map(({ value }) => value);
                var product_id = $('#id').val();
                $.ajax({
                    type: 'POST',
                    url: @if(auth()->user()->desig == 1 && auth()->user()->role_id == 1)'/admin'@else '/vendor' @endif + '/get/attributes',
                    data: {
                        'ids': values,
                        'product_id': product_id,
                        '_token': $('meta[name="csrf-token"]').attr('content'),
                    },
                    dataType: "JSON",
                    success: function (response) {
                        $('#sho_attributes').html(response);
                    }
                });
            });
        </script>
        @else
        <script>
                $(document).on('change', '#category', function() {
                
                var options = document.getElementById('category').selectedOptions;
                var values = Array.from(options).map(({ value }) => value);
                
                $.ajax({
                    type: 'POST',
                    url: @if(auth()->user()->desig == 1 && auth()->user()->role_id == 1)'/admin'@else '/vendor' @endif + '/get/attributes',
                    data: {
                        'ids': values,
                        '_token': $('meta[name="csrf-token"]').attr('content'),
                    },
                    dataType: "JSON",
                    success: function (response) {
                        $('#sho_attributes').html(response);
                    }
                });
            });
        </script>
    @endisset
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/js/bootstrap-colorpicker.min.js"></script>
    <script>
        $('#ncolor').colorpicker();

        // Dicount required while change discount type
        $(document).on('change', '#dis_type', function(e) {
            // Check if the selected value is not equal to 0
            if ($(this).val() != "0") {
                // Make discount_price input required
                $('#discount_price').prop('required', true);
            } else {
                // Make discount_price input not required
                $('#discount_price').prop('required', false);
            }
        });
    </script>
@endpush