<?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-body">
            
            <div class="text-end">
                <a class="btn btn-primary mb-3" href="<?php echo base_url(route_to('index-cancellation')) ?>"><i class="fas fa-backward"></i> <?php echo lang("Localize.back") ?></a>
            </div>

            
            <form action="<?php echo base_url(route_to('create-cancellation')) ?>" id="locationform" method="post" class="row g-3" accept-charset="utf-8" enctype="multipart/form-data">
                <?php echo $this->include('common/security') ?>
                <div class="row">
                    <div class="col-12">
                        <div class="row">                            
                            <div class="col-12 col-md-6 col-lg-4 mt-3">
                                <label for="company_id" class="form-label"><?php echo lang("Localize.company") ?><abbr title="Required field">*</abbr></label>
                                <select name="company_id" id="company_id" class="form-control">
                                    <?php foreach ($companies as $companyvalue) : ?>
                                        <option value="<?php echo $companyvalue->id ?>"><?php echo $companyvalue->name ?></option>
                                    <?php endforeach ?>
                                </select>
                                <?php if (isset($validation) && $validation->hasError('company_id')) : ?>
                                    <div class="text-danger">
                                        <?php echo $validation->getError('company_id'); ?>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 col-md-6 col-lg-4 mt-3">
                                <label class="form-label"><?php echo lang("Localize.hours") ?><abbr title="Required field">*</abbr></label>
                                <input type="text" name="hours[]" class="form-control">
                                <?php if (isset($validation) && $validation->hasError('hours')): ?>
                                    <div class="text-danger"><?= $validation->getError('hours') ?></div>
                                <?php endif; ?>
                            </div>
                            <div class="col-12 col-md-6 col-lg-4 mt-3">
                                <label class="form-label"><?php echo lang("Localize.charges") ?> (%)<abbr title="Required field">*</abbr></label>
                                <input type="text" name="charges[]" class="form-control">
                                <?php if (isset($validation) && $validation->hasError('charges')): ?>
                                    <div class="text-danger"><?= $validation->getError('charges') ?></div>
                                <?php endif; ?>
                            </div>
                            <div class="col-12 col-md-6 col-lg-4 mt-3">
                                <label style="display:block;" class="form-label">&nbsp;</label>
                                <a class="btn btn-primary mb-3" href="#" id="addMoreBtn"><i class="fas fa-plus"></i> Add More</a>
                            </div>
                        </div>

                        <div id="addedExtraHoursDiv">
                        </div>

                        <!-- Template for new fields -->
                        <div class="row extraFieldsTemplate" style="display:none;">
                            <div class="col-12 col-md-6 col-lg-4 mt-3">
                                <label for="hours" class="form-label"><?php echo lang("Localize.hours") ?><abbr title="Required field">*</abbr></label>
                                <input type="text" name="hours[]" class="form-control">
                            </div>
                            <div class="col-12 col-md-6 col-lg-4 mt-3">
                                <label for="charges" class="form-label"><?php echo lang("Localize.charges") ?> (%)<abbr title="Required field">*</abbr></label>
                                <input type="text" name="charges[]" class="form-control">
                            </div>
                            <div class="col-12 col-md-6 col-lg-4 mt-3">
                            <label style="display:block;" class="form-label">&nbsp;</label>
                                <button type="button" class="btn btn-danger deleteBtn"><?php echo lang("Localize.c_delete") ?></button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 mt-3">
                                <button type="submit" class="btn btn-success"><?php echo lang("Localize.submit") ?></button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

        </div>
    </div>
    <script>
        document.getElementById('addMoreBtn').addEventListener('click', function (e) {
            e.preventDefault();

            // Clone the template
            var newFields = document.querySelector('.extraFieldsTemplate').cloneNode(true);
            
            var inputs = newFields.querySelectorAll('input');
            inputs.forEach(function(input) {
                input.value = ''; // Clear the input value
            });

            newFields.style.display = 'flex'; // Show the cloned fields

            // Append to the container
            document.getElementById('addedExtraHoursDiv').appendChild(newFields);

            // Add event listener for delete button
            newFields.querySelector('.deleteBtn').addEventListener('click', function () {
                newFields.remove(); // Remove the current set of fields
            });
        });
    </script>

    <?php echo $this->endSection() ?>