@extends('layouts.app')
@section('title', 'FYP Information - Admin')

@section('content')
<div class="page-header">
    <h2>FYP Information</h2>
    <p style="font-size: 0.8rem; color: #64748b; margin: 0;">Post information, guidelines, and manage templates</p>
</div>

{{-- Information Form --}}
<div class="form-card mb-4">
    <div class="card-header"> Information</div>
    <div class="card-body">
        <form method="POST" action="{{ route('admin.fyp_information.store') }}">
            @csrf
            <div class="mb-3">
                <label class="form-label">Information <span class="text-danger">*</span></label>
                <textarea name="description" class="form-control @error('description') is-invalid @enderror" rows="4" placeholder="Write announcement or information here...">{{ old('description') }}</textarea>
                @error('description') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
</div>

{{-- Information List --}}
<div class="table-card mb-4">
    <div class="card-header">List of Information</div>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>#</th>
                <th>Information</th>
                <th>Posted By</th>
                <th>Date</th>
                <th style="width: 120px;">Actions</th>
            </tr>
        </thead>
        <tbody>
            @forelse($announcements as $i => $a)
            <tr>
                <td>{{ $announcements->firstItem() + $i }}</td>
                <td>
                    <small style="color: #64748b;">{{ Str::limit($a->description, 120) }}</small>
                </td>
                <td>{{ $a->creatorDisplayName() }}</td>
                <td>{{ $a->created_at->format('d M Y H:i') }}</td>
                <td>
                    <button type="button" class="btn btn-sm btn-outline-primary"
                        onclick="editInfo({{ $a->id }}, {{ json_encode($a->description) }})">Edit</button>
                    <button type="button" class="btn btn-sm btn-outline-danger"
                        onclick="deleteInfo({{ $a->id }}, {{ json_encode(Str::limit($a->description, 40)) }})">Delete</button>
                </td>
            </tr>
            @empty
            <tr><td colspan="5" class="empty-state">No information posted yet.</td></tr>
            @endforelse
        </tbody>
    </table>
    <div class="px-3 py-2">{{ $announcements->withQueryString()->links() }}</div>
</div>

{{-- Attachment & Template Section --}}
<div class="table-card mb-4">
    <div class="card-header">Attachment & Template</div>
    {{-- Existing templates (each row's Delete is handled by JS, no forms here) --}}
    <table class="table table-bordered" style="font-size:0.825rem;">
        <thead>
            <tr style="background:#f8fafc;">
                <th style="width: 50px;">No</th>
                <th>Attachment / Template</th>
                <th style="width: 160px;">Uploaded</th>
                <th style="width: 120px;">Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach($templates as $i => $tpl)
            <tr>
                <td class="text-center">{{ $i + 1 }}</td>
                <td>
                    <span style="font-size:0.825rem;">{{ Str::replaceFirst('[TEMPLATE] ', '', $tpl->title) }}</span>
                    @foreach($tpl->attachments as $att)
                        <a href="{{ route('admin.attachment.download', $att) }}" style="font-size:0.75rem; display:block; margin-top:2px;">
                            &#128196; {{ $att->file_name }}
                        </a>
                    @endforeach
                </td>
                <td>
                    <span style="font-size:0.75rem; color:#64748b;">{{ $tpl->created_at->format('d M Y') }}</span>
                </td>
                <td>
                    <button type="button" class="btn btn-sm btn-outline-primary"
                        onclick="editTemplate({{ $tpl->id }}, {{ json_encode(Str::replaceFirst('[TEMPLATE] ', '', $tpl->title)) }})">Edit</button>
                    <button type="button" class="btn btn-sm btn-outline-danger"
                        onclick="deleteTemplate({{ $tpl->id }}, {{ json_encode(Str::replaceFirst('[TEMPLATE] ', '', $tpl->title)) }})">Delete</button>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>

    {{-- Add New Template Form (standalone POST form, NO _method override) --}}
    <div class="card-body" style="padding: 1rem 1.25rem;">
        <form method="POST" action="{{ route('admin.attachments.store') }}" enctype="multipart/form-data">
            @csrf
            <table class="table table-bordered" style="font-size:0.825rem; margin-bottom:0.75rem;">
                <thead>
                    <tr style="background:#f8fafc;">
                        <th style="width: 50px;">No</th>
                        <th>New Attachment / Template</th>
                        <th style="width: 160px;">Upload</th>
                        <th style="width: 120px;"></th>
                    </tr>
                </thead>
                <tbody id="newTemplateRows">
                    <tr>
                        <td class="text-center">1</td>
                        <td>
                            <input type="text" name="titles[]" class="form-control form-control-sm" placeholder="Enter title...">
                        </td>
                        <td>
                            <input type="file" name="files[]" class="form-control form-control-sm">
                        </td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
            <div class="d-flex gap-2">
                <button type="button" class="btn btn-sm btn-outline-primary" onclick="addRow()">+ Add Row</button>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
        </form>
    </div>
</div>

{{-- Edit Template Modal --}}
<div class="modal fade" id="editTemplateModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content" style="border-radius: 4px;">
            <div class="modal-header" style="background: #f8fafc;">
                <h5 class="modal-title" style="font-size:0.9rem;font-weight:600;">Edit Template</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="editTemplateForm" method="POST" enctype="multipart/form-data">
                @csrf @method('PUT')
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Title</label>
                        <input type="text" name="title" id="editTemplateTitle" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Replace File (optional)</label>
                        <input type="file" name="file" class="form-control">
                        <small style="color: #64748b;">Leave empty to keep current file. PDF, DOCX, ZIP only.</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-sm btn-primary">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Edit Info Modal --}}
<div class="modal fade" id="editInfoModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content" style="border-radius: 4px;">
            <div class="modal-header" style="background: #f8fafc;">
                <h5 class="modal-title" style="font-size:0.9rem;font-weight:600;">Edit Information</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="editInfoForm" method="POST">
                @csrf @method('PUT')
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Information</label>
                        <textarea name="description" id="editInfoDescription" class="form-control" rows="5" required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-sm btn-primary">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
let newRowCount = 1;

function addRow() {
    newRowCount++;
    const tbody = document.getElementById('newTemplateRows');
    const tr = document.createElement('tr');

    tr.innerHTML = `
        <td class="text-center">${newRowCount}</td>
        <td>
            <input type="text" name="titles[]" class="form-control form-control-sm" placeholder="Enter title...">
        </td>
        <td>
            <input type="file" name="files[]" class="form-control form-control-sm">
        </td>
        <td></td>
    `;

    tbody.appendChild(tr);
}

/**
 * Create a temporary form OUTSIDE any other form, submit it, then remove it.
 * This avoids nested-form issues and prevents _method leaking between forms.
 */
function submitDeleteForm(url, confirmMsg) {
    if (!confirm(confirmMsg)) return;

    const form = document.createElement('form');
    form.method = 'POST';
    form.action = url;
    form.style.display = 'none';

    // CSRF token
    const csrf = document.createElement('input');
    csrf.type = 'hidden';
    csrf.name = '_token';
    csrf.value = '{{ csrf_token() }}';
    form.appendChild(csrf);

    // Method spoofing
    const method = document.createElement('input');
    method.type = 'hidden';
    method.name = '_method';
    method.value = 'DELETE';
    form.appendChild(method);

    // Append to <body> so it's never nested inside another form
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
}

function deleteInfo(id, snippet) {
    submitDeleteForm('/admin/fyp_information/' + id, 'Delete this information?\n"' + snippet + '"');
}

function deleteTemplate(id, title) {
    submitDeleteForm('/admin/templates/' + id, 'Delete this template?\n"' + title + '"');
}

function editTemplate(id, title) {
    document.getElementById('editTemplateForm').action = '/admin/templates/' + id;
    document.getElementById('editTemplateTitle').value = title;
    new bootstrap.Modal(document.getElementById('editTemplateModal')).show();
}

function editInfo(id, desc) {
    document.getElementById('editInfoForm').action = '/admin/fyp_information/' + id;
    document.getElementById('editInfoDescription').value = desc || '';
    new bootstrap.Modal(document.getElementById('editInfoModal')).show();
}
</script>
@endpush
@endsection