@extends("website.service-providers.layouts.layout")
@section('title',"Add New Profile")
@section("body")
<!-- Make sure jQuery is loaded before jQuery UI -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>

<style>
.remove-image-btn {
    position: absolute;
    top: 20px;
    right: 15px;
    background-color: #ff0000;
    color: #ffffff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    width: 24px;
    height: 24px;
    text-align: center;
    line-height: 20px;
    font-size: 14px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-upload-img {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
}
.profile-upload-img .file-upload-img .form-control[type=file] {
    width: 150px;
    height: 150px;
    opacity: 0;
}

.user-profile-icon {
    position: relative;
    display: block;
    width: 150px !important;
    height: 150px !important;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid #ddd;
    background-color: #f8f8f8;
}

.user-profile-icon input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

#preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Validation Styles */
.input-error {
    border: 1px solid #ff0000 !important;
}

.error-message {
    color: #ff0000;
    font-size: 12px;
    margin-top: 5px;
    display: block;
}

/* Datepicker customization */
.ui-datepicker {
    font-size: 14px;
}

/* Input fields style with red outline for errors */
input.input-error {
    outline: none;
    box-shadow: 0 0 0 1px #ff0000;
}

/* Force numeric input style */
input.numeric-only::-webkit-outer-spin-button,
input.numeric-only::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input.numeric-only {
    -moz-appearance: textfield;
}
</style>

<section class="banner-services">
    <img class="banner-background-ellipse" src="{{ asset('webAssets/assets/images/banner-bg-img.png') }}" alt="">
</section>

<!--- Breadcrumbs section -->
<section class="services-breadcrumb-section dashboard-breadcrumb">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Add New Profile</li>
            </ol>
        </nav>
    </div>
</section>

<!-- Main section started -->
<section class="dashboard-main">
    <div class="container">
        <div class="row">
            @include("website.service-providers.includes.sidebar")
            @include("website.layouts.modal")
            <div class="main-content block-edit">

                <div class="main-content-edit-profile d-flex gap-24px">
                    <div class="main-content-wrapper my-profile provider-edit d-flex flex-column gap-4px">
                        <h3 class="head font-size-16">Basic Information</h3>
                        <div class="profile-info d-flex flex-column">
                            <div class="edit-profile-form ">
                                <form action="{{route('teamMember.store-team-member')}}" method="POST"
                                    enctype="multipart/form-data" class="d-flex flex-column forms" id="profileForm">
                                    @csrf
                                    <div class="profile-upload-img">
                                        <span class="file-upload-img user-profile-icon">
                                            <input class="form-control" type="file" id="formFile" name="profile_image"
                                                accept="image/*" onchange="previewImage(event)">
                                            <img id="preview" src="{{ asset('nophoto.jpg')  }}" alt="user">
                                            <button type="button" id="removeImage" class="remove-image-btn"
                                                style="display:none;" onclick="removeImage()">X</button>
                                        </span>
                                    </div>
                                    

                                    <div class="edit-form-field d-flex ">
                                        <div class="edit-form-field d-flex flex-column">
                                            <h3 class="font-size-14">First Name</h3>
                                            <input type="text" placeholder="First Name" value="" name="first_name">
                                        </div>
                                        <div class="edit-form-field d-flex flex-column">
                                            <h3 class="font-size-14">Last Name</h3>
                                            <input type="text" placeholder="Last Name" value="" name="last_name">
                                        </div>
                                    </div>

                                    <div class="edit-form-field d-flex ">
                                        <div class="edit-form-field d-flex flex-column">
                                            <h3 class="font-size-14">Email</h3>
                                            <input type="email" placeholder="Email" value="" name="email">
                                        </div>
                                        <div class="edit-form-field d-flex flex-column">
                                            <h3 class="font-size-14">Date of Birth</h3>
                                            <input type="text" id="dob" name="dob" placeholder="mm-dd-yyyy" readonly>
                                        </div>
                                    </div>
                                    
                                    <div class="edit-form-field d-flex ">
                                        <div class="edit-form-field d-flex flex-column">
                                            <h3 class="font-size-14">Phone Number</h3>
                                            <input type="text" placeholder="Phone Number" value="" name="phone"
                                                id="edit-phone" class="numeric-only" maxlength="10">
                                        </div>
                                        <div class="edit-form-field d-flex flex-column">
                                            <h3 class="font-size-14">Country</h3>
                                            <input type="text" placeholder="Country" value="" name="country">
                                        </div>
                                    </div>
                                    
                                    <div class="edit-form-field d-flex ">
                                        <div class="edit-form-field d-flex flex-column">
                                            <h3 class="font-size-14">Street Name</h3>
                                            <input type="text" placeholder="Street Name" value="" name="street">
                                        </div>
                                        <div class="edit-form-field d-flex">
                                            <div class="edit-form-field d-flex flex-column providers-edit-profile">
                                                <h3 class="font-size-14">Apt/Suite</h3>
                                                <input type="text" placeholder="Apt/Suite" value="" name="apt">
                                            </div>
                                            <div class="edit-form-field d-flex flex-column providers-edit-profile">
                                                <h3 class="font-size-14">City</h3>
                                                <input type="text" placeholder="City" value="" name="city">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="edit-form-field d-flex">
                                        <div class="edit-form-field d-flex flex-column providers-edit-profile">
                                            <h3 class="font-size-14">State</h3>
                                            <input type="text" placeholder="State" value="" name="state">
                                        </div>
                                        <div class="edit-form-field d-flex flex-column providers-edit-profile">
                                            <h3 class="font-size-14">Postal Code</h3>
                                            <input type="text" placeholder="Postal Code" value="" name="postal_code"
                                                id="postal-code" class="numeric-only" maxlength="5">
                                        </div>
                                    </div>

                            </div>
                            <div class="profile-action-btn accounr-edit-profile d-flex block-edit">
                                <button type="submit" class="btn btn-primary formSubmit">
                                    Add Profile
                                </button>
                            </div>
                            </form>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>
</section>

<script>
// Fix for image preview
function previewImage(event) {
    const reader = new FileReader();
    reader.onload = function() {
        const preview = document.getElementById('preview');
        preview.src = reader.result;
        document.getElementById('removeImage').style.display = 'block'; // Show the "X" button
    }
    reader.readAsDataURL(event.target.files[0]);
}

// Improved solution for removeImage function
window.removeImage = function() {
    console.log("removeImage function called"); // Debug log
    
    try {
        const preview = document.getElementById('preview');
        const formFile = document.getElementById('formFile');
        const removeBtn = document.getElementById('removeImage');
        
        if (preview) {
            // Use nophoto.jpg instead of default-user.png
            preview.src = "{{ asset('nophoto.jpg') }}";
        } else {
            console.error("Preview element not found");
        }
        
        if (formFile) {
            formFile.value = "";
        } else {
            console.error("Form file element not found");
        }
        
        if (removeBtn) {
            removeBtn.style.display = 'none';
        } else {
            console.error("Remove button element not found");
        }
    } catch (error) {
        console.error("Error in removeImage function:", error);
    }
}

// Add DOMContentLoaded event listener as a backup
document.addEventListener('DOMContentLoaded', function() {
    console.log("DOM fully loaded");
    
    // Add click event listener to the remove button as a backup
    const removeBtn = document.getElementById('removeImage');
    if (removeBtn) {
        removeBtn.addEventListener('click', function(e) {
            console.log("Remove button clicked");
            e.preventDefault(); // Prevent any default action
            window.removeImage(); // Call the global function
        });
    }
});
// Initialize datepicker with correct format for Laravel validation
$("#dob").datepicker({
    dateFormat: 'mm-dd-yy', // This is jQuery UI's format
    changeMonth: true,
    changeYear: true,
    yearRange: '-100:+0',
    maxDate: '0',
    // Add onSelect to format the date correctly for Laravel validation
    onSelect: function(dateText, inst) {
        // Convert the date to m-d-Y format for Laravel
        const date = $(this).datepicker('getDate');
        if (date) {
            // Create the format m-d-Y (no leading zeros for month and day)
            const month = date.getMonth() + 1; // getMonth() is zero-based
            const day = date.getDate();
            const year = date.getFullYear();
            
            // Format as m-d-Y (exactly as required by Laravel validation)
            const formattedDate = month + '-' + day + '-' + year;
            
            // Store the properly formatted date in a data attribute
            $(this).data('formatted-date', formattedDate);
            
            // Optionally, you can set this formatted value to the input
            // but keep the display as mm-dd-yy for user readability
            // $(this).val(formattedDate);
        }
    }
});

// Alternative HTML5 datepicker with proper formatting
if (dobInput && typeof $.fn.datepicker === 'undefined') {
    dobInput.type = 'date';
    dobInput.readOnly = false;
    
    // Set max date to today
    const today = new Date();
    dobInput.max = today.toISOString().split('T')[0];
    
    // Format for Laravel validation when value changes
    dobInput.addEventListener('change', function() {
        if (this.value) {
            const date = new Date(this.value);
            // Note: No leading zeros here to match m-d-Y format
            const month = date.getMonth() + 1; // getMonth() is zero-based
            const day = date.getDate();
            const year = date.getFullYear();
            
            // Store the properly formatted value (m-d-Y) for submission
            this.dataset.formattedDate = month + '-' + day + '-' + year;
        }
    });
}

// Add this to the form submit event to ensure correct date format is submitted
form.addEventListener('submit', function(event) {
    // Get the DOB input
    const dobInput = document.getElementById('dob');
    
    if (dobInput) {
        // Check if we have a formatted date stored
        const formattedDate = dobInput.dataset.formattedDate || 
                            $(dobInput).data('formatted-date');
        
        if (formattedDate) {
            // Set the input value to the properly formatted date for submission
            dobInput.value = formattedDate;
        } else if (dobInput.value) {
            // If we have a value but no formatted date, try to format it now
            try {
                const date = new Date(dobInput.value);
                const month = date.getMonth() + 1;
                const day = date.getDate();
                const year = date.getFullYear();
                
                dobInput.value = month + '-' + day + '-' + year;
            } catch (e) {
                console.error("Error formatting date:", e);
            }
        }
    }
});


// Alternative datepicker implementation without jQuery UI
document.addEventListener('DOMContentLoaded', function() {
  
    
    // Phone number formatting and validation
    const phoneInput = document.getElementById('edit-phone');
    if (phoneInput) {
        // Force numeric input
        phoneInput.addEventListener('input', function(e) {
            // Remove non-numeric characters
            this.value = this.value.replace(/\D/g, '');
            
            // Limit to 10 digits
            if (this.value.length > 10) {
                this.value = this.value.slice(0, 10);
            }
        });
    }
    
    // Postal code formatting and validation
    const postalInput = document.getElementById('postal-code');
    if (postalInput) {
        // Force numeric input
        postalInput.addEventListener('input', function(e) {
            // Remove non-numeric characters
            this.value = this.value.replace(/\D/g, '');
            
            // Limit to 5 digits
            if (this.value.length > 5) {
                this.value = this.value.slice(0, 5);
            }
        });
    }
    
    // Form validation
    const form = document.getElementById('profileForm');
    
    // Validation functions
    const validators = {
        required: (value) => value.trim() !== '',
        email: (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
        phone: (value) => value.replace(/\D/g, '').length === 10,
        postalCode: (value) => value.replace(/\D/g, '').length === 5
    };
    
    // Add validation rules for each input
    const validationRules = {
        'first_name': { required: true, message: 'First name is required' },
        'last_name': { required: true, message: 'Last name is required' },
        'email': { required: true, email: true, message: 'Please enter a valid email address' },
        'dob': { required: true, message: 'Please select a date of birth' },
        'phone': { required: true, phone: true, message: 'Please enter a valid 10-digit phone number' },
        'country': { required: true, message: 'Country is required' },
        'street': { required: true, message: 'Street name is required' },
        'city': { required: true, message: 'City is required' },
        'state': { required: true, message: 'State is required' },
        'postal_code': { required: true, postalCode: true, message: 'Please enter a valid 5-digit postal code' }
    };
    
    // Function to display error message
    function showError(input, message) {
        input.classList.add('input-error');
        
        // Check if error message already exists
        let errorElement = input.nextElementSibling;
        if (errorElement && errorElement.classList.contains('error-message')) {
            errorElement.textContent = message;
        } else {
            errorElement = document.createElement('span');
            errorElement.className = 'error-message';
            errorElement.textContent = message;
            input.parentNode.insertBefore(errorElement, input.nextSibling);
        }
    }
    
    // Function to remove error message
    function removeError(input) {
        input.classList.remove('input-error');
        
        // Remove error message if it exists
        const errorElement = input.nextElementSibling;
        if (errorElement && errorElement.classList.contains('error-message')) {
            errorElement.remove();
        }
    }
    
    // Function to validate a specific input
    function validateInput(input) {
        const name = input.getAttribute('name');
        const value = input.value;
        
        // Skip if no validation rules for this input
        if (!validationRules[name]) return true;
        
        // Get validation rules for this input
        const rules = validationRules[name];
        
        // Validate against each rule
        if (rules.required && !validators.required(value)) {
            showError(input, rules.message);
            return false;
        }
        
        if (rules.email && value && !validators.email(value)) {
            showError(input, rules.message);
            return false;
        }
        
        if (rules.phone && value && !validators.phone(value)) {
            showError(input, rules.message);
            return false;
        }
        
        if (rules.postalCode && value && !validators.postalCode(value)) {
            showError(input, rules.message);
            return false;
        }
        
        // If all validations pass, remove any existing error
        removeError(input);
        return true;
    }
    
    // Add blur event listeners to all inputs for real-time validation
    if (form) {
        const inputs = form.querySelectorAll('input[name]');
        inputs.forEach(input => {
            // Skip file input
            if (input.type === 'file') return;
            
            input.addEventListener('blur', function() {
                validateInput(this);
            });
            
            input.addEventListener('input', function() {
                // Remove error as soon as user starts typing
                if (this.classList.contains('input-error')) {
                    removeError(this);
                }
            });
            
            // For datepicker, need to validate on change as well
            if (input.id === 'dob') {
                input.addEventListener('change', function() {
                    validateInput(this);
                });
            }
        });
        
        // Add form submit event listener
        form.addEventListener('submit', function(event) {
            let isValid = true;
            
            // Validate all inputs
            inputs.forEach(input => {
                // Skip file input
                if (input.type === 'file') return;
                
                if (!validateInput(input)) {
                    isValid = false;
                }
            });
            
            // Prevent form submission if validation fails
            if (!isValid) {
                event.preventDefault();
                
                // Scroll to the first error
                const firstError = form.querySelector('.input-error');
                if (firstError) {
                    firstError.focus();
                    firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            }
        });
    }
});
</script>
@endsection