@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="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" />
<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 src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
@if(isset($readonly) && $Dreadonly)
    console.log(' $readonly : {{ $readonly }}',)
    const isReadonly = true;
    checklist.querySelectorAll('input, select, textarea').forEach(element => {
        element.setAttribute('readonly', true);
        element.setAttribute('disabled', true);
    });
@endif

</script>
<script src="{{ asset('assets/custom/js/common/file-manger.js') }}"></script>
<script src="{{ asset('assets/custom/js/common/select-groups.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        if(typeof window.isReadonly === undefined  || !window.isReadonly)
        {
            initializeFilePond();
            initializeFileTypeButtons();
            initializeFileTypeSelect();
            initializeAssetButtons();
            initCategorySelect();
        }
    });

    let urlCount = {{ !empty(old('urls')) ? count(old('urls')) : (isset($checklist->urls) && $checklist->urls->count() > 0 ? $checklist->urls->count() : 1) }};


</script>
<script src="{{ asset('assets/custom/js/common/url-links-manage.js') }}"></script>
@endsection

@push('pageTitle')
    {{ __('labels.checklists') }}
@endpush

@section('content')
@include('components.common.page-header', [
    'pageTitle' => isset($checklist) && isset($readonly) && $readonly ? __('labels.view_checklist') : (isset($checklist) ? __('labels.edit_checklist') : __('labels.create_new_checklist')),
    'actionButton' => [
        'url' => route('checklists.index'),
        'text' => __('labels.back_to_lists'),
    ],
])
@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($checklist) ? route('checklists.update', $checklist->id) : route('checklists.store') }}" 
        method="POST"
        enctype="multipart/form-data"
    @endif 
    id="checklistForm">
    @csrf
    @if(isset($checklist))
        @method('PUT')
    @endif

    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-body">
                    <input type="hidden" name="id" value="{{ $checklist->id ?? '' }}" />

                    <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', $checklist->title ?? '') }}" 
                                {{ isset($readonly) && $readonly ? "readonly" : "" }} placeholder="{{ __('labels.title') }}" required>
                            @error('title')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <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', $checklist->description ?? '') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="mb-3 row">
                        <label for="type" class="col-md-2 col-form-label">{{ __('labels.type') }}</label>
                        <div class="col-md-10">
                            <select class="form-control @error('type') is-invalid @enderror" 
                                    name="type" id="file_type" 
                                    {{ isset($readonly) && $readonly ? "disabled" : "" }} required>
                                <option value="all" {{ old('type', $checklist->type ?? '') == 'all' ? 'selected' : '' }}>{{ __('labels.all_files') }}</option>
                                <option value="image" {{ old('type', $checklist->type ?? '') == 'image' ? 'selected' : '' }}>{{ __('labels.images') }}</option>
                                <option value="checklist" {{ old('type', $checklist->type ?? '') == 'checklist' ? 'selected' : '' }}>{{ __('labels.checklists_type') }}</option>
                                <option value="video" {{ old('type', $checklist->type ?? '') == 'video' ? 'selected' : '' }}>{{ __('labels.videos') }}</option>
                            </select>
                            @error('type')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    {{-- Category with Add Button --}}
                    @include('components.form.select2-with-add-button',[
                        'name' => 'category_id',
                        'categoryList' => $categories,
                        'selectedValue' => $checklist->category_id ?? null,
                        'required' => true,
                        'canCreate' => Auth::user()->can('create', \App\Models\ChecklistCategory::class),
                        'createUrl' => route('checklist-categories.store'),
                    ])



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


                    {{-- <div class="mb-3 row">
                        <label class="col-md-2 col-form-label">{{ __('labels.status') }}</label>
                        <div class="col-md-10">
                            <div class="form-check form-switch">
                                <input 
                                    type="checkbox" 
                                    class="form-check-input" 
                                    name="is_active" 
                                    id="checklist-status"
                                    {{ isset($readonly) && $readonly ? "disabled" : "" }}
                                    value="1" @checked(old('is_active', $checklist->is_active ?? true))>
                                <label class="form-check-label" for="checklist-status">
                                    {{ old('is_active', $checklist->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>

            @include('components.form.url-links-manage', [
                'readonly' => isset($readonly) && $readonly ? 1 : 0,
                'urlList' => old('urls', isset($selectedUrls) && count($selectedUrls) ? $selectedUrls : null),
            ])

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

            {{-- Include upload files section --}}
            @if(!isset($readonly) || (isset($readonly) && !$readonly))
                @include('components.form.file-manager.upload-files',[
                    'fileTypeSelector' => 1
                ])
            @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\Checklist::class),
                'canUpdate' => isset($checklist) && auth()->user()->can('update',$checklist),
            ])

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