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

{% block title %} | Create Clerk {% endblock %}

{% block content %}
<style>
#cardBlurred.loader-active::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
    background: rgba(255, 255, 255, 1) url('{{ asset("fanassets/loader/loader.gif") }}') center center no-repeat;
}
.highlight {
    background-color: #C5651D ;
    animation: flashsuccess 1s ease-in-out;
}

@keyframes flashsuccess {
0% { background-color: #C5651D ; }
50% { background-color: transparent; }
100% { background-color: #C5651D }
}
.highlight_error {
    background-color: red ;
    animation: flasherror 1s ease-in-out;
}

@keyframes flasherror {
0% { background-color: red ; }
50% { background-color: transparent; }
100% { background-color: red }
}
</style>

<div class="page-body">
    <div class="container-xl">
        <div class="card" style="height: 600px;">
            <div class="row g-0" style="height: 800px;">

                <div id='cardBlurred' style="" class="loader-active">
                    <table id="activeClerkEvent"
                        class="table table-responsive"
                        style="width:100%; height:auto; font-weight:normal; text-transform: uppercase;"
                        toolbar="#tb">

                        <thead>
                            <tr>
                            </tr>
                        </thead>
                    </table>
                </div>
<div class="mt-4 m-auto col-12 col-md-9 d-flex flex-column border" style="padding: 20px">

                    <h2 class="mb-4">Add Clerk to Created Event</h2>

                    <form method="POST" id="addAttendeeForm" action="">

                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">

                        <div class="card-body">
                            <h2 class="mb-4">Add Clerk</h2>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="username" class="form-label">Username</label>
                                    <input type="text" class="form-control" id="username" name="username" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="phone" class="form-label">Phone Number</label>
                                    <input type="text" class="form-control" id="phone" name="phone_number" required>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-3">
                                    <label for="id_number" class="form-label">ID Number</label>
                                    <input type="text" class="form-control" id="id_number" name="id_number" required>
                                </div>
                                <div class="col-md-3">
                                    <label for="age" class="form-label">Age</label>
                                    <input type="number" class="form-control" id="age" name="age" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="email" class="form-label">Email</label>
                                    <input type="email" class="form-control" id="email" name="email" required>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="first_name" class="form-label">Attendee Name</label>
                                    <input type="text" class="form-control" id="first_name" name="name" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="gender" class="form-label">Gender</label>
                                    <select class="form-control" name="gender" required>
                                        <option value="" disabled selected hidden>Select Gender</option>
                                        <option value="male">Male</option>
                                        <option value="female">Female</option>
                                    </select>

                                </div>
                                <div class="col-md-6">
                                    <label for="password" class="form-label">Password</label>
                                    <input type="text" class="form-control" id="password" name="password" required>
                                </div>
                            </div>

                        </div>

                        <div class="card-footer bg-transparent mt-auto">
                            <div class="btn-list justify-content-end">
                                <button type="submit" href="#" class="btn btn-primary">
                                    Submit
                                    <buttona>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}

<script>
// Column thresholds for hiding/showing
const columnThresholds = {
    'name': 250,
    'active_event': 1000,
    'email': 250,
    'phone_number': 1000,
    'username': 1000,
    'password': 250,
};

// Adjust columns visibility based on screen width
function updateGridColumnsVisibility() {
    const width = $(window).width();
    Object.keys(columnThresholds).forEach(field => {
        if (width < columnThresholds[field]) {
            $('#activeClerkEvent').datagrid('hideColumn', field);
        } else {
            $('#activeClerkEvent').datagrid('showColumn', field);
        }
    });
}

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

function editrow(target){
    $('#activeClerkEvent').datagrid('beginEdit', getRowIndex(target));
}

function deleterow(target){
    $.messager.confirm('Confirm','Are you sure?',function(r){
        if (r){
            $('#activeClerkEvent').datagrid('deleteRow', getRowIndex(target));
        }
    });
}

function saverow(target){
    const index = getRowIndex(target);
    $('#activeClerkEvent').datagrid('endEdit', index);

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

    saveClerDetails(row, index)
}

function cancelrow(target){
    $('#activeClerkEvent').datagrid('cancelEdit', getRowIndex(target));
}

function saveClerDetails(row, index){
    $.ajax({
        url: '/matchday/clerk/edit', 
        method: 'POST',
        data: {
            username: row.username, 
            password: row.password,
            name: row.name,
            email: row.email,
        },
        success: function(res) {
            var rowEl = $('#activeClerkEvent').datagrid('getPanel').find('div.datagrid-body tr[datagrid-row-index="' + index + '"]');
            rowEl.addClass('highlight');

            setTimeout(function() {
                rowEl.removeClass('highlight');
            }, 1000);
        },
        error: function() {
            var rowEl = $('#activeClerkEvent').datagrid('getPanel').find('div.datagrid-body tr[datagrid-row-index="' + index + '"]');
            rowEl.addClass('highlight_error');

            setTimeout(function() {
                rowEl.removeClass('highlight_error');
            }, 1000);
        }
    });
}

$(document).ready(function() {

    const eventId = 16

    $('#activeClerkEvent').datagrid({
        url: "/matchday/clerks/active",
        method: 'GET',
        singleSelect: true,
        pagination: true,
        fitColumns: true,
        collapsible: true,
        showFooter: true,
        rownumbers: true,
        pageSize: 20,
        loadMsg: 'Loading Organizations',
        detailFormatter: function(index, row) {
            return '<div class="ddv" style="padding: 5px 0"></div>';
        },
        onLoadSuccess: function(){
            $('#cardBlurred').removeClass('loader-active')
        },
        onExpandRow: function(index, row) {
            let detailHtml = '';
            Object.keys(columnThresholds).forEach(field => {
                const col = $('#purchasedFanTickets').datagrid('getColumnOption', field);
                if (col && col.hidden) {
                    const value = row[field.split('.').pop()];
                    detailHtml += `<div><strong>${col.title}</strong>: ${value ?? 'N/A'}</div>`;
                }
            });
            $(this).datagrid('fixDetailRowHeight', index);
            $(this).datagrid('getRowDetail', index).html(detailHtml);
        },
        columns: [[
            {
                field: 'name', title: 'Full Name', width: 30, editor:'text',
                formatter: (v, r) => r.name
            },
            {
                field: 'username', title: 'Username', width: 30, editor:'text',
                formatter: (v, r) => r.username
            },
            {
                field: 'phone_number', title: 'Phone Number', width: 25,
                formatter: (v, r) => r.phone_number
            },
            {
                field: 'email', title: 'Email', width: 40,
                formatter: (v, r) => r.email
            },
            {
                field: 'password', title: 'Password', width: 25, editor:'text',
                formatter: (v, r) => '*********'
            },
            {
                field: 'active_event', title: 'Active In', width: 35,
                formatter: (v, r) => '3KFC vs ' + r.active_event
            },
            {
                field:'action',title:'Action',width:20,align:'center',
                formatter:function(value,row,index){
                    if (row.editing){
                        var s = '<a href="javascript:void(0)" onclick="saverow(this)">Save</a> ';
                        var c = '<a href="javascript:void(0)" onclick="cancelrow(this)">Cancel</a>';
                        return s+c;
                    } else {
                        var e = '<a href="javascript:void(0)" onclick="editrow(this)">Edit</a> ';
                        return e;
                    }
                }
            },
        ]],
        onEndEdit:function(index,row){
            var ed = $(this).datagrid('getEditor', {
                index: index,
                field: 'username'
            });
            row.username = $(ed.target).val()
        },
        onBeforeEdit:function(index,row){
            if(row.password){
                row.password = ''
            }
            row.editing = true;
            $(this).datagrid('refreshRow', index);
        },
        onAfterEdit:function(index,row){
            row.editing = false;
            $(this).datagrid('refreshRow', index);
        },
        onCancelEdit:function(index,row){
            row.editing = false;
            $(this).datagrid('refreshRow', index);
        }
    }).datagrid('enableFilter', [
            {
                field:'action',
                type:'label'
            },
            {
                field: 'm.transaction_amount',
                type: 'numberbox',
                options: { precision: 1 },
                op: ['less', 'greater', 'equal']
            },
            {
                field: 't.price',
                type: 'numberbox',
                options: { precision: 1 },
                // op: ['less', 'greater', 'equal']
                op: []
            }
        ]);

    // Initial column visibility check
    updateGridColumnsVisibility();

    // Re-check on window resize
    $(window).on('resize', updateGridColumnsVisibility);
});

</script>

<script>
$('#addAttendeeForm').submit(function() {
    // Add loader and blur effect
    document.body.classList.add('loader-active');
    document.querySelector('.page-body').classList.add('blurred-background');
});

</script>

{% endblock %}