@extends('layouts.app')

@section('title', 'Upload Document')
@section('heading', 'Upload Document')

@section('content')
@include('documents.top-submenu')
    <x-card>
        <form action="{{ route('documents.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6" novalidate data-document-form="create">
            @csrf
            <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
                <div class="lg:col-span-1">
                    <label class="block text-sm font-medium text-slate-700">Name <span class="text-red-500">*</span></label>
                    <input type="text" name="name" value="{{ old('name') }}" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2" maxlength="191" placeholder="Document title">
                    <p class="mt-1 text-xs text-slate-500">Use letters and common separators only (e.g. `Aadhaar Card`, `PAN-Document`).</p>
                    @error('name')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    <p data-js-error="name" class="mt-1 text-sm text-red-600 hidden"></p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700">Category <span class="text-red-500">*</span></label>
                    <select name="category" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 js-select2">
                        <option value="">Select Category</option>
                        @foreach($categories as $key => $label)
                            <option value="{{ $key }}" @selected(old('category') === $key)>{{ $label }}</option>
                        @endforeach
                    </select>
                    @error('category')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    <p data-js-error="category" class="mt-1 text-sm text-red-600 hidden"></p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700">Employee (optional)</label>
                    @if(! empty($canAssignToEmployees))
                        <select name="employee_id" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 js-select2">
                            <option value="">Self / uploader</option>
                            @foreach(($employees ?? collect()) as $employee)
                                <option value="{{ $employee->id }}" @selected((string) old('employee_id') === (string) $employee->id)>
                                    {{ $employee->name }}@if($employee->employee_number) ({{ $employee->employee_number }})@endif
                                </option>
                            @endforeach
                        </select>
                        <p class="mt-1 text-xs text-slate-500">Choose the employee this document belongs to for compliance tracking.</p>
                    @else
                        <input type="hidden" name="employee_id" value="{{ auth()->id() }}">
                        <p class="mt-1 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-700">
                            {{ auth()->user()?->name }} (your documents only)
                        </p>
                        <p class="mt-1 text-xs text-slate-500">Only Admin/HR can upload documents for other employees.</p>
                    @endif
                    @error('employee_id')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700">Document Number</label>
                    <input type="text" name="document_number" value="{{ old('document_number') }}" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2" maxlength="100" placeholder="Optional reference number">
                    <p class="mt-1 text-xs text-slate-500">Allowed: digits, hyphen (`-`), slash (`/`). Alphabets are not allowed.</p>
                    @error('document_number')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700">Issued Date</label>
                    <input type="date" name="issued_on" value="{{ old('issued_on') }}" max="{{ now()->format('Y-m-d') }}" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2">
                    @error('issued_on')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    <p data-js-error="issued_on" class="mt-1 text-sm text-red-600 hidden"></p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700">Expiry Date</label>
                    <input type="date" name="expires_on" value="{{ old('expires_on') }}" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2">
                    @error('expires_on')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700">Visibility</label>
                    <select name="visibility" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 js-select2">
                        @foreach($visibilityOptions as $key => $label)
                            <option value="{{ $key }}" @selected(old('visibility', 'company') === $key)>{{ $label }}</option>
                        @endforeach
                    </select>
                    @error('visibility')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700">Type (Optional)</label>
                    <input type="text" name="type" value="{{ old('type') }}" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2" placeholder="Legacy/free text type">
                </div>
                <div class="lg:col-span-2">
                    <label class="mb-2 flex items-center gap-2 text-sm font-medium text-slate-700">
                        <input type="checkbox" name="is_mandatory" value="1" @checked(old('is_mandatory'))>
                        Mark as mandatory compliance document
                    </label>
                </div>
                <div class="lg:col-span-2">
                    <label class="block text-sm font-medium text-slate-700">Notes</label>
                    <textarea name="notes" rows="3" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2" placeholder="Optional context for HR/admin">{{ old('notes') }}</textarea>
                    @error('notes')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    <p data-js-error="notes" class="mt-1 text-sm text-red-600 hidden"></p>
                </div>
                <div class="lg:col-span-2">
                    <label class="block text-sm font-medium text-slate-700">File <span class="text-red-500">*</span></label>
                    <input type="file" name="document" class="mt-1 block w-full text-sm text-slate-500 file:mr-4 file:rounded-lg file:border-0 file:bg-slate-100 file:px-4 file:py-2 file:text-sm file:font-medium file:text-slate-700 hover:file:bg-slate-200" accept=".pdf,.doc,.docx,.xls,.xlsx,.txt,.png,.jpg,.jpeg">
                    @error('document')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    <p data-js-error="document" class="mt-1 text-sm text-red-600 hidden"></p>
                    <p class="mt-1 text-xs text-slate-500">Max 10 MB.</p>
                </div>
            </div>
            <div class="flex gap-2">
                <x-button type="submit" variant="primary">Upload</x-button>
                <a href="{{ route('documents.index') }}" class="inline-flex items-center rounded-lg bg-slate-100 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-200">Cancel</a>
            </div>
        </form>
    </x-card>
@endsection

@push('scripts')
<script src="{{ asset('js/form-validation.js') }}"></script>
<script src="{{ asset('js/form-text-rules.js') }}"></script>
<script src="{{ asset('js/document-form-validation.js') }}"></script>
@endpush