<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header space-between">
                <div class="d-flex align-center">
                    <h4><?= lang('country'); ?></h4>
                    <a href="<?= base_url("admin/home/country?q=all") ?>" class="btn btn-info ml-10"><i class="fas fa-stream"></i> <?= __('all'); ?></a>
                </div>
                <a href="javascript:;" class="btn btn-secondary" onclick="openCountryModal()"><i class="fa fa-plus"></i> <?= !empty(lang('add_new')) ? lang('add_new') : "Add New"; ?></a>
            </div>
            <div class="card-body">
                <div class="table-responsive responsiveTable">
                    <table class="table table-light data_tables">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th><?= lang('name'); ?></th>
                                <th><?= lang('code'); ?></th>
                                <th><?= lang('dial_code'); ?></th>
                                <th><?= lang('currency_name'); ?></th>
                                <th><?= lang('currency_code'); ?></th>
                                <th><?= lang('currency_symbol'); ?></th>
                                <th><?= lang('action'); ?></th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($country_list as  $key => $country): ?>
                                <tr>
                                    <td data-label="#"><?= $key + 1; ?></td>
                                    <td data-label="<?= __("name"); ?>">
                                        <?= $country['name']; ?>
                                        <?php if ($country['is_default'] == 1): ?>
                                            <label class="label label-info ml-5"><?= __('active'); ?></label>
                                        <?php endif; ?>
                                    </td>
                                    <td data-label="<?= __("code"); ?>"><?= $country['code']; ?></td>
                                    <td data-label="<?= __("dial_code"); ?>"><?= $country['dial_code']; ?></td>
                                    <td data-label="<?= __("currency_name"); ?>"><?= $country['currency_name']; ?></td>
                                    <td data-label="<?= __("currency_code"); ?>"><?= $country['currency_code']; ?></td>
                                    <td data-label="<?= __("currency_symbol"); ?>"><?= $country['currency_symbol']; ?></td>
                                    <td data-label="<?= __("action"); ?>">
                                        <a href="javascript:;" class="btn btn-info btn-sm edit-country" onclick="openCountryModal(<?= htmlspecialchars(json_encode($country), ENT_QUOTES, 'UTF-8') ?>,true)">
                                            <i class="fa fa-edit"></i> <?= !empty(lang('edit')) ? lang('edit') : "edit"; ?></a>
                                        <?= __deleteBtn($country['id'], 'country', true) ?>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>



<div class="modal fade" id="countryModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form action="<?= base_url('admin/home/add_country'); ?>" method="post" id="countryForm">
            <?= csrf(); ?>
            <div class="modal-content">
                <div class="modal-header space-between">
                    <h5 class="modal-title flex-1" id="countryModalLabel"><?= __('country'); ?></h5>
                    <a href="javascript:;" class="btn-close" data-dismiss="modal"><i class="fa fa-times"></i></a>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="id" value="0">

                    <div class="form-group">
                        <label class="form-label"><?= __('name'); ?></label>
                        <input type="text" class="form-control" name="name" required>
                    </div>

                    <div class="form-group">
                        <label class="form-label"><?= __('code'); ?></label>
                        <input type="text" class="form-control" id="uppercaseInput" name="code" maxlength="2" required>
                    </div>

                    <div class="form-group">
                        <label class="form-label"><?= __('dial_code'); ?></label>
                        <input type="text" class="form-control" name="dial_code" required>
                    </div>


                    <div class="form-group">
                        <label class="form-label"><?= __('currency_name'); ?></label>
                        <input type="text" class="form-control" name="currency_name" required>
                    </div>

                    <div class="form-group">
                        <label class="form-label"><?= __('currency_code'); ?></label>
                        <input type="text" class="form-control" name="currency_code" required>
                    </div>


                    <div class="form-group">
                        <label class="form-label"><?= __('currency_symbol'); ?></label>
                        <input type="text" class="form-control" name="currency_symbol" required>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary"><?= __('save_change'); ?></button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    document.getElementById('uppercaseInput').addEventListener('input', function() {
        this.value = this.value
            .toUpperCase() // Convert to uppercase
            .replace(/[^A-Z]/g, '') // Remove non-English letters
            .slice(0, 2); // Limit to 2 characters
    });
</script>



<script>
    var addText = '<?= lang('add'); ?>';
    var editText = '<?= lang('edit'); ?>';

    function openCountryModal(data = {}, isEdit = false) {
        const modal = $('#countryModal');
        const form = modal.find('#countryForm')[0];

        form.reset();

        if (isEdit && data) {
            modal.find('[name="id"]').val(data.id);
            modal.find('[name="name"]').val(data.name);
            modal.find('[name="code"]').val(data.code);
            modal.find('[name="dial_code"]').val(data.dial_code);
            modal.find('[name="currency_name"]').val(data.currency_name);
            modal.find('[name="currency_code"]').val(data.currency_code);
            modal.find('[name="currency_symbol"]').val(data.currency_symbol);
            modal.find('.modal-title').text(editText);
        } else {
            modal.find('[name="id"]').val(0);
            modal.find('.modal-title').text(addText);
        }

        modal.modal('show');
    }
</script>