@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.update', $post->id) }}" method="POST" enctype="multipart/form-data">
        @csrf
            @method('PUT')
        <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="{{ $post->title }}" required class="input w-full border mt-2">
                </div>


                <div class="mb-6 ">
                    <label> {{ __('Body') }} </label>
                    <textarea name="description" class="input textarea w-full border mt-2" rows="5"
                        id="mytextarea">{{ $post->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="{{ $post->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="{{ $post->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">{{ $post->meta_description }}</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 class="select2 block w-full border mt-2" name="categories[]"  >
                                @foreach ( $categories as $category )
                                        <option
                                            value="{{ $category->id }}"
                                            {{ in_array( $category->id , ( old('categories') ?? $post->categoriesListId() ) ) ? "selected" : null }}
                                            > {{ $category->name }} </option>
                                    @endforeach
                                {{-- @foreach($categories as $cat)
                                    <option 
                                        value="{{$cat->id}}" 
                                        @if($categoriesSelected) {{ in_array( $cat->id , $categoriesSelected ) ? "selected" : ""}} @endif
                                        > 
                                        {{$cat->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/posts/' . $post->image) }}" id="profile-imgsrc"
                        class="img-responsive" style="height:200px;">
                </div>


                <div class="mb-4 ">
                    <select name="type_post" class="select2 w-full border mt-2" >
                        <option value="NORMAL" {{ $post->type_post == "NORMAL" ? "selected" : "" }}>Normal</option>
                        <option value="TRENDING" {{ $post->type_post == "TRENDING" ? "selected" : "" }}>Trending</option>
                        <option value="LATEST" {{ $post->type_post == "LATEST" ? "selected" : "" }}>Latest</option>
                        <option value="FEATURED"{{ $post->type_post == "FEATURED" ? "selected" : "" }} >Featured</option>
                    <select>
                </div>
                <div class="mb-4">
                    <label> Status </label>
                    <input type="checkbox" id="status" name="status"  {{ $post->status = true ? '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