{{-- resources/views/groups/form.blade.php --}}
@extends('layouts.app')
@section('css')
<!-- FilePond Styles -->
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link href="{{ asset('assets/custom/css/common/file-manger.css') }}" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
<style>
    .select2-container--bootstrap-5 .select2-selection {
        min-height: calc(1.5em + 1rem + 2px);
        padding: 0.5rem 1rem;
        font-size: 1rem;
        border-radius: 0.5rem;
    }
    .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
        padding-left: 0;
    }
    .add-category-btn-container {
        border-top: 1px solid #dee2e6;
        margin-top: 5px;
    }
</style>
@endsection

@section('js')
<!-- FilePond Library & Plugins -->
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
<script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>
<script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
const lang_select_category              = "@lang('labels.select_category')";
const lang_add_new_category             = "@lang('labels.add_new_category')";
const lang_category_name                = "@lang('labels.category_name')";
const lang_category_name_required       = "@lang('labels.category_name_required')";
const lang_save_category                = "@lang('labels.save_category')";
const lang_category_added_successfully  = "@lang('labels.category_added_successfully')";
const lang_select_or_create_category    = "@lang('labels.select_or_create_category')";
const lang_saving                       = "@lang('labels.saving')";
const lang_error_occurred               = "@lang('labels.error_occurred')";


@if(isset($readonly) && $readonly)
    const isReadonly = true;
    document.querySelectorAll('input, select, textarea').forEach(element => {
       // element.setAttribute('readonly', true);
       // element.setAttribute('disabled', true);
    });
@endif

const totalGroupsCount = {{ (isset($groups) && count($groups)) ? count($groups) : 0 }};
const postId = {{ isset($post) ? $post->id : 'null' }};
const loadCommentsUrl = @isset($post) "/posts/{{ $post->id }}/comments" @else null @endisset;
const canCreateCategories = @json(Auth::user()->can('create', \App\Models\PostCategory::class));
</script>
<script src="{{ asset('assets/custom/js/common/file-manger.js') }}"></script>
<script src="{{ asset('assets/custom/js/common/select-groups.js') }}"></script>
<script src="{{ asset('assets/custom/js/posts/create.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        initializeFilePond();
        initializeAssetButtons();

        // Initialize Select2 with Bootstrap 5 theme for all select2 elements except category
        // $('.select2').not('[name="category_id"]').select2({
        //     theme: 'bootstrap-5',
        //     placeholder: "{{ __('labels.select') }}",
        //     allowClear: true,
        //     width: '100%',
        //     dropdownParent: document.body
        // });

        // Initialize category select with add button functionality
        initCategorySelect();
    });
</script>
@endsection

@push('pageTitle')
    {{ isset($post) && isset($readonly) && $readonly ? __('labels.view_post') : (isset($post) ? __('labels.edit_post') : __('labels.create_post')) }}
@endpush

@section('content')
@include('components.common.page-header', [
    'pageTitle' => isset($post) && isset($readonly) && $readonly ? __('labels.view_post') : (isset($post) ? __('labels.edit_post') : __('labels.create_post')),
    'actionButton' => [
        'url' => isset($selectedGroupId) ? route('groups.show', ['group' => $selectedGroupId]) : route('posts.index'),
        'text' => isset($selectedGroupId) ? __('labels.back_to_group') : __('labels.back_to_posts'),
    ],
])

@include('components.common.flush-message')
@include('components.common.validation-errors')
@include('components.form.add-category-modal')
<form
    @if(!isset($readonly) || (isset($readonly) && !$readonly))
        action="{{ isset($post) ? route('posts.update', $post->id) : route('posts.store') }}" 
        method="POST"
        enctype="multipart/form-data"
    @endif 
    id="documentForm">
    @csrf
    @if(isset($post))
        @method('PUT')
    @endif

{{-- Custom Author Name --}}



    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-body">
                    <input type="hidden" name="id" value="{{ $post->id ?? '' }}" />
                    <input type="hidden" name="selected_group_id" value="{{ $selectedGroupId ?? '' }}" />
                    
                    {{-- Title --}}
                    <div class="mb-3 row">
                        <label for="title" class="col-md-2 col-form-label">
                            {{ __('labels.title') }} <span class="text-danger">*</span>
                        </label>
                        <div class="col-md-10">
                            <input class="form-control @error('title') is-invalid @enderror" type="text"
                                   name="title" value="{{ old('title', $post->title ?? '') }}" 
                                   {{ isset($readonly) && $readonly ? "readonly" : "" }} 
                                   placeholder="{{ __('labels.title') }}" required>
                            @error('title')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    {{-- Description --}}
                    <div class="mb-3 row">
                        <label for="description" class="col-md-2 col-form-label">{{ __('labels.description') }}</label>
                        <div class="col-md-10">
                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                      name="description" {{ isset($readonly) && $readonly ? "readonly" : "" }} 
                                      rows="3" placeholder="{{ __('labels.description') }}">{{ old('description', $post->description ?? '') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    @include('components.form.author-name', [
                        'readonly' => isset($readonly) && $readonly ? 1 : 0,
                        'authorName' => old('author_name', isset($post->author_name) && $post->author_name ? $post->author_name : auth()->user()->name),
                    ])

                    <div class="mb-3 row">
                        <label for="type" class="col-md-2 col-form-label">{{ __('labels.type') }} <span class="text-danger">*</span></label>
                        <div class="col-md-10">
                            <select class="form-control @error('type') is-invalid @enderror" 
                                    name="type" {{ isset($readonly) && $readonly ? "disabled" : "" }} required>
                                <option value="text" {{ old('type', $post->type ?? '') == 'text' ? 'selected' : '' }}>{{ __('labels.text') }}</option>
                                <option value="discussion" {{ old('type', $post->type ?? '') == 'discussion' ? 'selected' : '' }}>{{ __('labels.discussion') }}</option>
                                <option value="question" {{ old('type', $post->type ?? '') == 'question' ? 'selected' : '' }}>{{ __('labels.question') }}</option>
                            </select>
                            @error('type')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    {{-- Category with Add Button --}}
                    <div class="mb-3 row">
                        <label for="category_id" class="col-md-2 col-form-label">{{ __('labels.category') }} <span class="text-danger">*</span></label>
                        <div class="col-md-10">
                            <div class="input-group">
                                <select class="form-control select2 @error('category_id') is-invalid @enderror" 
                                        name="category_id" {{ isset($readonly) && $readonly ? "disabled" : "" }} required>
                                    <option value="">{{ __('labels.select_category') }}</option>
                                    @foreach($categories as $key => $value)
                                        <option value="{{$key}}" {{ old('category_id', $post->category_id ?? '') == $key ? 'selected' : '' }}>{{ $value }}</option>
                                    @endforeach
                                </select>
                                @if(!isset($readonly) || (isset($readonly) && !$readonly))
                                    @can('create', \App\Models\PostCategory::class)
                                    <button type="button" class="btn btn-outline-secondary" onclick="showAddCategoryModal()" 
                                            data-toggle="tooltip" data-placement="top"
                                            data-bs-toggle="tooltip" 
                                            title="{{ __('labels.add_new_category') }}">
                                        <i class="fas fa-plus"></i>
                                    </button>
                                    @endcan
                                @endif
                            </div>
                            @error('category_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror

                            @can('create', \App\Models\PostCategory::class)
                                <small class="text-muted">{{ __('labels.select_or_create_category') }}</small>
                            @endcan
                        </div>
                    </div>

                    
                    @include('components.form.published-inputs', [
                            'readonly' => isset($readonly) && $readonly ? 1 : 0,
                            'published_at' => old('published_at', $post->published_at ?? ''),
                            'is_published' => old('is_published', $post->is_published ?? ''),
                    ])

                </div>
            </div>


            @if(isset($post->assets) && count($post->assets))
                @include('components.form.file-manager.existing-files',[
                    'readonly' => isset($readonly) && $readonly ? 1 : 0,
                    'assets' => $post->assets
                ])
            @endif

            @if(!isset($readonly) || (isset($readonly) && !$readonly))
                @include('components.form.file-manager.upload-files')
            @endif

            {{-- @include('components.form.select-group',[
                'readonly' => isset($readonly) && $readonly ? 1 : 0,
                'groups' => $groups ?? [],
                'selectedGroups' => old('groups', isset($selectedGroups) && count($selectedGroups) ? $selectedGroups : null),
                'canCreate' => auth()->user()->can('create',\App\Models\Post::class),
                'canUpdate' => isset($post) && auth()->user()->can('update',$post),
            ]) --}}

            @if(!isset($readonly) || (isset($readonly) && !$readonly))
                <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-3">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-1"></i>{{ isset($post) ? __('labels.update') : __('labels.save') }}
                    </button>
                    <a href="{{ route('posts.index') }}" class="btn btn-secondary">{{ __('labels.cancel') }}</a>
                </div>
            @endif
</form>
{{-- @if(isset($post))
    @include('components.comments.index', [
        'comments'        => $post->comments ?? null,
        'commentStates'   => \App\Models\Comment::commentStates($post),
        'commentableId'   => $post->id ?? null,
        'commentableType' => 'App\Models\Post',
    ])
@endif --}}
@endsection