@extends('layouts.seller.app')
@php
    $images = '';
    $assignedCategory = [];
    $assignedType = [];
    $assignedApplication = [];
    $assignedIndustry = [];

    if (!empty($product)) {
        $images = @$product->getimages ? @$product->getimages->groupby('section') : '';
        $assignedCategory = !empty(@$product->assignedCategory())
            ? @$product->assignedCategory()->pluck('category_id')->toArray()
            : [];
        $assignedCas = !empty(@$product->assignedCas()) ? @$product->assignedCas()->pluck('cas_id')->toArray() : [];
        $assignedType = !empty(@$product->assignedType())
            ? @$product->assignedType()->pluck('product_type_id')->toArray()
            : [];
        $assignedApplication = !empty(@$product->assignedApplication())
            ? @$product->assignedApplication()->pluck('application_id')->toArray()
            : [];
        $assignedIndustry = !empty(@$product->assignedIndustry())
            ? @$product->assignedIndustry()->pluck('industry_id')->toArray()
            : [];
    }
@endphp
@section('content')
    <div class="cw-content">
        <div class="container-fluid">
            <div class="cw-content-inner">
                <div class="cw-content-body">
                    <div class="cw-block-head cw-block-head-sm">
                        <div class="cw-block-between d-flex justify-content-between align-items-center">
                            <div class="cw-block-head-content">
                                <h3 class="cw-block-title page-title mb-0 d-flex align-items-center">
                                    {{ !empty(@$product->id) ? 'Edit' : 'Add' }} Product
                                    @if (!empty(@$product->id))
                                        - {{ @$product->name }}
                                        <span class="badge bg-primary rounded-pill ms-2" style="font-size: 12px">
                                            {{ @$product->product_sku }}
                                        </span>
                                        <span class="badge bg-success rounded-pill ms-2"
                                            style="font-size: 12px;display:none" id="autosavebadge">
                                            <i class="bi bi-loading"></i> Auto Saving
                                        </span>
                                    @endif
                                </h3>
                                <div class="cw-block-des text-soft mt-1">
                                    <p>{{ !empty(@$product->id) ? 'Edit this ' : 'Add a' }} product.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="add-product" id="smartTab">
                        <div class="d-lg-flex justify-content-lg-between align-items-center">
                            <div class="nav nav-tabs" role="tablist">
                                <div class="mob-horizontal-scrollbar-div">
                                    <button class="tab-link" data-bs-toggle="pill" data-bs-target="#details" type="button"
                                        role="tab">Details</button>
                                    <button class="tab-link" data-bs-toggle="pill" data-bs-target="#packaging"
                                        type="button" role="tab">Packaging</button>
                                    <button class="tab-link" data-bs-toggle="pill" data-bs-target="#specifications"
                                        type="button" role="tab">Specifications</button>
                                    {{--
                                    <button class="tab-link" data-bs-toggle="pill" data-bs-target="#availability" type="button"
                                        role="tab">Availability</button>
                                    <button class="tab-link" data-bs-toggle="pill" data-bs-target="#requirements" type="button"
                                        role="tab">Requirements</button>
                                    --}}
                                    <button class="tab-link" data-bs-toggle="pill" data-bs-target="#media" type="button"
                                        role="tab">Images/Videos</button>
                                    <button class="tab-link d-none" data-bs-toggle="pill" data-bs-target="#other"
                                        type="button" role="tab">Other</button>
                                    <button class="tab-link d-none" data-bs-toggle="pill" data-bs-target="#custom"
                                        type="button" role="tab">Custom fields</button>
                                    {{--
                                    <button class="tab-link" data-bs-toggle="pill" data-bs-target="#shipping" type="button"
                                        role="tab">Shipping</button>
                                    <button class="tab-link" data-bs-toggle="pill" data-bs-target="#export" type="button"
                                        role="tab">Export</button>
                                    --}}
                                    <button class="tab-link" data-bs-toggle="pill" data-bs-target="#document" type="button"
                                        role="tab">Documents</button>
                                </div>
                            </div>
                            @if (@$product->id)
                                <div class="d-flex mb-3 product-enable-div">
                                    <span class="product-enable-label me-4">Enable</span>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input product-switch productstatus" type="checkbox"
                                            {{ $product->status == 1 && $product->draft == 1 ? 'checked' : '' }}
                                            data-id="{{ $product->uuid }}"
                                            data-status="{{ $product->status == 1 && $product->draft == 1 ? 0 : 1 }}"
                                            data-link="{{ route('seller.product.updatestatus', ['id' => $product->uuid]) }}">

                                    </div>
                                </div>
                            @endif
                        </div>

                        <div class="tab-content">
                            @include('layouts.seller.flash')
                            <!-- Product Tab -->
                            <div class="tab-pane" id="details" role="tabpanel">
                                <form action="{{ route('seller.product.store') }}" method="post"
                                    enctype="multipart/form-data" id="productForm">
                                    <input type="hidden" name="pid" id="pid" class="pid"
                                        value="{{ @$product->uuid }}" />
                                    <input type="hidden" name="business_id" id="bid" class="bid"
                                        value="{{ Common::getBusiness() }}" />
                                    @csrf
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-lg-3 mb-3">
                                                    <label class="form-label">Product Name</label>
                                                    <input type="text" name="name" id="name"
                                                        value="{{ ucfirst(@$product->name) }}" maxlength="50"
                                                        class="form-control name" placeholder="Product Name" autofocus required>
                                                </div>
                                                <div class="col-lg-3 mb-3">
                                                    <label class="form-label">Product Code / SKU</label>
                                                    <input type="text" name="product_sku" maxlength="25" id="product_sku"
                                                        value="{{ @$product->product_sku }}"
                                                        class="form-control product_sku" placeholder="Product Code / SKU"
                                                        required>
                                                </div>
                                                <div class="col-lg-3 mb-3">
                                                    <label class="form-label">Product CAS Numbers</label>
                                                    <select name="cas_number[]" id="cas_number"
                                                        class="form-control form-select cas_number" multiple=true>
                                                        <option value="">Select CAS Numbers</option>
                                                        @foreach (Common::casnumber('', @$assignedCas) as $cas)
                                                            <option value="{{ @$cas->id }}"
                                                                {{ !empty(@$assignedCas) && in_array(@$cas->id, @$assignedCas) ? 'selected="selected"' : '' }}>
                                                                {{ $cas->cas }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-lg-3 mb-3">
                                                    <label class="form-label">UN Number</label>
                                                    <input type="text" name="un_number" id="un_number"
                                                        value="{{ @$product->un_number }}" class="form-control un_number"
                                                        placeholder="UN number" minlength="4" maxlength="4">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="mb-3">
                                                        <label class="form-label">Short Description</label>
                                                        <textarea name="sort_description" maxlength="100" id="sort_description" cols="30" rows="2"
                                                            class="form-control sort_description">{{ @$product->sort_description }}</textarea>
                                                    </div>
                                                    <div class="mb-3">
                                                        <label class="form-label">Description</label>
                                                        <textarea name="description" id="description" maxlength="1000" cols="30" rows="5"
                                                            class="form-control description">{{ @$product->description }}</textarea>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="row">
                                                        <div class="col-lg-6 mb-3">
                                                            <label class="form-label">Brand</label>
                                                            <input type="text" name="brand" maxlength="20"
                                                                id="brand"
                                                                value="{{ @$product->brand }}"class="form-control brand"
                                                                placeholder="Brand">
                                                        </div>
                                                        <div class="col-lg-6 mb-3">
                                                            <label class="form-label">Grade</label>
                                                            <input type="text" name="grade" maxlength="20"
                                                                id="grade" class="form-control grade"
                                                                value="{{ @$product->grade }}" placeholder="Grade">
                                                        </div>
                                                        <div class="col-lg-6 mb-3">
                                                            <label class="form-label">Tax Class</label>
                                                            <select name="tax_class" id="tax_class"
                                                                class="form-control form-select tax_class">
                                                                <option selected disabled>Select Tax Class</option>
                                                                <option value="1"
                                                                    {{ @$product->tax_class == '1' ? 'selected="true"' : '' }}>
                                                                    Taxable</option>
                                                                <option value="0"
                                                                    {{ @$product->tax_class == '0' ? 'selected="true"' : '' }}>
                                                                    Non-Taxable</option>
                                                            </select>
                                                        </div>
                                                        {{--
                                                        <div class="col-lg-6 mb-3">
                                                            <label class="form-label">Product Type</label>
                                                            <select name="product_type" id="product_type"
                                                                class="form-control form-select product_type">
                                                                <option selected disabled>Select Product Type</option>
                                                                <option value="physical"
                                                                    {{ @$product->product_type == 'physical' ? 'selected="true"' : '' }}>
                                                                    Physical</option>
                                                                <option value="downloadable"
                                                                    {{ @$product->product_type == 'downloadable' ? 'selected="true"' : '' }}>
                                                                    Downloadable</option>
                                                            </select>
                                                        </div>
                                                        --}}
                                                        <div class="col-lg-6 mb-3">
                                                            <label class="form-label">This product is a collection or
                                                                Kit</label>
                                                            <select name="product_collection_kit"
                                                                id="product_collection_kit"
                                                                class="form-control form-select product_collection_kit">
                                                                <option selected disabled>Select</option>
                                                                <option value="yes"
                                                                    {{ @$product->product_collection_kit == 'yes' ? 'selected="true"' : '' }}>
                                                                    Yes</option>
                                                                <option value="no"
                                                                    {{ @$product->product_collection_kit == 'no' ? 'selected="true"' : '' }}>
                                                                    No</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-lg-3 mb-3">
                                                    <label class="form-label">Product Category</label>
                                                    <select name="category_id[]" id="category_id"
                                                        class="form-control form-select category_id" multiple=true>
                                                        <option value="">Select Product category
                                                        </option>
                                                        @foreach ($categories as $category)
                                                            <option value="{{ @$category->id }}"
                                                                {{ !empty(@$assignedCategory) && in_array(@$category->id, @$assignedCategory) ? 'selected="selected"' : '' }}>
                                                                {{ $category->name }}</option>
                                                            @if (count($category->childs) > 0)
                                                                @include('seller.category.subcategories', [
                                                                    'subcategories' => $category->childs,
                                                                    'parent' => $category->name,
                                                                    'product' => $product,
                                                                    'assignedCategory' => $assignedCategory,
                                                                ])
                                                            @endif
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-lg-3 mb-3">
                                                    <label class="form-label">Product Type</label>
                                                    <select name="product_type_id[]" id="type_id"
                                                        class="form-control form-select type_id" multiple=true>
                                                        <option value="">Select Product Type</option>
                                                        @foreach (Common::productType(true) as $type)
                                                            <option value="{{ @$type->id }}"
                                                                {{ !empty(@$assignedType) && in_array(@$type->id, @$assignedType) ? 'selected="selected"' : '' }}>
                                                                {{ $type->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-lg-3 mb-3">
                                                    <label class="form-label">Product Application</label>
                                                    <select name="application_id[]" id="application_id"
                                                        class="form-control form-select application_id" multiple=true>
                                                        <option value="">Select Product Application</option>
                                                        @foreach (Common::productApplication() as $application)
                                                            <option value="{{ @$application->id }}"
                                                                {{ !empty(@$assignedApplication) && in_array(@$application->id, @$assignedApplication) ? 'selected="selected"' : '' }}>
                                                                {{ $application->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-lg-3 mb-3">
                                                    <label class="form-label">Product Industry</label>
                                                    <select name="industry_id[]" id="industry_id"
                                                        class="form-control form-select industry_id" multiple=true>
                                                        <option value="">Select Product Industry</option>
                                                        @foreach (Common::productIndustry(true) as $industry)
                                                            <option value="{{ @$industry->id }}"
                                                                {{ !empty(@$assignedIndustry) && in_array(@$industry->id, @$assignedIndustry) ? 'selected="selected"' : '' }}>
                                                                {{ $industry->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-lg-3 mb-3">
                                                    <label class="form-label">Meta Tag Keywords</label>
                                                    <input type="text" name="meta_key" id="meta_key"
                                                        value="{{ @$product->meta_key }}" class="form-control meta_key"
                                                        placeholder="Meta Tag Keywords">
                                                </div>
                                                <div class="col-lg-3 mb-3">
                                                    <label class="form-label">Meta Tag Description</label>
                                                    <input type="text" maxlength="100" name="meta_description"
                                                        id="meta_description" value="{{ @$product->meta_description }}"
                                                        class="form-control meta_description"
                                                        placeholder="Meta Tag Description">
                                                </div>
                                                <div class="col-lg-3 mb-3">
                                                    <label class="form-label">Product Tags</label>
                                                    @php
                                                        $ptags = !empty(@$product->product_tag)
                                                            ? explode(',', @$product->product_tag)
                                                            : '';
                                                    @endphp
                                                    <select name="product_tag[]" id="product_tag"
                                                        class="form-control form-select product_tag" multiple='multiple'>
                                                        <option value="" disabled>Add Product Tag</option>
                                                        @if (!empty($ptags))
                                                            @foreach ($ptags as $tags)
                                                                <option value="{{ $tags }}" selected='selected'>
                                                                    {{ $tags }}</option>
                                                            @endforeach
                                                        @endif
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="d-flex">
                                                <input type="submit" class="btn-formpage-submit">
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <!-- Product Packaging Tab -->
                            <div class="tab-pane show" id="packaging" role="tabpanel">
                                <div class="card">
                                    <div class="card-header d-flex justify-content-between align-items-center">
                                        <label class="form-label mb-0">Your Added Packages</label>
                                        <a data-bs-toggle="modal" data-bs-target="#addpackaging" class="btn-cw pe-3">
                                            <i class="bi bi-plus"></i>
                                            Packaging
                                        </a>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            @if (!empty($product) && @$product->getpackage->count())
                                                @php $pk=0; @endphp
                                                @foreach ($product->getpackage as $package)
                                                    <div class="col-lg-3">
                                                        <div class="card-2 border-1">
                                                            <!-- Title Header -->
                                                            <div
                                                                class="card-header d-flex justify-content-between align-items-center">
                                                                <p class="card-header-title">Type:
                                                                    {{ ucfirst($package->packaging_type) ?: '--' }}</p>
                                                                <div class="dropdown">
                                                                    <a class="text-muted" href="javascript:void(0);"
                                                                        role="button" data-bs-toggle="dropdown"
                                                                        aria-haspopup="true" aria-expanded="false"><i
                                                                            class="bi bi-three-dots-vertical"></i></a>
                                                                    <div class="dropdown-menu dropdown-menu-end">
                                                                        <a href="javascript:void(0);"
                                                                            data-ppid="{{ $package->uuid }}"
                                                                            data-pid="{{ $package->product_id }}"
                                                                            class="dropdown-item p-2 getPackageInfo">Edit</a>
                                                                        <a href="{{ route('seller.packaging.destroy', ['id' => $package->uuid]) }}"
                                                                            class="dropdown-item p-2 recdelete">Delete</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!-- Middle -->
                                                            <div class="card-body">
                                                                <div class="business-address">
                                                                    <div class="">
                                                                        <div class="">
                                                                            @php
                                                                                $ad = !empty($package->shipping_length)
                                                                                    ? $package->shipping_length . 'x'
                                                                                    : '';
                                                                                $ad .= !empty($package->shipping_width)
                                                                                    ? $package->shipping_width . 'x'
                                                                                    : '';
                                                                                $ad .= !empty($package->shipping_height)
                                                                                    ? $package->shipping_height . 'x'
                                                                                    : '';
                                                                            @endphp
                                                                            <p class="mb-0">
                                                                                <span class="text-muted fw-bold">
                                                                                    Size:</span>
                                                                                {{ trim($ad, 'x') }}
                                                                                {{ $package->measurement_units == 'metric' ? '(cm)' : '(inch)' }}
                                                                            </p>
                                                                            <p class="mb-0">
                                                                                <span class="text-muted fw-bold"> Shipping
                                                                                    Weight:</span>
                                                                                {{ is_numeric($package->shipping_weight) ? number_format((float) $package->shipping_weight, 2) . ' ' . ($package->measurement_units == 'metric' ? 'Kg' : 'Lb') : $package->shipping_weight }}
                                                                            </p>
                                                                            <p class="mb-0">
                                                                                <span class="text-muted fw-bold">
                                                                                    Price:</span>
                                                                                ${{ number_format($package->price, 2) }}
                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!-- Footer -->
                                                            <div class="card-footer px-2">
                                                                <div>
                                                                    <a class="manage-package-link"
                                                                        onclick="getManagePackageInfo('Availability', '{{ $package->uuid }}')">
                                                                        Manage Availability
                                                                        @if ($package->getPackageAvailability)
                                                                            <i
                                                                                class="manage-package-icon bi bi-check-circle-fill"></i>
                                                                        @endif
                                                                    </a>
                                                                    <a onclick="getManagePackageInfo('Requirements', '{{ $package->uuid }}')"
                                                                        class="manage-package-link"> Manage
                                                                        Requirements
                                                                        @if ($package->getPackageRequirement)
                                                                            <i
                                                                                class="manage-package-icon bi bi-check-circle-fill"></i>
                                                                        @endif
                                                                    </a>
                                                                    <a data-bs-toggle="modal"
                                                                        data-bs-target="#add_package_media"
                                                                        class="manage-package-link"
                                                                        data-pcid="{{ $package->uuid }}"> Manage
                                                                        Images
                                                                        @if ($package->getFiles('packageimage')->count())
                                                                            <i
                                                                                class="manage-package-icon bi bi-check-circle-fill"></i>
                                                                        @endif
                                                                    </a>

                                                                    <a data-bs-toggle="modal"
                                                                        data-bs-target="#add_package_document"
                                                                        class="manage-package-link"
                                                                        data-pcid="{{ $package->uuid }}"> Manage
                                                                        Documents
                                                                        @if ($package->getFiles('packagedocument')->count())
                                                                            <i
                                                                                class="manage-package-icon bi bi-check-circle-fill"></i>
                                                                        @endif
                                                                    </a>

                                                                    <a onclick="getManagePackageInfo('Shipping', '{{ $package->uuid }}')"
                                                                        class="manage-package-link"> Manage
                                                                        Shipping
                                                                        @if ($package->getPackageShipping)
                                                                            <i
                                                                                class="manage-package-icon bi bi-check-circle-fill"></i>
                                                                        @endif
                                                                    </a>
                                                                    <a onclick="getManagePackageInfo('Exports', '{{ $package->uuid }}')"
                                                                        class="manage-package-link"> Manage
                                                                        Exports
                                                                        @if ($package->getPackageExport)
                                                                            <i
                                                                                class="manage-package-icon bi bi-check-circle-fill"></i>
                                                                        @endif
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    @php $pk++; @endphp
                                                @endforeach
                                            @else
                                                <div class="text-center w-50">
                                                    <div class="card dashed-card">
                                                        <div class="card-body">
                                                            <i class="bi bi-geo-alt-fill no-info-i"></i>
                                                            <h5 class="no-info-title">Add Your Packaging</h5>
                                                            <p class="no-info-p py-2">You can add multiple packaging of
                                                                your product</p>
                                                            <a data-bs-toggle="modal" data-bs-target="#addpackaging"
                                                                class="btn-cw">
                                                                <i class="bi bi-plus"></i> Packaging
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Product specifications Tab -->
                            <div class="tab-pane show" id="specifications" role="tabpanel">
                                <form action="{{ route('seller.product.option') }}" method="post"
                                    enctype="multipart/form-data" id="productOption">
                                    <input type="hidden" name="product_id" id="pid" class="pid"
                                        value="{{ @$product->uuid }}" />
                                    @csrf
                                    <div class="card">
                                        <div class="card-body">
                                            <p class="text-danger small">
                                                Please include all attributes that distinguishes this product from other
                                                products with the same name
                                            </p>
                                            @php $o=0; @endphp
                                            @if (!empty($product) && @$product->getoptions->count())
                                                @foreach ($product->getoptions as $options)
                                                    <div id="multirows">
                                                        <div class="row">
                                                            <div class="col-lg-4 mb-3">
                                                                @if ($o < 1)
                                                                    <label class="form-label">Attribute Name</label>
                                                                @endif
                                                                <input type="text" class="form-control attribute_name"
                                                                    value="{{ $options->attribute_name }}" maxlength="20"
                                                                    name="attribute_name[]" id="attribute_name"
                                                                    placeholder="Attribute Name" required>
                                                            </div>
                                                            <div class="col-lg-4 mb-3">
                                                                @if ($o < 1)
                                                                    <label class="form-label">Value</label>
                                                                @endif
                                                                <input type="text" class="form-control attribute_value"
                                                                    value="{{ $options->attribute_value }}"
                                                                    maxlength="50" name="attribute_value[]"
                                                                    id="attribute_value" placeholder="Attribute Value"
                                                                    required>
                                                            </div>
                                                            <div class="col-lg-3 mb-3">
                                                                @if ($o < 1)
                                                                    <label class="form-label">Description</label>
                                                                @endif
                                                                <input type="text"
                                                                    class="form-control attribute_description"
                                                                    value="{{ $options->attribute_description }}"
                                                                    name="attribute_description[]" maxlength="100"
                                                                    id="attribute_description"
                                                                    placeholder="Attribute Description">
                                                            </div>
                                                            @if ($o == 0)
                                                                <div class="col-lg-1 mb-3">
                                                                    <label class="form-label d-block">Action</label>
                                                                    <a onclick="appendoption()" href="javascript:void(0)"
                                                                        class="btn btn-primary"><i
                                                                            class="bi bi-plus"></i></a>
                                                                </div>
                                                            @endif
                                                            @if ($o > 0)
                                                                <div class="col-lg-1 mb-3">
                                                                    <a href="javascript:void(0)"
                                                                        class="btn btn-danger rounded btnSlipRemove"
                                                                        onclick="removeoption(this)">
                                                                        <i class="bi bi-dash"></i>
                                                                    </a>
                                                                </div>
                                                            @endif
                                                        </div>
                                                    </div>
                                                    @php $o++; @endphp
                                                @endforeach
                                            @else
                                                <div id="multirows">
                                                    <div class="row">
                                                        <div class="col-lg-4 mb-3">
                                                            <label class="form-label">Attribute Name</label>
                                                            <input type="text" class="form-control attribute_name"
                                                                name="attribute_name[]" id="attribute_name"
                                                                maxlength="20" placeholder="Attribute Name" required>
                                                        </div>
                                                        <div class="col-lg-4 mb-3">
                                                            <label class="form-label">Value</label>
                                                            <input type="text" class="form-control attribute_value"
                                                                name="attribute_value[]" id="attribute_value"
                                                                maxlength="50" placeholder="Attribute Value" required>
                                                        </div>
                                                        <div class="col-lg-3 mb-3">
                                                            <label class="form-label">Description</label>
                                                            <input type="text"
                                                                class="form-control attribute_description" maxlength="100"
                                                                name="attribute_description[]" id="attribute_description"
                                                                placeholder="Attribute Description">
                                                        </div>
                                                        <div class="col-lg-1 mb-3">
                                                            <label class="form-label d-block">Action</label>
                                                            <a onclick="appendoption()" href="javascript:void(0)"
                                                                class="btn btn-primary"><i class="bi bi-plus"></i></a>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif

                                            <div>
                                                <button type="submit" class="btn-formpage-submit">Save</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>

                            @php
                                $galleries = !empty(@$product->getimages)
                                    ? @$product->getimages
                                        ->whereNull('deleted_at')
                                        ->whereIn('section', ['mainimage', 'gallery'])
                                        ->sortBy('order_number')
                                    : '';
                                $documents = !empty(@$product->getimages)
                                    ? @$product->getimages->whereNull('deleted_at')->where('section', 'document')
                                    : '';
                            @endphp
                            <div class="tab-pane show" id="media" role="tabpanel">
                                <div class="card">
                                    <div class="card-header d-flex justify-content-between align-items-center">
                                        <label class="form-label mb-0">Product Gallery
                                            <span class="upload-file-msg"> (Click and Drag to Order)</span>
                                        </label>
                                        <a data-bs-toggle="modal" data-bs-target="#add_media" class="btn-cw pe-3">
                                            <i class="bi bi-plus"></i>
                                            Upload Product Images
                                        </a>
                                    </div>
                                    <div class="card-body">
                                        <div class="mb-3">
                                            @if (!empty($galleries) && count($galleries) > 0)
                                                <div id="gallerydiv" class="row gallerydiv"
                                                    data-pid="{{ @$product->uuid }}">
                                                    @foreach ($galleries as $key => $gallery)
                                                        <div id="{{ $gallery->uuid }}"
                                                            class="galleryimg col-lg-2 col-6 mb-2 gallerydiv{{ $gallery->uuid }} {{ $key == 0 ? 'active' : '' }}">
                                                            <div class="gallery-item">
                                                                <div class="gallery-option dropdown">
                                                                    <div class="d-flex justify-content-end">
                                                                        <div
                                                                            class="d-flex justify-content-between align-items-center w-100">
                                                                            <span class="img-primary">
                                                                                <span
                                                                                    class="text-img-primary">Primary</span>
                                                                            </span>
                                                                            <a class="text-muted"
                                                                                href="javascript:void(0);"
                                                                                data-bs-toggle="dropdown"
                                                                                aria-haspopup="true"
                                                                                aria-expanded="false"><i
                                                                                    class="bi bi-three-dots-vertical"></i></a>
                                                                            <div class="dropdown-menu dropdown-menu-end">
                                                                                <a href="javascript:void(0);"
                                                                                    data-id="{{ $gallery->uuid }}"
                                                                                    data-pid="{{ @$product->uuid }}"
                                                                                    class="dropdown-item p-2 rmimg">Delete</a>
                                                                                @if ($gallery->section != 'mainimage')
                                                                                    <a href="javascript:void(0);"
                                                                                        data-id="{{ $gallery->uuid }}"
                                                                                        data-pid="{{ @$product->uuid }}"
                                                                                        class="dropdown-item primaryimg p-2">Primary</a>
                                                                                @endif
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="gallery-container">
                                                                    <img src="{{ @$gallery->path }}" id="gallerypreview"
                                                                        alt="" class="gallery-img"
                                                                        onerror="src='/assets/img/noimg.jpg'"
                                                                        title="{{ $gallery->section == 'mainimage' ? 'Primary Image' : '' }}">
                                                                </div>

                                                            </div>
                                                            {{--
                                                                <div class="gallery-container">
                                                                    <img src="{{ @$gallery->path }}"
                                                                        id="gallerypreview" alt=""
                                                                        class="gallery-img"
                                                                        onerror="src='/assets/img/noimg.jpg'" title="{{ ($gallery->section == 'mainimage') ? 'Primary Image' : ''}}">
                                                                        <button type="button" class="btn-close rmimg" data-id="{{$gallery->id}}" data-pid="{{$gallery->product_id}}" aria-label="Close"></button>
                                                                </div>
                                                            --}}
                                                        </div>
                                                    @endforeach
                                                </div>
                                            @else
                                                <div class="nouploaded-media-message">
                                                    No images uploaded,
                                                    <a data-bs-toggle="modal" data-bs-target="#add_media"
                                                        class="text-primary fw-bold">Click Here</a> to upload product
                                                    images
                                                </div>
                                            @endif
                                        </div>
                                        <div class="">
                                            {{--
                                            <div class="row">
                                                <div class="col-lg-8">
                                                    <div class="mb-3">
                                                        <label class="form-label">Primary Image</label>
                                                        <div class="imgpreview-container">
                                                            <img src="{{ !empty($images['mainimage']) ? @$images['mainimage']->first()->path : '' }}"
                                                                data-path="{{ !empty($images['mainimage']) ? @$images['mainimage']->first()->path : '' }}"
                                                                id="mainimgpreview" alt="" class="imgpreview-img"
                                                                onerror="src='/assets/img/noimg.jpg'">
                                                        </div>
                                                        <input type="file" name="mainimage" id="mainimage"
                                                            data-prvid="mainimgpreview" class="form-control mainimage"
                                                            onchange="readURL(this);" accept="image/jpeg, image/png">
                                                        <span class="upload-file-msg">Recommended size: 500 x 500 |
                                                            Supported File types - PNG, JPG</span>
                                                    </div>
                                                </div>
                                            </div>
                                            --}}

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Product Shipping Tab -->
                            <div class="tab-pane show" id="shipping" role="tabpanel"></div>
                            <!-- Product Export Tab -->
                            <div class="tab-pane show" id="export" role="tabpanel"></div>
                            <!-- Product document Tab -->

                            <div class="tab-pane show" id="document" role="tabpanel">
                                <form action="{{ route('seller.product.docs') }}" method="post"
                                    enctype="multipart/form-data" id="productDocs">
                                    <input type="hidden" name="product_id" id="pid" class="pid"
                                        value="{{ @$product->uuid }}" />
                                    <input type="hidden" name="bid" id="bid" class="bid"
                                        value="{{ @$product->business_id }}" />
                                    @csrf
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-xl-4 col-lg-4 mb-3 order-lg-2">
                                                    @if (!empty($documents))
                                                        <div class="row g-2">
                                                            <label class="form-label">Uploded Documents</label>
                                                            @php
                                                                $extArr = [
                                                                    'pdf' => 'pdf',
                                                                    'doc' => 'word',
                                                                    'docx' => 'word',
                                                                    'xls' => 'excel',
                                                                    'xlsx' => 'excel',
                                                                    'ppt' => 'ppt',
                                                                    'pptx' => 'ppt',
                                                                    'txt' => 'text',
                                                                    'rtf' => 'text',
                                                                ];
                                                                $extA = [
                                                                    'pdf',
                                                                    'doc',
                                                                    'docx',
                                                                    'xls',
                                                                    'xlsx',
                                                                    'ppt',
                                                                    'pptx',
                                                                ];
                                                            @endphp
                                                            @foreach ($documents as $document)
                                                                <div class="col-lg-2 col-6 mb-1">
                                                                    <a href="{{ @$document->path }}" target="_blank"
                                                                        title="{{ @$document->title }}">
                                                                        @if (in_array($document->extension, $extA))
                                                                            <i class="icon bi bi-file-{{ $extArr[$document->extension] }}"
                                                                                style="font-size:40px;"></i>
                                                                        @else
                                                                            <i class="icon bi bi-file-text"
                                                                                style="font-size:40px;"></i>
                                                                        @endif
                                                                        {{ @$document->title }}
                                                                    </a>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    @endif
                                                </div>
                                                <div class="col-xl-8 col-lg-8 mb-3 order-lg-1">
                                                    <div class="row">
                                                        <div class="mb-3">
                                                            <label class="form-label">Upload document</label>
                                                        </div>
                                                        <div class="col-3">
                                                            <select id="documenttype" class="form-control form-select">
                                                                <option value="MSDS">MSDS Sheet</option>
                                                                <option value="other">Other</option>
                                                            </select>
                                                        </div>
                                                        <div class="col-5 documenttitlediv" style="display:none;">
                                                            <input type="text" name="title" id="documenttitle"
                                                                placeholder="Document Title" value="MSDS"
                                                                class="form-control documenttitle" required>
                                                        </div>
                                                        <div class="col-4">
                                                            <input type="file" name="document" id="document"
                                                                accept="application/pdf" class="form-control mainimage"
                                                                onchange="readURL(this);" required>
                                                            <span class="upload-file-msg">Supported File types - PDF</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div>
                                                <button type="submit" class="btn-formpage-submit">Save</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Modal -->
    <div class="modal fade" id="add_product_modal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static"
        data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5">Add a new product</h1>
                </div>
                <form action="{{ route('seller.product.quickcreate') }}" method="POST">
                    @csrf
                    <div class="modal-body add-product">
                        <div class="row">
                            <div class="col-lg-12 mb-3">
                                <label class="form-label">Product Name</label>
                                <input type="text" name="name" id="name" class="form-control name"
                                    placeholder="Product Name" maxlength="100" autofocus required>
                            </div>
                            <div class="col-lg-12 mb-3">
                                <label class="form-label">Product Code / SKU</label>
                                <input type="text" name="product_sku" id="product_sku"
                                    class="form-control product_sku" placeholder="Product Code / SKU" required>
                            </div>
                        </div>
                        @if (!Common::getBusiness())
                            <div class="alert-inline-error">Please add your business details to start listing your products
                            </div>
                        @endif
                    </div>
                    <div class="modal-footer justify-content-start">
                        <button type="submit" class="btn-formpage-submit"
                            {{ !Common::getBusiness() ? 'disabled' : '' }}>Save</button>
                        <a href="{{ route('seller.products') }}" class="btn-formpage-cancel">Cancel</a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="add_media" tabindex="-1" aria-hidden="true" data-bs-backdrop="static"
        data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered modal-fullscreen">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5"></h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('seller.product.images') }}" method="post" enctype="multipart/form-data"
                        id="productImages" class="add-product">
                        @csrf
                        <input type="hidden" name="product_id" id="pid" class="pid"
                            value="{{ @$product->uuid }}" />
                        <input type="hidden" name="bid" id="bid" class="bid"
                            value="{{ @$product->business_id }}" />

                        <label class="form-label d-lg-flex justify-content-between">
                            Upload Product Images
                            <span class="upload-file-msg">Recommended size: 500 x 500 | Supported File types - PNG,
                                JPG</span>
                        </label>
                        <div class="fileupload-container media-modal">
                            <input type="file" name="gallery[]" id="gallery" class="gallery fileuploadgallery" multiple
                                style="height:200px" data-allow-reorder="true" />
                        </div>

                        <div class="row">
                            <div class="col-lg-4 mb-3">
                                <label class="form-label">YouTube Video URL (Optional)</label>
                                <input type="text" name="videourl" id="videourl" class="form-control videourl"
                                    value="{{ @$product->videourl }}">
                            </div>
                        </div>

                        <div>
                            <button type="submit" class="btn-formpage-submit gallerysave">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Pacakge Image -->
    <div class="modal fade" id="add_package_media" tabindex="-1" aria-hidden="true" data-bs-backdrop="static"
        data-bs-keyboard="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5">Manage Package Images</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('seller.package.images') }}" method="post" enctype="multipart/form-data"
                        id="PackagesImages" class="add-product">
                        @csrf
                        <input type="hidden" name="product_id" id="pid" class="pid"
                            value="{{ @$product->uuid }}" />
                        <input type="hidden" name="packages_id" id="pcid" class="pcid"
                            value="{{ @$product->uuid }}" />
                        <input type="hidden" name="bid" id="bid" class="bid"
                            value="{{ @$product->business_id }}" />

                        <label class="form-label d-lg-flex justify-content-between">
                            Upload Package Images
                            <span class="upload-file-msg">Recommended size: 500 x 500 | Supported File types - PNG,
                                JPG</span>
                        </label>
                        <div class="fileupload-container">
                            <input type="file" name="packageImage" id="packageimage" class="fileupload packageimage"
                                style="height:100px" data-allow-reorder="true" />
                        </div>

                        <div class="row">
                            <div class="col-lg-12 mb-3">
                                <label class="form-label" style="display:none;">Uploaded Images</label>
                                <div class="uploadedPackageImage"></div>
                            </div>
                        </div>

                        <div>
                            <button type="button" class="btn-formpage-submit savepackageimage">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Pacakge Document -->
    <div class="modal fade" id="add_package_document" tabindex="-1" aria-hidden="true" data-bs-backdrop="static"
        data-bs-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5">Manage Documents</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('seller.package.images') }}" method="post" enctype="multipart/form-data"
                        id="packagesDocument" class="add-product">
                        @csrf
                        <input type="hidden" name="product_id" id="pid" class="pid"
                            value="{{ @$product->uuid }}" />
                        <input type="hidden" name="packages_id" id="pcdid" class="pcdid"
                            value="{{ @$product->uuid }}" />
                        <input type="hidden" name="bid" id="bid" class="bid"
                            value="{{ @$product->business_id }}" />

                        <div class="row">
                            <div class="mb-1">
                                <label class="form-label">Upload documents</label>
                            </div>
                            <div class="col-12 packagedoctitlediv">
                                <input type="text" name="title" id="packagedoctitle" placeholder="Document Title"
                                    value="" class="form-control packagedoctitle">
                            </div>
                            <div class="col-12 mt-2">
                                <input type="file" name="packagedoc" id="packagedoc" accept="application/pdf"
                                    class="form-control mainimage" onchange="readURL(this);">
                                <span class="upload-file-msg">Supported File types - PDF</span>
                            </div>
                            <div class="col-12 mt-2">
                                <label class="form-label doclabel" style="display:none;">Uploaded Documents</label>
                                <div class="uploadedPackageDoc"></div>
                            </div>
                        </div>
                        <div class="mt-3">
                            <button type="button" class="btn-formpage-submit savepacdocument">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Packaging modal -->
    <div class="modal fade" id="productManageModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static"
        data-bs-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5">Manage <span id="productManageModalTitle"></span></h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="productManageModalBody">
                </div>
            </div>
        </div>
    </div>

    <!-- Add Warehouse Address -->
    @include('seller.users.add-address')
    <!-- Add Packaging -->
    @include('seller.products.add-package')
    <!-- Clone structure -->
    <div style="display:none">
        <div class="row" id="multirow">
            <div class="col-lg-4 mb-3 appendedOption">
                <input type="text" class="form-control attribute_name" maxlength="20" name="attribute_name[]"
                    placeholder="Attribute Name" required>
            </div>
            <div class="col-lg-4 mb-3 appendedOption">
                <input type="text" class="form-control attribute_value" maxlength="50" name="attribute_value[]"
                    placeholder="Attribute Name" required>
            </div>
            <div class="col-lg-3 mb-3 appendedOption">
                <input type="text" class="form-control attribute_description" maxlength="100"
                    name="attribute_description[]" placeholder="Attribure Description">
            </div>
            <div class="col-lg-1 mb-3">
                <a href="javascript:void(0)" class="btn btn-danger rounded btnSlipRemove" onclick="removeoption(this)">
                    <i class="bi bi-dash"></i>
                </a>
            </div>
        </div>
    </div>
@endsection
@push('css')
    <link href="/assets/dashboard/css/filepond.css" rel="stylesheet" />
    <link href="{{ asset('assets/dashboard/css/timepicki.css') }}" rel="stylesheet" type="text/css" />
@endpush
@push('js')
    <script src="{{ asset('assets/dashboard/js/form-validation.js') }}"></script>
    <script src="/assets/dashboard/js/filepond.js"></script>
    <script src="{{ asset('assets/dashboard/js/timepicki.js') }}"></script>
    <script src="{{ asset('assets/dashboard/js/save-tabs.js') }}"></script>
    <script src="{{ asset('assets/dashboard/js/lib/jquery-ui.js') }}"></script>
    <script src="{{ asset('assets/dashboard/js/lib/jquery.ui.touch-punch.min.js') }}"></script>
    <script src="{{ asset('assets/dashboard/js/product_seller.js') }}"></script>
    <script>
        $(document).ready(function () {
            var autofocusElement = $('input[autofocus]').filter(function () {
            return $(this).val().length > 0;
            }).first();

            if (autofocusElement.length) {
            var autofocuslength = autofocusElement.val().length;
            autofocusElement[0].setSelectionRange(autofocuslength, autofocuslength);
            autofocusElement.focus();
            }
        });
    </script>
@endpush