{% extends "base_admin.html" %}

{% block title %}Manajemen Data Sales FOrces- CWN{% endblock %}

{% block content %}
<div class="container mt-4">
    <h4>Form Sales FOrce</h4>

    {% if success %}
    <script>
        Swal.fire({
            icon: 'success',
            title: 'Berhasil',
            text: '{{ success }}',
        });
    </script>
    {% elif error %}
    <script>
        Swal.fire({
            icon: 'error',
            title: 'Gagal',
            text: '{{ error }}',
        });
    </script>
    {% endif %}

    <form method="POST" class="row g-3">
        {% csrf_token %}
        <input type="hidden" id="form_mode" name="form_mode" value="create">
        <div class="col-md-3">
            <label>TL ID</label>
            <input type="text" class="form-control" name="tl_id" id="tl_id" required>
        </div>
        <div class="col-md-3">
            <label>Nama</label>
            <input type="text" class="form-control" name="username" id="username" required>
        </div>
        <div class="col-md-3">
            <label>Email</label>
            <input type="email" class="form-control" name="email" id="email" required>
        </div>
        <div class="col-md-3">
            <label>No HP</label>
            <input type="text" class="form-control" name="no_hp" id="no_hp" required>
        </div>
        <div class="col-md-3">
            <label>WOK ID</label>
            <input type="text" class="form-control" name="wok_id" id="wok_id" required>
        </div>
        <div class="col-md-3">
            <label>Branch ID</label>
            <input type="text" class="form-control" name="branch_id" id="branch_id" required>
        </div>
        <div class="col-md-3">
            <label>Telegram UID (Opsional)</label>
            <input type="text" class="form-control" name="tele_uid" id="tele_uid">
        </div>
        <div class="col-md-3">
            <label>Status</label>
            <input type="text" class="form-control" name="status" id="status">
        </div>
        <div class="col-md-3 mt-4">
            <button type="submit" class="btn btn-danger w-100">Simpan</button>
        </div>
    </form>

    <hr>

    <div class="mt-4 col-md-12 d-flex">
        <h5 class="mb-3 col-md-6">Daftar Team Leader</h5>
        <a href="#" class="btn btn-success mb-3 col-md-6">Download Data Team Leader (XLSX)</a>
    </div>
    <table class="table table-bordered mt-2" id="team-leader-table">
        <thead>
            <tr>
                <th>TL ID</th>
                <th>Nama</th>
                <th>Email</th>
                <th>No HP</th>
                <th>WOK ID</th>
                <th>Branch ID</th>
                <th>Status</th>
                <th>Aksi</th>
            </tr>
        </thead>
        <tbody>
            {% for tl in tl_list %}
            <tr>
                <td>{{ tl.tl_id }}</td>
                <td>{{ tl.username }}</td>
                <td>{{ tl.email }}</td>
                <td>{{ tl.no_hp }}</td>
                <td>{{ tl.wok_id }}</td>
                <td>{{ tl.branch_id }}</td>
                <td>{{ tl.status }}</td>
                <td>
                    <button class="btn btn-sm btn-warning" onclick="editForm('{{ tl.tl_id }}', '{{ tl.username }}', '{{ tl.email }}', '{{ tl.no_hp }}', '{{ tl.wok_id }}', '{{ tl.branch_id }}', '{{ tl.tele_uid }}', '{{ tl.status }}')">Edit</button>
                    <button class="btn btn-sm btn-danger" onclick="confirmDelete('{{ tl.tl_id }}')">Delete</button>
                </td>
            </tr>
            {% empty %}
            <tr><td colspan="7">Tidak ada data</td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    // Function to fill the form with data for editing
    function editForm(sf_id, username, email, no_hp, wok_id, branch_id, tele_uid, status) {
        document.getElementById("form_mode").value = "update";  // Change mode to update
        document.getElementById("sf_id").value = tl_id;  // Set TL ID for the form
        document.getElementById("username").value = username;  // Set Name
        document.getElementById("email").value = email;  // Set Email
        document.getElementById("no_hp").value = no_hp;  // Set No HP
        document.getElementById("wok_id").value = wok_id;  // Set WOK ID
        document.getElementById("branch_id").value = branch_id;  // Set Branch ID
        document.getElementById("tele_uid").value = tele_uid;  // Set Telegram UID
        document.getElementById("status").value = status;  // Set Status
    }

    // Function to confirm deletion of a Team Leader
    function confirmDelete(tl_id) {
        Swal.fire({
            title: 'Apakah Anda yakin?',
            text: "Data ini akan dihapus secara permanen!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Ya, hapus!',
        }).then((result) => {
            if (result.isConfirmed) {
                // Create the form dynamically and submit it for deletion
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = "{% url 'managesf' %}";

                const csrfToken = document.createElement('input');
                csrfToken.type = 'hidden';
                csrfToken.name = 'csrfmiddlewaretoken';
                csrfToken.value = '{{ csrf_token }}';

                const formMode = document.createElement('input');
                formMode.type = 'hidden';
                formMode.name = 'form_mode';
                formMode.value = 'delete';

                const methodField = document.createElement('input');
                methodField.type = 'hidden';
                methodField.name = '_method';
                methodField.value = 'DELETE';

                const tlIdField = document.createElement('input');
                tlIdField.type = 'hidden';
                tlIdField.name = 'tl_id';
                tlIdField.value = tl_id;

                form.appendChild(csrfToken);
                form.appendChild(formMode);
                form.appendChild(methodField);
                form.appendChild(tlIdField);

                document.body.appendChild(form);
                form.submit();
            }
        });
    }
</script>

{% endblock %}