@extends('backend.adminlayouts.master')

@section('body')
<h3 class="text-gray-700 text-3xl font-medium">Creeaza 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.store') }}" method="POST"
            enctype="multipart/form-data">
            @csrf
            <div class="shadow overflow-hidden sm:rounded-md">
                <div class="px-4 py-5 bg-white sm:p-6">
                    <div class="col-span-9 sm:col-span-4">
                        <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"
                                    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"
                                    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"
                                    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 }}">{{ $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"
                                    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">
                            </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">
                            </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"
                                    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">
                            </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">
                            </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=""></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') !!}
                            </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') !!}
                            </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>
            </div>
        </form>
    </div>

    @endsection