{% include 'registration/header.html' %}
{% load static %}

<div class="container-xxl">
      <div class="container-p-y">
        <div class="authentication-inner">
          <!-- Register -->
          <div class="card">
            <div class="card-body">
              <!-- Logo -->
              <div class="app-brand justify-content-center">
                <a href="">
                  <span class="app-brand-logo demo">
                      {% if GET_PASS_IMAGE %}
                        <img src="{% static GET_PASS_IMAGE %}" class="com-logo" style="width: 200px;">
                        {% else %}

                    {% endif %}

                  </span>
                </a>
              </div>
              <div style="padding: 10px;">
                {% if messages %}
                  {% for message in messages %}
                    <div class="alert {% if 'success' in message.tags %}alert-success alert-dismissible{% elif 'danger' in message.tags %}alert-danger alert-dismissible{% endif %}" role="alert" id="success-alert">
                      {{ message }}
                      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                  {% endfor %}
                {% endif %}
              </div>
              <!-- Form Section -->

                    <form role="form" method="POST" enctype="multipart/form-data" action="">
                      {% csrf_token %}
                      <div class="row">
                        <div class="col-md-6  p-2">
                          <label for="employee"> Employee<span style="color:red">*</span></label>
                          <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-user"></i></span>
                            <input type="text" class="form-control" id="employee" placeholder="Enter Employee" name="employee" value='{{user_data_dict.employee_code}} {{user_data_dict.first_name}} {{user_data_dict.last_name}}' disabled required>
                          </div>
                        </div>
                        <div class="col-md-6  p-2">
                          <label for="exampleInputEmail1">Email address <span style="color:red">*</span></label>
                          <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" value="{{user_visitor.email}}" name="Email" disabled required>
                          </div>
                        </div>
                        <div class="col-md-6  p-2">
                          <label for="exampleInputFirstname1">First name <span style="color:red">*</span></label>
                          <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-user"></i></span>
                            <input type="text" class="form-control" id="Firstnames" placeholder="Enter Firstname" name="Firstname" required>
                          </div>
                        </div>
                        <div class="col-md-6  p-2">
                          <label for="exampleInputLastname1">Last name <span style="color:red">*</span></label>
                          <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-user"></i></span>
                            <input type="text" class="form-control"  id="exampleInputLastname1" placeholder="Enter Lastname" name="Lastname" required>
                          </div>
                        </div>






                        <div class="col-md-6  p-2">
                          <label>Enter Your Mobile Number <span style="color:red">*</span></label>
                          <div class="input-group">
                            <div class="input-group-addon">
                              <i class="fa fa-phone"></i>
                            </div>
                            <input type="text" class="form-control" id="mobileNumberInput" placeholder="Enter Mobile Number"pattern="[0-9]*" inputmode="numeric" name="mobile" minlength='10' maxlength='11'  oninput="validateNumericInput(this)"name="mobile" required>
                          </div><!-- /.input group -->
                        </div>

                        <div class="col-md-6  p-2">
                          <label>Gender <span style="color:red">*</span></label>
                          <select class="form-control" name="gender" required>
                            <option value=''>Choose Gender</option>
                            <option value='Male'>Male</option>
                            <option value='Female'>Female</option>
                          </select>
                        </div>
                        <div class="form-group col-lg-12  p-2">
                          <label>Address <span style="color:red">*</span></label>
                          <textarea class="form-control" rows="3" placeholder="Enter your address ..." name="Address" required></textarea>
                        </div>
                        <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12  p-2">
                            <label for="exampleInputFile">Profile Image<span style="color:red">*</span></label>

                            {% comment %} <input type="file" id="exampleInputFile"  name="image" class="form-control" required> {% endcomment %}
                            <div class="picture-container">
                                <div class='col-lg-4'>
                                    <video id="video" width="150" height="150" autoplay style='border:1px solid #ccc;object-fit: cover;'></video>
                                    <canvas id="canvas" style="display:none;" width='150' height='150'></canvas>
                                    <br>
                                    <button type="button" class="btn btn-primary btn-open-camera">Open Camera</button>
                                    <button type="button" class="btn btn-success btn-take-picture">Take a Picture</button>
                                </div>

                            </div>
                            <div class='col-lg-3  p-2'>
                                <div class="form-group" id='image_user' style='display:none'>
                                    <img src="" alt="" width="150" height="150">
                                    <input type="hidden" value="" id="base_user_image" name='user_image'>
                                </div>
                            </div>


                        </div>
                      </div><!-- /.box-body -->

                      <div class="box-footer">
                         <div class="text-right">
                            <button type="submit" class="btn btn-primary">Submit</button>
                         </div>
                      </div>
                    </form>

            </div>
          </div>
          <!-- /Register -->
        </div>
      </div>
</div>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const openCameraBtn = document.querySelector('.btn-open-camera');
        const takePictureBtn = document.querySelector('.btn-take-picture');
        const video = document.getElementById('video');
        const canvas = document.getElementById('canvas');
        const imageElement = document.querySelector('#image_user img');
        console.log('imageElement:', imageElement);
        const inputElement = document.querySelector('#image_user input');
        console.log('inputElement_1:', inputElement);
        const context = canvas.getContext('2d');
        let imageCount = 0; // Counter for the number of images captured
        const capturePhotoUrl = '{% url "capture_photo" %}';
        console.log('Capture Photo URL:', capturePhotoUrl);

        function openCamera() {
            try {
                if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                    navigator.mediaDevices.getUserMedia({ video: true })
                    .then(function(stream) {
                        video.srcObject = stream;
                    })
                    .catch(function(error) {
                        console.error('Error accessing the camera:', error);
                    });
                } else {
                    console.error("Camera not supported by this browser.");
                }
            } catch(err) {
                console.error('Error:', err);
            }
        }

        function takePicture() {
            if (imageCount < 1) { // Take pictures until 5 images are captured
                context.drawImage(video, 0, 0, 150, 150);
                console.log('context:', context);
                const imageDataURL = canvas.toDataURL('image/jpeg');
                console.log('Picture taken:', imageDataURL);

                const firstNameInput = document.getElementById('Firstnames');
                if (!firstNameInput) {
                    console.error('Firstname input element not found.');
                    return;
                }

                console.log('Firstname input element:', firstNameInput);
                console.log('Firstname input value:', firstNameInput.value);

                if (imageElement) {
                    imageElement.src = imageDataURL;
                    inputElement.value = imageDataURL;
                    $("#image_user").show();
                    $('#btn_submit').prop('disabled', false);
                }

                // Send the captured image data to the server using AJAX
                /*$.ajax({
                    url: capturePhotoUrl,
                    type: 'POST',
                    data: {
                        image: imageDataURL,
                        name: firstNameInput.value
                    },
                    success: function(data) {
                        console.log('Server response:', data);
                        // Handle the server response as needed
                        if (data.status === 'success') {
                            imageCount++;
                            if (imageCount === 1) {
                                // Close the camera after capturing 5 images
                                video.srcObject.getTracks().forEach(track => {
                                    track.stop();
                                });
                            }
                        } else {
                            console.error('Image capture failed.');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('Error sending image data:', error);
                        // Handle error
                    }
                });*/
            }
        }

        openCameraBtn.addEventListener('click', openCamera);
        takePictureBtn.addEventListener('click', takePicture);
    });
</script>
<script>
  function validateNumericInput(input) {
      // Remove any non-numeric characters
      input.value = input.value.replace(/[^0-9]/g, '');
  }
</script>
<script src="{% static '/assets/vendor/libs/jquery/jquery.js'%}"></script>
    <script src="{% static '/assets/vendor/libs/popper/popper.js'%}"></script>
    <script src="{% static '/assets/vendor/js/bootstrap.js'%}"></script>
    <script src="{% static '/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js'%}"></script>

    <script src="{% static '/assets/vendor/js/menu.js'%}"></script>
    <!-- endbuild -->

    <!-- Vendors JS -->
    <script src="{% static '/assets/vendor/libs/apex-charts/apexcharts.js'%}"></script>

    <!-- Main JS -->
    <script src="{% static '/assets/js/main.js'%}"></script>

    <!-- Page JS -->
    <script src="{% static '/assets/js/dashboards-analytics.js'%}"></script>