{{-- 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">
@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>
@if(isset($readonly) && $readonly)
    const isReadonly = true;
    conversation_guide.querySelectorAll('input, select, textarea').forEach(element => {
       // element.setAttribute('readonly', true);
       // element.setAttribute('disabled', true);
    });
@endif
</script>
@endsection

@push('pageTitle')
    {{ isset($conversationGuideCategory) && isset($readonly) && $readonly ? __('labels.conversation_guide_categories') : (isset($conversationGuideCategory) ? __('labels.conversation_guide_categories') : __('labels.conversation_guide_categories')) }}
@endpush

@section('content')
@include('components.common.page-header', [
    'pageTitle' => isset($conversationGuideCategory) && isset($readonly) && $readonly ? __('labels.view_category') : (isset($conversationGuideCategory) ? __('labels.edit_category') : __('labels.create_category')),
    'actionButton' => [
        'url' => route('conversation-guide-categories.index'),
        'text' => __('labels.back_to_list'),
    ],
])

@include('components.common.flush-message')
@include('components.common.validation-errors')

<form
    @if(!isset($readonly) || (isset($readonly) && !$readonly))
        action="{{ isset($conversationGuideCategory) ? route('conversation-guide-categories.update', $conversationGuideCategory->id) : route('conversation-guide-categories.store') }}" 
        method="POST"
        enctype="multipart/form-data"
    @endif 
    id="conversation_guideForm">
    @csrf
    @if(isset($conversationGuideCategory))
        @method('PUT')
    @endif

    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-body">                    
                    {{-- 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', $conversationGuideCategory->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', $conversationGuideCategory->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($conversationGuideCategory->author_name) && $conversationGuideCategory->author_name ? $conversationGuideCategory->author_name : auth()->user()->name),
                    ])


                    <div class="mb-3 row">
                        <label class="col-md-2 col-form-label">{{ __('labels.status') }}</label>
                        <div class="col-md-10">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-check form-switch">
                                        <input 
                                            type="checkbox" 
                                            class="form-check-input" 
                                            name="is_active" 
                                            id="role-status"
                                            {{ isset($readonly) && $readonly ? "disabled" : "" }}
                                            value="1" @checked(old('is_active', $conversationGuideCategory->is_active ?? true))>
                                        <label class="form-check-label" for="role-status">
                                            {{ old('is_active', $conversationGuideCategory->is_active ?? true) ? __('labels.active') : __('labels.inactive') }}
                                        </label>
                                    </div>
                                    @error('is_active')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>           
                </div>
            </div>

            @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($conversationGuideCategory) ? __('labels.update') : __('labels.save') }}
                    </button>
                    <a href="{{ route('conversation-guide-categories.index') }}" class="btn btn-secondary">{{ __('labels.cancel') }}</a>
                </div>
            @endif
        </div>
    </div>
</form>
@endsection