@extends('layouts.app')
@section('page-title', $formData['isEdit'] ? 'Edit Document' : 'Upload Document')

@section('content')
    @include('admin.documents.partials.form-header')

    <form method="POST" class="enhanced-form"
          action="{{ $formData['isEdit'] ? route('admin.documents.update', $document) : route('admin.documents.store') }}"
          enctype="multipart/form-data"
          x-data="documentForm(@js($formData))">
        @csrf
        @if($formData['isEdit'])
            @method('PUT')
        @endif

        <div class="rounded-2xl border border-surface-100 bg-white shadow-soft">
            <div class="p-5 sm:p-6">
                    <x-form-section-header title="Document information" description="Add document metadata and classification." icon="document" />

                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div class="col-span-full">
                            <label class="form-label">Document Type <span class="text-red-500">*</span></label>
                            <input type="hidden" name="document_type" :value="selectedType" />
                            <div class="document-type-grid">
                                @foreach($formData['types'] as $typeKey => $typeLabel)
                                    <x-document-type-card
                                        :value="$typeKey"
                                        :label="$typeLabel"
                                        :description="$formData['typeStyles'][$typeKey]['description']"
                                    />
                                @endforeach
                            </div>
                            @error('document_type')
                                <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        @include('admin.documents.partials.folder-picker')

                        <div>
                            <label for="title" class="form-label">Document Title <span class="text-red-500">*</span></label>
                            <input type="text" id="title" name="title"
                                   value="{{ old('title', $formData['isEdit'] ? $document->title : '') }}"
                                   placeholder="e.g. Flight Operations Manual"
                                   class="form-input {{ $errors->has('title') ? 'form-input-error' : '' }}" />
                            @error('title')
                                <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="doc_number" class="form-label">Document No. <span class="text-red-500" x-show="selectedType !== 'records'">*</span></label>
                            <input type="text" id="doc_number" name="doc_number"
                                   x-model="docNumber"
                                   @input="docNumberTouched = true"
                                   placeholder="Auto-generated after document type selection"
                                   class="form-input font-mono {{ $errors->has('doc_number') ? 'form-input-error' : '' }}" />
                            <p class="mt-1 text-xs text-surface-400" x-text="selectedType === 'records' ? 'Optional for Records — leave blank if not needed.' : 'Auto-generated by type, but you can edit it.'"></p>
                            @error('doc_number')
                                <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <input x-show="!showMetadataFields" :disabled="showMetadataFields" type="hidden" name="revision_date" value="" />
                        <input x-show="!showMetadataFields" :disabled="showMetadataFields" type="hidden" name="effective_date" value="" />

                        <template x-if="showMetadataFields">
                            <div class="contents">
                                <div>
                                    <label for="version" class="form-label">Version <span class="text-red-500">*</span></label>
                                    <input type="text" id="version" name="version"
                                           value="{{ $formData['version'] }}"
                                           placeholder="1.0"
                                           class="form-input {{ $errors->has('version') ? 'form-input-error' : '' }}" />
                                    @error('version')
                                        <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div>
                                    <label for="revision_date" class="form-label">Revision Date</label>
                                    <input type="date" id="revision_date" name="revision_date"
                                           value="{{ old('revision_date', $formData['isEdit'] ? $document->revision_date?->format('Y-m-d') : '') }}"
                                           class="form-input {{ $errors->has('revision_date') ? 'form-input-error' : '' }}" />
                                    @error('revision_date')
                                        <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div>
                                    <label for="effective_date" class="form-label">Effective Date</label>
                                    <input type="date" id="effective_date" name="effective_date"
                                           value="{{ old('effective_date', $formData['isEdit'] ? $document->effective_date?->format('Y-m-d') : '') }}"
                                           class="form-input {{ $errors->has('effective_date') ? 'form-input-error' : '' }}" />
                                    @error('effective_date')
                                        <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>

                            </div>
                        </template>

                        <div class="col-span-full">
                            <label for="description" class="form-label">Description</label>
                            <textarea id="description" name="description" rows="3"
                                      placeholder="Brief description of this document..."
                                      class="form-input resize-none {{ $errors->has('description') ? 'form-input-error' : '' }}">{{ old('description', $formData['isEdit'] ? $document->description : '') }}</textarea>
                            @error('description')
                                <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
            </div>

            <div class="border-t border-surface-100 p-5 sm:p-6">
                @include('admin.documents.partials.file-upload')
            </div>

            <div class="flex flex-wrap items-center justify-end gap-3 rounded-b-2xl border-t border-surface-100 bg-surface-50/70 px-5 py-4 sm:px-6">
                <a href="{{ route('admin.documents.index') }}" class="btn-secondary">Cancel</a>
                <button type="submit" class="btn-primary">
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    {{ $formData['isEdit'] ? 'Update Document' : 'Save Document' }}
                </button>
            </div>
        </div>
    </form>
@endsection