<div class="card shadow-sm mb-4">
    <div class="card-body">
        <div class="d-flex align-items-center justify-content-between mb-3">
            <h4 class="fw-bold mb-0">Documents</h4>

            <div class="d-flex gap-2">
                <select wire:model.live="filterType" class="form-select form-select-sm" style="width: 200px;">
                    <option value="">All Document Types</option>
                    @foreach($types as $type)
                        <option value="{{ $type->id }}">{{ $type->display_name }}</option>
                    @endforeach
                </select>

                <button class="btn btn-primary btn-sm" wire:click.prevent="openAddDoc">
                    <i class="mdi mdi-plus"></i>
                </button>
            </div>
        </div>

        @if($openAD)
            <div>
                <div class="offcanvas offcanvas-end show"  tabindex="-1" style="--bs-offcanvas-width: 600px;" role="dialog">
                    <div class="offcanvas-header">
                        <h5 id="offcanvasRightLabel">Add New Document</h5>
                        <button type="button" class="btn-close text-dark" wire:click.prevent="closeAddDoc"></button>
                    </div>

                    <div class="offcanvas-body  bg-light">
                        <form wire:submit="save">

                            <div wire:loading wire:target="doc">Uploading...</div>
                            @csrf


                            <x-ui.input name="display_name" label="Display Name"/>
                            <x-ui.select name="document_type_id" label="Document Type" :options="$docTypes"/>

                            <div
                                    x-data="{
        isDropping: false,
        uploading: false,
        progress: 0,
    }"
                                    x-on:livewire-upload-start="uploading = true"
                                    x-on:livewire-upload-finish="uploading = false; progress = 0"
                                    x-on:livewire-upload-error="uploading = false"
                                    x-on:livewire-upload-progress="progress = $event.detail.progress"
                            >

                                <!-- HIDDEN INPUT -->
                                <input
                                        type="file"
                                        wire:model.live="doc"
                                        class="mb-4"
                                >

                                <!-- PROGRESS BARRR OMG YESSS -->
                                <div x-show="uploading" class="mt-2">
                                    <progress max="100" x-bind:value="progress" class="w-100"></progress>
                                    <p class="mt-1 fw-bold">Uploading: <span x-text="progress"></span>%</p>
                                </div>

                                @error('doc')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>


                            @error('doc') <span class="error">{{ $message }}</span> @enderror

                            <button type="submit">Save</button>
                        </form>

                    </div>
                </div>
            </div>
        @endif

        @if($docs->count())
            <table class="table table-centered table-striped mb-0">
                <thead>
                <tr>
                    <th style="max-width: 150px;">Name</th>
                    <th>Type</th>
                    <th>User</th>
                    <th>Date</th>
                    <th></th>
                </tr>
                </thead>

                <tbody>
                @foreach($docs as $doc)
                    <tr>
                        <td style="max-width: 150px;">
                            {{ $doc->display_name }}
                            <br><small class="text-primary">{{ $doc->file_size }}</small>
                        </td>
                        <td>{{ $doc->type->display_name ?? '—' }}</td>
                        <td>{{ $doc->user ? ($doc->user->name_first . " " . $doc->user->name_last) : 'Unknown' }}</td>
                        <td>
                            {{ $doc->created_at->diffForHumans() }}
                            <br><small class="text-primary">{{ $doc->created_at->format('d/m/Y H:i') }}</small>
                        </td>
                        <td class="text-end">
                            <a href="{{ \Illuminate\Support\Facades\Storage::url($doc->owner->getDocumentStoragePath() . $doc->file_name) }}" class="btn btn-md" target="_blank">
                                <i class="mdi mdi-search-web text-primary"></i>
                            </a>
                            @if($doc->file_type == 'application/pdf')
                            <a class="btn btn-md" wire:click="print({{ $doc->id }})">
                                <i class="mdi mdi-printer text-primary"></i>
                            </a>
                            @endif
                            <span
                                    wire:confirm="Are you sure you want to delete this document?"
                                    wire:click="deleteDocument({{ $doc->id }})" class="btn btn-md">
                                <i class="mdi mdi-delete text-danger text-lg"></i>
                            </span>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
            {{ $docs->links() }}
        @else
            <div class="text-center p-5 text-muted">
                <i class="mdi mdi-file-document" style="font-size: 48px;"></i>
                <p class="mt-3 fw-bold">No documents have been added.</p>
            </div>
        @endif

    </div>
</div>