{% extends '@branch/layouts/commonmaster.html.twig' %}

{% block stylesheets %}
{{ parent() }}

{% endblock %}

{% block content %}


<div class="col-md-11 m-auto">

    <div class="card shadow mb-4">
        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
            <h5 class="mb-0">{{ branch.getName() }}</h5>
        </div>
        <div class="card-body">
            <div class="row mb-2">
                <div class="col-md-6">
                    <strong>Town:</strong> {{ branch.getTown() }}
                </div>
                <div class="col-md-6">
                    <strong>Address:</strong> {{ branch.getAddress() }}
                </div>
            </div>
            <div class="row mb-2">
                <div class="col-md-6">
                    <strong>Status:</strong> 
                    <span class="badge bg-{{ branch.isActive() == true ? 'success' : 'danger' }}">Active</span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <strong>Created By:</strong> {{ branch.getCreatedBy().getPerson().getName() }}
                </div>
            </div>
        </div>
    </div>

    <!-- Users Table -->
    <div>
        {% include "@branch/table/show.html.twig" %}
    </div>

</div>

<div class="modal fade" id="employeeModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="employeeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg rounded-3">

            <!-- Header -->
            <div class="modal-header bg-light border-0">
                <h5 class="modal-title fw-bold" id="employeeModalLabel">Employee Attendance Details</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <!-- Body -->
            <div class="modal-body p-4">

                <!-- Employee Info -->
                <div class="d-flex align-items-center mb-4">
                    <img src="https://via.placeholder.com/100" alt="avatar" class="rounded-circle border me-3" />
                    <div>
                        <h5 class="mb-0 fw-bold">
                            <span id="employeeName">Employee Name</span>
                        </h5>
                        <small class="text-muted d-block" id="employeePosition">Job Title </small>
                        <small class="text-secondary" id="employeeId">EMPXXXX</small>
                    </div>
                </div>

                <!-- Job Info Grid -->
                <div class="row g-3 text-sm mb-4">
                    <div class="col-md-4"><strong>Department:</strong> <span id="employeeDept">---</span></div>
                    <div class="col-md-4"><strong>Role:</strong> <span id="employeeRole">---</span></div>
                    <div class="col-md-4"><strong>Employment:</strong> <span id="employeeEmployment">---</span></div>
                    <div class="col-md-4"><strong>Avg. Work Hours:</strong> <span id="avgWorkHours">---</span></div>
                    <div class="col-md-4"><strong>Avg. Overtime:</strong> <span id="avgOvertime">---</span></div>
                </div>

                <!-- Attendance Summary -->
                <div class="row text-center g-3 mb-5">
                    <div class="col-md-3">
                        <div class="card shadow-sm border-0">
                            <div class="card-body">
                                <p class="text-muted small mb-1">Year of Employment</p>
                                <h6 class="fw-bold" id="yearOfEmployment">----</h6>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card shadow-sm border-0">
                            <div class="card-body">
                                <p class="text-muted small mb-1">Total Present Days</p>
                                <h6 class="fw-bold" id="totalPresents">----</h6>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card shadow-sm border-0">
                            <div class="card-body">
                                <p class="text-muted small mb-1">Total Absent Days</p>
                                <h6 class="fw-bold" id="totalAbsents">----</h6>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card shadow-sm border-0">
                            <div class="card-body">
                                <p class="text-muted small mb-1">Total Leave Days</p>
                                <h6 class="fw-bold" id="totalLeaves">----</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- Footer -->
            <div class="modal-footer border-0">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Understood</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block javascripts %}
{{ parent() }}

<script>

let branch_slug = {{ app.request.attributes.get('_route_params')|json_encode|raw }}['branch_slug']

function viewThisUser(target){

    const index = getRowIndex(target);
    $('#branchShowPersonel').datagrid('endEdit', index);

    const row = $('#branchShowPersonel').datagrid('getRows')[index];

    $.ajax({
        method: 'POST',
        url: '/admin/branch/' + branch_slug + '/show/user/' + row.p_id,
        success: function(res){

            $('#employeeName').text('')
            $('#employeeName').text(res.employee_name)
            $('#employeePosition').text('')
            $('#employeePosition').text(res.department)
            $('#employeeDept').text('')
            $('#employeeDept').text(res.department)

        },
        error: function(error){},
    })

    $('#employeeModal').modal('show')
}

function getRowIndex(target){
    var tr = $(target).closest('tr.datagrid-row');
    return parseInt(tr.attr('datagrid-row-index'));
}

$(document).ready(function() {

    $('#branchShowPersonel').datagrid({
        url: "/admin/branch/" + branch_slug + "/users",
        method: 'GET',
        singleSelect: true,
        pagination: true,
        fitColumns: true,
        collapsible: true,
        showFooter: true,
        rownumbers: true,
        pageSize: 20,
        loadMsg: 'Loading Organizations',
        onLoadSuccess: function(){
            $('#cardBlurred').removeClass('loader-active')
        },
        columns: [[
            {
                field: 'p_id', title: 'Person ID', width: 30, editor:'text',
                formatter: (v, r) => r.p_id
            },
            {
                field: 'name', title: 'Name', width: 30, editor:'text',
                formatter: (v, r) => r.name
            },
            {
                field: 'username', title: 'Username', width: 30, editor:'text',
                formatter: (v, r) => r.username
            },
            {           
                field: 'phonenumber', title: 'Phone Number', width: 30, editor:'text',
                formatter: (v, r) => r.phonenumber
            },
            {
                field:'action',title:'Action',width:20,align:'center',
                formatter:function(value,row,index){
                    if (row.editing){
                    } else {
                        var e = '<a href="javascript:void(0)" onclick="viewThisUser(this)">View</a> ';
                        return e;
                    }
                }
            },
        ]],
    }).datagrid('enableFilter', [ ]);

    $('#branchShowPersonel').datagrid('hideColumn', 'p_id');

});

</script>

{% endblock %}