@extends('user.layout.auth-index')
@section('title', 'SignUp')
@section('custom-styles')
    <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
    <style>
        .custom-select {
            background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3e%3cpath fill='%23808080' d='M7 10l5 5 5-5H7z'/%3e%3c/svg%3e") right .75rem center/25px 25px no-repeat !important;
        }

        @media screen and (max-width: 767px) {
            .signup_form form .form-group .form-control {
                font-size: 14px;
                height: 50px;
                padding: 12px 20px;
            }
        }

        .filepond--credits {
            display: none;
        }

        .filepond--drop-label {
            background: white;
            border: 2px solid #E1DBF4;
            border-radius: 8px;
        }
    </style>
@endsection
@section('auth-content')
    <section class="signup_section">

        <div class="top_part">
            <a href="{{ route('user-dashboard') }}" class="back_btn"><i class="icofont-arrow-left"></i>
                {{ __('translations.Back') }}</a>
        </div>

        <!-- Comment Form Section -->
        <div class="signup_form">
            <div class="section_title">
                <h2><span>{{ __('translations.Register') }} </span> {{ __('translations.Your Clinic') }}</h2>
                <p>{{ __('translations.Fill all fields so we can get some info about you.') }} <br>
                    {{ __('translations.We will never send you spam') }}</p>
            </div>
            <form id="signupForm">

                @csrf
                <div class="form-group">
                    <div class="select-container">
                        <select name="country" id="country" class="form-control custom-select" required>
                            <option value="">{{ __('translations.Select Country') }}</option>
                            @forelse($countries as $country)
                                <option value="{{ $country->timezone }}">{{ $country->name }}</option>
                            @empty
                            @endforelse
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <div class="select-container">
                        <select name="" id="" class="form-control custom-select">
                            <option value="">{{ __('translations.Select Category') }}</option>
                            <option value="">{{ __('translations.Medical Clinic') }}</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <input type="email" name="email" class="form-control" placeholder="{{ __('translations.Email') }}"
                        required>
                </div>
                <div class="form-group">
                    <input type="password" name="password" class="form-control"
                        placeholder="{{ __('translations.Password') }}" maxlength="10" required>
                </div>
                <div class="form-group">
                    <input type="text" name="address" class="form-control"
                        placeholder="{{ __('translations.You can search your live address') }}" required>
                </div>
                <div class="form-group">
                    <input type="hidden" name="latitude" id="latitude">
                    <input type="hidden" name="longitude" id="longitude">
                    <input type="hidden" name="formatted_address" id="formatted_address">
                </div>
                <div class="form-group">
                    <input type="text" name="company_name" class="form-control"
                        placeholder="{{ __('translations.Company Name') }}" required>
                </div>
                <div class="form-group">
                    {{-- <label for="company_document" class="form-label">Upload Official Document</label> --}}
                    <div class="filepond--root filepond" id="company_document_container"></div>
                    <input type="file" class="company_document" name="company_document" style="display:none;">
                    <label id="fileError" class="error" style="display: none;">This field is required.</label>
                </div>
                {{-- <div class="form-group">
                    <label for="company_document" class="form-control text-start ps-3 m-0">
                        <i class="fas fa-upload"></i> <span id="file-label-text">Upload Official Document</span>
                    </label>
                    <input type="file" hidden name="company_document" id="company_document" required>
                    <label id="file-error" class="error" style="display:none;">This field is required.</label>
                </div> --}}
                <div class="form-group">
                    <input type="number" name="no_of_providers" class="form-control"
                        placeholder="{{ __('translations.No. of providers (Doctors)') }}" oninput="validateInput(this)"
                        min="1" required>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="terms" id="flexCheckDefault"
                        onchange="checkTerms($(this))">
                    <label class="form-check-label" for="flexCheckDefault">
                        <a href="{{ route('terms') }}">
                            <p class="text-muted text-left">{{ __('translations.Agreed to the') }} <span
                                    class="text-purple">{{ __('translations.Terms & conditions') }}</span>
                            </p>
                        </a>
                    </label>
                </div>
                <div class="form-group text-center">
                    <button class="btn puprple_btn" type="submit" id="submitBtn"
                        disabled>{{ __('translations.SIGN UP') }}</button>
                </div>
            </form>
            <div class="or_option">
                <p class="m-0">{{ __('translations.Already have an account?') }} <a
                        href="{{ route('clinic-login') }}">{{ __('translations.Sign In here') }}</a></p>
            </div>
        </div>
    </section>
@endsection
@section('custom-script')
    <script src="https://unpkg.com/filepond/dist/filepond.js"></script>
    <script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDe084ESzLxX0Pn2IHfmqAmDV96s19OVoU&libraries=places"></script>
    <script>
        // document.addEventListener('DOMContentLoaded', function() {
        //     FilePond.registerPlugin(); // Register plugins if needed

        //     // Apply FilePond to the input field
        //     FilePond.create(document.querySelector('.filepond'), {
        //         allowMultiple: false, // Set to true if you want multiple file uploads
        //         labelIdle: 'Upload Official <span class="filepond--label-action">Document</span>',
        //         acceptedFileTypes: ['image/*', 'application/pdf'], // Limit file types
        //         required: true, // Make file required
        //     });
        // });

        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('signupForm');
            const filePondContainer = document.getElementById('company_document_container');
            const hiddenFileInput = document.querySelector('input.company_document');
            const errorMessage = document.getElementById('fileError');

            // Initialize FilePond
            const pond = FilePond.create(filePondContainer, {
                allowMultiple: false,
                labelIdle: 'Upload Official <span class="filepond--label-action">Document</span>',
                acceptedFileTypes: ['image/*', 'application/pdf'],
                required: true,
            });

            // When a file is added to FilePond, assign it to the hidden input
            pond.on('addfile', (error, file) => {
                if (!error) {
                    // Assign the file to the hidden input
                    const dataTransfer = new DataTransfer();
                    dataTransfer.items.add(file.file);
                    hiddenFileInput.files = dataTransfer.files;
                }
            });

            // Listen for form submission
            form.addEventListener('submit', function(e) {
                // Check if FilePond has a file selected
                if (pond.getFiles().length === 0) {
                    e.preventDefault(); // Stop form submission
                    errorMessage.style.display = 'block'; // Show error message
                } else {
                    errorMessage.style.display = 'none'; // Hide error if file is selected
                }

                // If the hidden file input has the file, it will be included in the form data when submitting via AJAX
                const formData = new FormData(form);

                // If you need to submit it via AJAX
                $.ajax({
                    url: "{{ route('signup') }}", // Your backend endpoint
                    type: "POST",
                    data: formData,
                    processData: false, // Do not process the data
                    contentType: false, // Let jQuery handle the content-type
                    success: function(response) {
                        console.log(response);
                        if (response.success == true) {
                            notyf.success({
                                message: "Checkout your mail for account verification",
                                duration: 3000
                            });
                            setTimeout(() => {
                                window.location.href =
                                    "{{ route('clinic-login') }}"; // Redirect on success
                            }, 3000);
                        } else {
                            notyf.error({
                                message: response.message,
                                duration: 3000
                            });
                            console.log(response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.log('Error:',
                            error); // Log any errors that happen during the request
                    }
                });

                // Prevent default form submission if using AJAX
                e.preventDefault();
            });
        });

        let autocomplete;

        function initAutocomplete() {
            const input = document.querySelector("input[name='address']");
            autocomplete = new google.maps.places.Autocomplete(input, {
                types: ['geocode', 'establishment'], // Allow both addresses and establishments
            });

            // Listen for the place changed event
            autocomplete.addListener('place_changed', function() {
                const place = autocomplete.getPlace();
                if (!place.geometry) {
                    // User didn't select a prediction, reset the input
                    input.value = '';
                    return;
                }

                // Extract data from the place object
                const formattedAddress = place.formatted_address;
                const latitude = place.geometry.location.lat();
                const longitude = place.geometry.location.lng();

                // Set the hidden inputs with the location data
                document.getElementById('latitude').value = latitude;
                document.getElementById('longitude').value = longitude;
                document.getElementById('formatted_address').value = formattedAddress;

                console.log("Address:", formattedAddress);
                console.log("Lat:", latitude);
                console.log("Lng:", longitude);
            });
        }

        // Initialize the Google Maps Autocomplete when the window loads
        window.onload = function() {
            initAutocomplete();
        };
    </script>


    <script>
        $(document).ready(function() {
            // $("#company_document").change(function() {
            //     let fileInput = this.files[0]; // Get the selected file
            //     let fileLabel = $("#file-label-text"); // Get the label span
            //     let fileError = $("#file-error");

            //     if (fileInput) {
            //         fileLabel.text(fileInput.name); // Show file name
            //         fileError.hide(); // Hide error
            //     } else {
            //         fileLabel.text("Upload Official Document"); // Reset if no file selected
            //     }
            // });

            // $("#signupForm").on("submit", function(event) {
            //     let fileInput = $("#company_document")[0].files.length;
            //     let fileError = $("#file-error");

            //     if (fileInput === 0) {
            //         fileError.show(); // Show error if no file selected
            //         event.preventDefault(); // Prevent form submission
            //     }
            // });

            // $("#signupForm").on("submit", function(event) {
            //     let fileInput = $("#company_document");
            //     let fileError = $("#file-error");

            //     // Check if file is selected
            //     if (fileInput[0].files.length === 0) {
            //         fileError.show(); // Show error message
            //         event.preventDefault(); // Stop form submission
            //     } else {
            //         fileError.hide(); // Hide error if file is selected
            //     }
            // });

            // Hide error when a file is selected
            // $("#company_document").change(function() {
            //     $("#file-error").hide();
            // });
        });

        // $("#signupForm").validate({
        //     submitHandler: function() {
        //         'use strict';
        //         handleAjaxCall($('#signupForm'), "{{ route('signup') }}", $('#submitBtn'),
        //             "{{ route('clinic-login') }}", onRequestSuccess);
        //     }
        // });

        function checkTerms(input) {
            if (input.prop('checked') == false) {
                $('#submitBtn').prop('disabled', true);
            } else {
                $('#submitBtn').prop('disabled', false);
            }
        }

        function validateInput(input) {
            // Remove any non-numeric characters, negative signs, or 'e'
            input.value = input.value.replace(/[^0-9]/g, '');
        }
    </script>
@endsection