<?php
include 'dbclass/dbclass.php';

//echo 'Under Construction';
//Exit;


?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
    <script src="cropperjs/dist/cropper.js"></script>
    <link rel="stylesheet" href="cropperjs/dist/cropper.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap" rel="stylesheet">

    <title>Register Form </title>
    <style>
  body {
     background-image: url('https://kpamajeedmla.in/trophy.jpg') no-repeat center center fixed;
    background-size: cover;
    
    font-family: 'Poppins', sans-serif;
}

.gradient-custom {
    background: rgba(0, 0, 0, 0.6); /* dark overlay */
    min-height: 100vh;
}

.card-registration {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: white;
}

.form-label, .form-control {
    color: white;
}

select.form-control, input.form-control {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid #fff;
    color: white;
}

        .gradient-custom {
            /* fallback for old browsers */
            background: #f093fb;

            background: rgb(63, 94, 251);
            background: radial-gradient(circle, rgba(63, 94, 251, 1) 0%, rgba(50, 10, 73, 1) 100%);
        }

        .card-registration .select-input.form-control[readonly]:not([disabled]) {
            font-size: 1rem;
            line-height: 2.15;
            padding-left: .75em;
            padding-right: .75em;
        }

        .card-registration .select-arrow {
            top: 13px;
        }

        img {
            display: block;
            max-width: 100%;
        }

        .preview {
            overflow: hidden;
            width: 160px;
            height: 160px;
            margin: 10px;
            border: 1px solid red;
        }
    </style>
</head>

<body class="gradient-custom">
    <section class="vh-100 ">
        <div class="container py-5 h-100">
            <div class="row justify-content-center align-items-center h-100">
                <div class="col-12 col-lg-9 col-xl-7">
                    <div class="card shadow-2-strong card-registration" style="border-radius: 15px;">
                        <div class="card-body p-4 p-md-5">
                           <h3 class="mb-4 pb-2 pb-md-0 mb-md-5 text-center">Registration Form</h3>

                            <form action="insert..php" method="POST" enctype="multipart/form-data">

                                <div class="row">
                                    <div class="col-md-6 mb-4">

                                        <div data-mdb-input-init class="form-outline">
                                            <label class="form-label" for="firstName">Qualified Exam </label>
                                            <select class="select form-control" name="exam" autocomplete="off" required>
                                                <option value="">Select Exam</option>
                                                <option value="SSLC">SSLC </option>
                                                <option value="PLUS TWO">PLUS TWO</option>
                                                <option value="USS">USS</option>
                                                 <option value="LSS">LSS</option>
                                                 <option value="NMMS">NMMS</option>
                                            </select>
                                        </div>

                                    </div>
                                    <div class="col-md-6 mb-4">

                                        <div data-mdb-input-init class="form-outline">
                                            <label class="form-label" for="firstName"> Register Number</label>
                                            <input type="text" id="regnumber" name="regnumber" class="form-control form-control" autocomplete="off" required />
                                            <div class="" id="message">

                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <div class="row">

                                    <div class="col-md-6 mb-4">

                                        <div data-mdb-input-init class="form-outline">
                                            <label class="form-label" for="lastName"> Name</label>
                                            <input type="text" id="name" name="name" class="form-control form-control" autocomplete="off" required maxlength="25" />
                                        </div>

                                    </div>
                                    <div class="col-md-6 mb-4">

                                        <div data-mdb-input-init class="form-outline">
                                            <label class="form-label" for="lastName">Father's Name</label>
                                            <input type="text" id="fathername" name="fathername" class="form-control form-control" autocomplete="off" required />
                                        </div>

                                    </div>
                                </div>


                                <div class="row">
                                    <div class="col-md-6 mb-4">

                                        <div data-mdb-input-init class="form-outline">
                                            <label class="form-label" for="lastName">Mobile number</label>
                                            <input type="tel" id="number" name="number" class="form-control form-control" autocomplete="off" required />
                                        </div>

                                    </div>



                                    <div class="col-md-6 mb-4 pb-2">

                                        <div data-mdb-input-init class="form-outline">
                                            <label class="form-label" for="emailAddress">Address</label>
                                            <input type="text" id="Address" name="address" class="form-control form-control" autocomplete="off" required />
                                        </div>

                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 mb-4 pb-2">

                                        <div data-mdb-input-init class="form-outline">
                                            <label class="form-label" for="panchayath">Panchayath</label>
                                            <?php
                                            $query = 'SELECT * FROM panchayath';
$data                                              = findQuery($query);

echo '<select class="form-control" id="panchayath" name="panchayath" autocomplete="off" required>';
echo "<option value=''>Select panchayath</option>";

foreach ($data as $row) {
    echo "<option value='" . $row['id'] . "'>" . $row['panchayath'] . '</option>';
}

echo '</select>';
?>
                                        </div>

                                    </div>

                                    <div class="col-md-6 mb-4 pb-2">

                                        <div data-mdb-input-init class="form-outline">
                                            <label class="form-label" for="ward">Ward</label>
                                            <select class="form-control" id="ward" name="ward" autocomplete="off" required>
                                                <option value="">Select ward</option>
                                            </select>
                                        </div>

                                    </div>

                                </div>
                                <div class="row">
                                    <div class="col-md-6 mb-4 pb-2">

                                        <div data-mdb-input-init class="form-outline">
                                            <label class="form-label" for="emailAddress">Photo Upload </label>
                                            <input type="file" id="imageInput" name="image" class="form-control form-control imageInput" autocomplete="off" required />
                                            <span style="color:grey;font-size:12px">*Only Upload (JPEG,JPG,PNG) format file</span>
                                            <input type="hidden" id="croppedImage" name="croppedImage">
                                        </div>

                                    </div>

                                    <div class="col-md-6 mb-4 pb-2">

                                        <div data-mdb-input-init class="form-outline">
                                            <label class="form-label" for="phoneNumber">Mark list Upload</label>
                                            <input type="file" id="marklistInput" name="marklist" class="form-control form-control marklistInput" autocomplete="off" required />
                                            <span style="color:grey;font-size:12px">*Only Upload (PDF,JPEG,JPG,PNG) file</span>

                                        </div>

                                    </div>
                                </div>

                                <div class="mt-4 pt-2 text-center">
    <input data-mdb-ripple-init class="btn btn-primary btn-lg px-5" type="submit" value="Submit" />
</div>

                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal" id="modal" tabindex="-1">

            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Crop image</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="img-container">
                            <div class="row">
                                <div class="col-md-8">
                                    <!--  default image where we will set the src via jquery-->
                                    <img id="image">
                                </div>
                                
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="clearFileInput()">Cancel</button>
                        <button type="button" class="btn btn-primary" id="crop">crop</button>
                    </div>
                </div>
            </div>
        </div>

    </section>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script src="sweetalert.js"></script>
    <script>
        window.onload = function() {
            // Get the values from the URL
            var message = getParameterByName('message');

            // Check for specific messages and handle accordingly
            if (message) {
                if (message == 'Unsupported file format' || message == 'Already registered with this register number') {
                    swal({
                        title: "Alert",
                        text: message,
                        icon: "error",
                    }).then(function() {
                        // Change the URL after the SweetAlert is closed
                        window.location.href = "https://kpamajeedmla.in/index.php"; // Replace "https://example.com/new-url" with your desired URL
                    });
                }
            }

            // Function to get query parameters from the URL
            function getParameterByName(name, url) {
                if (!url) url = window.location.href;
                name = name.replace(/[\[\]]/g, '\\$&');
                var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
                    results = regex.exec(url);
                if (!results) return null;
                if (!results[2]) return '';
                return decodeURIComponent(results[2].replace(/\+/g, ' '));
            }
        };
    </script>
    <script>
        $(document).ready(function() {
            $('#panchayath').on('change', function() {
                var panchayath = this.value;
                $.ajax({
                    url: "panchayathward.php",
                    type: "POST",
                    data: {
                        panchayath: panchayath
                    },
                    cache: false,
                    success: function(result) {
                        $("#ward").html(result);
                    }
                });
            });
        });
        
        function clearFileInput() {
        document.getElementById('imageInput').value = '';
    }
    </script>
    <!-- cropperjs -->

    <script>
        var bs_modal = $('#modal');
        var image = document.getElementById('image');
        var cropper, reader, file;

        // Image input change event
        $("body").on("change", "#imageInput", function(e) {
            var files = e.target.files;
            var done = function(url) {
                image.src = url;
                bs_modal.modal('show');
            };

            if (files && files.length > 0) {
                file = files[0];
                var fileType = file.type;

                if (fileType == 'image/jpeg' || fileType == 'image/png') {
                    if (URL) {
                        done(URL.createObjectURL(file));
                    } else if (FileReader) {
                        reader = new FileReader();
                        reader.onload = function(e) {
                            done(reader.result);
                        };
                        reader.readAsDataURL(file);
                    }
                } else {
                    swal({
                        title: "Alert",
                        text: "Please upload a JPEG or PNG image.",
                        icon: "error",
                    });
                    // Clear the input
                    $("#imageInput").val('');
                }
            }
        });

        // Marklist input change event
        $("body").on("change", "#marklistInput", function(e) {
            var files = e.target.files;
            var fileType, isSupported;

            if (files && files.length > 0) {
                file = files[0];
                fileType = file.type;
                isSupported = fileType == 'application/pdf' ||
                    fileType == 'image/jpeg' ||
                    fileType == 'image/jpg' ||
                    fileType == 'image/png';

                if (!isSupported) {
                    swal({
                        title: "Alert",
                        text: "Please upload a PDF, JPEG, JPG, or PNG file for the marklist.",
                        icon: "error",
                    });
                    // Clear the input
                    $("#marklistInput").val('');
                }
            }
        });

        bs_modal.on('shown.bs.modal', function() {
            cropper = new Cropper(image, {
                aspectRatio: 3.5 / 4.5,
                viewMode: 3,
                preview: '.preview'
            });
        }).on('hidden.bs.modal', function() {
            cropper.destroy();
            cropper = null;
        });

        $("#crop").click(function() {
            canvas = cropper.getCroppedCanvas({
                width: 260,
                height: 560,
            });

            canvas.toBlob(function(blob) {
                url = URL.createObjectURL(blob);
                var reader = new FileReader();
                reader.readAsDataURL(blob);
                reader.onloadend = function() {
                    var base64data = reader.result;
                    // Store the base64 data in the hidden input field
                    $('#croppedImage').val(base64data);
                    bs_modal.modal('hide');
                };
            });
        });
    </script>

</body>

</html>