<?php $this->load->view("partial/header"); ?>

<style>
    .config_page {
        max-width: 900px;
        margin: 0 auto;
        padding: 24px;
    }

    .config_header {
        text-align: center;
        margin-bottom: 32px;
    }

    .config_header h1 {
        font-size: 26px;
        font-weight: 700;
        color: #1a1a2e;
        margin-bottom: 6px;
    }

    .config_header p {
        color: #999;
        font-size: 13px;
    }

    .config_card {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.9);
        border-radius: 16px;
        padding: 28px 32px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
        margin-bottom: 20px;
    }

    .config_card .section_title {
        font-size: 13px;
        font-weight: 700;
        color: #f47f20;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid rgba(244, 127, 32, 0.2);
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .form_grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px 24px;
    }

    .form_grid.full {
        grid-template-columns: 1fr;
    }

    .form_grid.three {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }

    .form_group {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .form_group label {
        font-size: 12px;
        font-weight: 700;
        color: #555;
        text-transform: uppercase;
        letter-spacing: 0.4px;
    }

    .form_group label.required::after {
        content: ' *';
        color: #dc3545;
    }

    .form_group input[type=text],
    .form_group textarea,
    .form_group select {
        border: 1px solid #e0e0e0;
        border-radius: 10px;
        padding: 10px 14px;
        font-size: 14px;
        color: #333;
        outline: none;
        transition: all 0.2s;
        background: white;
        font-family: 'Segoe UI', Arial, sans-serif;
        width: 100%;
        box-sizing: border-box;
    }

    .form_group input[type=text]:focus,
    .form_group textarea:focus,
    .form_group select:focus {
        border-color: #f47f20;
        box-shadow: 0 0 0 3px rgba(244, 127, 32, 0.12);
    }

    .form_group textarea {
        resize: vertical;
        min-height: 80px;
    }

    .tax_row {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .tax_row input {
        border: 1px solid #e0e0e0;
        border-radius: 10px;
        padding: 10px 14px;
        font-size: 14px;
        color: #333;
        outline: none;
        transition: all 0.2s;
        background: white;
        font-family: 'Segoe UI', Arial, sans-serif;
    }

    .tax_row input:first-child {
        flex: 2;
    }

    .tax_row input:last-child {
        flex: 1;
    }

    .tax_row input:focus {
        border-color: #f47f20;
        box-shadow: 0 0 0 3px rgba(244, 127, 32, 0.12);
    }

    .tax_pct {
        font-weight: 700;
        color: #666;
        font-size: 16px;
    }

    .checkbox_row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        background: rgba(244, 127, 32, 0.05);
        border: 1px solid rgba(244, 127, 32, 0.15);
        border-radius: 10px;
    }

    .checkbox_row input[type=checkbox] {
        width: 18px;
        height: 18px;
        accent-color: #f47f20;
        cursor: pointer;
    }

    .checkbox_row label {
        font-size: 14px;
        font-weight: 600;
        color: #444;
        cursor: pointer;
        margin: 0;
    }

    .submit_area {
        text-align: right;
        margin-top: 8px;
    }

    .save_btn {
        background: linear-gradient(135deg, #f47f20, #e05f00);
        color: white;
        border: none;
        border-radius: 10px;
        padding: 13px 36px;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(244, 127, 32, 0.4);
        transition: all 0.2s;
        letter-spacing: 0.3px;
    }

    .save_btn:hover {
        background: linear-gradient(135deg, #ff8f30, #f47f20);
        box-shadow: 0 6px 20px rgba(244, 127, 32, 0.5);
        transform: translateY(-1px);
    }

    #error_message_box {
        background: rgba(220, 53, 69, 0.08);
        border: 1px solid rgba(220, 53, 69, 0.2);
        border-radius: 10px;
        padding: 12px 16px;
        margin-bottom: 16px;
        color: #dc3545;
        font-size: 13px;
    }

    #error_message_box li {
        margin-left: 16px;
    }

    /* ── Responsive ── */
    @media (max-width: 768px) {

        .config_page {
            padding: 12px;
        }

        .config_header {
            margin-bottom: 20px;
        }

        .config_header h1 {
            font-size: 20px;
        }

        .config_card {
            padding: 16px 18px;
            margin-bottom: 14px;
        }

        .form_grid {
            grid-template-columns: 1fr !important;
        }

        .form_grid.three {
            grid-template-columns: 1fr !important;
        }

        .tax_row {
            flex-wrap: wrap;
            gap: 6px;
        }

        .tax_row input:first-child,
        .tax_row input:last-child {
            flex: 1;
            min-width: 80px;
        }

        .form_group input[type=text],
        .form_group textarea,
        .form_group select {
            font-size: 14px;
            padding: 10px 12px;
        }

        .submit_area {
            text-align: center;
        }

        .save_btn {
            width: 100%;
            padding: 13px;
            font-size: 14px;
        }

        .checkbox_row {
            padding: 10px 12px;
        }

        .checkbox_row label {
            font-size: 13px;
        }
    }

    @media (max-width: 480px) {

        .config_page {
            padding: 8px;
        }

        .config_card {
            padding: 12px 14px;
        }

        .config_header h1 {
            font-size: 18px;
        }

        .section_title {
            font-size: 11px !important;
        }

        .form_group label {
            font-size: 11px;
        }
    }
</style>

<?php echo form_open('config/save/', array('id' => 'config_form')); ?>

<div class="config_page">

    <div class="config_header">
        <h1>🏪 <?php echo $this->lang->line('module_config'); ?></h1>
        <p><?php echo $this->lang->line('common_fields_required_message'); ?></p>
    </div>

    <ul id="error_message_box" style="display:none;"></ul>

    <!-- Company Information -->
    <div class="config_card">
        <div class="section_title">🏢 Company Information</div>
        <div class="form_grid">
            <div class="form_group">
                <label class="required"><?php echo $this->lang->line('config_company'); ?></label>
                <?php echo form_input(array('name' => 'company', 'id' => 'company', 'value' => $this->config->item('company'))); ?>
            </div>
            <div class="form_group">
                <label class="required"><?php echo $this->lang->line('config_phone'); ?></label>
                <?php echo form_input(array('name' => 'phone', 'id' => 'phone', 'value' => $this->config->item('phone'))); ?>
            </div>
            <div class="form_group">
                <label><?php echo $this->lang->line('common_email'); ?></label>
                <?php echo form_input(array('name' => 'email', 'id' => 'email', 'value' => $this->config->item('email'))); ?>
            </div>
            <div class="form_group">
                <label><?php echo $this->lang->line('config_website'); ?></label>
                <?php echo form_input(array('name' => 'website', 'id' => 'website', 'value' => $this->config->item('website'))); ?>
            </div>
            <div class="form_group">
                <label><?php echo $this->lang->line('config_fax'); ?></label>
                <?php echo form_input(array('name' => 'fax', 'id' => 'fax', 'value' => $this->config->item('fax'))); ?>
            </div>
        </div>
        <div class="form_grid full" style="margin-top:16px;">
            <div class="form_group">
                <label class="required"><?php echo $this->lang->line('config_address'); ?></label>
                <?php echo form_textarea(array('name' => 'address', 'id' => 'address', 'rows' => 3, 'cols' => 17, 'value' => $this->config->item('address'))); ?>
            </div>
        </div>
    </div>

    <!-- Tax Settings -->
    <div class="config_card">
        <div class="section_title">💰 Tax Settings</div>
        <div class="form_grid">
            <div class="form_group">
                <label class="required"><?php echo $this->lang->line('config_default_tax_rate_1'); ?></label>
                <div class="tax_row">
                    <?php echo form_input(array('name' => 'default_tax_1_name', 'id' => 'default_tax_1_name', 'size' => '10', 'value' => $this->config->item('default_tax_1_name') !== FALSE ? $this->config->item('default_tax_1_name') : $this->lang->line('items_sales_tax_1'))); ?>
                    <?php echo form_input(array('name' => 'default_tax_1_rate', 'id' => 'default_tax_1_rate', 'size' => '4', 'value' => $this->config->item('default_tax_1_rate'))); ?>
                    <span class="tax_pct">%</span>
                </div>
            </div>
            <div class="form_group">
                <label><?php echo $this->lang->line('config_default_tax_rate_2'); ?></label>
                <div class="tax_row">
                    <?php echo form_input(array('name' => 'default_tax_2_name', 'id' => 'default_tax_2_name', 'size' => '10', 'value' => $this->config->item('default_tax_2_name') !== FALSE ? $this->config->item('default_tax_2_name') : $this->lang->line('items_sales_tax_2'))); ?>
                    <?php echo form_input(array('name' => 'default_tax_2_rate', 'id' => 'default_tax_2_rate', 'size' => '4', 'value' => $this->config->item('default_tax_2_rate'))); ?>
                    <span class="tax_pct">%</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Store Policy -->
    <div class="config_card">
        <div class="section_title">📋 Store Policy</div>
        <div class="form_grid full">
            <div class="form_group">
                <label class="required"><?php echo $this->lang->line('common_return_policy'); ?></label>
                <?php echo form_textarea(array('name' => 'return_policy', 'id' => 'return_policy', 'rows' => 4, 'cols' => 17, 'value' => $this->config->item('return_policy'))); ?>
            </div>
        </div>
    </div>

    <!-- Regional Settings -->
    <div class="config_card">
        <div class="section_title">🌍 Regional Settings</div>
        <div class="form_grid">
            <div class="form_group">
                <label class="required"><?php echo $this->lang->line('config_language'); ?></label>
                <?php echo form_dropdown('language', array('english' => 'English', 'indonesia' => 'Indonesia', 'spanish' => 'Spanish'), $this->config->item('language')); ?>
            </div>
            <div class="form_group">
                <label class="required"><?php echo $this->lang->line('config_timezone'); ?></label>
                <?php echo form_dropdown('timezone', array(
                    'Pacific/Midway' => '(GMT-11:00) Midway Island, Samoa',
                    'America/Adak' => '(GMT-10:00) Hawaii-Aleutian',
                    'Etc/GMT+10' => '(GMT-10:00) Hawaii',
                    'America/Los_Angeles' => '(GMT-08:00) Pacific Time (US & Canada)',
                    'America/Denver' => '(GMT-07:00) Mountain Time (US & Canada)',
                    'America/Chicago' => '(GMT-06:00) Central Time (US & Canada)',
                    'America/New_York' => '(GMT-05:00) Eastern Time (US & Canada)',
                    'America/Bogota' => '(GMT-05:00) Bogota, Lima, Quito',
                    'America/Caracas' => '(GMT-04:30) Caracas',
                    'America/Santiago' => '(GMT-04:00) Santiago',
                    'America/Sao_Paulo' => '(GMT-03:00) Brasilia',
                    'Atlantic/Azores' => '(GMT-01:00) Azores',
                    'Europe/Dublin' => '(GMT) Greenwich Mean Time : Dublin',
                    'Europe/London' => '(GMT) Greenwich Mean Time : London',
                    'Africa/Abidjan' => '(GMT) Monrovia, Reykjavik',
                    'Africa/Accra' => '(GMT) Accra, Ghana',
                    'Europe/Amsterdam' => '(GMT+01:00) Amsterdam, Berlin, Rome',
                    'Europe/Brussels' => '(GMT+01:00) Brussels, Copenhagen, Paris',
                    'Africa/Cairo' => '(GMT+02:00) Cairo',
                    'Africa/Blantyre' => '(GMT+02:00) Harare, Pretoria',
                    'Europe/Moscow' => '(GMT+03:00) Moscow, St. Petersburg',
                    'Africa/Addis_Ababa' => '(GMT+03:00) Nairobi',
                    'Asia/Dubai' => '(GMT+04:00) Abu Dhabi, Muscat',
                    'Asia/Kolkata' => '(GMT+05:30) Chennai, Kolkata, Mumbai, New Delhi',
                    'Asia/Dhaka' => '(GMT+06:00) Astana, Dhaka',
                    'Asia/Bangkok' => '(GMT+07:00) Bangkok, Hanoi, Jakarta',
                    'Asia/Hong_Kong' => '(GMT+08:00) Beijing, Hong Kong',
                    'Asia/Tokyo' => '(GMT+09:00) Osaka, Sapporo, Tokyo',
                    'Australia/Brisbane' => '(GMT+10:00) Brisbane',
                    'Pacific/Auckland' => '(GMT+12:00) Auckland, Wellington',
                ), $this->config->item('timezone') ? $this->config->item('timezone') : date_default_timezone_get()); ?>
            </div>
        </div>
    </div>

    <!-- Receipt Settings -->
    <div class="config_card">
        <div class="section_title">🧾 Receipt Settings</div>
        <div class="checkbox_row">
            <?php echo form_checkbox(array('name' => 'print_after_sale', 'id' => 'print_after_sale', 'value' => 'print_after_sale', 'checked' => $this->config->item('print_after_sale'))); ?>
            <label for="print_after_sale"><?php echo $this->lang->line('config_printe_after_sale'); ?></label>
        </div>
    </div>

    <!-- Submit -->
    <div class="submit_area">
        <button type="submit" class="save_btn">💾 Save Configuration</button>
    </div>

</div>

<?php echo form_close(); ?>
<div id="feedback_bar"></div>

<script type='text/javascript'>
    $(document).ready(function() {
        $('#config_form').validate({
            submitHandler: function(form) {
                $(form).ajaxSubmit({
                    success: function(response) {
                        if (response.success) {
                            set_feedback(response.message, 'success_message', false);
                        } else {
                            set_feedback(response.message, 'error_message', true);
                        }
                    },
                    dataType: 'json'
                });
            },
            errorLabelContainer: "#error_message_box",
            wrapper: "li",
            rules: {
                company: "required",
                address: "required",
                phone: "required",
                default_tax_rate: {
                    required: true,
                    number: true
                },
                email: "email",
                return_policy: "required"
            },
            messages: {
                company: "<?php echo $this->lang->line('config_company_required'); ?>",
                address: "<?php echo $this->lang->line('config_address_required'); ?>",
                phone: "<?php echo $this->lang->line('config_phone_required'); ?>",
                email: "<?php echo $this->lang->line('common_email_invalid_format'); ?>",
                return_policy: "<?php echo $this->lang->line('config_return_policy_required'); ?>"
            },
            showErrors: function(errorMap, errorList) {
                $('#error_message_box').show();
                this.defaultShowErrors();
            }
        });
    });
</script>

<?php $this->load->view("partial/footer"); ?>