@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 Company</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>
                    <li class="breadcrumb-item active">
                        <a href="{{ Route('company.index') }}" class="text-cyan">Companies</a>
                    </li>
                </ol>
            </div>
        </div>
    </div>
    <style>
        .permissions-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .permission-label {
            display: flex;
            align-items: center;
            padding: 5px 10px;
            border: 1px solid #ccc;
            border-radius: 20px;
            background-color: #f1f1f1;
            margin-right: 10px;
            margin-bottom: 10px;
            cursor: pointer;
        }

        .permission-label input {
            margin-right: 5px;
        }

        .permission-label input[type="checkbox"] {
            display: inline-block;
            width: 16px;
            height: 16px;
            margin-right: 5px;
        }

        .permission-label span {
            display: inline-block;
            vertical-align: middle;
        }

        .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" style="transform: scale(0.9); transform-origin: 0 1;text-align: left;">
                    {{-- <h2>Company Registration Form</h2> --}}
                    @if (isset($user))
                        <form id="companyRegistrationForm" action="{{ Route('company.update', $user->id) }}" 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-4">
                            <div class="form-group">
                                <label 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-4">
                            <div class="form-group">
                                <label 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

                                    {{-- <option {{ isset($user->company->industry) && $user->company->industry == 'Food Industry' ? 'selected' : '' }}>Food Industry</option>
                                    <option {{ isset($user->company->industry) && $user->company->industry == 'Communications and Technology' ? 'selected' : '' }}>Communications and Technology</option>
                                    <option {{ isset($user->company->industry) && $user->company->industry == 'Finance' ? 'selected' : '' }}>Finance</option>
                                    <option {{ isset($user->company->industry) && $user->company->industry == 'Health Care' ? 'selected' : '' }}>Health Care</option>
                                    <option {{ isset($user->company->industry) && $user->company->industry == 'Hospitality' ? 'selected' : '' }}>Hospitality</option>
                                    <option {{ isset($user->company->industry) && $user->company->industry == 'Transport and Logistics' ? 'selected' : '' }}>Transport and Logistics</option>
                                    <option {{ isset($user->company->industry) && $user->company->industry == 'Construction' ? 'selected' : '' }}>Construction</option>
                                    <option {{ isset($user->company->industry) && $user->company->industry == 'Retail' ? 'selected' : '' }}>Retail</option>
                                    <option {{ isset($user->company->industry) && $user->company->industry == 'Energy' ? 'selected' : '' }}>Energy</option> --}}
                                    <!-- Add other industries here -->
                                </select>

                            </div>
                        </div>
                        <!-- Address -->
                        <div class="col-md-4">
                            <div class="form-group">
                                <label 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>
                    </div>
                    <div class="row">

                        <!-- Registration Number -->
                        <div class="col-md-4">
                            <div class="form-group">
                                <label 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 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>
                        <!-- Contact Name -->
                        <div class="col-md-4">
                            <div class="form-group">
                                <label 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 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 for="contactEmail">Contact Email Address:</label>
                                <input {{ isset($user) ? 'readonly' : '' }}
                                    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 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."
                                    oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <!-- Contact Telephone -->
                        <div class="col-md-4">
                            <div class="form-group">
                                <label  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  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>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="totalEmployees">Limit of Polls:</label>
                                <input
                                    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 limit of Polls."
                                    oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                            </div>
                        </div>
                    </div>
                    <div class="row">

                        <!-- Departments -->
                        <div class="col-md-6">
                            <div id="email-input-container" class="form-group">
                                <label 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>

                        <!-- Employees by Department -->
                        {{-- <div class="col-md-6">
                                <div class="form-group">
                                    <label for="employeesByDepartment">Number of Employees by Department/Area:</label>
                                    <input type="number" class="form-control" id="employeesByDepartment"
                                        name="employeesByDepartment" required
                                        data-parsley-error-message="Please enter the number of employees by department/area.">
                                </div>
                            </div> --}}
                        <!-- Company Logo -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label 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 class="col-md-12">
                            <strong class="text-danger">Permissions:</strong>
                            <br />
                            <div class="permissions-container mt-3">
                                @php
                                    $userPermissions = isset($user->rolesCustomRelation[0]['permissions1']) ? $user->rolesCustomRelation[0]['permissions1']->pluck('id')->toArray() : [];
                                    $roleId = $user->rolesCustomRelation[0]->id ?? null;
                                @endphp
                                    {{ Form::hidden('role_id', $roleId) }}
                                @foreach ($permission as $value)
                                    <label class="permission-label">
                                        {{ Form::checkbox('permission[]', $value->id, in_array($value->id, $userPermissions), ['class' => 'name']) }}
                                        <span>{{ $value->name }}</span>
                                    </label>
                                @endforeach
                            </div>
                            <div id="permission-error-container" class="error-message " style="color: #ff7f50;"></div>
                        </div>
                    </div>
                    <!-- Submit Button -->
                    <div class="text-left">
                        <button type="submit" class="{{ isset($user)?'btn btn-info':'btn btn-primary' }}">{{ isset($user)?'Update':'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

                }
                if ($('input[name="permission[]"]:checked').length === 0) {
                    event.preventDefault();
                    $('#permission-error-container').html('Please select at least one permission.').show();
                    return; // 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