<?php include(APPPATH . 'views/layout/template-top.php'); ?>
<?php include(APPPATH . 'views/layout/header.php'); ?>
<!-- Main Container -->
<div class="main-container">
    <div class="xs-pd-20-10">
        <div class="min-height-200px">
            <!-- Page Header -->
            <div class="page-header mb-30">
                <div class="row">
                    <div class="col-md-6 col-sm-12">
                        <div class="title">
                            <h4>Add New User</h4>
                        </div>
                        <nav aria-label="breadcrumb" role="navigation">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="<?php echo base_url(); ?>">Home</a></li>
                                <li class="breadcrumb-item"><a href="<?php echo base_url('users'); ?>">Users</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Add</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>

            <!-- Add User Form -->
            <div class="pd-20 card-box mb-30">
                <form id="addUserForm">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Full Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="name" pattern="[A-Za-z\s]+" title="Only letters and spaces allowed" oninput="this.value = this.value.replace(/[^A-Za-z\s]/g, '');" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Email <span class="text-danger">*</span></label>
                                <input type="email" class="form-control" name="email" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Mobile <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="mobile" minlength="10" maxlength="10" pattern="[0-9]+" title="Only numbers allowed (10-15 digits)" oninput="this.value = this.value.replace(/[^0-9]/g, '');" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Password <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="password" minlength="6" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Role <span class="text-danger">*</span></label>
                                <select class="form-control" name="role" required>
                                    <option value="">Select Role</option>
                                    <option value="Admin">Admin</option>
                                    <option value="Executive">Executive</option>
                                    <option value="Super Admin">Super Admin</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Branch</label>
                                <select class="form-control" name="branch_id">
                                    <option value="">Select Branch (Optional)</option>
                                    <?php foreach($branches as $branch): ?>
                                        <option value="<?php echo $branch->branch_id; ?>"><?php echo $branch->branch_name; ?></option>
                                    <?php endforeach; ?>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 text-right">
                            <button type="submit" class="btn btn-primary" id="btnSaveUser">Save User</button>
                            <a href="<?php echo base_url('users'); ?>" class="btn btn-secondary">Cancel</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <?php include(APPPATH . 'views/layout/footer.php'); ?>
    </div>
</div>

<?php include(APPPATH . 'views/layout/template-bottom.php'); ?>

<script>
$(document).ready(function() {
    $('#addUserForm').submit(function(e) {
        e.preventDefault();
        
        var formData = $(this).serialize();
        
        $.ajax({
            url: "<?php echo base_url('users/store'); ?>",
            type: "POST",
            data: formData,
            dataType: "json",
            success: function(response) {
                if (response.status == 'success') {
                    alert(response.message);
                    window.location.href = response.redirect;
                } else {
                    alert(response.message + (response.db_error ? "\nDB Error: " + response.db_error.message : ""));
                }
            },
            error: function(xhr, status, error) {
                console.error("AJAX Error:", status, error);
                console.error("Response Text:", xhr.responseText);
                alert("Something went wrong. Check console for details.");
            }
        });
    });
});
</script>
