@extends('admin.main')

@section('main')
<form class="form d-flex flex-column flex-lg-row" action="{{ route('admin.products.edit.action', $productData->id) }}" method="POST">
    @csrf
    <input type="hidden" name="prod_id" value="{{ $productData->id }}">
    <!--begin::Aside column-->
    <div class="d-flex flex-column gap-7 gap-lg-10 w-100 w-lg-300px mb-7 me-lg-10">

        <!--begin::Status-->
        <div class="card card-flush py-4">
            <!--begin::Card header-->
            <div class="card-header">
                <!--begin::Card title-->
                <div class="card-title">
                    <h2>Status</h2>
                </div>
                <!--end::Card title-->
                <!--begin::Card toolbar-->
                <div class="card-toolbar">
                    <div class="rounded-circle bg-success w-15px h-15px" id="kt_ecommerce_add_product_status"></div>
                </div>
                <!--begin::Card toolbar-->
            </div>
            <!--end::Card header-->
            <!--begin::Card body-->
            <div class="card-body pt-0">
                <!--begin::Select2-->
                <select class="form-select mb-2" data-control="select2" data-hide-search="true" data-placeholder="Select an option" id="kt_ecommerce_add_product_status_select">
                    <option></option>
                    <option value="published" selected="selected">Published</option>
                    {{-- <option value="draft">Draft</option>
                    <option value="scheduled">Scheduled</option>
                    <option value="inactive">Inactive</option> --}}
                </select>
                <!--end::Select2-->
                <!--begin::Description-->
                <div class="text-muted fs-7">Set Product Status.</div>
                <!--end::Description-->
                <!--begin::Datepicker-->
                <div class="d-none mt-10">
                    <label for="kt_ecommerce_add_product_status_datepicker" class="form-label">Select publishing date and time</label>
                    <input class="form-control" id="kt_ecommerce_add_product_status_datepicker" placeholder="Pick date &amp; time" />
                </div>
                <!--end::Datepicker-->
            </div>
            <!--end::Card body-->
        </div>
        <!--end::Status-->
        <!--begin::Category & tags-->
        <div class="card card-flush py-4">
            <!--begin::Card header-->
            <div class="card-header">
                <!--begin::Card title-->
                <div class="card-title">
                    <h2>Product Details</h2>
                </div>
                <!--end::Card title-->
            </div>
            <!--end::Card header-->
            <!--begin::Card body-->
            <div class="card-body pt-0">
                <!--begin::Input group-->
                <!--begin::Label-->
                <label class="form-label">Category</label>
                <!--end::Label-->
                <!--begin::Select2-->
                <select class="form-select mb-2" data-control="select2" data-placeholder="Selecione uma opção" name="id_category">
                    @foreach ($categories as $category)
                        <option {{ ($productData->id_category == $category->id)?'selected':'' }} value="{{ $category->id }}">{{ $category->category_title }}</option>
                    @endforeach
                </select>
                <div class="text-muted fs-7 mb-7">Add a category to the product.</div>
            </div>
            <!--end::Card body-->
        </div>
        <!--end::Category & tags-->
    </div>
    <!--end::Aside column-->
    <!--begin::Main column-->
    <div class="d-flex flex-column flex-row-fluid gap-7 gap-lg-10">
        <!--begin:::Tabs-->
        <ul class="nav nav-custom nav-tabs nav-line-tabs nav-line-tabs-2x border-0 fs-4 fw-bold mb-n2">
            <!--begin:::Tab item-->
            <li class="nav-item">
                <a class="nav-link text-active-primary pb-4 active" data-bs-toggle="tab" href="#kt_ecommerce_add_product_general">General</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-active-primary pb-4" data-bs-toggle="tab" href="#specs_edit_area">Specs</a>
            </li>
            <!--end:::Tab item-->
            <!--begin:::Tab item-->
            <li class="nav-item">
                <a class="nav-link text-active-primary pb-4" data-bs-toggle="tab" href="#kt_ecommerce_add_product_advanced">Advanced</a>
            </li>
            <!--end:::Tab item-->
        </ul>
        <!--end:::Tabs-->
        <!--begin::Tab content-->
        <div class="tab-content">
            <!--begin::Tab pane-->
            <div class="tab-pane fade show active" id="kt_ecommerce_add_product_general" role="tab-panel">
                <div class="d-flex flex-column gap-7 gap-lg-10">
                    <!--begin::General options-->
                    <div class="card card-flush py-4">
                        <!--begin::Card header-->
                        <div class="card-header">
                            <div class="card-title">
                                <h2>General</h2>
                            </div>
                        </div>
                        <!--end::Card header-->
                        <!--begin::Card body-->
                        <div class="card-body pt-0">
                            <!--begin::Input group-->
                            <div class="mb-10 fv-row">
                                <!--begin::Label-->
                                <label class="required form-label">Product's name</label>
                                <!--end::Label-->
                                <!--begin::Input-->
                                <input type="text" name="product_name" class="form-control mb-2" placeholder="Product name" value="{{ $productData->product_title }}" />
                                <!--end::Input-->
                                <!--begin::Description-->
                                {{-- <div class="text-muted fs-7">è necessari.</div> --}}
                                <!--end::Description-->
                            </div>
                            <!--end::Input group-->
                            <!--begin::Input group-->
                            <div>
                                <!--begin::Label-->
                                <label class="form-label">Descrição</label>
                                <!--end::Label-->
                                <!--begin::Editor-->
                                <textarea name="description" class="form-control" cols="30" rows="10">{!! $productData->long_description !!}</textarea>
                                <!--end::Editor-->
                                <!--begin::Description-->
                                <div class="text-muted fs-7">Set a description for the product.</div>
                                <!--end::Description-->
                            </div>
                            <!--end::Input group-->
                        </div>
                        <!--end::Card header-->
                    </div>
                    <!--end::General options-->
                    <!--begin::Media-->
                    <div class="card card-flush py-4">
                        <!--begin::Card header-->
                        <div class="card-header">
                            <div class="card-title">
                                <h2>Images</h2>
                            </div>
                        </div>
                        <!--end::Card header-->
                        <!--begin::Card body-->
                        <div class="card-body pt-0">
                            <!--begin::Input group-->
                            <div class="fv-row">
                                <!--begin::Dropzone-->
                                <div class="dropzone" id="kt_dropzonejs_example_1">
                                    <!--begin::Message-->
                                    <div class="dz-message needsclick">
                                        <!--begin::Icon-->
                                        <i class="bi bi-file-earmark-arrow-up text-primary fs-3x"></i>
                                        <!--end::Icon-->

                                        <!--begin::Info-->
                                        <div class="ms-4">
                                            <h3 class="fs-5 fw-bolder text-gray-900 mb-1">Drop files here or click to select.</h3>
                                            <span class="fs-7 fw-bold text-gray-400">Product images</span>
                                        </div>
                                        <!--end::Info-->
                                    </div>
                                </div>
                                <!--end::Dropzone-->
                            </div>
                            <!--end::Input group-->
                                <div class="mt-5">
                                    @foreach ($productData->images as $image)
                                        <div class="image-input image-input-empty image-input-outline mb-3" data-kt-image-input="true" style="">
                                            <!--begin::Preview existing avatar-->
                                            <div class="image-input-wrapper w-150px h-150px" style="background-image: url({{ Storage::url($image->file) }})"></div>
                                            <!--end::Preview existing avatar-->
                                            <a href="{{ route('admin.products.delete.image', $image->id) }}">Delete</a>
                                        </div>
                                    @endforeach
                                </div>
                            <!--begin::Description-->
                            <div class="text-muted fs-7">Images for the product gallery.</div>
                            <!--end::Description-->
                        </div>
                        <!--end::Card header-->
                    </div>
                    <!--end::Media-->
                    <!--begin::Pricing-->
                    <div class="card card-flush py-4">
                        <!--begin::Card header-->
                        <div class="card-header">
                            <div class="card-title">
                                <h2>Price</h2>
                            </div>
                        </div>
                        <!--end::Card header-->
                        <!--begin::Card body-->
                        <div class="card-body pt-0">
                            <!--begin::Input group-->
                            <div class="mb-10 fv-row">
                                <!--begin::Label-->
                                <label class="required form-label">Price of the product</label>
                                <!--end::Label-->
                                <!--begin::Input-->
                                <input type="text" name="price" class="form-control mb-2" placeholder="Price of the product" value="{{ $productData->price }}" />
                                <!--end::Input-->
                                <!--begin::Description-->
                                <div class="text-muted fs-7">Amount that will be displayed and charged in the store.</div>
                                <!--end::Description-->
                            </div>
                            <!--end::Input group-->
                        </div>
                        <!--end::Card header-->
                    </div>
                    <!--end::Pricing-->
                </div>
            </div>
            <!--end::Tab pane-->

            <!--begin::Tab pane-->
            <div class="tab-pane fade show" id="specs_edit_area" role="tab-panel">
                <div class="d-flex flex-column gap-7 gap-lg-10">
                    <!--begin::General options-->
                    <div class="card card-flush py-4">
                        <!--begin::Card header-->
                        <div class="card-header">
                            <div class="card-title">
                                <h2>Specs Editor</h2>
                            </div>
                        </div>
                        <!--end::Card header-->
                        <!--begin::Card body-->
                        <div class="card-body pt-0" id="specs-area">
                            <!--begin::Input group-->

                            @foreach ($productData->specifications as $spec)
                                <div class="row mb-5" style="display: flex; align-items: center; justify-content: center; line-height: auto;">
                                    <div class="col-5">
                                        <label>Key</label>
                                        <input type="text" class="form-control" value="{{ $spec->key }}" data-specField="key" data-spec-id="{{$spec->id}}" onblur="customP.updateSpec(this)">
                                    </div>
                                    <div class="col-5">
                                        <label for="">Value</label>
                                        <input type="text" class="form-control" value="{{ $spec->value }}" data-specField="value" data-spec-id="{{$spec->id}}" onblur="customP.updateSpec(this)">
                                    </div>
                                    <div class="col-2">
                                        <button class="btn btn-danger" data-spec-id="{{$spec->id}}" onclick="customP.removeSpec(this);return false">X</button>
                                    </div>
                                </div>
                            @endforeach
                            <!--end::Input group-->
                        </div>
                        <button class="btn btn-primary" onclick="customP.handleNewSpec();return false">Add New Spec</button>
                        <!--end::Card header-->
                    </div>
                    <!--end::General options-->
                </div>
            </div>
            <!--end::Tab pane-->

            <!--begin::Tab pane-->
            <div class="tab-pane fade" id="kt_ecommerce_add_product_advanced" role="tab-panel">
                <div class="d-flex flex-column gap-7 gap-lg-10">
                    <!--begin::Inventory-->
                    <div class="card card-flush py-4 d-none">
                        <!--begin::Card header-->
                        <div class="card-header">
                            <div class="card-title">
                                <h2>Slug</h2>
                            </div>
                        </div>
                        <!--end::Card header-->
                        <!--begin::Card body-->
                        <div class="card-body pt-0">
                            <!--begin::Input group-->
                            <div class="mb-10 fv-row">
                                <!--begin::Label-->
                                <label class="required form-label">Slug</label>
                                <!--end::Label-->
                                <!--begin::Input-->
                                <input type="text" name="slug" readonly class="form-control mb-2" placeholder="slug" value="{{ $productData->product_slug }}" />
                                <!--end::Input-->
                                <!--begin::Description-->
                                <div class="text-muted fs-7">Será utilizado na url amigavel para pesquisa do produto.</div>
                                <!--end::Description-->
                            </div>
                            <!--end::Input group-->
                        </div>
                        <!--end::Card header-->
                    </div>
                    <!--end::Inventory-->
                    <!--begin::Variations-->
                    <div class="card card-flush py-4">
                        <!--begin::Card header-->
                        <div class="card-header">
                            <div class="card-title">
                                <h2>Variations</h2>
                            </div>
                        </div>
                        <!--end::Card header-->
                        <!--begin::Card body-->
                        <div class="card-body pt-0">
                            <!--begin::Input group-->
                            <div class="" data-kt-ecommerce-catalog-add-product="auto-options">
                                <!--begin::Label-->
                                <label class="form-label">Variations</label>
                                <!--end::Label-->
                                <div class="repeater-variation-area">
                                    @foreach ($variations as $variation)
                                        <div class="variations-model">
                                            <div class="variations-title mt-5">
                                                <label class="form-label">Title</label>
                                                <div class="row mb-5">
                                                    <div class="d-flex flex-row mb-3">
                                                        <input onblur="customP.updateVariationTitle(this)" placeholder="Variation Title" value="{{ $variation->variation_title }}" class="form-control" type="text" name="variations_title" data-variation-id="{{ $variation->id }}">
                                                        <span class="btn btn-danger" onclick="customP.removeVariation(this)">Trash</span>
                                                        <span class="btn btn-info" onclick="customP.addNewOption(this)">Add</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-6">
                                                    <label class="form-label">Options</label>
                                                </div>
                                                <div class="col-6">
                                                    <label class="form-label">Prices</label>
                                                </div>
                                            </div>
                                            <div class="d-flex flex-column new_options_area">
                                                @foreach ($variation->options as $option)
                                                    <div class="row">
                                                        <div class="col-md-6 mb-6">
                                                            <input onblur="customP.updateVariationOptionTitle(this)" class="form-control-lg form-control-solid" value="{{ $option->variation_option_title }}" data-variation-option-id="{{ $option->id }}"/>
                                                        </div>
                                                        <div class="col-md-6 mb-6">
                                                            <input onblur="customP.updateVariationOptionPrice(this)" class="form-control-lg form-control-solid" value="{{ $option->variation_price }}" data-variation-option-id="{{ $option->id }}"/>
                                                            <span class="btn btn-danger" onclick="customP.deleteVariationOption(this)">Trash</span>
                                                        </div>
                                                    </div>

                                                @endforeach
                                            </div>
                                        </div>
                                    @endforeach
                                    <div id="new_variations_area"></div>
                                </div>

                                <span class="btn btn-info mt-8" onclick="customP.addNewVariation()">Add</span>

                            </div>
                            <!--end::Input group-->
                        </div>
                        <!--end::Card header-->
                    </div>
                    <!--end::Variations-->
                    <!--begin::Shipping-->
                    <div class="card card-flush py-4 d-none">
                        <!--begin::Card header-->
                        <div class="card-header">
                            <div class="card-title">
                                <h2>Envio</h2>
                            </div>
                        </div>
                        <!--end::Card header-->
                        <!--begin::Card body-->
                        <div class="card-body pt-0">
                            <!--begin::Shipping form-->
                            <div id="" class="mt-10">
                                <!--begin::Input group-->
                                <div class="mb-10 fv-row">
                                    <!--begin::Label-->
                                    <label class="form-label">Peso</label>
                                    <!--end::Label-->
                                    <!--begin::Editor-->
                                    <input type="text" name="weight" class="form-control mb-2" placeholder="Peso do produto" value="{{ $productData->weight }}" />
                                    <!--end::Editor-->
                                    <!--begin::Description-->
                                    <div class="text-muted fs-7">Informe o peso do produto em quilogramas (kg).</div>
                                    <!--end::Description-->
                                </div>
                                <!--end::Input group-->
                                <!--begin::Input group-->
                                <div class="fv-row">
                                    <!--begin::Label-->
                                    <label class="form-label">Dimensões</label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    <div class="d-flex flex-wrap flex-sm-nowrap gap-3">
                                        <input type="number" name="width" class="form-control mb-2" placeholder="Largura (L)" value="{{ $productData->width }}" />
                                        <input type="number" name="height" class="form-control mb-2" placeholder="Altura (A)" value="{{ $productData->height }}" />
                                        <input type="number" name="length" class="form-control mb-2" placeholder="Comprimento (C)" value="{{ $productData->diameter }}" />
                                    </div>
                                    <!--end::Input-->
                                    <!--begin::Description-->
                                    <div class="text-muted fs-7">Informe as dimensões do produto em centimetros (cm).</div>
                                    <!--end::Description-->
                                </div>
                                <!--end::Input group-->
                            </div>
                            <!--end::Shipping form-->
                        </div>
                        <!--end::Card header-->
                    </div>
                    <!--end::Shipping-->
                </div>
            </div>
            <!--end::Tab pane-->
        </div>
        <!--end::Tab content-->
        <div class="d-flex justify-content-end">
            <!--begin::Button-->
            <!--end::Button-->
            <!--begin::Button-->
            <button type="submit" id="kt_ecommerce_add_product_submit" class="btn btn-primary">
                <span class="indicator-label">Salvar</span>
                <span class="indicator-progress">Aguarde...
                <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
            </button>
            <!--end::Button-->
        </div>
    </div>
    <!--end::Main column-->
</form>





<div class="models" style="display: none;">
    <div class="variations-model" id="variation-row">
        <div class="variations-title mt-5">
            <label class="form-label">Title</label>
            <div class="row mb-5">
                <div class="d-flex flex-row">
                    <input onblur="customP.handleNewVariation(this)" placeholder="Variation Title" value="" class="form-control" type="text" name="variations_title" data-variation-id="" data-product-id="{{ $productData->id }}">
                    <span class="btn btn-danger" onclick="customP.removeVariation(this)">Trash</span>
                    <span class="btn btn-info" onclick="customP.addNewOption(this)">Add</span>
                </div>
            </div>
        </div>
        <label class="form-label">Options</label>
        <div class="d-flex flex-column new_options_area">
            <div class="col-md-5">
                {{-- <input onblur="" class="form-control-lg form-control-solid" value="" data-variation-option-id=""/>
                <span class="btn btn-danger" onclick="">Trash</span> --}}
            </div>
        </div>
    </div>

    <div class="specs-model" id="spec-model-row">

        <div class="row mb-5" style="display: flex; align-items: center; justify-content: center; line-height: auto;">
            <div class="col-5">
                <label>Key</label>
                <input type="text" class="form-control" data-specField="key" data-spec-id="null" onblur="customP.updateSpec(this)">
            </div>
            <div class="col-5">
                <label for="">Value</label>
                <input type="text" class="form-control" data-specField="value" data-spec-id="null" onblur="customP.updateSpec(this)">
            </div>
            <div class="col-2">
                <button class="btn btn-danger" data-spec-id="null" onclick="customP.removeSpec(this);return false">X</button>
            </div>
        </div>

    </div>

    <div class="d-flex flex-column" id="option_row">
        <div class="row">
            <div class="col-md-6 mb-6">
                <input onblur="customP.handleNewOption(this)" class="form-control-lg form-control-solid" value="" data-variation-option-id="" />
                {{-- <span class="btn btn-danger" onclick="customP.deleteVariationOption(this)">Apagar</span> --}}
            </div>

            <div class="col-md-6 mb-6">
                <input disabled onblur="customP.updateVariationOptionPrice(this)" class="form-control-lg form-control-solid" value="" data-variation-option-id=""/>
                <span class="btn btn-danger" onclick="customP.deleteVariationOption(this)">Trash</span>
            </div>
        </div>
    </div>

    {{-- <div class="row">
        <div class="col-md-6 mb-6">
            <input onblur="customP.updateVariationOptionTitle(this)" class="form-control-lg form-control-solid" value="{{ $option->variation_option_title }}" data-variation-option-id="{{ $option->id }}"/>
        </div>
        <div class="col-md-6 mb-6">
            <input onblur="customP.updateVariationOptionPrice(this)" class="form-control-lg form-control-solid" value="{{ $option->variation_price }}" data-variation-option-id="{{ $option->id }}"/>
            <span class="btn btn-danger" onclick="customP.deleteVariationOption(this)">Trash</span>
        </div>
    </div> --}}

</div>


<input type="hidden" id="id_product" name="id_product" value="{{$productData->id}}">

@endsection

@push('js')
    <script src="{{ asset('admin/plugins/global/plugins.bundle.js') }}"></script>
    <script src="{{ asset('admin/js/scripts.bundle.js') }}"></script>
    <script src="{{ asset('admin/js/custom/apps/ecommerce/catalog/save-product.js') }}"></script>
    <script src="{{ asset('admin/js/widgets.bundle.js') }}"></script>
    <script src="{{ asset('admin/js/myCustomProducts.js') }}"></script>
    <script>
        customP.init()
    </script>
@endpush

@push('css')
    <link href="{{ asset('admin/plugins/global/plugins.bundle.css') }}" rel="stylesheet" type="text/css"/>
    <link href="{{ asset('admin/css/mycss.css') }}" rel="stylesheet" type="text/css"/>
@endpush