<?php echo view('common/top_header_backdesk.php') ?>
<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="emergency_edit_form" method="post" class="card-body" enctype="multipart/form-data">
                            <h4 class="card-title">Edit Emergency Contact <hr></h4>

                            <!-- Hidden ID Field -->
                            <input type="hidden" name="id" value="<?= esc($contact['id']) ?>">

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="font-weight-bold">Heading</label>
                                        <input type="text" name="heading" class="form-control" value="<?= esc($contact['heading']) ?>" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="font-weight-bold">Mobile</label>
                                        <input type="text" name="mobile" class="form-control" value="<?= esc($contact['mobile']) ?>" required>
                                    </div>
                                </div>
                            </div>

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

                            <div class="form-group mt-3">
                                <label class="font-weight-bold">Description</label>
                                <textarea class="form-control" name="description" id="description"><?= esc($contact['description']) ?></textarea>
                            </div>

                            <button type="submit" class="btn btn-primary btn-sm mt-4">
                                <i class="mdi mdi-content-save"></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">© <?= date('Y') ?> <?= COMPANY_FULL_NAME ?>. All rights reserved.</span>
                            <span class="float-sm-right">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 () {
            const csrfTokenName = '<?= csrf_token() ?>';
            const csrfTokenValue = '<?= csrf_hash() ?>';
            const jwtToken = localStorage.getItem('jwt_token');

            // Initialize Trumbowyg on textarea with id="description"
            $('#description').trumbowyg({
                btns: [['viewHTML'], ['formatting'], 'bold', 'italic', 'underline'],
                autogrow: true,
                resetCss: true,
                semantic: false
            });

            $('#emergency_edit_form').on('submit', function (e) {
                e.preventDefault();

                const descriptionContent = $('#description').trumbowyg('html').trim();

                if (!descriptionContent) {
                    toast('danger', 'Description is required.');
                    return;
                }

                const formData = new FormData(this);
                formData.set('description', descriptionContent);
                formData.append(csrfTokenName, csrfTokenValue);

                $.ajax({
                    url: '<?= base_url('api/contact/update-emergency-contact') ?>',
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: {
                        'Authorization': 'Bearer ' + jwtToken
                    },
                    success: function (response) {
                        if (response.status) {
                            toast('success', response.message);
                            window.location.href = '<?= base_url('backdesk/contacts/emergency-contacts/index') ?>';
                        } else {
                            toast('danger', response.message || 'Update failed.');
                        }
                    }
                });
            });
        });
    </script>
</body>
</html>
