{{-- resources/views/pages/practical-examples/categories/create.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;
    document.addEventListener('DOMContentLoaded', () => {
        document.querySelectorAll('input, select, textarea').forEach(element => {
            element.setAttribute('readonly', true);
            element.setAttribute('disabled', true);
        });
    });
@endif
</script>
@endsection

@push('pageTitle')
    {{ isset($practicalExampleCategory) && isset($readonly) && $readonly ? __('labels.view_best_practice_category') : (isset($practicalExampleCategory) ? __('labels.edit_best_practice_category') : __('labels.create_best_practice_category')) }}
@endpush

@section('content')
@include('components.common.page-header', [
    'pageTitle' => isset($practicalExampleCategory) && isset($readonly) && $readonly ? __('labels.view_best_practice_category') : (isset($practicalExampleCategory) ? __('labels.edit_best_practice_category') : __('labels.create_best_practice_category')),
    'actionButton' => [
        'url' => route('practical-example-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($practicalExampleCategory) ? route('practical-example-categories.update', $practicalExampleCategory->id) : route('practical-example-categories.store') }}"
        method="POST"
        enctype="multipart/form-data"
    @endif
    id="practicalExampleCategoryForm">
    @csrf
    @if(isset($practicalExampleCategory))
        @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', $practicalExampleCategory->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', $practicalExampleCategory->description ?? '') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <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="category-status"
                                            {{ isset($readonly) && $readonly ? "disabled" : "" }}
                                            value="1" @checked(old('is_active', $practicalExampleCategory->is_active ?? true))>
                                        <label class="form-check-label" for="category-status">
                                            {{ old('is_active', $practicalExampleCategory->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($practicalExampleCategory) ? __('labels.update') : __('labels.save') }}
                    </button>
                    <a href="{{ route('practical-example-categories.index') }}" class="btn btn-secondary">{{ __('labels.cancel') }}</a>
                </div>
            @endif
        </div>
    </div>
</form>
@endsection