@extends('admin_dashboard')
@section('admin')

<div class="content">
    <div class="container-fluid">

        <div class="page-title-box mb-2">
            <h4 class="page-title">CRM History</h4>
        </div>

        <div class="card shadow-sm">
            <div class="card-body">
                <div class="row">
                    {{-- 🔹 SID Selector --}}
                    <div class="col-md-4 mb-2">
                        <label for="sid">Choose your SID:</label>
                        <input class="form-control shadow-sm" list="emp_list" name="sid" id="sid"
                            placeholder="Enter SID">
                        <datalist id="emp_list">
                            @foreach($employees as $emp)
                            <option value="{{ $emp->account_number }}">{{ $emp->account_number }} -
                                {{ $emp->member_name }}
                            </option>
                            @endforeach
                        </datalist>
                    </div>

                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-4 mb-2">
                                <div class="form-group">
                                    <label for="emp_name">Name:</label>
                                    <p id="emp_name"></p>
                                </div>
                                <div class="form-group">
                                    <label for="pid_name">PID Name:</label>
                                    <p id="pid_name"></p>
                                </div>
                            </div>
                            <div class="col-md-4 mb-2">
                                <div class="form-group">
                                    <label for="emp_desig">Designation:</label>
                                    <p id="emp_desig"></p>
                                </div>
                                <div class="form-group">
                                    <label for="emp_join_date">Join Date:</label>
                                    <p id="emp_join_date"></p>
                                </div>
                            </div>
                            <div class="col-md-4 mb-2">
                                <div class="form-group">
                                    <label for="emp_cell">Cell No:</label>
                                    <p id="emp_cell"></p>
                                </div>
                                <div class="form-group">
                                    <label for="emp_address">Address:</label>
                                    <p id="emp_address"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- 🔹 Editable Table --}}
                <div class="table-responsive">
                    <table id="editableTable" class="table table-bordered table-hover align-middle">
                        <thead class="table-dark text-center">
                            <tr>
                                <th>SID</th>
                                <th>BPO Code</th>
                                <th>Wanna Do</th>
                                <th>Date</th>
                                <th>Actuallization</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody id="inputRowWrapper">
                            {{-- Editable Input Row --}}
                            <tr id="editableRow" class="bg-light">
                                <td contenteditable="false" class="sid-cell"></td>
                                <td contenteditable="false" class="bpo-cell"></td>
                                <td contenteditable="true"></td>
                                <td contenteditable="true">{{ date('Y-m-d') }}</td>
                                <td contenteditable="true"></td>
                                <td style="text-align:center;">
                                    <button type="button" id="saveRow" class="btn btn-primary btn-sm">Save</button>
                                </td>
                            </tr>
                        </tbody>
                        <tbody id="dataRows"></tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
</div>

{{-- CSRF Token --}}
<meta name="csrf-token" content="{{ csrf_token() }}">
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const empList = @json($employees);
        const sidInput = document.getElementById('sid');
        const editableRow = document.getElementById('editableRow');
        const saveBtn = document.getElementById('saveRow');
        const dataRows = document.getElementById('dataRows');
        let editId = null;

        // 🔹 SID Auto-fill & Data Load
        sidInput.addEventListener('input', function() {
            const enteredSid = this.value.trim();
            const matched = empList.find(e => e.account_number == enteredSid);
            const sidCell = editableRow.querySelector('.sid-cell');
            const bpoCode = editableRow.querySelector('.bpo-cell');

            if (matched) {
                // টেবিল ইনপুট রোতে বসানো
                sidCell.textContent = matched.account_number;
                bpoCode.textContent = matched.bpo_code;

                // এমপ্লয়ী ইনফো দেখানো
                document.getElementById('emp_name').textContent = matched.member_name ?? '';
                document.getElementById('pid_name').textContent = matched.pid_name ?? '';
                document.getElementById('emp_desig').textContent = matched.designation ?? '';
                document.getElementById('emp_join_date').textContent = matched.join_date ?? '';
                document.getElementById('emp_cell').textContent = matched.member_mobile ?? '';
                document.getElementById('emp_address').textContent = matched.member_address ?? '';

                // 🔹 SID অনুযায়ী টেবিল ডাটা লোড
                fetch(`/crm/fetch/${matched.account_number}`)
                    .then(res => res.json())
                    .then(rows => {
                        dataRows.innerHTML = '';
                        if (rows.length === 0) {
                            dataRows.innerHTML =
                                `<tr><td colspan="7" class="text-center text-muted">No CRM history found.</td></tr>`;
                        } else {
                            rows.forEach(r => appendRow(r));
                        }
                    });
            } else {
                sidCell.textContent = '';
                bpoCode.textContent = '';
                dataRows.innerHTML = '';
                ['emp_name', 'pid_name', 'emp_desig', 'emp_join_date', 'emp_cell', 'emp_address'].forEach(
                    id => {
                        document.getElementById(id).textContent = '';
                    });
            }
        });

        // 🔹 Save / Update Data
        saveBtn.addEventListener('click', function() {
            const sid = editableRow.querySelector('.sid-cell').textContent.trim();
            const bpo_code = editableRow.querySelector('.bpo-cell').textContent.trim();
            const editableCells = editableRow.querySelectorAll('td[contenteditable="true"]');
            const wanna_do = editableCells[0].textContent.trim();
            const date = editableCells[1].textContent.trim();
            const actualization = editableCells[2].textContent.trim();

            if (!sid) {
                alert('⚠️ Please select a valid SID first!');
                return;
            }

            const data = {
                sid,
                bpo_code,
                wanna_do,
                date,
                actualization
            };
            const url = editId ? `{{ url('/crm/update') }}/${editId}` : "{{ route('crm.store') }}";
            const method = editId ? "PUT" : "POST";

            fetch(url, {
                    method: method,
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify(data)
                })
                .then(res => res.json())
                .then(resp => {
                    if (resp.success) {
                        resetRow();
                        alert('✅ Data saved successfully!');
                        fetch(`/crm/fetch/${sid}`)
                            .then(res => res.json())
                            .then(rows => {
                                dataRows.innerHTML = '';
                                rows.forEach(r => appendRow(r));
                            });
                    } else {
                        alert('❌ Save failed!');
                    }
                })
                .catch(() => alert('❌ Something went wrong while saving!'));
        });

        // 🔹 Table Actions (Edit/Delete)
        dataRows.addEventListener('click', e => {
            const tr = e.target.closest('tr');
            if (!tr || tr.id === 'editableRow') return;

            if (e.target.classList.contains('deleteRow')) {
                const id = e.target.dataset.id;
                if (!confirm('Are you sure to delete this record?')) return;
                fetch(`{{ url('/crm/delete') }}/${id}`, {
                        method: "DELETE",
                        headers: {
                            "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
                        }
                    })
                    .then(res => res.json())
                    .then(resp => {
                        if (resp.success) tr.remove();
                    });
            }

            if (e.target.classList.contains('editRow')) {
                const cells = tr.querySelectorAll('td');
                editableRow.querySelector('.sid-cell').textContent = cells[0].textContent;
                editableRow.querySelector('.bpo-cell').textContent = cells[1].textContent;
                const editableCells = editableRow.querySelectorAll('td[contenteditable="true"]');
                editableCells[0].textContent = cells[2].textContent;
                editableCells[1].textContent = cells[3].textContent;
                editableCells[2].textContent = cells[4].textContent;
                editId = tr.dataset.id;
                saveBtn.textContent = "Update";
                editableRow.classList.add('table-warning');
                window.scrollTo({
                    top: editableRow.offsetTop - 80,
                    behavior: 'smooth'
                });
            }
        });

        // 🔹 Append Row
        function appendRow(r) {
            const row = document.createElement('tr');
            row.dataset.id = r.id;
            row.innerHTML = `
            <td>${r.sid}</td>
            <td>${r.bpo_code}</td>
            <td>${r.wanna_do ?? ''}</td>
            <td>${r.date}</td>
            <td>${r.actualization ?? ''}</td>
            <td class="text-center">
                <button class="btn btn-success btn-sm editRow">Edit</button>
                <button class="btn btn-danger btn-sm deleteRow" data-id="${r.id}">Delete</button>
            </td>
        `;
            dataRows.appendChild(row);
        }

        // 🔹 Reset Editable Row
        function resetRow() {
            const editableCells = editableRow.querySelectorAll('td[contenteditable="true"]');
            editableCells[0].textContent = '';
            editableCells[1].textContent = new Date().toISOString().split('T')[0];
            editableCells[2].textContent = '';
            editId = null;
            saveBtn.textContent = "Save";
            editableRow.classList.remove('table-warning');
        }
    });
</script>

{{-- Optional Styling --}}
<style>
    .table td[contenteditable="true"]:focus {
        outline: 2px solid #0d6efd;
        background-color: #f0f8ff;
    }

    #editableRow {
        position: sticky;
        top: 40px;
        background: #fff;
        z-index: 10;
    }
</style>

@endsection