@extends('layouts.admin')

@section('title', 'Documents - {{ $folder->name }}')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3 mb-0">
        <i class="bi bi-file-earmark-texts me-2 text-primary"></i>
        Documents in {{ $folder->name }}
    </h1>
    <div>
        <a href="{{ route('month-folders.show', $folder->month) }}" class="btn btn-outline-secondary me-2">
            <i class="bi bi-arrow-left"></i> Back to Month
        </a>
        <a href="{{ route('company-subfolders.index') }}" class="btn btn-secondary">
            All Subfolders
        </a>
    </div>
</div>

<!-- Folder Info Card -->
<div class="row mb-4">
    <div class="col-md-8">
        <div class="card bg-light">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <strong>Subfolder:</strong> {{ $folder->name }}<br>
                        <strong>Month:</strong> {{ $folder->month->name }} ({{ $folder->month->category->name }})
                    </div>
                    <div class="col-md-6">
                        <strong>Total Docs:</strong> <span class="badge bg-primary fs-6">{{ $documents->count() }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Documents Table -->
<div class="card shadow-sm">
    <div class="card-header bg-info text-white">
        <h6 class="mb-0">
            <i class="bi bi-list-ul me-2"></i>
            Uploaded Documents ({{ $documents->count() }})
        </h6>
    </div>
    <div class="card-body p-0">
        @if($documents->count())
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>File Name</th>
                            <th>Uploaded By</th>
                            <th>Status</th>
                            <th>Uploaded</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($documents as $doc)
                            <tr>
                                <td>{{ $doc->file_name }}</td>
                                <td>{{ $doc->uploader->name ?? 'Unknown' }}</td>
                                <td>
                                    <span class="badge {{ $doc->status == 'approved' ? 'bg-success' : 'bg-secondary' }}">
                                        Approved
                                    </span>
                                    @if($doc->approver)
                                        <br><small>By: {{ $doc->approver->name }}</small>
                                    @endif
                                </td>
                                <td>{{ $doc->created_at->format('M d, Y') }}</td>
                                <td>
                                    <div class="btn-group btn-group-sm" role="group">
                                        <a href="{{ route('documents.show', $doc) }}" class="btn btn-outline-primary" title="View">
                                            <i class="bi bi-eye"></i>
                                        </a>
                                        <button class="btn btn-outline-warning move-btn" data-doc-id="{{ $doc->id }}" data-doc-name="{{ $doc->file_name }}" title="Move">
                                            <i class="bi bi-arrow-right-circle"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="card-body text-center py-5">
                <i class="bi bi-file-earmark-x fs-1 text-muted mb-3"></i>
                <h5>No documents yet</h5>
                <p class="text-muted">Upload documents to this subfolder.</p>
            </div>
        @endif
    </div>
</div>

<!-- Move Document Modal -->
<div class="modal fade" id="moveModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-warning">
                <h5 class="modal-title">Move Document</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="moveForm">
                <div class="modal-body">
                    <input type="hidden" id="docId" name="doc_id">
                    <p>Moving: <strong id="docName"></strong></p>
                    <div class="mb-3">
                        <label class="form-label">Select Month <span class="text-danger">*</span></label>
                        <select class="form-select" id="newMonth" name="new_month_id" required>
                            <option value="">Choose Month...</option>
                            {{-- Populated by JS or pass all months --}}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Select Sub Category <span class="text-danger">*</span></label>
                        <select class="form-select" id="newSubcat" name="new_subcat_id" required disabled>
                            <option value="">First select month</option>
                        </select>
                    </div>
                    @error('new_month_id')
                        <div class="alert alert-danger">{{ $message }}</div>
                    @enderror
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-warning">Move Document</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Load all months for dropdown (could optimize to company/year scope)
    // Populate months from passed data
    const monthSelect = document.getElementById('newMonth');
    @foreach($months as $month)
        const monthOption{{ $month->id }} = new Option('{{ $month->name }} ({{ $month->category->name }} - {{ $month->category->year->year ?? '' }})', '{{ $month->id }}');
        monthSelect.appendChild(monthOption{{ $month->id }});
    @endforeach

    // Move btn click
    document.querySelectorAll('.move-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const docId = this.dataset.docId;
            const docName = this.dataset.docName;
            document.getElementById('docId').value = docId;
            document.getElementById('docName').textContent = docName;
            new bootstrap.Modal(document.getElementById('moveModal')).show();
        });
    });

    // Month change - load subcats AJAX
    document.getElementById('newMonth').addEventListener('change', function() {
        const monthId = this.value;
        if (!monthId) return;

    fetch(`{{ url('/subcategories/months') }}/${monthId}`)
        .then(res => {
                if (!res.ok) throw new Error(`HTTP ${res.status}: Failed to load subcategories`);
                return res.json();
            })
            .then(subcats => {
                const select = document.getElementById('newSubcat');
                select.innerHTML = '<option value="">Select Sub Category</option>'; 
                subcats.forEach(subcat => {
                    const opt = new Option(subcat.name, subcat.id);
                    select.appendChild(opt);
                });
                select.disabled = false;
            })
            .catch(err => console.error('Error loading subcats:', err));
    });

    // Form submit AJAX
    document.getElementById('moveForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const formData = new FormData(this);
        const docId = document.getElementById('docId').value;

    fetch(`/documents/${docId}/move`, {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(res => {
            if (!res.ok) throw new Error(`HTTP ${res.status}: Move failed`);
            return res.json();
        })
        .then(data => {
            if (data.success) {
                bootstrap.Modal.getInstance(document.getElementById('moveModal')).hide();
                location.reload();
            } else {
                alert(data.message || 'Move failed');
            }
        })
        .catch(err => {
            console.error(err);
            alert('Move operation failed. Please try again.');
        });
    });
});
</script>
@endsection