<?= view('common/top_header_backdesk.php') ?>

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/dataTables.bootstrap4.min.css" />
<style>
    select.form-select, select.form-control, .form-control { outline: 1px solid #67676b; }
    select.form-select { color: #67676b }
    input[type="number"], input[type="date"], input[type="text"] { border-radius: 5px; padding: 5px 10px; }
    .error { color: red; text-align: right; width: 100%; padding-top: 15px; margin-bottom: 0px !important; }
</style>

<body>
    <div class="container-scroller">
        <?= view('common/top_navbar') ?>
        <div class="container-fluid page-body-wrapper">
            <?= view('common/side_navbar') ?>
            <div class="main-panel">
                <div class="content-wrapper">
                    <div class="card">
                        <form id="faculty_edit_form" method="post" class="card-body" enctype="multipart/form-data">
                            <h4 class="card-title">Edit Residents<hr></h4>

                            <div class="row">
                                <!-- Department -->
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="font-weight-bold">Department</label>
                                        <select class="form-control" name="department_id" id="department_id" required>
                                            <option value="">Select</option>
                                            <?php foreach ($departments as $dept): ?>
                                                <option value="<?= $dept['id'] ?>" <?= ($residents['department_id'] == $dept['id']) ? 'selected' : '' ?>>
                                                    <?= esc($dept['department_name']) ?>
                                                </option>
                                            <?php endforeach; ?>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <!-- Name -->
                            <div class="row mt-3">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="font-weight-bold">Name</label>
                                        <input type="text" id="name" name="name" class="form-control" value="<?= esc($residents['name']) ?>" required>
                                    </div>
                                </div>
                            </div>

                             <div class="row mt-3">
                                <div class="col-md-6">
                                 <div class="form-group">
                                    <label class="font-weight-bold">Image</label>
                                    <input type="file" id="image" name="image" class="form-control" >
                                    <?php if (!empty($residents['image'])): ?>
                                            <div class="mt-2">
                                                <label class="small text-muted">Current Image:</label><br>
                                                <img src="<?= base_url( $residents['image']) ?>" alt="News Image" class="img-thumbnail" width="150">
                                            </div>
                                        <?php endif; ?>
                                </div>
                                </div>

                            </div>

                            <!-- Designation -->
                            <div class="row mt-3">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="font-weight-bold">Position</label>
                                        <input type="text" id="position" name="position" class="form-control" value="<?= esc($residents['position']) ?>" required>
                                    </div>
                                </div>
                            </div>

                            <!-- Registration No -->
                            <div class="row mt-3">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="font-weight-bold">Registration No</label>
                                        <input type="text" id="registration_no" name="registration_no" class="form-control" value="<?= esc($residents['registration_no']) ?>" required>
                                    </div>
                                </div>
                            </div>

                          

                            <!-- Publication -->
                            <div class="row mt-3">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="font-weight-bold">Publication</label>
                                        <input type="file" id="publication" name="publication" class="form-control">
                                          <?php if (!empty($residents['publication'])): ?>
                                            <div class="mt-2">
                                                <label class="small text-muted">Current Image:</label><br>
                                                <img src="<?= base_url( $residents['publication']) ?>" alt="News Image" class="img-thumbnail" width="150">
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>

                            <!-- Services -->
                            <div class="row mt-3">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="font-weight-bold">Services</label>
                                        <input type="file" id="services" name="services" class="form-control">
                                         <?php if (!empty($residents['services'])): ?>
                                            <div class="mt-2">
                                                <label class="small text-muted">Current Image:</label><br>
                                                <img src="<?= base_url( $residents['services']) ?>" alt="News Image" class="img-thumbnail" width="150">
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>

                            <input type="hidden" name="id" value="<?= esc($residents['id']) ?>">

                            <button type="submit" class="btn btn-success btn-sm mt-4">
                                <i class="mdi mdi-table-edit"></i>&nbsp;&nbsp;Update
                            </button>
                        </form>
                    </div>

                    <footer class="footer">
                        <div class="d-sm-flex justify-content-center justify-content-sm-between">
                            <span class="text-muted text-center text-sm-left d-block d-sm-inline-block">
                                Copyright © <?= date('Y') . ' ' . COMPANY_FULL_NAME ?>
                            </span>
                            <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center">
                                With gratitude from <i class="mdi mdi-heart text-danger"></i>
                                <a href="<?= CREDIT_LINK ?>" target="_blank"><?= CREDIT_TITLE ?></a>
                            </span>
                        </div>
                    </footer>
                </div>
            </div>
        </div>
    </div>

    <?= view('common/footer_backdesk.php') ?>

    <script>
        $(document).ready(function () {
            $('#faculty_edit_form').on('submit', function (e) {
                e.preventDefault();

                const csrfTokenName = '<?= csrf_token() ?>';
                const csrfTokenValue = '<?= csrf_hash() ?>';
                const jwtToken = localStorage.getItem('jwt_token');

                if (!jwtToken) {
                    toast('danger', 'Unauthorized. Token missing.');
                    return;
                }

                const formData = new FormData(this);
                formData.append(csrfTokenName, csrfTokenValue);

                $.ajax({
                    url: '<?= base_url("api/departments/update-residents") ?>', // Make sure this route exists
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: {
                        'Authorization': 'Bearer ' + jwtToken
                    },
                    success: function (response) {
                        if (response.status) {
                            toast('success', response.message || 'residents updated successfully!');
                            window.location.href = '<?= base_url("backdesk/departments/residents-details") ?>';
                        } else {
                            toast('danger', response.message || 'Something went wrong!');
                        }
                    },
                    error: function (xhr) {
                        toast('danger', 'Server error: ' + xhr.statusText);
                    }
                });
            });
        });
    </script>
</body>
</html>
