<?php echo $__env->make('admin.layouts.header', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
<?php echo $__env->make('admin.layouts.sidebar', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>

<style>
    .hidden { display: none; }
    .font-weight { font-weight: 600; }
    table { width: 100%; font-family: Arial; }
    .panel-group { padding-top: 8px; }
    .panel-default { padding-bottom: 4px; }
    .panel-collapse { background-color: #ffffff; padding: 10px; border: 1px solid #dedada; }
    .error-view {
        position: absolute;
        top: 37px;
        background-color: red;
        padding-left: 10px;
        padding-right: 10px;
        color: white;
        font-size: 11px;
    }
    .edit-input {
        width: 100%;
        padding: 5px;
        border: 1px solid #716aca;
        border-radius: 3px;
    }
    .editable-row.editing {
        background-color: #f9f9f9;
    }
    .badge-status {
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 0.8rem;
    }
</style>

<div class="m-grid__item m-grid__item--fluid m-wrapper">
    <div class="m-subheader ">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    PTP Data Import
                </h3>
            </div>
        </div>
    </div>
    <div class="m-content">
        
        <?php if(Session::has('success')): ?>
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
                <?php echo e(Session::get('success')); ?>

            </div>
        <?php endif; ?>
        
        <?php if(Session::has('validation_errors')): ?>
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>

                <strong>Validation Issues:</strong>
                <ul class="mb-0">
                    <?php $__currentLoopData = Session::get('validation_errors'); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <li><?php echo e($error); ?></li>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </ul>
            </div>
        <?php endif; ?>

        <?php if(Session::has('error')): ?>
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
                <?php echo e(Session::get('error')); ?>

            </div>
        <?php endif; ?>

        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <span class="m-portlet__head-icon">
                            <i class="fa fa-file-text-o"></i>
                        </span>
                        <h3 class="m-portlet__head-text">
                            Upload PTP File
                        </h3>
                    </div>
                </div>



                <div class="m-portlet__head-tools" style="display: none;">
                    <ul class="m-portlet__nav">
                        <li class="m-portlet__nav-item">
                            <button id="btn-toggle-data" class="btn btn-info m-btn m-btn--custom m-btn--icon m-btn--air">
                                <span>
                                    <i class="fa fa-table"></i>
                                    <span>View / Edit Stored Data</span>
                                </span>
                            </button>
                        </li>
                    </ul>
                </div>



            </div>
            <div class="m-portlet__body">
                <div class="m-section">
                    <div class="m-section__content">
                        <div class="col-md-12">
                            
                            <span style="font-weight: 500;">[<a href="/assets/ptp_sample_file.xlsx">Download Sample File</a>]</span>
                            
                            <div class="row" style="color:red; margin-top: 5px;">* Please remove extra headers &amp; footers from file before processing</div>
                            <div class="row" style="font-weight: 500;">[Supported file - xls, xlsx]</div>

                            
                            <form id="process_ptp_import" class="form-horizontal" action="/admin/ptp/import" method="POST" enctype="multipart/form-data">
                                <input name="_token" value="<?php echo e(csrf_token()); ?>" type="hidden">
                                
                                <div class="row" style="padding-bottom: 10px; margin-left: -32px; padding-top: 10px;">
                                    <div class="col-md-4">
                                        <input type="file" name="ptp_file" id="ptp_file" class="form-control" autocomplete="off" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/>
                                    </div>

                                    <div class="col-md-6" style="padding-top: 0;">
                                        <input type="submit" class="btn btn-accent" value="Import Data" style="margin-right: 20px;"/>
                                        <div class="btn btn-primary" onclick="return window.location = '/admin/ptp/import';">Clear Filter</div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>



        <div class="m-portlet m-portlet--mobile <?php echo e((request()->has('page') || request()->filled('search_app_id') || request()->filled('search_action_date')) ? '' : 'hidden'); ?>" id="data-preview-section" style="border: 1px solid #716aca;">
            <div class="m-portlet__head" style="background-color: #f7f8fa;">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <span class="m-portlet__head-icon">
                            <i class="fa fa-database" style="color: #716aca;"></i>
                        </span>
                        <h3 class="m-portlet__head-text" style="color: #716aca;">
                            Existing Collection Actions
                        </h3>
                    </div>
                </div>
                <div class="m-portlet__head-tools">
                    <button id="btn-edit-mode" class="btn btn-warning m-btn m-btn--icon m-btn--pill">
                        <span><i class="fa fa-pencil"></i><span>Edit Mode</span></span>
                    </button>
                    <button id="btn-save-change" class="btn btn-success m-btn m-btn--icon m-btn--pill hidden ml-2">
                        <span><i class="fa fa-save"></i><span>Save Changes</span></span>
                    </button>
                    <button id="btn-cancel-edit" class="btn btn-danger m-btn m-btn--icon m-btn--pill hidden ml-2">
                        <span><i class="fa fa-times"></i><span>Cancel</span></span>
                    </button>
                </div>
            </div>
            <div class="m-portlet__body">
            
                <div class="m-form m-form--label-align-right m--margin-bottom-20">
                    <div class="row align-items-center">
                        <div class="col-xl-12">
                            <form method="GET" action="<?php echo e(url()->current()); ?>">
                                <div class="form-group m-form__group row align-items-center">
                                    
                                    
                                    <div class="col-md-3">
                                        <div class="m-input-icon m-input-icon--left">
                                            <input type="text" 
                                                class="form-control m-input" 
                                                name="search_app_id" 
                                                placeholder="Search App ID..." 
                                                value="<?php echo e(request('search_app_id')); ?>">
                                            <span class="m-input-icon__icon m-input-icon__icon--left">
                                                <span><i class="fa fa-search"></i></span>
                                            </span>
                                        </div>
                                    </div>

                                    
                                    <div class="col-md-3">
                                        <div class="m-input-icon m-input-icon--left">
                                            <input type="text" 
                                                class="form-control m-input" 
                                                id="m_datepicker_1" 
                                                name="search_action_date" 
                                                placeholder="Select Action Date" 
                                                value="<?php echo e(request('search_action_date')); ?>" 
                                                autocomplete="off" 
                                                readonly> 
                                            <span class="m-input-icon__icon m-input-icon__icon--left">
                                                <span><i class="fa fa-calendar"></i></span>
                                            </span>
                                        </div>
                                    </div>

                                    
                                    <div class="col-md-4">
                                        <button type="submit" class="btn btn-primary m-btn m-btn--custom m-btn--icon m-btn--air">
                                            <span>
                                                <i class="fa fa-filter"></i>
                                                <span>Filter</span>
                                            </span>
                                        </button>
                                        
                                        
                                        <?php if(request('search_app_id') || request('search_action_date')): ?>
                                            <a href="<?php echo e(url()->current()); ?>" class="btn btn-secondary m-btn m-btn--custom m-btn--icon m-btn--air ml-2">
                                                <span><i class="fa fa-times"></i><span>Clear</span></span>
                                            </a>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                
                <div class="table-responsive">
                    <table class="table table-striped- table-bordered table-hover table-checkable" id="m_table_1">
                        <thead>
                            <tr>
                                <th>App Id</th>
                                <th>User ID</th>
                                <th>Action Date</th>
                                <th>Next Action Date</th> 
                                <th>PTP Date</th>
                                <th>Dispo Code</th>
                                <th>Amount To Collect</th>
                                <th>Remarks</th>
                            </tr>
                        </thead>
                        <tbody id="table-body">
                            <?php if(isset($collectionActions) && count($collectionActions) > 0): ?>
                                <?php $__currentLoopData = $collectionActions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $action): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <tr class="editable-row" data-id="<?php echo e($action->id); ?>">
                                    <td class="readonly"><?php echo e($action->application_id); ?></td>
                                    <td class="editable"><?php echo e($action->user_id); ?></td>
                                    <td class="editable" data-field="action_date"><?php echo e($action->action_date ? $action->action_date->format('Y-m-d') : '-'); ?></td>
                                    <td class="editable" data-field="next_action_date"><?php echo e($action->next_action_date ? $action->next_action_date->format('Y-m-d') : '-'); ?></td>
                                    <td class="editable" data-field="ptp_date"><?php echo e($action->ptp_date ? $action->ptp_date->format('Y-m-d') : '-'); ?></td>
                                    <td class="editable" data-field="dispo_code"><?php echo e($action->dispo_code); ?></td>
                                    <td class="editable" data-field="actual_amount_to_be_collected"><?php echo e($action->actual_amount_to_be_collected); ?></td>
                                    <td class="editable" data-field="remarks"><?php echo e($action->remarks); ?></td>
                                </tr>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            <?php else: ?>
                                <tr>
                                    <td colspan="7" class="text-center">No data found or variable $collectionActions not passed.</td>
                                </tr>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
                <div class="row" style="margin-top: 20px; display: flex; justify-content: flex-end; padding-right: 15px;">
                    <?php if(isset($collectionActions)): ?>
                        <?php echo e($collectionActions->links()); ?>

                    <?php endif; ?>
                </div>
            </div>
        </div>



    </div>
</div>

<?php echo $__env->make("admin.layouts.footer", array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>


<script>
    $(document).ready(function() {
        
        // 1. Toggle Table Visibility
        $('#btn-toggle-data').click(function(e) {
            e.preventDefault();
            $('#data-preview-section').slideToggle('fast');
        });

        let originalHtml = {}; // Store original HTML to cancel edits

        // 2. Enable Edit Mode
        $('#btn-edit-mode').click(function() {
            $(this).addClass('hidden');
            $('#btn-save-change, #btn-cancel-edit').removeClass('hidden');

            $('.editable-row').each(function(index) {
                let rowId = $(this).data('id');
                // Save current state
                originalHtml[rowId] = $(this).html();

                $(this).addClass('editing');
                
                // Convert text to inputs/textareas
                $(this).find('.editable').each(function() {
                    let content = $(this).text().trim();
                    if(content === '-') content = '';
                    let field = $(this).data('field');
                    
                    // CHECK: Is this the remarks field?
                    if (field === 'remarks') {
                        // Render Textarea for Remarks
                        // 'rows="3"' makes it tall enough to see content
                        $(this).html(`<textarea class="edit-input" name="${field}" rows="3" style="resize: vertical;">${content}</textarea>`);
                    } else {
                        // Render Standard Input for everything else
                        $(this).html(`<input type="text" class="edit-input" name="${field}" value="${content}">`);
                    }
                });
            });
        });

        // 3. Cancel Edit
        $('#btn-cancel-edit').click(function() {
            // Restore buttons
            $('#btn-edit-mode').removeClass('hidden');
            $('#btn-save-change, #btn-cancel-edit').addClass('hidden');

            // Restore HTML
            $('.editable-row').each(function() {
                let rowId = $(this).data('id');
                if(originalHtml[rowId]) {
                    $(this).html(originalHtml[rowId]);
                }
                $(this).removeClass('editing');
            });
        });

        // 4. Save Changes (AJAX)
        $('#btn-save-change').click(function() {
            let updatedData = [];

            $('.editable-row').each(function() {
                let row = $(this);
                let rowId = row.data('id');
                let rowData = { id: rowId };

                row.find('input').each(function() {
                    let fieldName = $(this).attr('name');
                    let val = $(this).val();
                    rowData[fieldName] = val;
                });
                updatedData.push(rowData);
            });

            // Loading state
            $(this).addClass('m-loader m-loader--right m-loader--light').attr('disabled', true);

            $.ajax({
                url: '/admin/ptp/update-batch', // You need to create this route
                method: 'POST',
                data: {
                    _token: "<?php echo e(csrf_token()); ?>", 
                    data: updatedData
                },
                success: function(response) {
                    $('#btn-save-change').removeClass('m-loader m-loader--right m-loader--light').attr('disabled', false);
                    if(response.success) {
                        alert('Data updated successfully!');
                        location.reload(); // Reload to see clean data
                    } else {
                        alert('Error updating data.');
                    }
                },
                error: function(err) {
                    $('#btn-save-change').removeClass('m-loader m-loader--right m-loader--light').attr('disabled', false);
                    alert('Server error occurred.');
                    console.log(err);
                }
            });
        });


        

        // Existing File Validation Script
        $(document).on("submit", "#process_ptp_import", function(event) {
            let form = this;
            event.preventDefault();
            $(".error-view").remove();
            let fileInput = $(this).find('input[name="ptp_file"]');
            fileInput.css({'border-color':'#ebedf2'});

            if(fileInput.val().length == 0){
                fileInput.css({'border-color':'red'});
                fileInput.after('<span class="error-view">FILE IS REQUIRED</span>');
                return false;
            }

            let fileName = fileInput.val();
            let extension = fileName.substr((fileName.lastIndexOf('.') + 1)).toLowerCase();
            let validExtensions = ['xls', 'xlsx'];

            if($.inArray(extension, validExtensions) == -1) {
                fileInput.css({'border-color':'red'});
                fileInput.after('<span class="error-view">INVALID FILE TYPE. ONLY XLS/XLSX ALLOWED.</span>');
                return false;
            }
            form.submit();
        });
    });
</script>