@extends('backend.adminlayouts.master')

@section('body')
    <h3 class="text-gray-700 text-3xl font-medium">
        Editeaza produsul
    </h3>
    <div class="md:grid md:grid-cols-3 md:gap-6 mt-10 mb-10">
        <div class="mt-5 md:mt-0 md:col-span-6">
            <form action="{{ route('products.update',[ $product->id]) }}"
                  method="POST"
                  enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="shadow overflow-hidden sm:rounded-md">
                    <div class="px-4 py-5 bg-white sm:p-6">
                        <div class="grid grid-cols-6 gap-6">
                            <div class="col-span-2 sm:col-span-2">
                                <label for="item_name"
                                       class="block my-2 text-sm font-medium text-gray-700">
                                    Nume produs
                                </label>
                                <input type="text" name="item_name" id="item_name"
                                       class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
                                       value="{{$product->item_name}}">
                            </div>

                            <div class="col-span-2 sm:col-span-2">
                                <label for="isbn_printed" class="block my-2 text-sm font-medium text-gray-700">
                                    ISBN Tiparit
                                </label>
                                <input type="text" name="isbn_printed" id="isbn_printed"
                                       class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
                                       value="{{$product->isbn_printed}}">
                            </div>
                            <div class="col-span-2 sm:col-span-2">
                                <label for="isbn_pdf" class="block my-2 text-sm font-medium text-gray-700">
                                    ISBN Electronic
                                </label>
                                <input type="text" name="isbn_pdf" id="isbn_pdf"
                                       class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
                                       value="{{$product->isbn_pdf}}">
                            </div>

                            <div class="col-span-2 sm:col-span-1">
                                <label for="isEbook" class="block my-2 text-sm font-medium text-gray-700">
                                    Este Ebook?
                                </label>
                                <div class="mt-4">
                                    <input type="radio" class="form-radio" name="isEbook" value="1" {{ $product->isEbook == '1' ? 'checked' : '' }}> Da
                                    <input type="radio" class="form-radio" name="isEbook" value="0" {{ $product->isEbook == '0' ? 'checked' : '' }}> Nu
                                </div>
                            </div>

                            <div class="col-span-2 sm:col-span-1">
                                <label for="isPrinted" class="block my-2 text-sm font-medium text-gray-700">
                                    Este Tiparit?
                                </label>
                                <div class="mt-4">
                                    <input type="radio" class="form-radio" name="isPrinted" value="1" {{ $product->isPrinted == '1' ? 'checked' : '' }}> Da
                                    <input type="radio" class="form-radio" name="isPrinted" value="0" {{ $product->isPrinted == '0' ? 'checked' : '' }}> Nu
                                </div>
                            </div>

                            <div class="col-span-2 sm:col-span-1">
                                <label for="published" class="block my-2 text-sm font-medium text-gray-700">
                                    Este Publicat?
                                </label>
                                <div class="mt-4">
                                    <input type="radio" class="form-radio" name="published" value="1" {{ $product->published == '1' ? 'checked' : '' }}> Da
                                    <input type="radio" class="form-radio" name="published" value="0" {{ $product->published == '0' ? 'checked' : '' }}> Nu
                                </div>
                            </div>

                            <div class="col-span-2 sm:col-span-1">
                                <label for="purchasable" class="block my-2 text-sm font-medium text-gray-700">
                                    Este la vanzare?
                                </label>
                                <div class="mt-4">
                                    <input type="radio" class="form-radio" name="purchasable" value="1" {{ $product->purchasable == '1' ? 'checked' : '' }}> Da
                                    <input type="radio" class="form-radio" name="purchasable" value="0" {{ $product->purchasable == '0' ? 'checked' : '' }}> Nu
                                </div>
                            </div>
                        </div>
                        <div class="grid grid-cols-6 gap-6 py-3">
                            <div class="col-span-4 sm:col-span-2">
                                <label for="domains"
                                       class="block my-2 text-sm font-medium text-gray-700">
                                    Domeniu
                                </label>
                                <select
                                    class="mt-1 block mainCatSel w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                                    name="domain" id="domains">
                                    <option disabled selected value> -- Selecteaza --</option>
                                    @foreach ($domains as $domain)
                                        <option value="{{$domain->id }}" @if($product->domains->contains($domain->id)) selected @endif>{{ $domain->name }}</option>
                                    @endforeach
                                </select>
                                @if($errors->has('domains'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('domains') }}
                                    </div>
                                @endif
                            </div>

{{--                            <div class="col-span-4 sm:col-span-2">--}}
{{--                                <label for="categories"--}}
{{--                                       class="block my-2 text-sm font-medium text-gray-700">Category</label>--}}
{{--                                <select--}}
{{--                                    class="mt-1 block mainCatSel w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"--}}
{{--                                    name="category" id="categories" autocomplete="categories">--}}
{{--                                    <option disabled selected value> -- Selection --</option>--}}
{{--                                    @foreach ($categories as $category)--}}
{{--                                            <option value="{{$category->id }}" @if($product->categories->contains($category->id)) selected @endif>{{ $category->name }}</option>--}}
{{--                                    @endforeach--}}
{{--                                </select>--}}
{{--                                @if($errors->has('categories'))--}}
{{--                                    <div class="invalid-feedback">--}}
{{--                                        {{ $errors->first('categories') }}--}}
{{--                                    </div>--}}
{{--                                @endif--}}
{{--                            </div>--}}

                            <div class="col-span-1 sm:col-span-1">

                                <label for="stock_qty"
                                       class="block my-2 text-sm font-medium text-gray-700">
                                    Cantitate
                                </label>
                                <input type="number" name="stock_qty" id="stock_qty"
                                       value="{{$product->stock_qty}}"
                                       class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            </div>
                            <div class="col-span-1 sm:col-span-1">
                                <label for="price_ebooks" class="block my-2 text-sm font-medium text-gray-700">
                                    Pret Ebook (Fara TVA)
                                </label>
                                <input type="text" name="price_ebooks" id="price_ebooks" value="{{price($product->price_ebooks)}}"
                                       class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                                >
                            </div>
                            <div class="col-span-1 sm:col-span-1">
                                <label for="price" class="block my-2 text-sm font-medium text-gray-700">
                                    Pret Tiparit (Fara TVA)
                                </label>
                                <input type="text" name="price" id="price" value="{{price($product->price)}}"
                                       class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                                >
                            </div>

                            <div class="col-span-1 sm:col-span-1">
                                <label for="author" class="block my-2 text-sm font-medium text-gray-700">
                                    Autor
                                </label>
                                <input type="text" name="author" id="author"
                                       class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" value="{{$product->author}}"
                                >
                            </div>
                            <div class="col-span-1 sm:col-span-1">
                                <label for="translator" class="block my-2 text-sm font-medium text-gray-700">Translator</label>
                                <input type="text" name="translator" id="translator"
                                       class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" value="{{$product->translator}}"
                                >
                            </div>

                            <div class="col-span-1 sm:col-span-1">
                                <label for="language" class="block my-2 text-sm font-medium text-gray-700">
                                    Limba
                                </label>
                                <input type="text" name="language" id="language"
                                       class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" value="{{$product->language}}"
                                >
                            </div>
{{--                            <div class="col-span-4 sm:col-span-2" hidden>
                                <label for="attributes[]"
                                       class="block my-2 text-sm font-medium text-gray-700">Main Attributes</label>
                                @dump($mainAttributes)
                                <select
                                    class="mt-1 block mainCatSel w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                                    name="attributes[]" id="attributes">
                                    <option disabled selected value> -- Selection --</option>
                                    @foreach ($mainAttributes as $attribute)
                                            <option value="{{$attribute->id }}"
                                                    @if($product->attributes->contains($attribute->id)) selected @endif>{{ $attribute->name }}</option>
                                    @endforeach
                                </select>
                                @if($errors->has('attributes'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('attributes') }}
                                    </div>
                                @endif
                            </div>
                            <div class="col-span-4 sm:col-span-4">
                                <label for="attributes[]"
                                       class="block my-2 text-sm font-medium text-gray-700">Attribute</label>

                                <select
                                    class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                                    name="attributes[]" id="attributes">
                                    <option disabled selected value> -- Selection --</option>
                                    @foreach ($subAttributes as $attribute)
                                        @if($attribute->parentAttribute)
                                            <option value="{{$attribute->id }}"
                                                    @if($product->attributes->contains($attribute->id)) selected @endif>{{ $attribute->name }}
                                                / {{ $attribute->parentAttribute->name }}</option>
                                        @else
                                            <td class="text-sm px-6 py-4 whitespace-no-wrap border-b border-gray-200">{{ $attribute->name }}</td>
                                        @endif
                                    @endforeach
                                </select>
                                @if($errors->has('attributes'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('attributes') }}
                                    </div>
                                @endif
                            </div>--}}
{{--                            <div class="col-span-4 sm:col-span-3">--}}
{{--                                <label for="link"--}}
{{--                                       class="block my-2 text-sm font-medium text-gray-700">Link</label>--}}
{{--                                <input type="text" name="link" id="link"--}}
{{--                                       class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"--}}
{{--                                       value="{{$product->link}}">--}}
{{--                                <label for="link_1"--}}
{{--                                       class="block my-2 text-sm font-medium text-gray-700">Link #1</label>--}}
{{--                                    <a href="{{ Storage::url($product->link) }}" target="_blank" rel="noopener">#{{ $product->item_name }}</a>--}}
{{--                            </div>--}}
{{--                            <div class="col-span-4 sm:col-span-3">--}}
{{--                                <label for="link_2"--}}
{{--                                       class="block my-2 text-sm font-medium text-gray-700">Link #2</label>--}}
{{--                                <input type="text" name="link_2" id="link_2"--}}
{{--                                       class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"--}}
{{--                                       value="{{$product->link_2}}">--}}
{{--                            </div>--}}


                            {{--                        <div class="grid grid-cols-6 gap-6 py-3">--}}
                            {{--                            <div class="col-span-6 sm:col-span-6">--}}
                            {{--                                <label class="block my-2 text-md py-2 font-medium text-gray-700">--}}
                            {{--                                    Allegato--}}
                            {{--                                </label>--}}

                            {{--                                <div--}}
                            {{--                                    class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">--}}
                            {{--                                    <div class="space-y-1 text-center">--}}
                            {{--                                        <div class="flex text-md py-2 pl-3 text-gray-600">--}}

                            {{--                                            <label for="attachment"--}}
                            {{--                                                   class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">--}}

                            {{--                                                <input type="file" name="attachment"--}}
                            {{--                                                       class="@error('attachment') is-invalid @enderror"--}}
                            {{--                                                       value="{{ $product->attachment }}">--}}


                            {{--                                            </label>--}}

                            {{--                                        </div>--}}
                            {{--                                        <p class="text-xs text-gray-500">--}}
                            {{--                                            <span>      {{ $product->attachment }}</span>--}}
                            {{--                                        </p>--}}
                            {{--                                        --}}{{--                                            <p class="text-xs text-gray-500">--}}
                            {{--                                        --}}{{--                                                ppt,pptx,doc,docx,pdf,xls,xlsx fino a 10 MB--}}
                            {{--                                        --}}{{--                                            </p>--}}
                            {{--                                        @error('attachment')--}}
                            {{--                                        <div class="text-sm text-red-700"> * {{ $message }}</div>--}}
                            {{--                                        @enderror--}}
                            {{--                                        @if($product->attachment != null)--}}
                            {{--                                            <div--}}
                            {{--                                                x-data="{ 'showModal': false }"--}}
                            {{--                                                @keydown.escape="showModal = false"--}}
                            {{--                                                style="margin-top:20px !important;">--}}
                            {{--                                                <button type="button" @click="showModal = true" title="Elimina"--}}
                            {{--                                                        class="ml-3 inline-flex justify-center py-2 px-4 mr-5 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-900 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">--}}
                            {{--                                                    <i class="fas fa-trash-alt"></i> <span--}}
                            {{--                                                        style="padding-left: 7px !important;">Elimina</span>--}}
                            {{--                                                </button>--}}
                            {{--                                                <!-- Trigger for Modal -->--}}

                            {{--                                                <!-- Modal -->--}}
                            {{--                                                <div--}}
                            {{--                                                    class="fixed inset-0 z-30 flex items-center justify-center overflow-auto bg-black bg-opacity-50"--}}
                            {{--                                                    x-show="showModal"--}}
                            {{--                                                >--}}
                            {{--                                                    <!-- Modal inner -->--}}
                            {{--                                                    <div--}}
                            {{--                                                        class="max-w-6xl px-6 py-6 mx-auto text-left rounded"--}}
                            {{--                                                        @click.away="showModal = false"--}}
                            {{--                                                        x-transition:enter="motion-safe:ease-out duration-300"--}}
                            {{--                                                        x-transition:enter-start="opacity-0 scale-90"--}}
                            {{--                                                        x-transition:enter-end="opacity-100 scale-100"--}}
                            {{--                                                    >--}}
                            {{--                                                        <!-- Title / Close-->--}}
                            {{--                                                        <div class="flex items-center justify-between">--}}
                            {{--                                                            <h5 class="mr-3 text-black max-w-none">Title</h5>--}}

                            {{--                                                            <button type="button" class="z-50 cursor-pointer"--}}
                            {{--                                                                    @click="showModal = false">--}}
                            {{--                                                                <svg xmlns="http://www.w3.org/2000/svg" width="24"--}}
                            {{--                                                                     height="24"--}}
                            {{--                                                                     viewBox="0 0 24 24" fill="none"--}}
                            {{--                                                                     stroke="currentColor">--}}
                            {{--                                                                    <path stroke-linecap="round"--}}
                            {{--                                                                          stroke-linejoin="round"--}}
                            {{--                                                                          stroke-width="2"--}}
                            {{--                                                                          d="M6 18L18 6M6 6l12 12"/>--}}
                            {{--                                                                </svg>--}}
                            {{--                                                            </button>--}}
                            {{--                                                        </div>--}}

                            {{--                                                        <!-- content -->--}}

                            {{--                                                        <div--}}
                            {{--                                                            class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">--}}
                            {{--                                                            <div class="bg-white px-4 pt-5 pb-4 py-5 sm:p-6 sm:pb-4">--}}
                            {{--                                                                <div class="md:flex sm:items-start py-3">--}}
                            {{--                                                                    <div--}}
                            {{--                                                                        class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">--}}
                            {{--                                                                        <svg @click="toggleModal"--}}
                            {{--                                                                             class="h-6 w-6 text-red-600"--}}
                            {{--                                                                             xmlns="http://www.w3.org/2000/svg"--}}
                            {{--                                                                             fill="none"--}}
                            {{--                                                                             viewBox="0 0 24 24"--}}
                            {{--                                                                             stroke="currentColor"--}}
                            {{--                                                                             aria-hidden="true">--}}
                            {{--                                                                            <path stroke-linecap="round"--}}
                            {{--                                                                                  stroke-linejoin="round"--}}
                            {{--                                                                                  stroke-width="2"--}}
                            {{--                                                                                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>--}}
                            {{--                                                                        </svg>--}}
                            {{--                                                                    </div>--}}
                            {{--                                                                    <div--}}
                            {{--                                                                        class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">--}}
                            {{--                                                                        <h3 class="text-lg leading-6 font-medium text-gray-900"--}}
                            {{--                                                                            id="modal-title">--}}
                            {{--                                                                            {{__('product.alertProduct')}}--}}
                            {{--                                                                            <br><strong>{{ $product->attachment }}</strong>--}}
                            {{--                                                                            ?--}}
                            {{--                                                                        </h3>--}}
                            {{--                                                                        <div class="mt-2">--}}
                            {{--                                                                            <p class="text-sm text-gray-500">--}}
                            {{--                                                                                {{__('product.alertSentenceProduct')}}--}}
                            {{--                                                                            </p>--}}
                            {{--                                                                        </div>--}}
                            {{--                                                                    </div>--}}
                            {{--                                                                </div>--}}
                            {{--                                                            </div>--}}
                            {{--                                                            <div--}}
                            {{--                                                                class="bg-gray-50 px-4 pb-7 sm:px-6 sm:flex sm:flex-row-reverse">--}}
                            {{--                                                                <a href="{{ route('removeAttachment' ,[ $product->id]) }}"--}}
                            {{--                                                                   data-toggle="modal"--}}
                            {{--                                                                   data-target="#my-modal"--}}
                            {{--                                                                   class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto  mt-3">--}}
                            {{--                                                                    {{__('product.yesAttachment')}}--}}

                            {{--                                                                </a>--}}

                            {{--                                                                <div class="flex items-center justify-between">--}}
                            {{--                                                                    <button type="button"--}}
                            {{--                                                                            class="z-50 cursor-pointer"--}}
                            {{--                                                                            @click="showModal = false">--}}
                            {{--                                                                        <h5 class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500  sm:ml-3 sm:w-auto  mt-3">  {{__('product.no')}}</h5>--}}
                            {{--                                                                    </button>--}}
                            {{--                                                                </div>--}}
                            {{--                                                            </div>--}}
                            {{--                                                        </div>--}}
                            {{--                                                    </div>--}}
                            {{--                                                </div>--}}
                            {{--                                            </div>--}}
                            {{--                                            --}}{{--                                                <a class="pt-2 ml-3 inline-flex justify-center py-2 px-4 mr-5 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-900 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"--}}
                            {{--                                            --}}{{--                                                   href="{{ route('removeAttachment' ,[ $product->id]) }}"--}}
                            {{--                                            --}}{{--                                                > <i class="fas fa-trash-alt mr-2 mt-1"></i> Elimina</a>--}}
                            {{--                                        @endif--}}
                            {{--                                    </div>--}}
                            {{--                                </div>--}}

                            {{--                            </div>--}}

                            {{--                        </div>--}}
{{--                            <div class="col-span-4 sm:col-span-3">--}}
{{--                                <label for="Descrizione"--}}
{{--                                       class="block my-2 text-sm font-medium text-gray-700">Short description</label>--}}

{{--                                <textarea id="myeditorinstance" name="short_description" rows="3"--}}
{{--                                          class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md"--}}
{{--                                          placeholder="">{!! $product->short_description!!}</textarea>--}}

{{--                            </div>--}}
                        </div>
                        <div class="grid grid-cols-6 gap-6 py-3">
                            <div class="col-span-12 sm:col-span-12">
                                <label for="Description"
                                       class="block my-2 text-sm font-medium text-gray-700">
                                    Descriere
                                </label>

                                <textarea id="myeditorinstance" name="long_description" rows="3"
                                          class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md"
                                          placeholder="">{!! $product->long_description!!}</textarea>

                            </div>
                        </div>
                        <div class="grid grid-cols-6 gap-6 py-3">
                            <div class="col-span-4 sm:col-span-3">
                                <label class="block my-2 text-md py-2 font-medium text-gray-700">
                                   Carte PDF
                                </label>
                                {!! uploadFormFile('pdf', $product->pdf, true, 'pdf') !!}

                                <div class="text-center mx-auto mt-2">
                                    @if($product->pdf != null && Storage::exists($product->pdf))
                                        <div
                                            x-data="{ 'showModal': false }"
                                            @keydown.escape="showModal = false"
                                            style="margin-top:20px !important;">
                                            <button type="button" @click="showModal = true" title="Sterge"
                                                    class="ml-3 inline-flex justify-center py-2 px-4 mr-5 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-900 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                                                <i class="fas fa-trash-alt"></i> <span
                                                    style="padding-left: 7px !important;">
                                                                                Sterge
                                                                            </span>
                                            </button>
                                            <!-- Trigger for Modal -->

                                            <!-- Modal -->
                                            <div
                                                class="fixed inset-0 z-30 flex items-center justify-center overflow-auto bg-black bg-opacity-50"
                                                x-show="showModal"
                                            >
                                                <!-- Modal inner -->
                                                <div
                                                    class="max-w-6xl px-6 py-6 mx-auto text-left rounded"
                                                    @click.away="showModal = false"
                                                    x-transition:enter="motion-safe:ease-out duration-300"
                                                    x-transition:enter-start="opacity-0 scale-90"
                                                    x-transition:enter-end="opacity-100 scale-100"
                                                >
                                                    <!-- Title / Close-->
                                                    <div class="flex items-center justify-between">
                                                        <h5 class="mr-3 text-black max-w-none">Title</h5>

                                                        <button type="button" class="z-50 cursor-pointer"
                                                                @click="showModal = false">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                                 height="24"
                                                                 viewBox="0 0 24 24" fill="none"
                                                                 stroke="currentColor">
                                                                <path stroke-linecap="round"
                                                                      stroke-linejoin="round"
                                                                      stroke-width="2"
                                                                      d="M6 18L18 6M6 6l12 12"/>
                                                            </svg>
                                                        </button>
                                                    </div>

                                                    <!-- content -->

                                                    <div
                                                        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                                                        <div class="bg-white px-4 pt-5 pb-4 py-5 sm:p-6 sm:pb-4">
                                                            <div class="md:flex sm:items-start py-3">
                                                                <div
                                                                    class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                                                                    <svg @click="toggleModal"
                                                                         class="h-6 w-6 text-red-600"
                                                                         xmlns="http://www.w3.org/2000/svg"
                                                                         fill="none"
                                                                         viewBox="0 0 24 24"
                                                                         stroke="currentColor"
                                                                         aria-hidden="true">
                                                                        <path stroke-linecap="round"
                                                                              stroke-linejoin="round"
                                                                              stroke-width="2"
                                                                              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                                                                    </svg>
                                                                </div>
                                                                <div
                                                                    class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                                                                    <h3 class="text-lg leading-6 font-medium text-gray-900"
                                                                        id="modal-title">
                                                                        Sunteți sigur că doriți să ștergeți acest format de carte?
                                                                        <br><strong>{{ $product->pdf }}</strong>
                                                                    </h3>
                                                                    <div class="mt-2">
                                                                        <p class="text-sm text-gray-500">
                                                                            {{__('product.alertSentenceProduct')}}
                                                                        </p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div
                                                            class="bg-gray-50 px-4 pb-7 sm:px-6 sm:flex sm:flex-row-reverse">
                                                            <a href="{{ route('remove-pdf' ,[ $product->id]) }}"
                                                               data-toggle="modal"
                                                               data-target="#my-modal"
                                                               class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto  mt-3">
                                                                {{__('product.yesAttachment')}}

                                                            </a>

                                                            <div class="flex items-center justify-between">
                                                                <button type="button"
                                                                        class="z-50 cursor-pointer"
                                                                        @click="showModal = false">
                                                                    <h5 class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500  sm:ml-3 sm:w-auto  mt-3">  {{__('product.no')}}</h5>
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    @endif
                                </div>
                            </div>

                            <!-- Epub-->
                            <div class="col-span-4 sm:col-span-3">
                                <label class="block my-2 text-md py-2 font-medium text-gray-700">
                                    Carte EPUB
                                </label>
                                {!! uploadFormFile('epub', $product->epub, true, 'epub') !!}

                                <div class="text-center mx-auto mt-2">
                                    @if($product->epub != null && Storage::exists($product->epub))
                                        <div
                                            x-data="{ 'showModal': false }"
                                            @keydown.escape="showModal = false"
                                            style="margin-top:20px !important;">
                                            <button type="button" @click="showModal = true" title="Sterge"
                                                    class="ml-3 inline-flex justify-center py-2 px-4 mr-5 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-900 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                                                <i class="fas fa-trash-alt"></i> <span
                                                    style="padding-left: 7px !important;">
                                                    Sterge
                                                </span>
                                            </button>
                                            <!-- Trigger for Modal -->

                                            <!-- Modal -->
                                            <div
                                                class="fixed inset-0 z-30 flex items-center justify-center overflow-auto bg-black bg-opacity-50"
                                                x-show="showModal"
                                            >
                                                <!-- Modal inner -->
                                                <div
                                                    class="max-w-6xl px-6 py-6 mx-auto text-left rounded"
                                                    @click.away="showModal = false"
                                                    x-transition:enter="motion-safe:ease-out duration-300"
                                                    x-transition:enter-start="opacity-0 scale-90"
                                                    x-transition:enter-end="opacity-100 scale-100"
                                                >
                                                    <!-- Title / Close-->
                                                    <div class="flex items-center justify-between">
                                                        <h5 class="mr-3 text-black max-w-none">Title</h5>

                                                        <button type="button" class="z-50 cursor-pointer"
                                                                @click="showModal = false">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                                 height="24"
                                                                 viewBox="0 0 24 24" fill="none"
                                                                 stroke="currentColor">
                                                                <path stroke-linecap="round"
                                                                      stroke-linejoin="round"
                                                                      stroke-width="2"
                                                                      d="M6 18L18 6M6 6l12 12"/>
                                                            </svg>
                                                        </button>
                                                    </div>

                                                    <!-- content -->

                                                    <div
                                                        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                                                        <div class="bg-white px-4 pt-5 pb-4 py-5 sm:p-6 sm:pb-4">
                                                            <div class="md:flex sm:items-start py-3">
                                                                <div
                                                                    class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                                                                    <svg @click="toggleModal"
                                                                         class="h-6 w-6 text-red-600"
                                                                         xmlns="http://www.w3.org/2000/svg"
                                                                         fill="none"
                                                                         viewBox="0 0 24 24"
                                                                         stroke="currentColor"
                                                                         aria-hidden="true">
                                                                        <path stroke-linecap="round"
                                                                              stroke-linejoin="round"
                                                                              stroke-width="2"
                                                                              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                                                                    </svg>
                                                                </div>
                                                                <div
                                                                    class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                                                                    <h3 class="text-lg leading-6 font-medium text-gray-900"
                                                                        id="modal-title">
                                                                        Sunteți sigur că doriți să ștergeți acest format de carte?
                                                                        <br><strong>{{ $product->epub }}</strong>
                                                                    </h3>
                                                                    <div class="mt-2">
                                                                        <p class="text-sm text-gray-500">
                                                                            {{__('product.alertSentenceProduct')}}
                                                                        </p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div
                                                            class="bg-gray-50 px-4 pb-7 sm:px-6 sm:flex sm:flex-row-reverse">
                                                            <a href="{{ route('remove-pdf' ,[ $product->id]) }}"
                                                               data-toggle="modal"
                                                               data-target="#my-modal"
                                                               class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto  mt-3">
                                                                {{__('product.yesAttachment')}}

                                                            </a>

                                                            <div class="flex items-center justify-between">
                                                                <button type="button"
                                                                        class="z-50 cursor-pointer"
                                                                        @click="showModal = false">
                                                                    <h5 class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500  sm:ml-3 sm:w-auto  mt-3">  {{__('product.no')}}</h5>
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    @endif
                                </div>
                            </div>

                            <div class="col-span-4 sm:col-span-3">
                                <label class="block my-2 text-md py-2 font-medium text-gray-700">
                                    Imagine de coperta
                                </label>
                                {!! uploadFormFile('img_01', $product->img_01) !!}

                                <div class="text-center mx-auto mt-2">
                                    @if($product->img_01 != null && Storage::exists($product->img_01))
                                        <div
                                            x-data="{ 'showModal': false }"
                                            @keydown.escape="showModal = false"
                                            style="margin-top:20px !important;">
                                            <button type="button" @click="showModal = true" title="Sterge"
                                                    class="ml-3 inline-flex justify-center py-2 px-4 mr-5 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-900 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                                                <i class="fas fa-trash-alt"></i> <span
                                                    style="padding-left: 7px !important;">
                                                    Sterge
                                                </span>
                                            </button>
                                            <!-- Trigger for Modal -->

                                            <!-- Modal -->
                                            <div
                                                class="fixed inset-0 z-30 flex items-center justify-center overflow-auto bg-black bg-opacity-50"
                                                x-show="showModal"
                                            >
                                                <!-- Modal inner -->
                                                <div
                                                    class="max-w-6xl px-6 py-6 mx-auto text-left rounded"
                                                    @click.away="showModal = false"
                                                    x-transition:enter="motion-safe:ease-out duration-300"
                                                    x-transition:enter-start="opacity-0 scale-90"
                                                    x-transition:enter-end="opacity-100 scale-100"
                                                >
                                                    <!-- Title / Close-->
                                                    <div class="flex items-center justify-between">
                                                        <h5 class="mr-3 text-black max-w-none">Title</h5>

                                                        <button type="button" class="z-50 cursor-pointer"
                                                                @click="showModal = false">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                                 height="24"
                                                                 viewBox="0 0 24 24" fill="none"
                                                                 stroke="currentColor">
                                                                <path stroke-linecap="round"
                                                                      stroke-linejoin="round"
                                                                      stroke-width="2"
                                                                      d="M6 18L18 6M6 6l12 12"/>
                                                            </svg>
                                                        </button>
                                                    </div>

                                                    <!-- content -->

                                                    <div
                                                        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                                                        <div class="bg-white px-4 pt-5 pb-4 py-5 sm:p-6 sm:pb-4">
                                                            <div class="md:flex sm:items-start py-3">
                                                                <div
                                                                    class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                                                                    <svg @click="toggleModal"
                                                                         class="h-6 w-6 text-red-600"
                                                                         xmlns="http://www.w3.org/2000/svg"
                                                                         fill="none"
                                                                         viewBox="0 0 24 24"
                                                                         stroke="currentColor"
                                                                         aria-hidden="true">
                                                                        <path stroke-linecap="round"
                                                                              stroke-linejoin="round"
                                                                              stroke-width="2"
                                                                              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                                                                    </svg>
                                                                </div>
                                                                <div
                                                                    class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                                                                    <h3 class="text-lg leading-6 font-medium text-gray-900"
                                                                        id="modal-title">
                                                                        Sunteți sigur că doriți să ștergeți acesta imagine?
                                                                        <br><strong>{{ $product->img_01 }}</strong>
                                                                    </h3>
                                                                    <div class="mt-2">
                                                                        <p class="text-sm text-gray-500">
                                                                            {{__('product.alertSentenceProduct')}}
                                                                        </p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div
                                                            class="bg-gray-50 px-4 pb-7 sm:px-6 sm:flex sm:flex-row-reverse">
                                                            <a href="{{ route('remove1' ,[ $product->id]) }}"
                                                               data-toggle="modal"
                                                               data-target="#my-modal"
                                                               class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto  mt-3">
                                                                {{__('product.yesAttachment')}}

                                                            </a>

                                                            <div class="flex items-center justify-between">
                                                                <button type="button"
                                                                        class="z-50 cursor-pointer"
                                                                        @click="showModal = false">
                                                                    <h5 class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500  sm:ml-3 sm:w-auto  mt-3">  {{__('product.no')}}</h5>
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    @endif
                                </div>
                            </div>


                            <div class="col-span-6 sm:col-span-3">
                                <label class="block my-2 text-md py-2 font-medium text-gray-700">
                                    Imaginea #2
                                </label>

                                {!! uploadFormFile('img_02', $product->img_02) !!}
                                @if($product->img_02 != null && Storage::exists($product->img_02))
                                    <div
                                        x-data="{ 'showModal': false }"
                                        @keydown.escape="showModal = false"
                                        style="margin-top:20px !important;">
                                        <button type="button" @click="showModal = true" title="Sterge"
                                                class="ml-3 inline-flex justify-center py-2 px-4 mr-5 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-900 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                                            <i class="fas fa-trash-alt"></i> <span
                                                style="padding-left: 7px !important;">Sterge</span>
                                        </button>
                                        <!-- Trigger for Modal -->

                                        <!-- Modal -->
                                        <div
                                            class="fixed inset-0 z-30 flex items-center justify-center overflow-auto bg-black bg-opacity-50"
                                            x-show="showModal"
                                        >
                                            <!-- Modal inner -->
                                            <div
                                                class="max-w-6xl px-6 py-6 mx-auto text-left rounded"
                                                @click.away="showModal = false"
                                                x-transition:enter="motion-safe:ease-out duration-300"
                                                x-transition:enter-start="opacity-0 scale-90"
                                                x-transition:enter-end="opacity-100 scale-100"
                                            >
                                                <!-- Title / Close-->
                                                <div class="flex items-center justify-between">
                                                    <h5 class="mr-3 text-black max-w-none">Title</h5>

                                                    <button type="button" class="z-50 cursor-pointer"
                                                            @click="showModal = false">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                             height="24"
                                                             viewBox="0 0 24 24" fill="none"
                                                             stroke="currentColor">
                                                            <path stroke-linecap="round"
                                                                  stroke-linejoin="round"
                                                                  stroke-width="2"
                                                                  d="M6 18L18 6M6 6l12 12"/>
                                                        </svg>
                                                    </button>
                                                </div>

                                                <!-- content -->

                                                <div
                                                    class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                                                    <div class="bg-white px-4 pt-5 pb-4 py-5 sm:p-6 sm:pb-4">
                                                        <div class="md:flex sm:items-start py-3">
                                                            <div
                                                                class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                                                                <svg @click="toggleModal"
                                                                     class="h-6 w-6 text-red-600"
                                                                     xmlns="http://www.w3.org/2000/svg"
                                                                     fill="none"
                                                                     viewBox="0 0 24 24"
                                                                     stroke="currentColor"
                                                                     aria-hidden="true">
                                                                    <path stroke-linecap="round"
                                                                          stroke-linejoin="round"
                                                                          stroke-width="2"
                                                                          d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                                                                </svg>
                                                            </div>
                                                            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                                                                <h3 class="text-lg leading-6 font-medium text-gray-900"
                                                                    id="modal-title">
                                                                    Sunteți sigur că doriți să ștergeți acest produs?
                                                                    <br><strong>{{ $product->img_01 }}</strong>
                                                                </h3>
                                                                <div class="mt-2">
                                                                    <p class="text-sm text-gray-500">
                                                                        {{__('product.alertSentenceProduct')}}
                                                                    </p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div
                                                        class="bg-gray-50 px-4 pb-7 sm:px-6 sm:flex sm:flex-row-reverse">
                                                        <a href="{{ route('remove2' ,[ $product->id]) }}"
                                                           data-toggle="modal"
                                                           data-target="#my-modal"
                                                           class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto  mt-3">
                                                            {{__('product.yesAttachment')}}

                                                        </a>

                                                        <div class="flex items-center justify-between">
                                                            <button type="button"
                                                                    class="z-50 cursor-pointer"
                                                                    @click="showModal = false">
                                                                <h5 class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500  sm:ml-3 sm:w-auto  mt-3">  {{__('product.no')}}</h5>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>

                            <div class="col-span-6 sm:col-span-3">
                                <label class="block my-2 text-md py-2 font-medium text-gray-700">
                                    Imagine #3
                                </label>

                                {!! uploadFormFile('img_03', $product->img_03) !!}
                                @if($product->img_03 != null && Storage::exists($product->img_03))
                                    <div
                                        x-data="{ 'showModal': false }"
                                        @keydown.escape="showModal = false"
                                        style="margin-top:20px !important;">
                                        <button type="button" @click="showModal = true" title="Sterge"
                                                class="ml-3 inline-flex justify-center py-2 px-4 mr-5 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-900 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                                            <i class="fas fa-trash-alt"></i> <span
                                                style="padding-left: 7px !important;">Sterge</span>
                                        </button>
                                        <!-- Trigger for Modal -->

                                        <!-- Modal -->
                                        <div
                                            class="fixed inset-0 z-30 flex items-center justify-center overflow-auto bg-black bg-opacity-50"
                                            x-show="showModal"
                                        >
                                            <!-- Modal inner -->
                                            <div
                                                class="max-w-6xl px-6 py-6 mx-auto text-left rounded"
                                                @click.away="showModal = false"
                                                x-transition:enter="motion-safe:ease-out duration-300"
                                                x-transition:enter-start="opacity-0 scale-90"
                                                x-transition:enter-end="opacity-100 scale-100"
                                            >
                                                <!-- Title / Close-->
                                                <div class="flex items-center justify-between">
                                                    <h5 class="mr-3 text-black max-w-none">Title</h5>

                                                    <button type="button" class="z-50 cursor-pointer"
                                                            @click="showModal = false">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                             height="24"
                                                             viewBox="0 0 24 24" fill="none"
                                                             stroke="currentColor">
                                                            <path stroke-linecap="round"
                                                                  stroke-linejoin="round"
                                                                  stroke-width="2"
                                                                  d="M6 18L18 6M6 6l12 12"/>
                                                        </svg>
                                                    </button>
                                                </div>

                                                <!-- content -->

                                                <div
                                                    class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                                                    <div class="bg-white px-4 pt-5 pb-4 py-5 sm:p-6 sm:pb-4">
                                                        <div class="md:flex sm:items-start py-3">
                                                            <div
                                                                class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                                                                <svg @click="toggleModal"
                                                                     class="h-6 w-6 text-red-600"
                                                                     xmlns="http://www.w3.org/2000/svg"
                                                                     fill="none"
                                                                     viewBox="0 0 24 24"
                                                                     stroke="currentColor"
                                                                     aria-hidden="true">
                                                                    <path stroke-linecap="round"
                                                                          stroke-linejoin="round"
                                                                          stroke-width="2"
                                                                          d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                                                                </svg>
                                                            </div>
                                                            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                                                                <h3 class="text-lg leading-6 font-medium text-gray-900"
                                                                    id="modal-title">
                                                                    Sunteți sigur că doriți să ștergeți acest produs?
                                                                    <br><strong>{{ $product->img_03 }}</strong>
                                                                </h3>
                                                                <div class="mt-2">
                                                                    <p class="text-sm text-gray-500">
                                                                        {{__('product.alertSentenceProduct')}}
                                                                    </p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div
                                                        class="bg-gray-50 px-4 pb-7 sm:px-6 sm:flex sm:flex-row-reverse">
                                                        <a href="{{ route('remove3' ,[ $product->id]) }}"
                                                           data-toggle="modal"
                                                           data-target="#my-modal"
                                                           class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto  mt-3">
                                                            {{__('product.yesAttachment')}}

                                                        </a>

                                                        <div class="flex items-center justify-between">
                                                            <button type="button"
                                                                    class="z-50 cursor-pointer"
                                                                    @click="showModal = false">
                                                                <h5 class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500  sm:ml-3 sm:w-auto  mt-3">  {{__('product.no')}}</h5>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>

                        </div>
                        <!-- Audit Log Table -->
                        <div class="mt-10">
                            <h4 class="text-lg font-medium text-gray-700">Audit Log</h4>
                            <div class="overflow-x-auto">
                                <table class="min-w-full bg-white border border-gray-200">
                                    <thead>
                                    <tr class="bg-gray-100 border-b">
                                        <th class="py-2 px-4 text-left text-sm font-medium text-gray-600">ID</th>
                                        <th class="py-2 px-4 text-left text-sm font-medium text-gray-600">Utilizator</th>
                                        <th class="py-2 px-4 text-left text-sm font-medium text-gray-600">Eveniment</th>
                                        <th class="py-2 px-4 text-left text-sm font-medium text-gray-600">Valori vechi</th>
                                        <th class="py-2 px-4 text-left text-sm font-medium text-gray-600">Valori noi</th>
                                        <th class="py-2 px-4 text-left text-sm font-medium text-gray-600">Adresa IP</th>
                                        <th class="py-2 px-4 text-left text-sm font-medium text-gray-600">Data</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($audits as $audit)
                                        <tr class="border-b hover:bg-gray-50">
                                            <td class="py-2 px-4 text-sm text-gray-700"><a href="{{ $audit->url }}" target="_blank">{{ $audit->id }}</a></td>
                                            <td class="py-2 px-4 text-sm text-gray-700">{{ $audit->user ? $audit->user->name : 'N/A' }}</td>
                                            <td class="py-2 px-4 text-sm text-gray-700">{{ $audit->event }}</td>
                                            <td class="py-2 px-4 text-sm text-gray-700">
                                                @foreach($audit->old_values as $key => $value)
                                                    <strong>{{ $key }}</strong>: {{ $value }}<br>
                                                @endforeach
                                            </td>
                                            <td class="py-2 px-4 text-sm text-gray-700">
                                                @foreach($audit->new_values as $key => $value)
                                                    <strong>{{ $key }}</strong>: {{ $value }}<br>
                                                @endforeach
                                            </td>
                                            <td class="py-2 px-4 text-sm text-gray-700">{{ $audit->ip_address }}</td>
                                            <td class="py-2 px-4 text-sm text-gray-700">{{ $audit->created_at }}</td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <br>
                        <hr>
                        <div class="px-4 py-3 text-left sm:px-6 pb-10 mt-8">
                            <a href="{{url()->previous()}}"
                               class="btn px-6 py-2.5 bg-green-600 hover:bg-green-700 text-white font-medium text-xs leading-tight uppercase rounded shadow-md  hover:shadow-lg focus:bg-green-900  focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out items-center">
                                Inapoi
                            </a>
                            <button type="submit"
                                    class="ml-7 btn px-6 py-2.5 bg-blue-700 hover:bg-blue-900 text-white font-medium text-xs leading-tight uppercase rounded shadow-md  hover:shadow-lg focus:bg-blue-900  focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out items-center">
                                Salveaza
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

@endsection