@extends('layouts.omd.omd') {{-- change to your layout --}}

@section('content')
    <div class="container-fluid py-3">
        <h4 class="mb-3 fw-bold">Project Staff Assignment</h4>

        <div class="row g-0" style="height: calc(100vh - 140px);">

            {{-- SIDEBAR: Project List --}}
            <div class="col-md-3 border-end bg-white" style="overflow-y:auto;">
                <div class="p-3 border-bottom">
                    <input type="text" id="projectSearch" class="form-control form-control-sm"
                        placeholder="Search projects...">
                </div>
                <ul class="list-group list-group-flush" id="projectList">
                    @foreach($projects as $project)
                            <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center project-item"
                                data-id="{{ $project->id }}" data-title="{{ $project->title }}" style="cursor:pointer;">
                                <div>
                                    <div class="fw-semibold text-truncate" style="max-width:170px;">
                                        {{ $project->title ?? 'Untitled Project' }}
                                    </div>
                                    <small class="text-muted">#{{ $project->id }}</small>
                                </div>
                                <span class="badge rounded-pill
                          @if($project->status === 'active') bg-success
                          @elseif($project->status === 'in-progress') bg-primary
                          @elseif($project->status === 'pending') bg-warning text-dark
                          @else bg-secondary @endif">
                                    {{ ucfirst($project->status) }}
                                </span>
                            </li>
                    @endforeach
                </ul>
            </div>

            {{-- MAIN PANEL --}}
            <div class="col-md-9 bg-light" style="overflow-y:auto;">

                {{-- Empty state --}}
                <div id="emptyState" class="d-flex flex-column align-items-center justify-content-center h-100 text-muted">
                    <i class="bi bi-arrow-left-circle" style="font-size:2.5rem;"></i>
                    <p class="mt-2">Select a project to manage staff</p>
                </div>

                {{-- Assignment Panel (hidden initially) --}}
                <div id="assignmentPanel" class="d-none p-4">

                    {{-- Project Header --}}
                    <div class="d-flex align-items-center justify-content-between mb-4">
                        <div>
                            <h5 class="fw-bold mb-0" id="panelProjectTitle">—</h5>
                            <small class="text-muted" id="panelProjectId"></small>
                        </div>
                        <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#assignModal">
                            <i class="bi bi-person-plus"></i> Assign Staff
                        </button>
                    </div>

                    {{-- Assigned Staff Table --}}
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-white fw-semibold">Assigned Staff</div>
                        <div class="card-body p-0">
                            <div id="staffTableWrap">
                                <div class="text-center py-4 text-muted" id="staffLoading">
                                    <div class="spinner-border spinner-border-sm me-2"></div> Loading...
                                </div>
                                <table class="table table-hover mb-0 d-none" id="staffTable">
                                    <thead class="table-light">
                                        <tr>
                                            <th>#</th>
                                            <th>Name</th>
                                            <th>Email</th>
                                            <th>Phone</th>
                                            <th>Role</th>
                                            <th>Assigned</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="staffTableBody"></tbody>
                                </table>
                                <div id="noStaffMsg" class="text-center py-4 text-muted d-none">
                                    No staff assigned yet.
                                </div>
                            </div>
                        </div>
                    </div>

                </div>{{-- /assignmentPanel --}}
            </div>
        </div>
    </div>

    {{-- ASSIGN MODAL --}}
    <div class="modal fade" id="assignModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Assign Staff to <span id="modalProjectTitle" class="text-primary"></span></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div id="staffRows">
                        {{-- Row template cloned via JS --}}
                        <div class="row g-2 mb-2 staff-row">
                            <div class="col-md-6">
                                <select class="form-select staff-select" name="staff_id[]" required>
                                    <option value="">— Select Staff —</option>
                                    @foreach($staff as $s)
                                        <option value="{{ $s->id }}">{{ $s->name }} ({{ $s->designation->name ?? 'N/A' }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <select class="form-select role-select" name="role_id[]" required>
                                    <option value="">— Select Role —</option>
                                    @foreach($roles as $r)
                                        <option value="{{ $r->id }}">{{ $r->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-2">
                                <button type="button" class="btn btn-outline-danger w-100 remove-row d-none">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-outline-secondary btn-sm mt-1" id="addRowBtn">
                        <i class="bi bi-plus"></i> Add Another
                    </button>
                    <div id="assignError" class="alert alert-danger mt-3 d-none"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="assignSubmitBtn">
                        <span id="assignBtnText">Assign</span>
                        <span id="assignBtnSpinner" class="spinner-border spinner-border-sm d-none"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- EDIT ROLE MODAL --}}
    <div class="modal fade" id="editRoleModal" tabindex="-1">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title">Update Role</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="editAssignmentId">
                    <select class="form-select" id="editRoleSelect">
                        @foreach($roles as $r)
                            <option value="{{ $r->id }}">{{ $r->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary btn-sm" id="editRoleSaveBtn">Save</button>
                </div>
            </div>
        </div>
    </div>
@endsection

{{-- paste this just before @endsection --}}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        console.log('JS loaded ✅');
        console.log('Project items found:', document.querySelectorAll('.project-item').length);

        document.querySelectorAll('.project-item').forEach(function (item) {
            item.addEventListener('click', function () {
                var id = this.dataset.id;
                var title = this.dataset.title;

                console.log('Clicked project:', id, title);

                document.querySelectorAll('.project-item').forEach(i => i.classList.remove('active'));
                this.classList.add('active');

                document.getElementById('emptyState').classList.add('d-none');
                document.getElementById('assignmentPanel').classList.remove('d-none');
                document.getElementById('panelProjectTitle').textContent = title;
                document.getElementById('panelProjectId').textContent = 'Project ID: ' + id;
                document.getElementById('modalProjectTitle').textContent = title;

                activeProjectId = id;
                loadStaff(id);
            });
        });

        var activeProjectId = null;

        function loadStaff(projectId) {
            var tbody = document.getElementById('staffTableBody');
            var table = document.getElementById('staffTable');
            var loading = document.getElementById('staffLoading');
            var noMsg = document.getElementById('noStaffMsg');

            table.classList.add('d-none');
            noMsg.classList.add('d-none');
            loading.classList.remove('d-none');
            tbody.innerHTML = '';

            fetch('/projects/' + projectId + '/staff')
                .then(function (r) {
                    console.log('API status:', r.status);
                    return r.json();
                })
                .then(function (data) {
                    console.log('API response:', data);
                    loading.classList.add('d-none');

                    if (!data.staff || data.staff.length === 0) {
                        noMsg.classList.remove('d-none');
                        return;
                    }

                    data.staff.forEach(function (s, i) {
                        tbody.insertAdjacentHTML('beforeend',
                            '<tr>' +
                            '<td>' + (i + 1) + '</td>' +
                            '<td>' + s.name + '</td>' +
                            '<td>' + (s.email || '—') + '</td>' +
                            '<td>' + (s.phone || '—') + '</td>' +
                            '<td><span class="badge bg-info text-dark">' + s.role + '</span></td>' +
                            '<td>' + (s.assigned_date ? s.assigned_date.substring(0, 10) : '—') + '</td>' +
                            '<td>' +
                            '<button class="btn btn-sm btn-outline-danger" onclick="removeStaff(' + s.assignment_id + ')">Remove</button>' +
                            '</td>' +
                            '</tr>'
                        );
                    });
                    table.classList.remove('d-none');
                })
                .catch(function (err) {
                    console.error('Fetch error:', err);
                    loading.classList.add('d-none');
                    noMsg.classList.remove('d-none');
                });
        }

        window.removeStaff = function (assignmentId) {
            if (!confirm('Remove this staff member?')) return;
            fetch('/projects/' + activeProjectId + '/staff/' + assignmentId, {
                method: 'DELETE',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
            }).then(function () { loadStaff(activeProjectId); });
        };

        // Assign submit
        document.getElementById('assignSubmitBtn').addEventListener('click', function () {
            var rows = document.querySelectorAll('.staff-row');
            var staff = [];
            var valid = true;

            rows.forEach(function (row) {
                var staffId = row.querySelector('.staff-select').value;
                var roleId = row.querySelector('.role-select').value;
                if (!staffId || !roleId) { valid = false; return; }
                staff.push({ staff_id: staffId, role_id: roleId });
            });

            if (!valid || staff.length === 0) {
                document.getElementById('assignError').textContent = 'Please select staff and role.';
                document.getElementById('assignError').classList.remove('d-none');
                return;
            }
            document.getElementById('assignError').classList.add('d-none');

            fetch('/projects/' + activeProjectId + '/staff', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ staff: staff })
            })
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    console.log('Assign response:', data);
                    bootstrap.Modal.getInstance(document.getElementById('assignModal')).hide();
                    loadStaff(activeProjectId);
                });
        });

        // Search
        document.getElementById('projectSearch').addEventListener('input', function () {
            var q = this.value.toLowerCase();
            document.querySelectorAll('.project-item').forEach(function (item) {
                item.style.display = item.dataset.title.toLowerCase().includes(q) ? '' : 'none';
            });
        });
    });
</script>