@extends('layouts.master')
@section('contain')
    {{-- title --}}
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            @if (isset($user))
                <h4 class="card-title">Update profile</h4>
            @else
                <h4 class="card-title">Add Company</h4>
            @endif
        </div>
        <div class="col-md-7 align-self-center text-right">
            <div class="d-flex justify-content-end align-items-center">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item active"><a class="text-cyan" href="{{ url('/') }}">Home</a></li>
                </ol>
            </div>
        </div>
    </div>
    <style>
        .email-tag {
            display: inline-block;
            background-color: #007bff;
            color: white;
            padding: 0.25rem 0.75rem;
            margin-right: 0.5rem;
            border-radius: 0.25rem;
            margin-top: 0.25rem;
        }

        .email-tag .remove-email {
            margin-left: 0.5rem;
            cursor: pointer;
        }

        .input-danger {
            border-color: #dc3545 !important;
            /* Red color */
        }
    </style>
    {{-- end title --}}
    <div class="row">
        <div class="col-md-12">
            <div class="card card-body">
                <div class="container text-left">
                    {{-- <h2>Company Registration Form</h2> --}}
                    @if (isset($user))
                        <form id="companyRegistrationForm" action="{{ Route('userProfile.Update') }}" method="POST"
                            data-parsley-validate enctype="multipart/form-data">
                            @method('put')
                        @else
                            <form id="companyRegistrationForm" action="{{ Route('company.add') }}" method="POST"
                                data-parsley-validate enctype="multipart/form-data">
                    @endif
                    @csrf
                    <div class="row">
                        <!-- Company Name -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="font-bold" for="companyName">Company (Trading) Name:</label>
                                <input type="text"
                                    value="{{ isset($user) && $user->first_name ? $user->first_name : old('value') }}"
                                    class="form-control" id="companyName" name="companyName" required
                                    data-parsley-error-message="Please enter the company name.">
                            </div>
                        </div>
                        <!-- Industry -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="font-bold" for="industry">Industry:</label>
                                <select class="form-control form-select" id="industry" name="industry_id" required data-parsley-error-message="Please select the industry.">
                                    <option value="">Select Industry</option>
                                    @foreach ($industries as $industry)
                                    <option value="{{ $industry->id }}" {{ isset($user->company->industry_id) && $user->company->industry_id == $industry->id ? 'selected' : '' }}>
                                        {{ $industry->name }}
                                    </option>
                                    @endforeach
                                </select>

                            </div>
                        </div>
                        <!-- Address -->
                    </div>
                    <div class="row">

                        <!-- Registration Number -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="font-bold" for="address">Address:</label>
                                <input
                                    value="{{ isset($user->company) && $user->company->address ? $user->company->address : old('value') }}"
                                    type="text" class="form-control" id="address" name="address" required
                                    data-parsley-error-message="Please enter the address.">
                            </div>
                        </div>
                        <!-- Website -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="font-bold" for="website">Company Website:</label>
                                <input
                                    value="{{ isset($user->company) && $user->company->website ? $user->company->website : old('value') }}"
                                    type="url" class="form-control" id="website" name="website" required
                                    data-parsley-error-message="Please enter a valid website URL.">
                            </div>
                        </div>
                    </div>
                    <div class="row">

                        <!-- Registration Number -->
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="font-bold" for="registrationNumber">Company Registration Number:</label>
                                <input {{ isset($user) ? 'disabled' : '' }}
                                    value="{{ isset($user->company) && $user->company->registration ? $user->company->registration : old('value') }}"
                                    type="text" class="form-control" id="registrationNumber" name="registrationNumber"
                                    required data-parsley-error-message="Please enter the registration number.">
                            </div>
                        </div>
                        <!-- Website -->
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="font-bold" for="website">Company Code:</label>
                                <input readonly
                                    value="{{ isset($user->company) && $user->company->company_code?$user->company->company_code :'N/A'}}"
                                     class="form-control"  name="company_code">
                            </div>
                        </div>
                        <!-- Contact Name -->
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="font-bold" for="contactName">Contact Name:</label>
                                <input
                                    value="{{ isset($user->company) && $user->company->contact_name ? $user->company->contact_name : old('value') }}"
                                    type="text" class="form-control" id="contactName" name="contactName" required
                                    data-parsley-error-message="Please enter the contact name.">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <!-- Contact Telephone -->
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="font-bold" for="contactTelephone">Contact Telephone:</label>
                                <input value="{{ isset($user->company) && $user->phone ? $user->phone : old('value') }}"
                                    type="tel" class="form-control" id="contactTelephone" name="contactTelephone"
                                    required data-parsley-error-message="Please enter a valid telephone number.">
                            </div>
                        </div>
                        <!-- Contact Email -->
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="font-bold" for="contactEmail">Contact Email Address:</label>
                                <input {{ isset($user) ? 'disabled' : '' }}
                                    value="{{ isset($user->company) && $user->email ? $user->email : old('value') }}"
                                    type="email" class="form-control" id="contactEmail" name="contactEmail" required
                                    data-parsley-error-message="Please enter a valid email address.">
                                <div id="emailError" class="error-message " style="color: #ff7f50;"></div>
                            </div>
                        </div>
                        <!-- Total Employees -->
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="font-bold" for="totalEmployees">Number of Employees:</label>
                                <input
                                    value="{{ isset($user->company) && $user->company->employees ? $user->company->employees : old('value') }}"
                                    type="number" class="form-control" id="totalEmployees" name="totalEmployees"
                                    required data-parsley-error-message="Please enter the total number of employees.">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <!-- Contact Telephone -->
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="font-bold" for="contactTelephone">Invoice Email Address:</label>
                                <input value="{{ isset($user->company) && $user->company->invoice_Email_address ? $user->company->invoice_Email_address : " " }}"
                                    type="email" class="form-control" id="contactTelephone" name="invoice_Email_address"
                                    required data-parsley-error-message="Please enter a valid email address.">
                            </div>
                        </div>
                        <!-- Contact Email -->
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="font-bold" for="contactEmail">Invoice Contact:</label>
                                <input
                                    value="{{ isset($user->company) && $user->company->invoice_contact ? $user->company->invoice_contact : old('value') }}"
                                    type="tel" class="form-control" id="contactEmail" name="invoice_contact" required
                                    data-parsley-error-message="Please enter a valid email phone number.">
                                <div id="emailError" class="error-message " style="color: #ff7f50;"></div>
                            </div>
                        </div>
                        <!-- Total Employees -->
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="font-bold" for="totalEmployees">Limit of Polls:</label>
                                <input disabled
                                    value="{{ isset($user->company) && $user->company->poll_limit ? $user->company->poll_limit : old('value') }}"
                                    type="number" class="form-control" id="totalEmployees" name="poll_limit"
                                    required data-parsley-error-message="Please enter the total number of employees.">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <!-- Departments -->
                        <div class="col-md-6">
                            <div id="email-input-container" class="form-group">
                                <label class="font-bold" for="email-input">Enter Department:</label>
                                <input type="text" id="email-input" class="form-control"
                                    placeholder="Add an department and press enter...">
                                <div req id="email-tags" class="mt-2">

                                </div>
                                @if (isset($user) && isset($user->company) && isset($user->company->departments))
                                    @foreach ($user->company->departments as $department)
                                        <span class="email-tag " style="background: darkgrey;">{{ $department->name }}
                                            <span class="remove-email"
                                                onclick="removeDepartment({{ $department->id }})"></span>
                                        </span>
                                    @endforeach
                                @endif
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="font-bold" for="companyLogo">Company Logo:</label>
                                <input type="file" name="media" accept="image/*" id="images"
                                    class="form-control" {{ !isset($user) ? 'required' : '' }}>

                                <div class="existing-images form-group col-md-12 mt-3">
                                    @if (isset($user))
                                        <div id="div-create" style="position: relative;">
                                            <img src="{{ env('MEDIA_URL') . $user->profile_image }}"
                                                id="existing-image-create" class="img-thumbnail"
                                                style="width: 100px; height: 100px; object-fit: cover;">
                                        </div>
                                    @else
                                        <div id="div-create" style="position: relative;display: none">
                                            <img id="existing-image-create" class="img-thumbnail"
                                                style="width: 100px; height: 100px; object-fit: cover;">
                                        </div>
                                    @endif
                                    <input type="hidden" id="deleted_image_ids" name="deleted_image_ids"
                                        value="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Submit Button -->
                    <div class="text-left">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            var emailInput = $('#contactEmail');
            var errorContainer = $('#emailError');
            var isEmailValid = true; // Track the email validation status

            emailInput.on('change', function() {
                var email = $(this).val();
                // Remove existing error message
                errorContainer.text('');

                // Make an Ajax request
                $.ajax({
                    type: 'POST',
                    url: '{{ route('check.email') }}',
                    data: {
                        '_token': '{{ csrf_token() }}',
                        'email': email
                    },
                    success: function(response) {
                        if (response.available === false) {
                            errorContainer.html('The email is already taken.');
                            isEmailValid = false; // Set the validation status to false
                        } else {
                            // Email is available
                            isEmailValid = true; // Set the validation status to true
                        }
                    }
                });
            });
            $('#companyRegistrationForm').submit(function(event) {
                // Check the email validation status before allowing form submission
                if (!isEmailValid) {
                    event.preventDefault();
                    errorContainer.html(
                        'Please fix the email error before submitting.') // Prevent form submission

                }
            });
        });



        // image input js
        document.getElementById('images').addEventListener('change', function() {
            var fileInput = this;
            var category = @json($content ?? false);
            var existingImage = document.getElementById('existing-image');
            var existingImagecreate = document.getElementById('existing-image-create');
            var divcreate = document.getElementById('div-create');

            if (fileInput.files && fileInput.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    if (category !== false) {
                        existingImage.src = e.target.result;
                        existingImage.style.display = "block"; // Show the image
                    } else {
                        existingImagecreate.src = e.target.result;
                        divcreate.style.display = "block"; // Show the image
                    }
                };
                reader.readAsDataURL(fileInput.files[0]);
            } else {
                existingImage.style.display = "none"; // Hide the image if no file is selected
            }
        });

        //  department teg input js
        const emailInput = document.getElementById('email-input');
        const emailTags = document.getElementById('email-tags');
        const emails = [];
        // Assuming your form has an id of 'your-form-id'
        const existingDepartments = {!! isset($user->company->departments)
            ? json_encode($user->company->departments->pluck('name')->toArray())
            : '""' !!};
        const form = document.getElementById('companyRegistrationForm');
        // Add event listener for form submission
        form.addEventListener('submit', function(event) {
            // Check if the email-tags div is empty
            const emailTagsDiv = document.getElementById('email-tags');
            if (emailTagsDiv.children.length === 0 && existingDepartments.length === 0) {
                // If email-tags div is empty, prevent form submission
                event.preventDefault();
                // Optionally, you can display an error message or add a class to indicate the error
                // For example:
                emailTagsDiv.setAttribute('style', 'color: #ff7f50;');
                emailTagsDiv.innerHTML = 'At least one department is required!'; // Display error message
            } else {
                // If email-tags div is not empty, allow form submission
                // Optionally, you can remove any error styling or message
                emailTagsDiv.classList.remove('text-danger');
                // emailTagsDiv.innerHTML = ''; // Clear any existing error message
            }
        });

        function removeEmail(index) {
            emails.splice(index, 1);
            renderEmails();
        }

        function renderEmails() {
            emailTags.innerHTML = '';
            emails.forEach((email, index) => {
                const emailTag = document.createElement('span');
                emailTag.className = 'email-tag';
                emailTag.textContent = email;
                const removeBtn = document.createElement('span');
                removeBtn.className = 'remove-email';
                removeBtn.textContent = 'x';
                removeBtn.onclick = () => removeEmail(index);
                emailTag.appendChild(removeBtn);
                emailTags.appendChild(emailTag);
                // Add hidden input field with email value
                const hiddenInput = document.createElement('input');
                hiddenInput.type = 'hidden';
                hiddenInput.name = 'department[]'; // Array name
                hiddenInput.value = email;
                emailTags.appendChild(hiddenInput);
            });
        }

        emailInput.addEventListener('keypress', function(event) {
            if (event.key === 'Enter') {
                const email = emailInput.value.trim();
                // Check if the field is not empty
                if (email) {
                    // Check for duplicate email
                    if (!existingDepartments.includes(email) && !emails.includes(email)) {
                        // Add the email to the array and render
                        emails.push(email);
                        renderEmails();
                        // Remove error class if it exists
                        emailInput.classList.remove('input-danger');
                        emailInput.placeholder = 'Please enter an department!';
                    } else {
                        // Show error message and add error class
                        emailInput.classList.add('input-danger');
                        emailInput.placeholder = 'Duplicate department!';
                    }
                } else {
                    // Show error message for empty field
                    emailInput.classList.add('input-danger');
                    emailInput.placeholder = 'Please enter an department!';
                }
                emailInput.value = '';
                event.preventDefault();
            }
        });
        //  department teg input js END

        window.Parsley.addMessages('en', {
            defaultMessage: "This value seems to be invalid.",
            type: {
                email: "Please enter a valid email address.",
                url: "Please enter a valid URL.",
                number: "Please enter a valid number.",
                integer: "Please enter a valid integer.",
                digits: "Please enter only digits.",
                alphanum: "Please enter only letters and numbers."
            },
            notblank: "This value should not be blank.",
            required: "This field is required.",
            pattern: "This value seems to be invalid.",
            min: "Please enter a value greater than or equal to %s.",
            max: "Please enter a value less than or equal to %s.",
            range: "Please enter a value between %s and %s.",
            minlength: "Please enter at least %s characters.",
            maxlength: "Please enter at most %s characters.",
            length: "Please enter a value between %s and %s characters long.",
            mincheck: "Please select at least %s options.",
            maxcheck: "Please select %s options or fewer.",
            check: "Please select between %s and %s options.",
            equalto: "This value should be the same."
        });

        window.Parsley.setLocale('en');
    </script>

    <script>
        $(document).ready(function() {
            $('#companyRegistrationForm').parsley();
        });
    </script>
@endsection