@extends('layouts.cs.main')

@section('main-content')
    <style>
        .frame {
            position: relative;
            width: 100%;
        }

        #cameraGroupBtn {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
        }

        #photoGallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 10px;
        }

        #photoGallery img {
            max-width: 100%;
            height: auto;
            border-radius: 5px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
    </style>

    <div class="container-fluid p-3 mt-3 justify-content-center">
        <div class="card mx-auto">
            <div class="card-body">
                <div class="p-3">
                    <h5 class="font-weight-bold d-block">Authorized Representative Details</h5>
                    <span>Please fill in the complete details of the authorized representative.</span>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <div class="p-3">
                            <form id="authorizedRepForm">
                                @csrf
                                <div class="form-row">
                                    <div class="form-group col-lg-6">
                                        <label for="firstname">First Name</label>
                                        <input type="text" class="form-control form-control-lg" id="firstname"
                                            name="firstname" required>
                                        <div class="invalid-feedback" id="firstnameFeedback"></div>
                                    </div>
                                    <div class="form-group col-lg-6">
                                        <label for="middlename">Middle Name</label>
                                        <input type="text" class="form-control form-control-lg" id="middlename"
                                            name="middlename">
                                        <div class="invalid-feedback" id="middlenameFeedback"></div>
                                    </div>
                                    <div class="form-group col-lg-6">
                                        <label for="lastname">Last Name</label>
                                        <input type="text" class="form-control form-control-lg" id="lastname"
                                            name="lastname" required>
                                        <div class="invalid-feedback" id="lastnameFeedback"></div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="phonenum">Phone Number</label>
                                    <input type="text" class="form-control form-control-lg" id="phonenum"
                                        name="phonenum" required>
                                    <div class="invalid-feedback" id="phonenumFeedback"></div>
                                </div>
                                <div class="form-group">
                                    <label for="email">Email</label>
                                    <input type="email" class="form-control form-control-lg" id="email"
                                        name="email">
                                    <div class="invalid-feedback" id="emailFeedback"></div>
                                </div>

                                {{-- <input type="hidden" id="transactionRef" value="{{ $transactionRef }}"> --}}

                                <div class="mt-4">
                                    <button class="btn btn-success d-flex align-items-center pl-4 pr-4 pt-3 pb-3"
                                        type="submit">
                                        <ion-icon class="mr-2" name="wallet-outline"></ion-icon>
                                        <span>Submit</span>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="p-3">
                            <label for="photoGallery">Upload Image</label>
                            <div class="mb-3" id="photoGallery">
                                <img class="img-fluid h-100"
                                    src="https://community.softr.io/uploads/db9110/original/2X/7/74e6e7e382d0ff5d7773ca9a87e6f6f8817a68a6.jpeg"
                                    alt="Uploaded Image" data-toggle="modal" data-target="#showCameraModal">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Camera Modal -->
    <div class="modal fade" id="showCameraModal" tabindex="-1" aria-labelledby="" aria-hidden="true"
        data-backdrop="static">
        <div class="modal-dialog modal-lg">
            <div class="modal-content border-0 shadow-none">
                <video class="w-100" id="video" autoplay></video>
                <div id="cameraGroupBtn">
                    <button class="btn btn-success pl-4 pr-4 pt-3 pb-3" id="captureBtn">Save Image</button>
                    <button type="button" class="btn btn-light pl-4 pr-4 pt-3 pb-3" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Image Display Modal -->
    <div class="modal fade" id="showImageModal" tabindex="-1" aria-labelledby="showImageModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <img src="" alt="Uploaded Image" id="imageHolder" class="img-fluid">
                <div id="cameraGroupBtn">
                    <button class="btn btn-danger pl-4 pr-4 pt-3 pb-3" id="deletePhotoBtn">Delete Photo</button>
                    <button type="button" class="btn btn-light pl-4 pr-4 pt-3 pb-3" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const registerAuthorizedRep = {
                video: null,
                captureBtn: null,
                photoGallery: null,
                canvas: null,
                ctx: null,

                init: function() {
                    this.cacheDom();
                    this.bindEvents();
                    this.initializeCamera();
                },

                cacheDom: function() {
                    this.video = document.getElementById('video');
                    this.captureBtn = document.getElementById('captureBtn');
                    this.photoGallery = document.getElementById('photoGallery');
                    this.canvas = document.createElement('canvas');
                    this.ctx = this.canvas.getContext('2d');
                },

                bindEvents: function() {
                    this.captureBtn.addEventListener('click', this.captureImage.bind(this));
                    document.getElementById('deletePhotoBtn').addEventListener('click', this.removeImage
                        .bind(this));
                    document.getElementById('authorizedRepForm').addEventListener('submit', this.submitForm
                        .bind(this));
                },

                initializeCamera: function() {
                    navigator.mediaDevices.getUserMedia({
                            video: true
                        })
                        .then(stream => {
                            this.video.srcObject = stream;
                        })
                        .catch(err => {
                            console.error('Error accessing the camera: ', err);
                        });
                },

                generateRandomId: function() {
                    return 'img_' + Math.random().toString(36).substr(2, 9);
                },

                captureImage: function() {
                    const width = this.video.videoWidth;
                    const height = this.video.videoHeight;
                    this.canvas.width = width;
                    this.canvas.height = height;
                    this.canvas.id = "sample";
                    this.ctx.drawImage(this.video, 0, 0, width, height);

                    const newImageContainer = document.createElement('div');
                    newImageContainer.classList.add('captured-image-container');

                    const imgElement = document.createElement('img');
                    imgElement.src = this.canvas.toDataURL('image/jpeg');
                    imgElement.id = this.generateRandomId();
                    imgElement.classList.add('captured-image');
                    imgElement.addEventListener('click', () => this.onImageClick(imgElement));

                    newImageContainer.appendChild(imgElement);

                    this.photoGallery.appendChild(newImageContainer);

                    // Close the modal after capturing the image
                    $("#showCameraModal").modal('hide');
                },

                onImageClick: function(imageElement) {
                    $("#imageHolder").attr('src', imageElement.src);
                    $("#deletePhotoBtn").attr('data-image-id', imageElement.id);
                    $("#showImageModal").modal('show');
                },

                removeImage: function() {
                    const imageId = $("#deletePhotoBtn").attr('data-image-id');
                    const imageToRemove = document.getElementById(imageId);
                    if (imageToRemove) {
                        imageToRemove.parentElement.remove();
                    }
                    $("#showImageModal").modal('hide');
                },

                submitForm: function(event) {
                    event.preventDefault();

                    const formData = new FormData(document.getElementById('authorizedRepForm'));

                    // Handle dynamic images with class captured-image
                    const imageElements = document.querySelectorAll('#photoGallery .captured-image');
                    const imageUrls = {};
                    imageElements.forEach((img, index) => {
                        const imageUrl = img.src;
                        imageUrls[`${index + 1}`] = imageUrl;
                    });

                    // Append image URLs object to formData
                    formData.append('imageUrls', JSON.stringify(imageUrls));
                    formData.append('transaction_ref', registerAuthorizedRep.getURLParams('tx'));

                    let timestamp = registerAuthorizedRep.getURLParams('tx');
                    let member_type_id = registerAuthorizedRep.getURLParams('member_type_id');
                    let group_id = registerAuthorizedRep.getURLParams('group_id');

                    // Ajax request with formData
                    $.ajax({
                            url: `/cs/submit-authorized-rep-details`,
                            method: 'POST',
                            data: formData,
                            processData: false,
                            contentType: false,
                        })
                        .then(function(response) {
                            window.location.href = `/cs/member-transaction?timestamp=${timestamp}&member_type_id=${member_type_id}&group_id=${group_id}`;
                        })
                        .fail(function(xhr, status, error) {
                            let response = JSON.parse(xhr.responseText);
                            $.each(response.errors, function(key, value) {
                                $(`input[name="${key}"]`).addClass('is-invalid');
                                $(`#${key}Feedback`).text(value)
                            });
                        });
                },

                getURLParams: function(getURLString) {
                    let currentURL = window.location.href;
                    let urlObj = new URL(currentURL);
                    let string = urlObj.searchParams.get(getURLString);
                    return string;
                },
            };

            // Initialize the script
            registerAuthorizedRep.init();
        });
    </script>
@endsection