@extends('layout.app')
{{-- @include('includes.select2') --}}
@section('title', 'Add Doctor | Waiting Room')

@section('content')
    {{-- <script
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyArM4yJH86mM-XJOWByTJBzYoX3XGbs2yk&libraries=places&callback=initMap"
        async defer></script> --}}
    <style>
        .p-2 {
            padding: 90px;
        }

        .input-wrapper {
            position: relative;
        }

        .input-wrapper .form-control {
            padding-right: 40px;
            /* Adjust as needed to ensure space for the button */
        }

        .input-wrapper .toggle-password {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 2;
            /* Ensures the button stays above the input */
            cursor: pointer;
            background: none;
        }

        .custom-select-wrapper {
            position: relative;
        }

        .custom-select-wrapper select {
            padding-right: 30px;
            /* Space for the icon */
        }

        .custom-select-wrapper .dropdown-icon {
            position: absolute;
            top: 50%;
            right: 10px;
            /* Adjust based on padding */
            transform: translateY(-50%);
            pointer-events: none;
            /* Allows clicks to pass through to the select */
        }


        .workingHours {
            background: #fefefe;
            padding: 30px 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin: 7px 0px !important;
            position: relative;
        }

        button.btn.btn-danger.delete-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            height: 30px;
            width: 30px;
            text-align: center;
            padding: 0px;
        }
    </style>

    <div class="row page-titles">
        <ol class="breadcrumb">
            <li class="breadcrumb-item active"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="javascript:void(0)">Add Doctors</a></li>
        </ol>
    </div>

    <form id="createUser" enctype="multipart/form-data">
        <div class="row">
            <div class="col-xl-12">
                <div class="row">
                    <div class="col-xl-8">
                        <div class="card h-auto">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="mb-3">
                                            <label class="form-label">Name</label>
                                            <input type="text" class="form-control" name="name" placeholder="Name"
                                                required>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="mb-3">
                                            <label class="form-label">Email</label>
                                            <input type="email" class="form-control" name="email"
                                                placeholder="Email Address" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Bio</label>
                                    <textarea class="form-control" name="bio" rows="3" required></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="card h-auto">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="mb-3">
                                            <label class="form-label">Service Time (Minutes)</label>
                                            <input type="number" class="form-control" id="service_time" name="service_time"
                                                placeholder="Enter Service Time" min="5" required>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="mb-3">
                                            <label class="form-label">Queue Adjustment Booking (Number)</label>
                                            <input type="number" class="form-control" id="queue_adjustment_number"
                                                name="queue_adjustment_number"
                                                placeholder="Queue Adjustment Booking (Number)" min="0" required>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="mb-3">
                                            <label class="form-label">Service Charges</label>
                                            <div class="input-group">
                                                <span class="input-group-text">$</span>
                                                <input type="number" class="form-control" name="price" min="0"
                                                    id="price" placeholder="Enter Service Charges e.g., 20" required />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="mb-3">
                                            <label class="form-label" for="country">Country</label>
                                            <select class="form-control" name="country" id="country" required>
                                                <option selected disabled>-- Select Country --</option>
                                                <!-- Add your country options here -->
                                                @forelse ($countries as $country)
                                                    <option value="{{ $country->name }}">{{ $country->name }}</option>
                                                @empty
                                                    <option value="" disabled>No Country</option>
                                                @endforelse
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Specialty</label>
                                    <select class="js-example-basic-multiple form-control mt-2 mb-2 p-2"
                                        name="specialities[]" multiple="multiple" id="specialities" required>
                                        @foreach ($specialities as $speciality)
                                            <option value="{{ $speciality->id }}">{{ $speciality->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="filter cm-content-box box-primary">
                            <div class="content-title SlideToolHeader">
                                <div class="cpa">Add Working Hours</div>
                                <div class="tools">
                                    <a href="javascript:void(0);" class="expand handle"></a>
                                </div>
                            </div>
                            <div class="cm-content-body form excerpt">
                                <div class="card-body">
                                    <div id="workingHoursContainer">
                                        <div class="workingHours row">
                                            <div class="col-xl-6 col-sm-4">
                                                <label class="form-label">Day</label>
                                                <select class="form-control mb-4 day-select" name="day[]">
                                                    <option value="Monday">Monday</option>
                                                    <option value="Tuesday">Tuesday</option>
                                                    <option value="Wednesday">Wednesday</option>
                                                    <option value="Thursday">Thursday</option>
                                                    <option value="Friday">Friday</option>
                                                    <option value="Saturday">Saturday</option>
                                                    <option value="Sunday">Sunday</option>
                                                </select>
                                            </div>
                                            <div class="col-xl-3 col-sm-3">
                                                <label class="form-label">From</label>
                                                <input type="time" class="form-control from-time" name="from[]"
                                                    required>
                                            </div>
                                            <div class="col-xl-3 col-sm-3">
                                                <label class="form-label">To</label>
                                                <input type="time" class="form-control to-time" name="to[]"
                                                    required>
                                            </div>
                                            <div class="col-xl-6 col-sm-2">
                                                <label class="form-label">Break</label>
                                                <select class="form-control break-select" name="break[]">
                                                    <option value="On">On</option>
                                                    <option value="Off" selected>Off</option>
                                                </select>
                                            </div>

                                            <div class="col-xl-3 col-sm-3 break-fields">
                                                <label class="form-label">From</label>
                                                <input type="time" class="form-control from-time" name="break_from[]">
                                            </div>
                                            <div class="col-xl-3 col-sm-3 break-fields">
                                                <label class="form-label">To</label>
                                                <input type="time" class="form-control to-time" name="break_to[]">
                                            </div>

                                            <div class="col-xl-2 mt-4">
                                                <button type="button" class="btn btn-danger delete-btn"><i
                                                        class="fa fa-trash"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                    <button type="button" id="addBtn" class="btn btn-primary btn-sm mt-3">Add Working
                                        Hours</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="right-sidebar-sticky">
                            <div class="filter cm-content-box box-primary">
                                <div class="content-title SlideToolHeader">
                                    <div class="cpa">Profile Image</div>
                                    <div class="tools">
                                        <a href="javascript:void(0);" class="expand handle"></a>
                                    </div>
                                </div>
                                <div class="cm-content-body publish-content form excerpt">
                                    <div class="card-body">
                                        <div class="avatar-upload d-flex align-items-center">
                                            <div class="position-relative">
                                                <div class="avatar-preview">
                                                    <div id="imagePreview"
                                                        style="background-image: url(assets/images/no-img-avatar.png); width: 120px; height: 120px; background-size: cover; background-position: center; border-radius: 10%;">
                                                    </div>
                                                </div>
                                                <div class="change-btn d-flex align-items-center flex-wrap">
                                                    <input type='file' class="form-control d-none" id="imageUpload"
                                                        name="profile_image" accept=".png, .jpg, .jpeg">
                                                    <label for="imageUpload"
                                                        class="btn btn-primary light btn-sm ms-0">Select Image</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="filter cm-content-box box-primary">
                                <div class="content-title SlideToolHeader">
                                    <div class="cpa">Published</div>
                                    <div class="tools">
                                        <a href="javascript:void(0);" class="expand handle"></a>
                                    </div>
                                </div>
                                <div class="cm-content-body publish-content form excerpt">
                                    <div class="card-body py-3">
                                        <ul class="list-style-1 block">
                                            <li>
                                                <div>
                                                    <label class="form-label mb-0 me-2">
                                                        <i class="fa-solid fa-key me-2"></i>
                                                        Status:
                                                    </label>
                                                    <span class="font-w500">Active</span>
                                                    <a href="javascript:void(0);" class="badge badge-primary light ms-3"
                                                        id="headingOne" data-bs-toggle="collapse"
                                                        data-bs-target="#collapseOne" aria-controls="collapseOne"
                                                        aria-expanded="true" role="button">Edit</a>
                                                </div>
                                                <div id="collapseOne" class="collapse" aria-labelledby="headingOne"
                                                    data-bs-parent="#accordion-one">
                                                    <div class="border rounded p-3 mt-3">
                                                        <div class="mb-2">
                                                            <label class="form-label w-100">Select Status</label>
                                                            <select class="form-control solid default-select"
                                                                name="status">
                                                                <option selected>Select Status</option>
                                                                <option value="1">Active</option>
                                                                <option value="0">Inactive</option>
                                                            </select>
                                                        </div>
                                                        <div class="mt-3">
                                                            <button class="btn btn-primary btn-sm me-2" type="button"
                                                                data-bs-toggle="collapse" data-bs-target="#collapseOne"
                                                                aria-expanded="false"
                                                                aria-controls="collapseOne">Ok</button>
                                                            <button class="btn btn-danger light btn-sm" type="button"
                                                                data-bs-toggle="collapse" data-bs-target="#collapseOne"
                                                                aria-expanded="false"
                                                                aria-controls="collapseOne">Cancel</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="border-bottom-0">
                                                <div>
                                                    <label class="form-label mb-0 me-2">
                                                        <i class="fa-solid fa-calendar-days me-2"></i>
                                                        Created Date:
                                                    </label>
                                                    <span class="font-w500">
                                                        {{ Carbon\Carbon::now()->format('d-m-Y H:i:s') }}</span>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="card-footer border-top text-end py-3">
                                        <button type="submit" id="addUserBtn" class="btn btn-primary btn-sm">Add
                                            Doctor</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

@endsection
@section('custom-script')

    @include('includes.selet2js')
    <script>
        $(document).ready(function() {
            const daysOfWeek = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];

            function getNextDay(currentDay) {
                let currentIndex = daysOfWeek.indexOf(currentDay);
                let nextIndex = (currentIndex + 1) % daysOfWeek.length;
                return daysOfWeek[nextIndex];
            }

            function updateDayOptions() {
                $('.workingHours').each(function(index) {
                    let daySelect = $(this).find('.day-select');
                    daySelect.empty();
                    for (let day of daysOfWeek) {
                        daySelect.append(new Option(day, day));
                    }
                    if (index > 0) {
                        let previousDay = $('.workingHours').eq(index - 1).find('.day-select').val();
                        let nextDay = getNextDay(previousDay);
                        daySelect.val(nextDay);
                    } else {
                        daySelect.val('Monday');
                    }
                });
            }


            function toggleBreakFields(select) {
                let breakFields = $(select).closest('.workingHours').find('.break-fields');
                if ($(select).val() === "On") {
                    breakFields.show();
                } else {
                    breakFields.hide();
                }
            }

            $('#addBtn').click(function() {
                let lastWorkingHours = $('.workingHours').last();
                let cloned = lastWorkingHours.clone();
                let currentDay = lastWorkingHours.find('.day-select').val();
                let nextDay = getNextDay(currentDay);

                if ($('.workingHours').length < 7) {
                    cloned.find('.day-select').val(nextDay);
                    cloned.find('input[type="time"]').val('');
                    cloned.appendTo('#workingHoursContainer');
                    updateDayOptions();
                    toggleBreakFields(cloned.find(
                        '.break-select'));

                }
            });

            function deleteRow() {
                if ($('.workingHours').length > 1) {
                    $(this).closest('.workingHours').remove();
                    updateDayOptions(); // Update options after a row is deleted
                } else {
                    // alert('You must have at least one working hour record.');
                    notyf.error({
                        message: ('You must have at least one working hour record.'),
                        duration: 3000
                    });
                }
            }

            validateTime();

            var tooltipTriggerList = [].slice.call($('[data-bs-toggle="tooltip"]'));
            var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });


            function validateTime() {
                const fromInputs = $('.from-time');
                const toInputs = $('.to-time');

                fromInputs.each((index, fromInput) => {
                    $(fromInput).on('blur', function() { // Changed to 'blur' event
                        if ($(this).val() && $(toInputs[index]).val() && $(this).val() >= $(
                                toInputs[index]).val()) {
                            $(this).val('');
                            notyf.error({
                                message: 'The "From" time must be earlier than the "To" time.',
                                duration: 3000
                            });
                        }
                    });
                });

                toInputs.each((index, toInput) => {
                    $(toInput).on('blur', function() { // Changed to 'blur' event
                        if ($(fromInputs[index]).val() && $(this).val() && $(fromInputs[index])
                            .val() >= $(this).val()) {
                            notyf.error({
                                message: 'The "From" time must be earlier than the "To" time.',
                                duration: 3000
                            });
                            $(this).val('');
                        }
                    });
                });
            }

            $(document).on('click', '.delete-btn', deleteRow);

            $(document).on('change', '.break-select', function() {
                toggleBreakFields(this);
            });

            // Initialize break fields visibility for the initial row
            $('.workingHours').each(function() {
                toggleBreakFields($(this).find('.break-select'));
            });

            $("#createUser").on('submit', function(e) {
                e.preventDefault();
                const btn = $("#addUserBtn");
                let formData = new FormData($("#createUser")[0]);
                $.ajax({
                    type: "POST",
                    url: "{{ route('barbers.create') }}",
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    cache: false,
                    data: formData,
                    beforeSend: function() {
                        btn.prop('disabled', true);
                        btn.html(
                            '<div class="spinner-border" role="status" style="height: 14px;width: 14px;accent-color: ;"> <span class="visually-hidden">Loading...</span> </div>'
                        );
                        $('.error-message').html('');
                    },
                    success: function(res) {
                        if (res.success === true) {
                            btn.prop('disabled', false);
                            btn.html('Add Doctor');
                            notyf.success({
                                message: res.message,
                                duration: 3000
                            });
                            setTimeout(function() {
                                window.location.href = "{{ route('barbers') }}";
                            }, 2000);

                        } else {
                            btn.prop('disabled', false);
                            btn.html('Add Doctor');
                            notyf.error({
                                message: res.message,
                                duration: 3000
                            });
                        }
                    },
                    error: function(e) {
                        btn.prop('disabled', false);
                        btn.html('Add Doctor');
                    },
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}" // Add CSRF token to headers
                    }
                });
            });
            $('.js-example-basic-multiple').select2();
            $('#country').select2();
        });
        document.getElementById("imageUpload").addEventListener("change", function(event) {
            let file = event.target.files[0]; // Get the selected file
            if (file) {
                let reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById("imagePreview").style.backgroundImage = `
                    url($ {
                        e.target.result
                    })`;
                };
                reader.readAsDataURL(file); // Convert file to Base64
            }
        });
    </script>
    {{-- <script>


        $(document).ready(function() {
            $('.js-example-basic-multiple').select2();
        });

        function validateInput(input) {
            // Remove any non-numeric characters, negative signs, or 'e'
            input.value = input.value.replace(/[^0-9]/g, '');
        }
    </script>
    <script>
        $(document).ready(function() {
            const daysOfWeek = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];

            function getNextDay(currentDay) {
                let currentIndex = daysOfWeek.indexOf(currentDay);
                let nextIndex = (currentIndex + 1) % daysOfWeek.length;
                return daysOfWeek[nextIndex];
            }

            function updateDayOptions() {
                $('.workingHours').each(function(index) {
                    let daySelect = $(this).find('.day-select');
                    daySelect.empty();
                    for (let day of daysOfWeek) {
                        daySelect.append(new Option(day, day));
                    }
                    if (index > 0) {
                        let previousDay = $('.workingHours').eq(index - 1).find('.day-select').val();
                        let nextDay = getNextDay(previousDay);
                        daySelect.val(nextDay);
                    } else {
                        daySelect.val('Monday');
                    }
                });
            }

            function toggleBreakFields(select) {
                let breakFields = $(select).closest('.workingHours').find('.break-fields');
                if ($(select).val() === "On") {
                    breakFields.show();
                } else {
                    breakFields.hide();
                }
            }

            $('#addBtn').click(function() {
                let lastWorkingHours = $('.workingHours').last();
                let cloned = lastWorkingHours.clone();
                let currentDay = lastWorkingHours.find('.day-select').val();
                let nextDay = getNextDay(currentDay);

                cloned.find('.day-select').val(nextDay);
                cloned.find('input[type="time"]').val('');
                cloned.appendTo('#workingHoursContainer');
                updateDayOptions();
                toggleBreakFields(cloned.find(
                    '.break-select')); // Ensure break fields are shown/hidden correctly for the cloned row
            });

            function deleteRow() {
                if ($('.workingHours').length > 1) {
                    $(this).closest('.workingHours').remove();
                    updateDayOptions(); // Update options after a row is deleted
                } else {
                    alert('You must have at least one working hour record.');
                }
            }

            $(document).on('click', '.delete-btn', deleteRow);

            $(document).on('change', '.break-select', function() {
                toggleBreakFields(this);
            });

            // Initialize break fields visibility for the initial row
            $('.workingHours').each(function() {
                toggleBreakFields($(this).find('.break-select'));
            });
        });

        function toggleBreakFields(selectElement) {
            const breakFields = selectElement.closest('.working-hours-record')?.querySelectorAll('.break-fields');
            if (selectElement.value === "On") {
                breakFields?.forEach(field => field.classList.remove('d-none'));
            } else {
                breakFields?.forEach(field => field.classList.add('d-none'));
            }
        }

        function validateDays() {
            const daySelects = document.querySelectorAll('.day-select');
            const days = [];
            let duplicateFound = false;

            daySelects.forEach((select) => {
                if (days.includes(select.value) && select.value !== "") {
                    alert('You cannot select the same day more than once.');
                    select.value = '';
                    duplicateFound = true;
                } else {
                    days.push(select.value);
                }
            });

            return !duplicateFound;
        }

        function validateTime() {
            const fromInputs = document.querySelectorAll('.from-time');
            const toInputs = document.querySelectorAll('.to-time');

            fromInputs.forEach((fromInput, index) => {
                fromInput.addEventListener('change', () => {
                    if (fromInput.value && toInputs[index].value && fromInput.value >= toInputs[index]
                        .value) {
                        alert('The "From" time must be earlier than the "To" time.');
                        fromInput.value = '';
                    }
                });
            });

            toInputs.forEach((toInput, index) => {
                toInput.addEventListener('change', () => {
                    if (fromInputs[index].value && toInput.value && fromInputs[index].value >= toInput
                        .value) {
                        alert('The "From" time must be earlier than the "To" time.');
                        toInput.value = '';
                    }
                });
            });
        }

        function getSelectedDays() {
            const daySelects = document.querySelectorAll('.day-select');
            const selectedDays = [];

            daySelects.forEach(select => {
                if (select.value) {
                    selectedDays.push(select.value);
                }
            });

            return selectedDays;
        }

        function generateDayOptions() {
            const allDays = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
            const selectedDays = getSelectedDays();
            const availableDays = allDays.filter(day => !selectedDays.includes(day));

            let options = '';
            availableDays.forEach(day => {
                options += `<option value="${day}">${day}</option>`;
            });

            return options;
        }

        function updateDayOptions() {
            const daySelects = document.querySelectorAll('.day-select');
            const selectedDays = getSelectedDays();

            daySelects.forEach(select => {
                const currentSelection = select.value;
                const options = generateDayOptions();
                select.innerHTML = `<option value="${currentSelection}">${currentSelection}</option>` + options;
            });
        }

        function getNextAvailableDay() {
            const allDays = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
            const selectedDays = getSelectedDays();
            return allDays.find(day => !selectedDays.includes(day)) || '';
        }

        document.addEventListener('DOMContentLoaded', function() {
            validateTime();
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });

        });

        $(document).on('change', '.day-select', function() {
            validateDays();
            updateDayOptions();
        });

        $(document).on('change', '.break-select', function() {
            toggleBreakFields(this);
        });

        // Call the toggle function for existing rows on page load
        document.querySelectorAll('.break-select').forEach(select => {
            toggleBreakFields(select);
        });

        $("#createUser").on('submit', function(e) {
            e.preventDefault();
            const btn = $("#addUserBtn");
            let formData = new FormData($("#createUser")[0]);
            $.ajax({
                type: "POST",
                url: "{{ route('barbers.create') }}",
                dataType: 'json',
                contentType: false,
                processData: false,
                cache: false,
                data: formData,
                beforeSend: function() {
                    btn.prop('disabled', true);
                    btn.html(
                        '<div class="spinner-border" role="status" style="height: 14px;width: 14px;accent-color: ;"> <span class="visually-hidden">Loading...</span> </div>'
                    );
                    $('.error-message').html('');
                },
                success: function(res) {
                    if (res.success === true) {
                        btn.prop('disabled', false);
                        btn.html('Submit');
                        notyf.success({
                            message: res.message,
                            duration: 3000
                        });
                        setTimeout(function() {
                            window.location.href = "{{ route('barbers') }}";
                        }, 2000);

                    } else {
                        btn.prop('disabled', false);
                        btn.html('Submit');
                        notyf.error({
                            message: res.message,
                            duration: 3000
                        });
                    }
                },
                error: function(e) {
                    btn.prop('disabled', false);
                    btn.html('Submit');
                }
            });
        });

        $(document).ready(function() {
            $("#toggleIcon").click(function() {
                let input = $("#password");
                let icon = $("#toggleIcon i");

                if (input.attr("type") === "password") {
                    input.attr("type", "text");
                    icon.removeClass("bi-eye").addClass("bi-eye-slash");
                } else {
                    input.attr("type", "password");
                    icon.removeClass("bi-eye-slash").addClass("bi-eye");
                }
            });
        });

        $(document).ready(function() {
            $("#toggleIcon1").click(function() {
                let input = $("#password_confirmation");
                let icon = $("#toggleIcon1 i");

                if (input.attr("type") === "password") {
                    input.attr("type", "text");
                    icon.removeClass("bi-eye").addClass("bi-eye-slash");
                } else {
                    input.attr("type", "password");
                    icon.removeClass("bi-eye-slash").addClass("bi-eye");
                }
            });
        });
    </script>
    <script>
        function previewImage(event) {
            var input = event.target;
            var reader = new FileReader();
            reader.onload = function() {
                var imgElement = document.getElementById('companylogo-img');
                imgElement.src = reader.result;
            };
            if (input.files && input.files[0]) {
                reader.readAsDataURL(input.files[0]);
            } else {
                // Set the default image if no file is selected
                document.getElementById('companylogo-img').src = "{{ asset('assets/boy.png') }}";
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });
        });
    </script> --}}
@endsection