@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 @if(!$productData->is_archived) bg-success @else bg-warning @endif 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" name="status">
                    <option></option>
                    <option value="published" {{ !$productData->is_archived ? 'selected' : '' }}>Published</option>
                    <option value="archived" {{ $productData->is_archived ? 'selected' : '' }}>Archived</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>
        <div class="card card-flush py-4">
            <!--begin::Card header-->
            <div class="card-header">
                <!--begin::Card title-->
                <div class="card-title">
                    <h2>Allow Order</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">Allow add Cart?</label>
                <!--end::Label-->
                <!--begin::Select2-->
                <select class="form-select mb-2" data-control="select2" data-placeholder="allow_order" name="allow_order">
                    <option value="1" {{ ($productData->allow_order === 1)?'selected':'' }}>Yes</option>
                    <option value="0" {{ ($productData->allow_order === 0)?'selected':'' }}>Not Allow</option>
                </select>
                <div class="text-muted fs-7 mb-7">Allow sample to be added to cart</div>
            </div>
            <!--end::Card body-->
        </div>
        <!--end::Category & tags-->

        <!-- Danger Zone -->
        <div class="danger-zone-container d-flex justify-content-center align-items-center mt-5 mb-5">
            <div class="danger-zone-box p-6 p-md-10 text-center">
                <div class="mb-3">
                    <i class="bi bi-exclamation-triangle-fill text-danger fs-1"></i>
                </div>
                <h2 class="fw-bold text-danger mb-2">Danger Zone</h2>
                <p class="mb-4 fs-5 text-gray-800">Deleting a product is <span class="fw-bold">irreversible</span>.<br>The product will be hidden from all listings and cannot be restored.</p>
                <a href="#" onclick="confirmDelete({{ $productData->id }}); return false;" class="btn btn-danger btn-lg px-5 py-3 fw-bold shadow-danger-zone" style="font-size:1.2rem;">
                    <i class="bi bi-trash me-2"></i>Delete Product
                </a>
            </div>
        </div>
    </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_resources">Resources</a>
            </li>
            <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">Description</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_resources" role="tab-panel">
                <div class="d-flex flex-column gap-7 gap-lg-10">
                    <!--begin::Inventory-->

                    <!--end::Inventory-->
                    <!--begin::Variations-->
                    <div class="card card-flush py-4">
                        <!--begin::Card header-->
                        <div class="card-header">
                            <div class="card-title">
                                <h2>Resources</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">Resource Files</label>
                                <!--end::Label-->
                                <div class="repeater-resource-area">

                                    @foreach ($resources as $resource)
                                        <div class="row mb-5">
                                            <div class="col-8">
                                                <input onblur="customP.updateResource(this)" type="text" value="{{ $resource->title }}" class="form-control" data-resource-id="{{$resource->id}}">
                                            </div>
                                            <div class="col-2">
                                                @if (!$resource->uploaded_file)
                                                    <a class="btn btn-primary" target="_blank" href="{{ asset('resources/'.$resource->file) }}">View File</a>
                                                    @else
                                                    <a class="btn btn-primary" target="_blank" href="{{ asset('storage/'.$resource->file) }}">View File</a>
                                                @endif
                                            </div>
                                            <div class="col-2">
                                                <button data-resource-id="{{$resource->id}}" onclick="customP.deleteResource(this); return false;" class="btn btn-danger" target="_blank">Remove File</button>
                                            </div>
                                        </div>
                                    @endforeach

                                    <div id="new_resource_area"></div>
                                </div>

                                {{-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                                    Add Resource
                                </button> --}}

                                <a href="#" class="btn btn-primary er fs-6 px-8 py-4" data-bs-toggle="modal" data-bs-target="#kt_modal_bidding">Add Resource</a>

                            </div>
                            <!--end::Input group-->
                        </div>
                        <!--end::Card header-->
                    </div>
                    <!--end::Variations-->
                </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-->

                    <!--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>
                                            <label class="form-label">Options</label>
                                            <div class="d-flex flex-column new_options_area">
                                                @foreach ($variation->options as $option)
                                                    <div class="col-md-5 mb-5">
                                                        <input onblur="customP.updateVariationOptionTitle(this)" class="form-control-lg form-control-solid" value="{{ $option->variation_option_title }}" data-variation-option-id="{{ $option->id }}"/>
                                                        <span class="btn btn-danger" onclick="customP.deleteVariationOption(this)">Trash</span>
                                                    </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-->

                    <div class="card card-flush py-4">
                        <!--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">It will be used in the friendly url to search for the product.</div>
                                <!--end::Description-->
                            </div>
                            <!--end::Input group-->
                        </div>
                        <!--end::Card header-->
                    </div>
                </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="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Add Resource</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <form action="POST" action="{{ route('admin.products.resources.add') }}" id="resources_form">
                @csrf
                <input type="hidden" name="product_id" value="{{ $productData->id }}">
                <div class="row">
                    <div class="col-6">
                        <label for="">Resource Title</label>
                        <input type="text" required name="title" class="form-control" required>
                    </div>
                    <div class="col-6">
                        <label for="">Resource File</label>
                        <input type="file" required name="file" class="form-control" required>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button class="btn btn-info mt-8" onclick="document.querySelector('#resources_form').submit();return false;" >Add Resource</button>
        </div>
      </div>
    </div>
  </div>


<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="">Apagar</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="col-md-5 mb-5">
            <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)">Trash</span>
        </div>
    </div>
</div>


<!--begin::Modal - New Target-->
<div class="modal fade" id="kt_modal_bidding" tabindex="-1" aria-hidden="true" style="height: 90vh; width: 50vw; margin-top: 50px;">
    <div class="modal-dialog modal-dialog-centered mw-650px">
        <div class="modal-content rounded">
            <div class="modal-header pb-0 border-0 justify-content-end">
                {{-- <div class="btn btn-sm btn-icon btn-active-color-primary" data-kt-modal-action-type="close">
                    <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                    <span class="svg-icon svg-icon-1">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor" />
                            <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
                        </svg>
                    </span>
                    <!--end::Svg Icon-->
                </div> --}}
            </div>
            <div class="modal-body scroll-y px-10 px-lg-15 pt-0 pb-15">
                <form enctype="multipart/form-data" method="POST" action="{{ route('admin.products.resources.add') }}" id="resources_form" class="form" >
                    <input type="hidden" name="id_product" value="{{ $productData->id }}">
                    @csrf
                    <div class="mb-13 text-center">
                        <h1 class="mb-3">New Resource</h1>
                    </div>

                    <div class="row mb-5">
                        <div class="col-6">
                            <label for="">Resource Title</label>
                            <input type="text" required name="title" class="form-control" required>
                        </div>
                        <div class="col-6">
                            <label for="">Resource File</label>
                            <input type="file" required name="file" class="form-control" required>
                        </div>
                    </div>

                    <div class="text-center">

                        <button type="submit" class="btn btn-primary" data-kt-modal-action-type="submit">
                            <span class="indicator-label">Submit</span>
                            <span class="indicator-progress">Please wait...
                            <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!--end::Modal - New Target-->

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

@endsection

@push('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="{{ asset('admin/js/myCustomProducts.js') }}"></script>
<script>
    function confirmDelete(id) {
        Swal.fire({
            title: 'Tem certeza?',
            text: "Esta ação não pode ser desfeita!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Sim, excluir!',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                window.location.href = '/administrativo/produtos/excluir/' + id;
            }
        });
    }
    // Status select confirmation
    document.addEventListener('DOMContentLoaded', function() {
        const statusSelect = document.getElementById('kt_ecommerce_add_product_status_select');
        if(statusSelect) {
            statusSelect.addEventListener('change', function(e) {
                if (e.target.value === 'archived') {
                    e.preventDefault();
                    alert('Este produto será arquivado e ficará oculto das listagens.');
                    // Reverte para published caso o usuário cancele
                    statusSelect.value = 'published';
                }
            });
        }
    });
</script>
@endpush

@push('css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<style>
.danger-zone-container {
    min-height: 220px;
}
.danger-zone-box {
    background: #fff5f5;
    border: 2px solid #dc3545;
    border-radius: 1rem;
    box-shadow: 0 4px 24px 0 rgba(220,53,69,0.10);
    max-width: 480px;
    width: 100%;
}
.shadow-danger-zone {
    box-shadow: 0 2px 12px 0 rgba(220,53,69,0.25) !important;
    transition: box-shadow 0.2s;
}
.shadow-danger-zone:hover {
    box-shadow: 0 4px 32px 0 rgba(220,53,69,0.35) !important;
}
@media (max-width: 600px) {
    .danger-zone-box { padding: 2rem 0.5rem; }
    .btn-danger { width: 100%; }
}
</style>
@endpush