@extends('admin.layouts.app')
@section('title', __('Admins'))

@section('content')


    <div class="block-header">
        <ol class="breadcrumb breadcrumb-col-pink">
            <li><a href="/admin"><i class="material-icons">home</i> Home</a></li>
            <li><a href="{{ route('admin.post.index') }}"><i class="material-icons">description</i> Post </a></li>
            <li class="active"><i class="material-icons">add</i>Add Post</li>
        </ol>
    </div>



    <form action="{{ route('admin.post.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="grid grid-cols-12 gap-6 mt-5">
            <div class="intro-y col-span-8 box p-5 ">

                <div class="mb-3">
                    <label> Title </label>
                    <input type="text" name="title" value="{{ old('title') }}" required class="input w-full border mt-2">
                </div>
                {{-- <div class="mb-3 ">
                    <input type="checkbox" id="published" name="status" class="filled-in" value="1" />
                    <label for="published">Published</label>
                </div> --}}

                

                <div class="mb-6 ">
                    <label> {{ __('Body') }} </label>
                    <textarea name="description" class="input textarea w-full border mt-2" rows="5"
                        id="mytextarea">{{ old('description') }}</textarea>
                </div>


                <hr />
                 {{--  --}}
                 <div class="mt-6 mb-3">
                    <h4 class="font-bold">SEO META</h4>
                </div>
                <div class="mb-3">
                    <label>Meta Title </label>
                    <input type="text" name="meta_title" value="{{ old('meta_title') }}"  class="input w-full border mt-2">
                </div>
                <div class="mb-3">
                    <label>Meta Keywords </label>
                    <input type="text" name="meta_keywords" value="{{ old('meta_keywords') }}"  class="input w-full border mt-2">
                </div>
                <div class="mb-3">
                    <label>Meta Description </label>
                    <textarea  name="meta_description" class="input w-full border mt-2"></textarea>
                </div>

            </div>
            <div class="intro-y col-span-4 box p-5 ">

                <div class="mb-4"> 
                    <label>Categories</label>
                    <u><a href="{{ route('admin.categoriePost.create') }}" title="Add new CategoriePost"
                            target="_blanck">Ajouter nouveau</a></u>
                    <div class="mt-2">
                        <select name="categories" class="select2 w-full" >
                            @foreach ($categories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

               
                <div class="mb-4">
                    <label> GARD IMAGE ( JPG / PNG ) </label>
                    {{-- <input type="file" name="image" class="input w-full border mt-2" accept="image/*"> --}}
                    <input type="file" name="image" id="profile-image-input" class="input w-full border mt-2"
                        accept="image/*">
                       
                    {{-- <img src="{{asset('/storage/app/public/offers/'.$offer->image)}}" id="profile-imgsrc" class="img-responsive  mt-2" style="height:200px;"> --}}
                    <img src="" id="profile-imgsrc" class="img-responsive  mt-2" style="height:200px;">


                </div>

                <div class="mb-4 ">
                    <select name="type_post" class="select2 w-full border mt-2" >
                        <option value="NORMAL" >Normal</option>
                        {{-- <option value="TRENDING" >Trending</option> --}}
                        {{-- <option value="LATEST" >Latest</option> --}}
                        {{-- <option value="FEATURED" >Featured</option> --}}
                    <select>
                </div>

                <div class="mb-3">
                    <label> Status </label>
                    <input type="checkbox" id="status" name="status" checked>
                </div>

                <button type="submit" class="button bg-theme-1 mt-10 text-white w-full	"> {{ __('Save') }} </button>
            </div>
        </div>

    </form>









@endsection


@section('javascript')

    
<script>
    $(function() {
        function showImage(fileInput, imgID) {
            if (fileInput.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $(imgID).attr('src', e.target.result);
                    $(imgID).attr('alt', fileInput.files[0].name);
                }
                reader.readAsDataURL(fileInput.files[0]);
            }
        }
        $('#profile-image-btn').on('click', function() {
            $('#profile-image-input').click();
        });
        $('#profile-image-input').on('change', function() {
            showImage(this, '#profile-imgsrc');

            var img = document.getElementById('profile-imgsrc');
            img.style.display = 'block';

        });
    })
</script>

@endsection