<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
session_start();

include '../inc/connect.php';
try {
    $pdo = new PDO($dsn, $user, $pass);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $pdo->exec("SET NAMES $charset");
} catch (PDOException $e) {
    die("DB Error: " . $e->getMessage());
}

// -------------------- AJAX Requests --------------------
if (isset($_GET['action'])) {
    header('Content-Type: application/json');
    try {
        if ($_GET['action'] == 'get_provinces') {
            $stmt = $pdo->query("SELECT schoolID, firstname FROM school WHERE user_type_id = 1");
            echo json_encode(array('status' => 'success', 'data' => $stmt->fetchAll(PDO::FETCH_ASSOC)));
        } elseif ($_GET['action'] == 'get_amphurs' && isset($_GET['province_id'])) {
            $stmt = $pdo->prepare("SELECT schoolID, firstname FROM school WHERE leader = ? AND user_type_id = 2");
            $stmt->execute(array($_GET['province_id']));
            echo json_encode(array('status' => 'success', 'data' => $stmt->fetchAll(PDO::FETCH_ASSOC)));
        } elseif ($_GET['action'] == 'get_tambons' && isset($_GET['amp_id'])) {
            $stmt = $pdo->prepare("SELECT schoolID, firstname FROM school WHERE leader = ? AND user_type_id = 4");
            $stmt->execute(array($_GET['amp_id']));
            echo json_encode(array('status' => 'success', 'data' => $stmt->fetchAll(PDO::FETCH_ASSOC)));
        } else {
            echo json_encode(array('status' => 'error', 'message' => 'Invalid request'));
        }
    } catch (PDOException $e) {
        echo json_encode(array('status' => 'error', 'message' => $e->getMessage()));
    }
    exit;
}

// -------------------- Form Submit --------------------
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $prefixID   = trim($_POST['prefixID']);
    $firstName  = trim($_POST['firstName']);
    $lastName   = trim($_POST['lastName']);
    $position   = trim($_POST['position']);
    $username   = trim($_POST['username']);
    $password   = trim($_POST['password']);
    $confirm    = trim($_POST['confirm_password']);
    $amp        = trim($_POST['amp_id']);
    $tambon     = trim($_POST['tambon_id']);
    $mobile     = trim($_POST['mobile']);

    header('Content-Type: application/json');

    // -------------------- Validation --------------------
    if ($firstName == "" || $lastName == "" || $username == "" || $password == "" || $confirm == "") {
        echo json_encode(array("status" => "error", "message" => "กรุณากรอกข้อมูลให้ครบถ้วน"));
        exit;
    }

    if (!filter_var($username, FILTER_VALIDATE_EMAIL)) {
        echo json_encode(array("status" => "error", "message" => "รูปแบบอีเมลไม่ถูกต้อง"));
        exit;
    }

    if ($password !== $confirm) {
        echo json_encode(array("status" => "error", "message" => "รหัสผ่านไม่ตรงกัน"));
        exit;
    }

    $stmt = $pdo->prepare("SELECT id FROM users WHERE username = ?");
    $stmt->execute(array($username));
    if ($stmt->fetch()) {
        echo json_encode(array("status" => "error", "message" => "อีเมลนี้ถูกใช้งานแล้ว"));
        exit;
    }

    $password_md5 = md5($password);

    try {
        $sql = "INSERT INTO users (prefixID,firstName,lastName,position,username,password,mobile,leader,schoolID) VALUES (?,?,?,?,?,?,?,?,?)";
        $stmt = $pdo->prepare($sql);
        $stmt->execute(array($prefixID, $firstName, $lastName, $position, $username, $password_md5, $mobile, $amp, $tambon));

        echo json_encode(array("status" => "success", "message" => "สมัครสมาชิกเรียบร้อย\n\nอยู่ระหว่างการรออนุมัติให้เข้าใช้งานจาก สกร.ระดับอำเภอ"));
    } catch (PDOException $e) {
        echo json_encode(array("status" => "error", "message" => $e->getMessage()));
    }
    exit;
}
?>
<!DOCTYPE html>
<html lang="th">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ลงทะเบียน</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <style>
    body {
        background: linear-gradient(135deg, #3b82f6, #9333ea);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .register-box {
        width: 100%;
        max-width: 900px;
        background: #fff;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        padding: 40px;
        animation: fadeIn 1s ease-in-out;
        margin: 20px;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    h3 {
        text-align: center;
        margin-bottom: 25px;
        font-weight: 700;
        color: #2563eb;
    }

    .btn-submit {
        background: linear-gradient(45deg, #3b82f6, #1d4ed8);
        color: #fff;
        border: none;
        padding: 12px;
        width: 100%;
        border-radius: 10px;
        font-size: 1rem;
        font-weight: 600;
        transition: 0.3s;
    }

    .btn-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    .form-group label {
        font-weight: 600;
    }

    .form-group input,
    .form-group select {
        border-radius: 8px;
    }

    .register-link {
        text-align: center;
        margin-top: 15px;
        font-size: 0.95rem;
    }

    .register-link a {
        color: #9333ea;
        font-weight: 600;
        text-decoration: none;
    }

    .register-link a:hover {
        text-decoration: underline;
    }

    .input-group {
        position: relative;
    }

    .input-group-append .btn {
        border: 1px solid #ced4da;
        border-left: none;
        background-color: #fff;
        color: #495057;
        padding: 0.375rem 0.75rem;
        font-size: 1.1rem;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .input-group-append .btn:hover {
        background-color: #f8f9fa;
        border-color: #80bdff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    .input-group-append .btn:focus {
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        outline: none;
    }

    #emailInput.is-invalid {
        border-color: #dc3545;
    }

    #emailInput.is-valid {
        border-color: #28a745;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .register-box {
            padding: 25px;
            margin: 15px;
            max-width: 95%;
        }

        h3 {
            font-size: 1.5rem;
        }

        .form-group label {
            font-size: 0.95rem;
        }

        .row {
            margin-left: -5px;
            margin-right: -5px;
        }

        .col-md-3, .col-md-4, .col-md-5, .col-md-6 {
            padding-left: 5px;
            padding-right: 5px;
        }
    }

    @media (max-width: 576px) {
        .register-box {
            padding: 20px;
            margin: 10px;
            max-width: 100%;
            border-radius: 10px;
        }

        h3 {
            font-size: 1.3rem;
            margin-bottom: 20px;
        }

        .form-group label {
            font-size: 0.9rem;
            margin-bottom: 5px;
        }

        .form-control {
            font-size: 1rem;
            padding: 10px;
        }

        .col-md-3, .col-md-4, .col-md-5, .col-md-6 {
            flex: 0 0 100% !important;
            max-width: 100% !important;
        }

        .row {
            margin-left: 0;
            margin-right: 0;
        }

        .col-md-3, .col-md-4, .col-md-5, .col-md-6 {
            padding-left: 0;
            padding-right: 0;
        }
    }
    </style>
</head>

<body>
    <div class="register-box">
        <h3>ลงทะเบียน</h3>
        <form id="registerForm">
            <!-- แถวที่ 1: คำนำหน้า + ชื่อ + สกุล -->
            <div class="row">
                <div class="col-md-3 form-group">
                    <label>คำนำหน้า</label>
                    <select class="form-control" name="prefixID" required>
                        <option value="">-- เลือก --</option>
                        <option value="นาย">นาย</option>
                        <option value="นาง">นาง</option>
                        <option value="นางสาว">นางสาว</option>
                    </select>
                </div>
                <div class="col-md-4 form-group">
                    <label>ชื่อ</label>
                    <input type="text" class="form-control" name="firstName" placeholder="ชื่อ" required>
                </div>
                <div class="col-md-5 form-group">
                    <label>สกุล</label>
                    <input type="text" class="form-control" name="lastName" placeholder="สกุล" required>
                </div>
            </div>

            <!-- แถวที่ 2: ตำแหน่ง + เบอร์โทร -->
            <div class="row">
                <div class="col-md-6 form-group">
                    <label>ตำแหน่ง</label>
                    <input type="text" class="form-control" name="position" placeholder="เช่น ผู้อำนวยการ" required>
                </div>
                <div class="col-md-6 form-group">
                    <label>เบอร์โทร</label>
                    <input type="tel" class="form-control" id="mobileInput" name="mobile" placeholder="0812345678" pattern="[0-9]{10}" required>
                    <div id="mobileError" style="color: #dc3545; font-size: 0.875rem; margin-top: 5px; display: none;">
                        ❌ 10 หลัก
                    </div>
                </div>
            </div>

            <!-- แถวที่ 3: อีเมล (เต็มแถว) -->
            <div class="form-group">
                <label>อีเมล</label>
                <input type="email" class="form-control" id="emailInput" name="username" placeholder="example@email.com" required>
                <div id="emailError" style="color: #dc3545; font-size: 0.875rem; margin-top: 5px; display: none;">
                    ❌ รูปแบบอีเมลไม่ถูกต้อง
                </div>
            </div>

            <!-- แถวที่ 4: รหัสผ่าน + ยืนยันรหัสผ่าน -->
            <div class="row">
                <div class="col-md-6 form-group">
                    <label>รหัสผ่าน</label>
                    <div class="input-group">
                        <input type="password" class="form-control" id="passwordInput" name="password" minlength="6" placeholder="อย่างน้อย 6 ตัว" required>
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary togglePassword" type="button"
                                data-target="#passwordInput" title="แสดง/ซ่อนรหัสผ่าน">
                                <i class="toggleIcon fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                    <div id="passwordError" style="color: #dc3545; font-size: 0.875rem; margin-top: 5px; display: none;">
                        ❌ 6 ตัวอักษร
                    </div>
                </div>
                <div class="col-md-6 form-group">
                    <label>ยืนยันรหัสผ่าน</label>
                    <div class="input-group">
                        <input type="password" class="form-control" id="confirmPasswordInput" name="confirm_password"
                            placeholder="ซ้ำรหัสผ่าน" required>
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary togglePassword" type="button"
                                data-target="#confirmPasswordInput" title="แสดง/ซ่อนรหัสผ่าน">
                                <i class="toggleIcon fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                    <div id="passwordMatchError" style="color: #dc3545; font-size: 0.875rem; margin-top: 5px; display: none;">
                        ❌ ไม่ตรงกัน
                    </div>
                </div>
            </div>

            <!-- แถวที่ 5: จังหวัด + อำเภอ + ตำบล -->
            <div class="row">
                <div class="col-md-4 form-group">
                    <label>สกร.ประจำจังหวัด</label>
                    <select class="form-control" id="province_id" required>
                        <option value="">-- เลือกจังหวัด --</option>
                    </select>
                </div>
                <div class="col-md-4 form-group">
                    <label>สกร.ระดับอำเภอ</label>
                    <select class="form-control" id="amp_id" name="amp_id" required disabled>
                        <option value="">-- เลือกอำเภอ --</option>
                    </select>
                </div>
                <div class="col-md-4 form-group">
                    <label>ศกร.ระดับตำบล</label>
                    <select class="form-control" id="tambon_id" name="tambon_id" required disabled>
                        <option value="">-- เลือกตำบล --</option>
                    </select>
                </div>
            </div>
            <button type="submit" class="btn-submit"><i class="fas fa-check me-2"></i>ลงทะเบียน</button>
            <div class="register-link">
                มีบัญชีแล้ว? <a href="login.php">เข้าสู่ระบบ</a>
            </div>
        </form>
    </div>

    <script>
    $(function() {
        // ฟังก์ชันตรวจสอบอีเมล real-time
        var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

        $("#emailInput").on("input", function() {
            var email = $(this).val().trim();
            var emailError = $("#emailError");

            if (email === "") {
                $(this).removeClass("is-valid is-invalid");
                emailError.hide();
            } else if (emailRegex.test(email)) {
                $(this).removeClass("is-invalid").addClass("is-valid");
                emailError.hide();
            } else {
                $(this).removeClass("is-valid").addClass("is-invalid");
                emailError.show();
            }
        });

        // ฟังก์ชันตรวจสอบเบอร์โทร real-time
        $("#mobileInput").on("input", function() {
            var mobile = $(this).val().trim();
            var mobileError = $("#mobileError");
            var mobileRegex = /^[0-9]{10}$/;

            if (mobile === "") {
                $(this).removeClass("is-valid is-invalid");
                mobileError.hide();
            } else if (mobileRegex.test(mobile)) {
                $(this).removeClass("is-invalid").addClass("is-valid");
                mobileError.hide();
            } else {
                $(this).removeClass("is-valid").addClass("is-invalid");
                mobileError.show();
            }
        });

        // ฟังก์ชันตรวจสอบรหัสผ่าน real-time
        $("#passwordInput").on("input", function() {
            var password = $(this).val();
            var passwordError = $("#passwordError");

            if (password === "") {
                $(this).removeClass("is-valid is-invalid");
                passwordError.hide();
            } else if (password.length >= 6) {
                $(this).removeClass("is-invalid").addClass("is-valid");
                passwordError.hide();
            } else {
                $(this).removeClass("is-valid").addClass("is-invalid");
                passwordError.show();
            }

            // ตรวจสอบการจับคู่กับยืนยันรหัสผ่าน
            checkPasswordMatch();
        });

        // ฟังก์ชันตรวจสอบยืนยันรหัสผ่าน real-time
        $("#confirmPasswordInput").on("input", function() {
            checkPasswordMatch();
        });

        // ฟังก์ชันช่วยตรวจสอบการจับคู่รหัสผ่าน
        function checkPasswordMatch() {
            var password = $("#passwordInput").val();
            var confirmPassword = $("#confirmPasswordInput").val();
            var passwordMatchError = $("#passwordMatchError");

            if (confirmPassword === "") {
                passwordMatchError.hide();
                $("#confirmPasswordInput").removeClass("is-valid is-invalid");
            } else if (password === confirmPassword && password.length >= 6) {
                passwordMatchError.hide();
                $("#confirmPasswordInput").removeClass("is-invalid").addClass("is-valid");
            } else {
                passwordMatchError.show();
                $("#confirmPasswordInput").removeClass("is-valid").addClass("is-invalid");
            }
        }

        // ฟังก์ชันแสดง/ซ่อนรหัสผ่าน
        $(document).on("click", ".togglePassword", function(e) {
            e.preventDefault();
            var targetInput = $($(this).data("target"));
            var toggleIcon = $(this).find(".toggleIcon");

            if (targetInput.attr("type") === "password") {
                targetInput.attr("type", "text");
                toggleIcon.removeClass("fa-eye").addClass("fa-eye-slash");
            } else {
                targetInput.attr("type", "password");
                toggleIcon.removeClass("fa-eye-slash").addClass("fa-eye");
            }
        });

        function loadOptions(selectId, url, placeholder, disableIfEmpty) {
            var $sel = $("#" + selectId);
            $sel.html('<option value="">' + placeholder + '</option>');
            $.getJSON(url, function(res) {
                if (res.status === "success" && res.data.length > 0) {
                    $.each(res.data, function(i, it) {
                        $sel.append('<option value="' + it.schoolID + '">' + it.firstname +
                            '</option>');
                    });
                    $sel.prop("disabled", false);
                } else {
                    if (disableIfEmpty) $sel.prop("disabled", true);
                }
            });
        }
        loadOptions("province_id", "register.php?action=get_provinces", "-- เลือกจังหวัด --", true);

        $("#province_id").change(function() {
            var val = $(this).val();
            if (val) {
                loadOptions("amp_id", "register.php?action=get_amphurs&province_id=" + val,
                    "-- เลือกอำเภอ --", true);
                $("#tambon_id").html('<option value="">-- เลือกตำบล --</option>').prop("disabled",
                    true);
            }
        });

        $("#amp_id").change(function() {
            var val = $(this).val();
            if (val) {
                loadOptions("tambon_id", "register.php?action=get_tambons&amp_id=" + val,
                    "-- เลือกตำบล --", true);
            }
        });

        $("#registerForm").submit(function(e) {
            e.preventDefault();
            var email = $("input[name='username']").val();
            var password = $("input[name='password']").val();
            var confirm = $("input[name='confirm_password']").val();

            var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email)) {
                Swal.fire({
                    icon: "error",
                    title: "รูปแบบอีเมลไม่ถูกต้อง"
                });
                return;
            }

            if (password !== confirm) {
                Swal.fire({
                    icon: "error",
                    title: "รหัสผ่านไม่ตรงกัน"
                });
                return;
            }

            $.post("register.php", $(this).serialize(), function(res) {
                if (res.status === "success") {
                    Swal.fire({
                        icon: "success",
                        title: "สมัครสมาชิกเรียบร้อย",
                        html: "<p style='margin-bottom: 15px; font-weight: 600;'>" + res
                            .message.split('\n')[0] + "</p>" +
                            "<p style='color: #666; font-size: 0.9rem;'>" + res.message
                            .split('\n').slice(2).join('<br>') + "</p>",
                        confirmButtonText: "ตกลง"
                    }).then(function() {
                        window.location.href = "login.php";
                    });
                } else {
                    Swal.fire({
                        icon: "error",
                        title: res.message
                    });
                }
            }, "json");
        });
    });
    </script>
</body>

</html>