@extends('admin.layouts.app')
@section('title', 'Add Product')
@section('sidebar_content')
    <div class="box no-shadow box-bordered border-light" id="image">

        <h5 class="pro-img-head">Product Image</h5>


        <div class="form-group box-footer">
            <input type="file" class="dropify" name="image"
                {{ $data != null ? 'data-default-file = ' . asset($data->image) : '' }}>
            <span id="imageerror" class="d-none error-span "></span>


        </div>

    </div>
    <div class="box no-shadow box-bordered border-light">
        <h5 class="pro-img-head">Product Gallery</h5>
        <input type="hidden" id="productimages"
            value="{{ $data ? ($data->images ? json_encode($data->images) : '') : '' }}">
        <div class="file-loading">
            <input id="image-file" name="input-ficons-5[]" multiple type="file">
        </div>

    </div>
@endsection
@section('content')
    <div class="container-full">
        <div class="content-header">
            <div class="d-flex align-items-center">
                <div class="mr-auto">
                    <h3 class="page-title">{{ $data == null ? 'Add' : 'Update ' }} Product
                        {{ $data == null ? '' : '#' . $data->id }}</h3>
                    <div class="d-inline-block align-items-center">
                        <nav>
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">
                                    <a href="#"><i class="mdi mdi-home-outline">Product Management</i></a>
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">
                                    {{ $data == null ? 'Add' : 'Update ' }} Product</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
        <section class="content">
            <div class="row">
                <div class="col-lg-12 col-12">
                    <div class="box">
                        <div class="box-header with-border">
                            <h4 class="box-title">{{ $data == null ? 'Upload' : 'Update ' }} Product Details</h4>
                        </div>
                        <div class="box-body">

                            <!-- /.box-header -->
                            <form class="form product-form" method="post"
                                action="{{ $data == null ? route('product.store') : route('product.update', $data->id) }}"
                                enctype="multipart/form-data" id="productform" id="file-upload">
                                @csrf
                                {{ $data != null ? method_field('PUT') : method_field('POST') }}
                                <div class="form-body">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="font-weight-700 font-size-16">Product Title</label>

                                                <input type="text" id="name" name="name"
                                                    value="{{ $data == null ? old('name') : $data->name }}"
                                                    class="form-control" placeholder="Product Title" required>
                                                <span id="nameerror" class="d-none error-span "></span>
                                            </div>
                                        </div>
                                        @php
                                            $category = App\Models\Category::all();
                                        @endphp
                                        <!--/span-->
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="font-weight-700 font-size-16">Category</label>
                                                <select class="form-control" id="category_id" name="category_id"
                                                    data-placeholder="Choose a Category" tabindex="1">
                                                    @foreach ($category as $item)
                                                        <option
                                                            {{ $data != null ? ($data->category_id == $item->id ? 'selected' : '') : '' }}
                                                            value="{{ $item->id }}">{{ $item->name }}</option>
                                                    @endforeach

                                                </select>
                                                <span id="categoryerror" class="d-none error-span "></span>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="font-weight-700 font-size-16">Discount</label>
                                                <div class="input-group">
                                                    <div class="input-group-addon"><i class="ti-cut"></i></div>
                                                    <input type="number" id="discount" name="discount" step="0.01"
                                                        value="{{ $data == null ? old('discount') ?? 0 : $data->discount }}"
                                                        class="form-control" placeholder="Type '50' for 50%" max="100"
                                                        min="0">
                                                    <span id="discounterror" class="d-none error-span "></span>
                                                </div>
                                            </div>
                                        </div>
                                        <!--/span-->
                                    </div>
                                    <!--/row-->
                                    <!--/row-->
                                    <div class="row" style="opacity: 0; height: 0;">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="font-weight-700 font-size-16">Price</label>
                                                <div class="input-group">
                                                    <div class="input-group-addon"><i class="ti-money"></i></div>

                                                    <input type="number" id="price" name="price" step="0.01"
                                                        value="{{ $data == null ? old('price') : $data->price }}"
                                                        class="form-control" placeholder="270.00">
                                                    <span id="priceerror" class="d-none error-span "></span>


                                                </div>
                                            </div>
                                        </div>
                                        <!--/span-->

                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="font-weight-700 font-size-16">Stock (in units)</label>
                                                <div class="input-group">
                                                    <div class="input-group-addon"><i class="ti-cut"></i></div>
                                                    <input type="number" id="stock" name="stock" step="0.01"
                                                        value="{{ $data == null ? old('discount') : $data->stock }}"
                                                        class="form-control" placeholder="10">
                                                    <span id="stockerror" class="d-none error-span "></span>
                                                </div>
                                            </div>
                                        </div>
                                        <!--/span-->
                                    </div>

                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="font-weight-700 font-size-16">Trending Product</label>
                                                <div class="input-group">
                                                    <div class="input-group-addon"><i class="ti-cut"></i></div>
                                                    <select name="trending" class="form-control" id="trending">
                                                        <option value="1"
                                                            {{ $data != null ? ($data->trending == 1 ? 'selected' : '') : '' }}>
                                                            Yes</option>
                                                        <option value="0"
                                                            {{ $data != null ? ($data->trending == 0 ? 'selected' : '') : '' }}>
                                                            No</option>
                                                    </select>
                                                    <span id="trendingerror" class="d-none error-span "></span>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="font-weight-700 font-size-16">Deal</label>
                                                <div class="input-group">
                                                    <div class="input-group-addon"><i class="ti-cut"></i></div>
                                                    <select name="deals" class="form-control" id="deal">
                                                        <option value="1"
                                                            {{ $data != null ? ($data->deals == 1 ? 'selected' : '') : '' }}>
                                                            Yes</option>
                                                        <option value="0"
                                                            {{ $data != null ? ($data->deals == 0 ? 'selected' : '') : '' }}>
                                                            No</option>
                                                    </select>
                                                    <span id="dealerror" class="d-none error-span "></span>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="font-weight-700 font-size-16">Plant Type</label>
                                                <div class="input-group">
                                                    <select name="plant_type" class="form-control" id="plant_type">
                                                        <option value="">Select Plant Type</option>
                                                        <option value="Seed"
                                                            {{ $data != null ? ($data->plant_type == 'Seed' ? 'selected' : '') : '' }}>
                                                            Seed</option>
                                                        <option value="Plant"
                                                            {{ $data != null ? ($data->plant_type == 'Plant' ? 'selected' : '') : '' }}>
                                                            Plant</option>
                                                        <option value="Root"
                                                            {{ $data != null ? ($data->plant_type == 'Root' ? 'selected' : '') : '' }}>
                                                            Root</option>
                                                        <option value="Bulb"
                                                            {{ $data != null ? ($data->plant_type == 'Bulb' ? 'selected' : '') : '' }}>
                                                            Bulb</option>
                                                        <option value="Sapling/Seedling"
                                                            {{ $data != null ? ($data->plant_type == 'Sapling/Seedling' ? 'selected' : '') : '' }}>
                                                            Sapling/Seedling</option>
                                                        <option value="Bare Root"
                                                            {{ $data != null ? ($data->plant_type == 'Bare Root' ? 'selected' : '') : '' }}>
                                                            Bare Root</option>
                                                        <option value="Container Grown/Potted"
                                                            {{ $data != null ? ($data->plant_type == 'Container Grown/Potted' ? 'selected' : '') : '' }}>
                                                            Container Grown/Potted</option>
                                                        <option value="Burlapped"
                                                            {{ $data != null ? ($data->plant_type == 'Burlapped' ? 'selected' : '') : '' }}>
                                                            Burlapped</option>
                                                        <option value="Deciduous"
                                                            {{ $data != null ? ($data->plant_type == 'Deciduous' ? 'selected' : '') : '' }}>
                                                            Deciduous</option>
                                                        <option value="Specimen"
                                                            {{ $data != null ? ($data->plant_type == 'Specimen' ? 'selected' : '') : '' }}>
                                                            Specimen</option>
                                                        <option value="Ornamental"
                                                            {{ $data != null ? ($data->plant_type == 'Ornamental' ? 'selected' : '') : '' }}>
                                                            Ornamental</option>
                                                        <option value="Fruit Tree"
                                                            {{ $data != null ? ($data->plant_type == 'Fruit Tree' ? 'selected' : '') : '' }}>
                                                            Fruit Tree</option>
                                                        <option value="Shade Tree"
                                                            {{ $data != null ? ($data->plant_type == 'Shade Tree' ? 'selected' : '') : '' }}>
                                                            Shade Tree</option>
                                                    </select>
                                                    <span id="plant_type" class="d-none error-span "></span>
                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                    <!--/row-->
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label class="font-weight-700 font-size-16">Featured Product</label>
                                                <div class="radio-list">
                                                    <label class="radio-inline p-0 mr-10">
                                                        <div class="radio radio-info">
                                                            <input type="radio" name="featured" id="featured_yes"
                                                                value="1"
                                                                {{ $data != null ? ($data->featured == 1 ? 'checked' : '') : '' }}>
                                                            <label for="featured_yes">Yes</label>
                                                        </div>
                                                    </label>
                                                    <label class="radio-inline">
                                                        <div class="radio radio-info">
                                                            <input type="radio" name="featured" id="featured_no"
                                                                value="0"
                                                                {{ $data != null ? ($data->featured == 0 ? 'checked' : '') : '' }}>
                                                            <label for="featured_no">No</label>
                                                        </div>
                                                    </label>

                                                </div>
                                            </div>
                                        </div>
                                        <!--/span-->

                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label class="font-weight-700 font-size-16">Status</label>
                                                @role('admin')
                                                    <div class="radio-list">
                                                        <label class="radio-inline p-0 mr-10">
                                                            <div class="radio radio-info">
                                                                <input type="radio" name="status" id="radio1"
                                                                    value="1"
                                                                    {{ $data != null ? ($data->status == 1 ? 'checked' : '') : '' }}>
                                                                <label for="radio1">Published</label>

                                                            </div>
                                                        </label>
                                                        <label class="radio-inline">
                                                            <div class="radio radio-info">
                                                                <input type="radio" name="status" id="radio2"
                                                                    value="0"
                                                                    {{ $data != null ? ($data->status == 0 ? 'checked' : '') : '' }}>
                                                                <label for="radio2">Draft</label>
                                                            </div>
                                                        </label>
                                                    </div>
                                                    @elserole('vendor')
                                                    <br>
                                                    <input type="hidden" value="0" name="status" />
                                                    <span
                                                        class="badge badge-primary">{{ $data ? ($data->status == 1 ? 'Published' : 'Draft') : 'Pending' }}</span>
                                                @endrole

                                            </div>
                                        </div>
                                        <!--/span-->

                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label class="font-weight-700 font-size-16">Organic</label>
                                                <div class="radio-list">
                                                    <label class="radio-inline p-0 mr-10">
                                                        <div class="radio radio-info">
                                                            <input type="radio" name="organic" id="organic_yes"
                                                                value="1"
                                                                {{ $data != null ? ($data->organic == 1 ? 'checked' : '') : '' }}>
                                                            <label for="organic_yes">Yes</label>
                                                        </div>
                                                    </label>
                                                    <label class="radio-inline">
                                                        <div class="radio radio-info">
                                                            <input type="radio" name="organic" id="organic_no"
                                                                value="0"
                                                                {{ $data != null ? ($data->organic == 0 ? 'checked' : '') : '' }}>
                                                            <label for="organic_no">No</label>
                                                        </div>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label class="font-weight-700 font-size-16">Hierloom</label>
                                                <div class="radio-list">
                                                    <label class="radio-inline p-0 mr-10">
                                                        <div class="radio radio-info">
                                                            <input type="radio" name="hierloom" id="hierloom_yes"
                                                                value="1"
                                                                {{ $data != null ? ($data->hierloom == 1 ? 'checked' : '') : '' }}>
                                                            <label for="hierloom_yes">Yes</label>
                                                        </div>
                                                    </label>
                                                    <label class="radio-inline">
                                                        <div class="radio radio-info">
                                                            <input type="radio" name="hierloom" id="hierloom_no"
                                                                value="0"
                                                                {{ $data != null ? ($data->hierloom == 0 ? 'checked' : '') : '' }}>
                                                            <label for="hierloom_no">No</label>
                                                        </div>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">

                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="font-weight-700 font-size-16">Planting Season</label>
                                                <select name="planting_season" class="form-control" id="planting_season">
                                                    <option value="">Select Planting Season</option>
                                                    <option value="Summer"
                                                        {{ $data != null ? ($data->planting_season == 'Summer' ? 'selected' : '') : '' }}>
                                                        Summer</option>
                                                    <option value="Fall"
                                                        {{ $data != null ? ($data->planting_season == 'Fall' ? 'selected' : '') : '' }}>
                                                        Fall</option>
                                                    <option value="Spring"
                                                        {{ $data != null ? ($data->planting_season == 'Spring' ? 'selected' : '') : '' }}>
                                                        Spring</option>
                                                    <option value="Winter"
                                                        {{ $data != null ? ($data->planting_season == 'Winter' ? 'selected' : '') : '' }}>
                                                        Winter</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="font-weight-700 font-size-16">Lifecycle</label>
                                                <select name="lifecycle" class="form-control" id="lifecycle">
                                                    <option value="">Select Lifecycle</option>
                                                    <option value="Annual"
                                                        {{ $data != null ? ($data->lifecycle == 'Annual' ? 'selected' : '') : '' }}>
                                                        Annual</option>
                                                    <option value="Perennials"
                                                        {{ $data != null ? ($data->lifecycle == 'Perennials' ? 'selected' : '') : '' }}>
                                                        Perennials</option>
                                                    <option value="Biennials"
                                                        {{ $data != null ? ($data->lifecycle == 'Biennials' ? 'selected' : '') : '' }}>
                                                        Biennials</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="font-weight-700 font-size-16">Mature Height</label>
                                                <input type="text" name="mature_height" class="form-control"
                                                    placeholder="eg. 10-15 ft."
                                                    value="{{ $data == null ? old('mature_height') : $data->mature_height }}">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="font-weight-700 font-size-16">Mature Width</label>
                                                <input type="text" name="mature_width" class="form-control"
                                                    placeholder="eg. 8-12 ft."
                                                    value="{{ $data == null ? old('mature_width') : $data->mature_width }}">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="font-weight-700 font-size-16">Sunlight</label>
                                                <input type="text" name="sunlight" class="form-control"
                                                    placeholder="eg. Full Sun"
                                                    value="{{ $data == null ? old('sunlight') : $data->sunlight }}">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="font-weight-700 font-size-16">Growth Rate</label>
                                                <input type="text" name="growth_rate" class="form-control"
                                                    placeholder="eg. Moderate Growing"
                                                    value="{{ $data == null ? old('growth_rate') : $data->growth_rate }}">
                                            </div>
                                        </div>
                                        <!-- <div class="col-md-4">
                                                                                                                                            <div class="form-group">
                                                                                                                                                <label class="font-weight-700 font-size-16">Harvest Time</label>
                                                                                                                                                <input type="text" name="harvest_time" class="form-control" placeholder="eg. Summer" value="{{ $data == null ? old('harvest_time') : $data->harvest_time }}">
                                                                                                                                            </div>
                                                                                                                                        </div> -->
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="font-weight-700 font-size-16">Year to Bear</label>
                                                <input type="text" name="year_to_bear" class="form-control"
                                                    placeholder="eg. Can Fruit the 1st Year!"
                                                    value="{{ $data == null ? old('year_to_bear') : $data->year_to_bear }}">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="font-weight-700 font-size-16">Does Not Ship To</label>
                                                <input type="text" name="does_not_ship_to" class="form-control"
                                                    placeholder="eg. AL, AR, AZ, CA, CO, ID"
                                                    value="{{ $data == null ? old('does_not_ship_to') : $data->does_not_ship_to }}">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="font-weight-700 font-size-16">Grows Well In Zones</label>
                                                <input type="text" name="grows_well" class="form-control"
                                                    placeholder="eg. 6-9 outdoors"
                                                    value="{{ $data == null ? old('grows_well') : $data->grows_well }}">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="font-weight-700 font-size-16">Growing Zones</label>
                                                <input type="text" name="growing_zones" class="form-control"
                                                    placeholder="eg. hardy down to 0℉"
                                                    value="{{ $data == null ? old('growing_zones') : $data->growing_zones }}">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label class="font-weight-700 font-size-16">Product
                                                    Short Description</label>
                                                <textarea id="short_desc" name="short_desc" class="editor" required>{{ $data == null ? old('short_desc') : $data->short_desc }}</textarea>
                                                <span id="short_descerror" class="d-none error-span"></span>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label class="font-weight-700 font-size-16">Supplies</label>
                                                <textarea id="supplies" name="supplies" class="editor">{{ $data == null ? old('supplies') : $data->supplies }}</textarea>
                                                <span id="supplieserror" class="d-none error-span"></span>

                                            </div>
                                        </div>
                                    </div>
                                    <!--/row-->
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label class="font-weight-700 font-size-16">Product Long
                                                    Description</label>
                                                <textarea id="description" name="description" class="editor" required>{{ $data == null ? old('description') : $data->description }}</textarea>
                                                <span id="descriptionerror" class="d-none error-span"></span>

                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label class="font-weight-700 font-size-16">Pollination Info</label>
                                                <textarea id="pollination" name="pollination" class="editor">{{ $data == null ? old('pollination') : $data->pollination }}</textarea>
                                                <span id="pollination" class="d-none error-span"></span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label class="font-weight-700 font-size-16">Planting & Care</label>
                                                <textarea id="planting" name="planting" class="editor">{{ $data == null ? old('planting') : $data->planting }}</textarea>
                                                <span id="planting" class="d-none error-span"></span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label class="font-weight-700 font-size-16">Related Resources</label>
                                                <textarea id="related" name="related" class="editor">{{ $data == null ? old('related') : $data->related }}</textarea>
                                                <span id="related" class="d-none error-span"></span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label class="font-weight-700 font-size-16">Ingredients</label>
                                                <textarea id="ingredients" name="ingredients" class="editor">{{ $data == null ? old('ingredients') : $data->ingredients }}</textarea>
                                                <span id="ingredientserror" class="d-none error-span"></span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label class="font-weight-700 font-size-16">FAQs</label>
                                                <textarea id="faqs" name="faqs" class="editor">{{ $data == null ? old('faqs') : $data->faqs }}</textarea>
                                                <span id="faqserror" class="d-none error-span"></span>
                                            </div>
                                        </div>
                                    </div>

                                    <hr>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div id="variation-repeater" class="repeater">
                                                <h5>Variation</h5>
                                                <hr>
                                                <div class="items" data-group="variation">
                                                    @if ($data)
                                                        @if ($data->variation->isNotEmpty())
                                                            @foreach ($data->variation as $variation)
                                                                @php
                                                                    $attr = App\Models\AttributeValue::find(
                                                                        $variation->pivot->attribute_value_id,
                                                                    );

                                                                @endphp
                                                                <div class="form-group">
                                                                    <div class="row">
                                                                        <div class="col-md-3 mb-3">
                                                                            <label for="attrbuite">Attribute</label>
                                                                            <input type="text"
                                                                                value="{{ $attr->attribute->name }}"
                                                                                class="form-control" disabled>
                                                                        </div>
                                                                        <div class="col-md-3 mb-3">
                                                                            <label for="attrbuite">Attribute Value</label>
                                                                            <input type="text"
                                                                                value="{{ $attr->name }}"
                                                                                class="form-control" disabled>
                                                                        </div>

                                                                        <div class="col-md-3 mb-3">
                                                                            <label for="price-variation">Price</label>
                                                                            <input type="number" step="0.01"
                                                                                name="old_variation[price][{{ $variation->pivot->id }}]"
                                                                                value="{{ $variation->pivot->price }}"
                                                                                class="form-control">
                                                                        </div>
                                                                        <div class="col-md-3 mb-3">
                                                                            <label for="stock">Stock</label>
                                                                            <input type="number"
                                                                                name="old_variation[stock][{{ $variation->pivot->id }}]"
                                                                                value="{{ $variation->pivot->stock }}"
                                                                                class="form-control">
                                                                        </div>
                                                                        <div class="col-md-12">
                                                                            <div
                                                                                class="d-flex justify-content-end align-items-center h-full">
                                                                                <button type="button"
                                                                                    class="waves-effect waves-light btn btn-sm btn-rounded btn-primary-light mb-5 del"
                                                                                    onclick="deleteVariation($(this).parent().parent().parent().parent(),{{ $variation->pivot->id }})">
                                                                                    <i class="ti-trash"></i>
                                                                                    Delete</button>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <hr>
                                                                <hr>
                                                            @endforeach
                                                        @endif

                                                    @endif
                                                    <div class="repeater">
                                                        <div class="items">
                                                            <div class="form-group">
                                                                <div class="row">
                                                                    <div class="col-md-3 mb-3">
                                                                        <label for="attrbuite">Attribute</label>
                                                                        <select name="variation[attrbuite][]"
                                                                            class="attr form-control select2"
                                                                            onchange="attributeChange(this)" required>
                                                                            <option value=null hidden selected>Select
                                                                                Attribute
                                                                            </option>
                                                                            @foreach ($attributes as $attribute)
                                                                                <option value="{{ $attribute->id }}">
                                                                                    {{ $attribute->name }}</option>
                                                                            @endforeach
                                                                        </select>
                                                                    </div>
                                                                    <div class="col-md-3 mb-3">
                                                                        <label for="price">Attribute Value</label>
                                                                        <select name="variation[attrbuite_values][]"
                                                                            class="form-control select2">
                                                                            <option value=null hidden>Select Attribute Value
                                                                            </option>
                                                                        </select>
                                                                    </div>
                                                                    <div class="col-md-3 mb-3">
                                                                        <label for="price">Price</label>
                                                                        <input type="number" name="variation[price][]"
                                                                            step="0.01" value="0"
                                                                            class="form-control" required>
                                                                    </div>
                                                                    <div class="col-md-3 mb-3">
                                                                        <label for="stock">Stock</label>
                                                                        <input type="number" name="variation[stock][]"
                                                                            class="form-control" value="0">
                                                                    </div>
                                                                    <div class="col-md-12">
                                                                        <div
                                                                            class="d-flex justify-content-end align-items-center h-full">
                                                                            <button type="button"
                                                                                class="waves-effect waves-light btn btn-sm btn-rounded btn-primary-light mb-5 del">
                                                                                <i class="ti-trash"></i> Delete
                                                                            </button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                                <button type="button"
                                                    class="btn btn-primary repeater-add-btn">Add</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-actions mt-10">
                                    <button type="button" id="saveSubmit" class="btn btn-primary">
                                        <i class="fa fa-check"></i> Save /
                                        Add</button>
                                    <button type="button" class="btn btn-danger">Cancel</button>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
        </section>
    </div>

@endsection

@push('css')
    <link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/css/fileinput.min.css" media="all"
        rel="stylesheet" type="text/css" />

    <style>
        .file-caption .input-group {
            display: none;
        }

        .dropzone {
            background: white;
            border-radius: 5px;
            border: 2px dashed #fd683e;
            border-image: none;
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
        }

        h5.pro-img-head {
            padding: 10px 10px;
            margin: 0;
        }
    </style>
@endpush

@push('js')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.min.css"
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/js/fileinput.min.js"></script>
    <script>
        var productImages = $('#productimages').val().length > 0 ? JSON.parse($('#productimages').val()) : []
        console.log(productImages);
        var urls = [],
            initialPreviewConfig = [],
            initialPreviewAsData = false;
        if (Object.keys(productImages).length > 0) {
            productImages.forEach(function(obj, index) {

                urls.push(window.location.origin + '/' + obj);

                initialPreviewConfig.push({
                    caption: obj.split('/').slice(-1)[0],
                    downloadUrl: window.location.origin + '/' + obj,
                    url: "{{ route('product.delete_img') }}",
                    key: '{{ $data ? $data->id : '0' }}',
                    extra: {
                        _token: $('meta[name="csrf-token"]').attr('content'),
                        path: obj
                    }
                })
            });

            initialPreviewAsData = true

        }



        var formData = new FormData();
        $("#image-file").fileinput({
            showUpload: false,
            uploadUrl: "{{ $data == null ? route('product.store') : route('product.update', $data->id) }}",
            theme: 'fa',
            initialPreview: urls,
            initialPreviewAsData: initialPreviewAsData,
            initialPreviewConfig: initialPreviewConfig,
            uploadAsync: false,
            browseOnZoneClick: true,
            initialPreviewShowDelete: true,
            dropZoneEnabled: true,
            overwriteInitial: false,
            maxFileSize: 20000000,
            maxFilesNum: 20,
            uploadExtraData: function() {
                return {
                    created_at: $('.created_at').val()
                };
            }
        }).on('filebatchselected', function(event, files) {

            $.each(files, function(index, value) {
                formData.append('productgalleries[]', value['file'])
            });
        });
    </script>
    <script>
        $(document).ready(function() {

            $('#saveSubmit').click(function(e) {
                removeAllErrors();

                var variationCount = 0;
                // Count existing variations
                variationCount += $('#variation-repeater > .items[data-group="variation"] > .form-group')
                    .length;
                // Count new variations with selected attributes
                $('#variation-repeater .repeater .items .form-group select[name="variation[attrbuite][]"]')
                    .each(function() {
                        if ($(this).val() && $(this).val() !== 'null') {
                            variationCount++;
                        }
                    });

                if (variationCount === 0) {
                    swal("ERROR!",
                        "At least one variation should be there before saving or updating product",
                        "error");
                    return;
                }

                var productForm = new FormData($('#productform').get(0));
                formData.forEach(function(value, key) {
                    productForm.append('gallery[]', value)
                });

                if ($('.dropify')[0].files[0]) {
                    productForm.append('image', $('.dropify')[0].files[0])
                }
                $.ajax({

                    xhr: function() {
                        var xhr = new window.XMLHttpRequest();
                        xhr.upload.addEventListener("progress", function(evt) {
                            loaderShow()
                        }, false);
                        return xhr;
                    },
                    method: 'post',
                    processData: false,
                    contentType: false,
                    cache: false,

                    data: productForm,
                    enctype: 'multipart/form-data',
                    url: $('#productform').attr('action'),
                }).done(function(response) {
                    loaderHide()
                    if ($('input[name="_method"]').val() == 'POST') {
                        $('#image-file').fileinput('clear');
                        $(".dropify").trigger("click");
                    }
                    swal("SUCCESS!", "Product Added Successfully", "success");


                }).fail(function(jqxhr, textStatus, error) {

                    $.each(jqxhr.responseJSON.errors, function(key, value) {
                        $('#' + key).addClass('error-control');
                        $("#" + key + 'error').text(value[0]);
                        $("#" + key + 'error').removeClass('d-none');
                    });
                    loaderHide()
                    swal("ERROR!", jqxhr.responseJSON.message, "error");
                });
            });

            $('.repeater .repeater-add-btn').click(function() {
                var entryClone = $(this).siblings('.items').first().children().last().clone();

                $(entryClone).find('.dropify-wrapper').remove();
                var newFileInput = $('<input>', {
                    type: 'file',
                    class: 'dropify',
                    name: 'variation[image][]'
                });
                $(entryClone).find('button.del').attr('onclick',
                    '$(this).parent().parent().parent().remove()')
                $(entryClone).find('.dropify-wrapper-section').append(newFileInput);


                $(this).siblings('.items').first().append(entryClone);

                newFileInput.dropify({
                    messages: {
                        default: 'Drag and drop a file here or click',
                        replace: 'Drag and drop or click to replace',
                        remove: 'Remove',
                        error: 'Ooops, something wrong happened.'
                    }
                });

                $(entryClone).find('.select2-container').remove();
                $(entryClone).find('.select2').removeClass('select2-hidden-accessible');
                $('.select2').select2();

                $(entryClone).find('.file-input').remove();

            });

        })
    </script>

    <script type="text/javascript">
        function attributeChange(elem) {
            let value = $(elem).find(':selected').val();
            let attr = $(elem).parent().next().find('select[name="variation[attrbuite_values][]"]');
            $.ajax({
                url: "{{ route('get.attributes') }}",
                method: 'GET',
                data: {
                    value: value
                },
                success: function(response) {

                    if (response.status) {
                        attr.html('');
                        response.data.forEach(item => {
                            let option = new Option(item.name, item.id);
                            attr.append(option);
                        });
                    } else {
                        swal("ERROR!", "This attribute does not have attribute values", "error");
                    }
                },
                error: function(xhr) {
                    console.error('AJAX Error Response:', xhr.responseJSON);
                    swal("ERROR!", "An error occurred while fetching attribute values", "error");
                }
            });
        }
    </script>
@endpush