@extends('backend.adminlayouts.master')

@section('body')
<h3 class="text-gray-700 text-3xl font-medium">Editeaza publicatie periodica</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('periodic_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</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 }}"
                                required>
                        </div>
                        <div class="col-span-2 sm:col-span-2">
                            <label for="publisher" class="block my-2 text-sm font-medium text-gray-700">Editor</label>
                            <input type="text" name="publisher" id="publisher"
                                autocomplete="publisher"
                                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->publisher }}"
                                required>
                        </div>
                        <div class="col-span-2 sm:col-span-2">
                            <label for="format" class="block my-2 text-sm font-medium text-gray-700">Format</label>
                            <input type="text" name="format" id="format"
                                autocomplete="format"
                                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->format }}"
                                required>
                        </div>
                    </div>
                    <div class="grid grid-cols-6 gap-6 py-3">
                        <div class="col-span-4 sm:col-span-2">
                            <label for="categories"
                                class="block my-2 text-sm font-medium text-gray-700">Categorie</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="issn"
                                class="block my-2 text-sm font-medium text-gray-700">ISSN</label>
                            <input type="text" name="issn" id="issn"
                                autocomplete="issn"
                                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"
                                value="{{ $product->issn }}"
                                required>
                        </div>
                        <div class="col-span-1 sm:col-span-1">
                            <label for="prev_issn"
                                class="block my-2 text-sm font-medium text-gray-700">ISSN anterior</label>
                            <input type="text" name="prev_issn" id="prev_issn"
                                autocomplete="prev_issn"
                                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"
                                value="{{ $product->prev_issn }}">
                        </div>
                        <div class="col-span-1 sm:col-span-1">
                            <label for="e_issn"
                                class="block my-2 text-sm font-medium text-gray-700">e-ISSN</label>
                            <input type="text" name="e_issn" id="e_issn"
                                autocomplete="e_issn"
                                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"
                                value="{{ $product->e_issn }}">
                        </div>
                        <div class="col-span-1 sm:col-span-1">
                            <label for="issuesPerYear" class="block my-2 text-sm font-medium text-gray-700">Numere pe an</label>
                            <input type="text" name="issuesPerYear" id="issuesPerYear"
                                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"
                                value="{{ $product->issuesPerYear }}"
                                required>
                        </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 }}">
                        </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="col-span-6 sm:col-span-6">
                            <label for="editorialBoard"
                                class="block my-2 text-sm font-medium text-gray-700">Bord editorial</label>

                            <textarea id="myeditorinstance" name="editorialBoard" 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->editorialBoard }}</textarea>
                        </div>
                        <div class="col-span-4 sm:col-span-3">
                            <label class="block my-2 text-md py-2 font-medium text-gray-700">
                                Coperta
                            </label>
                            {!! uploadFormFile('img_01', $product->img_01) !!}
                        </div>
                        <div class="col-span-4 sm:col-span-3">
                            <label class="block my-2 text-md py-2 font-medium text-gray-700">
                                Image #2
                            </label>
                            {!! uploadFormFile('img_02', $product->img_02) !!}
                        </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="flex justify-end items-center gap-3 mt-4">
                        <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="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