<?php echo $this->extend('template/admin/main') ?>

<?php echo $this->section('content') ?>
    <?php echo $this->include('common/message') ?>

    <div class="card mb-4">
        <div class="card-header">
            <h4><?php echo lang("Localize.global_cancellation_policy") ?></h4>
        </div>
        <div class="card-body">
            
            <form action="<?php echo base_url(route_to('save-global-cancellation')) ?>" id="global_cancellation_form" method="post" class="row g-3" accept-charset="utf-8">
                <?php echo $this->include('common/security') ?>
                
                <div class="row">
                    <div class="col-12">
                        <div id="addedExtraHoursDiv">
                            <?php if($list_available > 0): ?>
                                <?php foreach ($cancellationlist as $index => $list): ?>
                                    <div class="row mb-3 <?php echo ($index > 0) ? 'extraFieldsTemplate' : ''; ?>">
                                        <div class="col-md-4">
                                            <label class="form-label"><?php echo lang("Localize.hours") ?> <abbr title="Required field">*</abbr></label>
                                            <input type="number" name="hours[]" class="form-control" value="<?php echo $list->hours; ?>" required>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label"><?php echo lang("Localize.charges") ?> (%) <abbr title="Required field">*</abbr></label>
                                            <input type="number" name="charges[]" class="form-control" value="<?php echo $list->charges; ?>" min="0" max="100" step="0.01" required>
                                        </div>
                                        <div class="col-md-4 d-flex align-items-end">
                                            <?php if($index == 0): ?>
                                                <button type="button" class="btn btn-primary" id="addMoreBtn"><i class="fas fa-plus"></i> <?php echo lang("Localize.add_more") ?></button>
                                            <?php else: ?>
                                                <button type="button" class="btn btn-danger deleteBtn"><?php echo lang("Localize.c_delete") ?></button>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                <?php endforeach; ?>
                            <?php else: ?>
                                <div class="row mb-3">
                                    <div class="col-md-4">
                                        <label class="form-label"><?php echo lang("Localize.hours") ?> <abbr title="Required field">*</abbr></label>
                                        <input type="number" name="hours[]" class="form-control" required>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label"><?php echo lang("Localize.charges") ?> (%) <abbr title="Required field">*</abbr></label>
                                        <input type="number" name="charges[]" class="form-control" min="0" max="100" step="0.01" required>
                                    </div>
                                    <div class="col-md-4 d-flex align-items-end">
                                        <button type="button" class="btn btn-primary" id="addMoreBtn"><i class="fas fa-plus"></i> <?php echo lang("Localize.add_more") ?></button>
                                    </div>
                                </div>
                            <?php endif; ?>
                        </div>

                        <!-- Template for new rows (hidden) -->
                        <div id="rowTemplate" style="display:none;">
                            <div class="row mb-3 extraFieldsTemplate">
                                <div class="col-md-4">
                                    <label class="form-label"><?php echo lang("Localize.hours") ?> <abbr title="Required field">*</abbr></label>
                                    <input type="number" name="hours[]" class="form-control">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label"><?php echo lang("Localize.charges") ?> (%) <abbr title="Required field">*</abbr></label>
                                    <input type="number" name="charges[]" class="form-control" min="0" max="100" step="0.01">
                                </div>
                                <div class="col-md-4 d-flex align-items-end">
                                    <button type="button" class="btn btn-danger deleteBtn"><?php echo lang("Localize.c_delete") ?></button>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-4">
                            <div class="col-12">
                                <button type="submit" class="btn btn-success"><i class="fas fa-save"></i> <?php echo lang("Localize.submit") ?></button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const addMoreBtn = document.getElementById('addMoreBtn');
            const container = document.getElementById('addedExtraHoursDiv');
            const template = document.querySelector('#rowTemplate .extraFieldsTemplate');

            addMoreBtn.addEventListener('click', function() {
                const newRow = template.cloneNode(true);
                const inputs = newRow.querySelectorAll('input');
                inputs.forEach(input => {
                    input.value = '';
                    input.required = true;
                });
                container.appendChild(newRow);
            });

            container.addEventListener('click', function(e) {
                if (e.target.classList.contains('deleteBtn') || e.target.parentElement.classList.contains('deleteBtn')) {
                    const row = e.target.closest('.row');
                    if (row) {
                        row.remove();
                    }
                }
            });
        });
    </script>
<?php echo $this->endSection() ?>
