@extends('layouts/layoutMaster')

@section('title', 'ERP — SPSERP Integration')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/select2/select2.css') }}" />
@endsection

@section('vendor-script')
    <script src="{{ asset('assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/select2/select2.js') }}"></script>
@endsection

@section('page-script')
    <script>
        var entitiesData = [];
        var departmentsData = [];

        async function loadEntities() {
            try {
                var res = await fetch(baseUrl + 'settings/erp/business-entities/allowed');
                var json = await res.json();
                entitiesData = json.data || {};
                renderEntities();
            } catch (e) {
                console.error(e);
            }
        }

        function renderEntities() {
            var $body = $('#entities-tbody');
            $body.empty();
            var allowed = entitiesData.allowed || [];
            var all = entitiesData.business_entities || [];
            if (!allowed.length) {
                $body.html('<tr><td colspan="2" class="text-center text-muted py-4">No business entities added yet.</td></tr>');
                return;
            }
            allowed.forEach(function(d) {
                var name = getNameFromArr(all, d.entity_id);
                $body.append(
                    '<tr>' +
                        '<td><span class="fw-medium">' + name + '</span></td>' +
                        '<td class="text-nowrap">' +
                            '<button onclick="removeEntity(' + d.entity_id + ')" class="btn btn-sm btn-icon" title="Remove entity"><i class="ti ti-trash"></i></button>' +
                        '</td>' +
                    '</tr>'
                );
            });
        }

        window.openAddEntity = async function() {
            try {
                var res = await fetch(baseUrl + 'settings/erp/business-entities');
                var list = await res.json();
                var allowedIds = (entitiesData.allowed || []).map(function(a) { return String(a.entity_id); });
                var str = '<option value="">— Select a business entity —</option>';
                (list || []).forEach(function(d) {
                    if (allowedIds.indexOf(String(d.id)) === -1) {
                        str += '<option value="' + d.id + '">' + d.name + '</option>';
                    }
                });
                $('#add-entity-sel').html(str);
                if ($('#add-entity-sel').data('select2')) $('#add-entity-sel').select2('destroy');
                $('#entity-modal').modal('show');
                $('#add-entity-sel').select2({ dropdownParent: $('#entity-modal'), placeholder: '— Select a business entity —', allowClear: true, width: '100%' });
            } catch (e) {
                console.error(e);
            }
        };

        window.submitAddEntity = async function() {
            var beId = $('#add-entity-sel').val();
            if (!beId) return;
            var data = await pdwl('settings/erp/business-entities', { edit_op: 'add', entity_id: beId });
            if (data) {
                showResponse(data.message, data.success ? 'success' : 'error');
                if (data.success) {
                    $('#entity-modal').modal('hide');
                    loadEntities();
                }
            }
        };

        window.removeEntity = async function(beId) {
            if (await showConfirmation()) {
                var data = await pdwl('settings/erp/business-entities', { edit_op: 'delete', entity_id: beId });
                if (data) {
                    showResponse(data.message, data.success ? 'success' : 'error');
                    if (data.success) loadEntities();
                }
            }
        };

        async function loadDepartments() {
            try {
                var res = await fetch(baseUrl + 'settings/erp/departments/allowed');
                var json = await res.json();
                departmentsData = json.data || {};
                renderDepartments();
            } catch (e) {
                console.error(e);
            }
        }

        function renderDepartments() {
            var $body = $('#departments-tbody');
            $body.empty();
            var allowed = departmentsData.allowed || [];
            var all = departmentsData.departments || [];
            if (!allowed.length) {
                $body.html('<tr><td colspan="2" class="text-center text-muted py-4">No departments added yet.</td></tr>');
                return;
            }
            allowed.forEach(function(d) {
                var name = getNameFromArr(all, d.department_id);
                $body.append(
                    '<tr>' +
                        '<td><span class="fw-medium">' + name + '</span></td>' +
                        '<td class="text-nowrap">' +
                            '<button onclick="removeDepartment(' + d.department_id + ')" class="btn btn-sm btn-icon" title="Remove department"><i class="ti ti-trash"></i></button>' +
                        '</td>' +
                    '</tr>'
                );
            });
        }

        window.openAddDepartment = async function() {
            try {
                var res = await fetch(baseUrl + 'settings/erp/departments');
                var list = await res.json();
                var allowedIds = (departmentsData.allowed || []).map(function(a) { return String(a.department_id); });
                var str = '<option value="">— Select a department —</option>';
                (list || []).forEach(function(d) {
                    if (allowedIds.indexOf(String(d.id)) === -1) {
                        var label = d.name;
                        if (d.branch) label += ' [' + d.branch + ']';
                        str += '<option value="' + d.id + '">' + label + '</option>';
                    }
                });
                $('#add-dept-sel').html(str);
                if ($('#add-dept-sel').data('select2')) $('#add-dept-sel').select2('destroy');
                $('#dept-modal').modal('show');
                $('#add-dept-sel').select2({ dropdownParent: $('#dept-modal'), placeholder: '— Select a department —', allowClear: true, width: '100%' });
            } catch (e) {
                console.error(e);
            }
        };

        window.submitAddDepartment = async function() {
            var dId = $('#add-dept-sel').val();
            if (!dId) return;
            var data = await pdwl('settings/erp/departments', { edit_op: 'add', department_id: dId });
            if (data) {
                showResponse(data.message, data.success ? 'success' : 'error');
                if (data.success) {
                    $('#dept-modal').modal('hide');
                    loadDepartments();
                }
            }
        };

        window.removeDepartment = async function(dId) {
            if (await showConfirmation()) {
                var data = await pdwl('settings/erp/departments', { edit_op: 'delete', department_id: dId });
                if (data) {
                    showResponse(data.message, data.success ? 'success' : 'error');
                    if (data.success) loadDepartments();
                }
            }
        };

        function getNameFromArr(arr, id) {
            var name = '—';
            (arr || []).forEach(function(i) {
                if (parseInt(i.id) === parseInt(id)) {
                    name = i.name;
                    if (i.branch) name += ' [' + i.branch + ']';
                }
            });
            return name;
        }

        $(function() {
            loadEntities();
            loadDepartments();
        });
    </script>
@endsection

@section('content')
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div>
                    <h4 class="fw-bold mb-1">SPSERP Integration</h4>
                    <p class="text-muted mb-0">Manage allowed business entities and departments from the ERP system.</p>
                </div>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="javascript:void(0);">Home</a></li>
                        <li class="breadcrumb-item"><a href="javascript:void(0);">Settings</a></li>
                        <li class="breadcrumb-item active" aria-current="page">ERP</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6 mb-4">
            <div class="card h-100">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                        <div>
                            <h5 class="card-title mb-0">Business Entities</h5>
                            <small class="text-muted">ERP business entities allowed to access the portal.</small>
                        </div>
                        <button onclick="openAddEntity()" type="button" class="btn btn-primary">
                            Add Entity
                        </button>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table border-top mb-0">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody id="entities-tbody">
                            <tr><td colspan="2" class="text-center text-muted py-4">Loading…</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-lg-6 mb-4">
            <div class="card h-100">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                        <div>
                            <h5 class="card-title mb-0">Departments</h5>
                            <small class="text-muted">ERP departments allowed to access the portal.</small>
                        </div>
                        <button onclick="openAddDepartment()" type="button" class="btn btn-primary">
                            Add Department
                        </button>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table border-top mb-0">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody id="departments-tbody">
                            <tr><td colspan="2" class="text-center text-muted py-4">Loading…</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="entity-modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header border-bottom">
                    <h5 class="modal-title mb-0">Add Business Entity</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body py-3">
                    <label class="form-label">Business Entity</label>
                    <select class="form-select" id="add-entity-sel">
                        <option value="">— Select a business entity —</option>
                    </select>
                </div>
                <div class="modal-footer border-top">
                    <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" onclick="submitAddEntity()">Add Entity</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="dept-modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header border-bottom">
                    <h5 class="modal-title mb-0">Add Department</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body py-3">
                    <label class="form-label">Department</label>
                    <select class="form-select" id="add-dept-sel">
                        <option value="">— Select a department —</option>
                    </select>
                </div>
                <div class="modal-footer border-top">
                    <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" onclick="submitAddDepartment()">Add Department</button>
                </div>
            </div>
        </div>
    </div>
@endsection