@extends('admin.layout')

@section('title', 'Blog Authors')

@section('content')
<div class="container-fluid p-0">
    <!-- Header Page Action Bar -->
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
        <div>
            <h2 class="fw-bold font-heading mb-1 text-dark">
                <i class="bi bi-people-fill text-warning me-2"></i> Blog Authors
            </h2>
         
        </div>
        <div class="d-flex align-items-center gap-2">
            <button type="button" class="btn btn-warning rounded-pill px-4 fw-semibold shadow-sm d-flex align-items-center gap-2 text-dark" data-bs-toggle="modal" data-bs-target="#createAuthorModal" style="background-color: var(--iq-orange); border: none; color: #fff !important;">
                <i class="bi bi-person-plus-fill"></i> Add Author
            </button>
        </div>
    </div>

    <!-- Alert Messages -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show rounded-4 border-0 shadow-sm mb-4" role="alert">
            <i class="bi bi-check-circle-fill me-2 fs-5"></i>
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show rounded-4 border-0 shadow-sm mb-4" role="alert">
            <i class="bi bi-exclamation-octagon-fill me-2 fs-5"></i>
            <ul class="mb-0 ps-3">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <!-- Authors Directory Table Card -->
    <div class="card border-0 rounded-4 shadow-sm overflow-hidden">
        <div class="card-header bg-white border-0 pt-4 px-4 pb-2 d-flex justify-content-between align-items-center">
          
            <span class="badge bg-primary-subtle text-primary rounded-pill px-3 py-2 fw-semibold">
                {{ $authors->total() }} Registered Author(s)
            </span>
        </div>

        <div class="card-body p-0">
            @if($authors->isEmpty())
                <div class="text-center py-5 text-muted">
                    <i class="bi bi-person-x fs-1 text-secondary opacity-50 d-block mb-3"></i>
                    <h5 class="fw-semibold text-dark">No Authors Found</h5>
                    <p class="small text-muted mb-3">
                        Start adding academic trainers and authors to attribute your academy publications.
                    </p>
                    <button type="button" class="btn btn-sm btn-primary rounded-pill px-4" data-bs-toggle="modal" data-bs-target="#createAuthorModal">
                        <i class="bi bi-plus-lg me-1"></i> Add First Author
                    </button>
                </div>
            @else
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th class="ps-4" style="width: 80px;">ID</th>
                                <th style="width: 85px;">Photo</th>
                                <th>Author Details</th>
                                <th>Status</th>
                                <th>Added Date</th>
                                <th class="text-end pe-4" style="width: 150px;">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($authors as $author)
                            <tr>
                                <td class="ps-4">
                                    <span class="badge bg-light text-dark border font-monospace px-2 py-1">
                                        #{{ $author->blogauthorid }}
                                    </span>
                                </td>
                                <td>
                                    @if($author->avatar)
                                        <img src="{{ asset(ltrim($author->avatar, '/')) }}" alt="{{ $author->blogauthorname }}" class="rounded-circle object-fit-cover shadow-sm border" style="width: 44px; height: 44px;">
                                    @else
                                        <div class="admin-avatar-pill bg-primary text-white shadow-sm" style="width: 44px; height: 44px; font-size: 0.95rem; border-radius: 50%;">
                                            {{ strtoupper(substr($author->blogauthorname, 0, 1)) }}
                                        </div>
                                    @endif
                                </td>
                                <td>
                                    <div class="fw-bold text-dark fs-6">{{ $author->blogauthorname }}</div>
                                    @if($author->email)
                                        <small class="text-muted"><i class="bi bi-envelope me-1"></i>{{ $author->email }}</small>
                                    @endif
                                </td>
                                <td>
                                    @if($author->status === 'active')
                                        <span class="badge bg-success-subtle text-success rounded-pill px-3 py-2">
                                            <i class="bi bi-check-circle-fill me-1"></i> Active
                                        </span>
                                    @else
                                        <span class="badge bg-secondary-subtle text-secondary rounded-pill px-3 py-2">
                                            <i class="bi bi-pause-circle-fill me-1"></i> Inactive
                                        </span>
                                    @endif
                                </td>
                                <td class="text-muted small">
                                    {{ $author->created_at ? $author->created_at->format('M d, Y') : 'N/A' }}
                                </td>
                                <td class="text-end pe-4">
                                    <div class="d-inline-flex gap-2">
                                        <!-- Edit Button Trigger -->
                                        <button 
                                            type="button" 
                                            class="btn btn-sm btn-outline-primary rounded-circle edit-author-btn"
                                            title="Edit Author"
                                            data-id="{{ $author->blogauthorid }}"
                                            data-name="{{ $author->blogauthorname }}"
                                            data-email="{{ $author->email }}"
                                            data-designation="{{ $author->designation }}"
                                            data-bio="{{ $author->bio }}"
                                            data-avatar="{{ $author->avatar ? asset(ltrim($author->avatar, '/')) : '' }}"
                                            data-status="{{ $author->status }}"
                                            data-action="{{ route('admin.blogauthor.update', $author->blogauthorid) }}"
                                        >
                                            <i class="bi bi-pencil-fill"></i>
                                        </button>

                                        <!-- Delete Form -->
                                        <form action="{{ route('admin.blogauthor.destroy', $author->blogauthorid) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete author &quot;{{ $author->blogauthorname }}&quot;?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-outline-danger rounded-circle" title="Delete Author">
                                                <i class="bi bi-trash-fill"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                @if($authors->hasPages())
                    <div class="p-4 border-top">
                        {{ $authors->links() }}
                    </div>
                @endif
            @endif
        </div>
    </div>
</div>

<!-- ================= CREATE AUTHOR MODAL ================= -->
<div class="modal fade" id="createAuthorModal" tabindex="-1" aria-labelledby="createAuthorModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-4 border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold text-dark font-heading" id="createAuthorModalLabel">
                    <i class="bi bi-person-plus-fill text-warning me-2"></i> Add New Blog Author
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('admin.blogauthor.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body py-4">
                    <div class="mb-3">
                        <label class="form-label fw-semibold small text-dark">Author Name (blogauthorname) *</label>
                        <input 
                            type="text" 
                            name="blogauthorname" 
                            class="form-control rounded-3" 
                            required 
                            placeholder=""
                            autocomplete="off"
                        >
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold small text-dark">Author Photo</label>
                        <div class="d-flex align-items-center gap-3">
                            <div id="new_author_preview_container" style="width: 52px; height: 52px; flex-shrink: 0;" class="rounded-circle bg-light border d-flex align-items-center justify-content-center overflow-hidden shadow-sm">
                                <img id="new_author_preview_img" src="#" alt="Preview" class="w-100 h-100 object-fit-cover d-none">
                                <i id="new_author_preview_icon" class="bi bi-person-circle text-secondary fs-2"></i>
                            </div>
                            <div class="flex-grow-1">
                                <input 
                                    type="file" 
                                    name="avatar" 
                                    id="new_author_avatar"
                                    class="form-control rounded-3" 
                                    accept="image/png, image/jpeg, image/jpg, image/webp"
                                >
                                <div class="form-text small text-muted" style="font-size: 0.75rem;">Upload author portrait / photo (JPG, PNG, WEBP, Max 5MB)</div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold small text-dark">Email Address</label>
                        <input 
                            type="email" 
                            name="email" 
                            class="form-control rounded-3" 
                          
                        >
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold small text-dark">Designation / Role Title</label>
                        <input 
                            type="text" 
                            name="designation" 
                            class="form-control rounded-3" 
                           
                        >
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold small text-dark">Biography</label>
                        <textarea 
                            name="bio" 
                            class="form-control rounded-3" 
                            rows="3" 
                            placeholder="Short professional credentials and bio summary..."
                        ></textarea>
                    </div>

                    <div class="mb-2">
                        <label class="form-label fw-semibold small text-dark">Status *</label>
                        <select name="status" class="form-select rounded-3" required>
                            <option value="active" selected>Active</option>
                            <option value="inactive">Inactive</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-warning rounded-pill px-4 fw-semibold text-dark" style="background-color: var(--iq-orange); border: none; color: #fff !important;">
                        Save Author
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- ================= EDIT AUTHOR MODAL ================= -->
<div class="modal fade" id="editAuthorModal" tabindex="-1" aria-labelledby="editAuthorModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-4 border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold text-dark font-heading" id="editAuthorModalLabel">
                    <i class="bi bi-pencil-square text-primary me-2"></i> Edit Blog Author
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editAuthorForm" action="" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="modal-body py-4">
                    <div class="mb-3">
                        <label class="form-label fw-semibold small text-dark">Author ID (blogauthorid)</label>
                        <input type="text" id="edit_blogauthorid_display" class="form-control bg-light font-monospace" readonly>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold small text-dark">Author Name (blogauthorname) *</label>
                        <input 
                            type="text" 
                            name="blogauthorname" 
                            id="edit_authorname" 
                            class="form-control rounded-3" 
                            required 
                            autocomplete="off"
                        >
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold small text-dark">Author Photo</label>
                        <div class="d-flex align-items-center gap-3">
                            <div id="edit_avatar_circle_container" style="width: 52px; height: 52px; flex-shrink: 0;" class="rounded-circle bg-light border d-flex align-items-center justify-content-center overflow-hidden shadow-sm">
                                <img id="edit_author_preview_img" src="#" alt="Current Photo" class="w-100 h-100 object-fit-cover d-none">
                                <i id="edit_author_preview_icon" class="bi bi-person-circle text-secondary fs-2"></i>
                            </div>
                            <div class="flex-grow-1">
                                <input 
                                    type="file" 
                                    name="avatar" 
                                    id="edit_author_avatar"
                                    class="form-control rounded-3" 
                                    accept="image/png, image/jpeg, image/jpg, image/webp"
                                >
                                <div class="d-flex align-items-center justify-content-between mt-1">
                                    <span class="text-muted" style="font-size: 0.75rem;">Leave empty to keep current</span>
                                    <div id="edit_remove_avatar_box" class="form-check form-check-inline m-0 d-none">
                                        <input class="form-check-input" type="checkbox" name="remove_avatar" id="edit_remove_avatar" value="1">
                                        <label class="form-check-label text-danger" for="edit_remove_avatar" style="font-size: 0.75rem;">Remove photo</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold small text-dark">Email Address</label>
                        <input 
                            type="email" 
                            name="email" 
                            id="edit_authoremail" 
                            class="form-control rounded-3" 
                            placeholder="author@iqskills.co.za"
                        >
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold small text-dark">Designation / Role Title</label>
                        <input 
                            type="text" 
                            name="designation" 
                            id="edit_authordesignation" 
                            class="form-control rounded-3"
                        >
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold small text-dark">Biography</label>
                        <textarea 
                            name="bio" 
                            id="edit_authorbio" 
                            class="form-control rounded-3" 
                            rows="3"
                        ></textarea>
                    </div>

                    <div class="mb-2">
                        <label class="form-label fw-semibold small text-dark">Status *</label>
                        <select name="status" id="edit_authorstatus" class="form-select rounded-3" required>
                            <option value="active">Active</option>
                            <option value="inactive">Inactive</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-4 fw-semibold">
                        Update Author
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Edit Author Modal trigger script
    document.addEventListener('DOMContentLoaded', function () {
        const editButtons = document.querySelectorAll('.edit-author-btn');
        const editModalEl = document.getElementById('editAuthorModal');
        const editModal = new bootstrap.Modal(editModalEl);
        const editForm = document.getElementById('editAuthorForm');

        const editIdDisplay = document.getElementById('edit_blogauthorid_display');
        const editName = document.getElementById('edit_authorname');
        const editEmail = document.getElementById('edit_authoremail');
        const editDesignation = document.getElementById('edit_authordesignation');
        const editBio = document.getElementById('edit_authorbio');
        const editStatus = document.getElementById('edit_authorstatus');

        const editAuthorPreviewImg = document.getElementById('edit_author_preview_img');
        const editAuthorPreviewIcon = document.getElementById('edit_author_preview_icon');
        const editAuthorAvatar = document.getElementById('edit_author_avatar');
        const editRemoveAvatar = document.getElementById('edit_remove_avatar');
        const editRemoveAvatarBox = document.getElementById('edit_remove_avatar_box');

        // New author avatar live preview
        const newAvatarInput = document.getElementById('new_author_avatar');
        const newPreviewImg = document.getElementById('new_author_preview_img');
        const newPreviewIcon = document.getElementById('new_author_preview_icon');

        if (newAvatarInput) {
            newAvatarInput.addEventListener('change', function () {
                if (this.files && this.files[0]) {
                    const reader = new FileReader();
                    reader.onload = function (e) {
                        newPreviewImg.src = e.target.result;
                        newPreviewImg.classList.remove('d-none');
                        if (newPreviewIcon) newPreviewIcon.classList.add('d-none');
                    };
                    reader.readAsDataURL(this.files[0]);
                } else {
                    newPreviewImg.classList.add('d-none');
                    if (newPreviewIcon) newPreviewIcon.classList.remove('d-none');
                }
            });
        }

        // Edit author avatar live preview
        if (editAuthorAvatar) {
            editAuthorAvatar.addEventListener('change', function () {
                if (this.files && this.files[0]) {
                    const reader = new FileReader();
                    reader.onload = function (e) {
                        editAuthorPreviewImg.src = e.target.result;
                        editAuthorPreviewImg.classList.remove('d-none');
                        if (editAuthorPreviewIcon) editAuthorPreviewIcon.classList.add('d-none');
                        if (editRemoveAvatar) editRemoveAvatar.checked = false;
                    };
                    reader.readAsDataURL(this.files[0]);
                }
            });
        }

        editButtons.forEach(btn => {
            btn.addEventListener('click', function () {
                const id = this.getAttribute('data-id');
                const name = this.getAttribute('data-name');
                const email = this.getAttribute('data-email');
                const designation = this.getAttribute('data-designation');
                const bio = this.getAttribute('data-bio');
                const avatar = this.getAttribute('data-avatar');
                const status = this.getAttribute('data-status');
                const action = this.getAttribute('data-action');

                editIdDisplay.value = '#' + id;
                editName.value = name || '';
                editEmail.value = email || '';
                editDesignation.value = designation || '';
                editBio.value = bio || '';
                editStatus.value = status || 'active';
                editForm.action = action;

                if (avatar) {
                    editAuthorPreviewImg.src = avatar;
                    editAuthorPreviewImg.classList.remove('d-none');
                    if (editAuthorPreviewIcon) editAuthorPreviewIcon.classList.add('d-none');
                    if (editRemoveAvatarBox) editRemoveAvatarBox.classList.remove('d-none');
                } else {
                    editAuthorPreviewImg.classList.add('d-none');
                    if (editAuthorPreviewIcon) editAuthorPreviewIcon.classList.remove('d-none');
                    if (editRemoveAvatarBox) editRemoveAvatarBox.classList.add('d-none');
                }

                if (editAuthorAvatar) editAuthorAvatar.value = '';
                if (editRemoveAvatar) editRemoveAvatar.checked = false;

                editModal.show();
            });
        });
    });
</script>
@endpush