@extends('layouts.app')

@section('appjs')
<script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection
@section('content')
@section('page_title') White Label Dashboard @endsection

<style>
    .hide{
        display:none;
    }
    .modal-content{
        width: 112%;
    }
    .add-domain {
    color: #fff;
    background-color: #1d4f42;
    border-color: #1d4f42;
    }
    .dropdown {
        position: relative;
        display: inline-block;
    }

    .assignee-dropdown-btn {
        width: 100%;
        text-align: left;
        padding: 10px;
    }
    .assignee-dropdown-menu {
        display: none;
        position: absolute;
        /* top: 100%; */
        left: 0;
        background-color: white;
        width: 100%;
        border: 1px solid #ccc;
        z-index: 1;
    }
    .dropdown:hover .assignee-dropdown-menu {
        display: block;
    }
    .checkbox-container {
        display: flex;
        align-items: center;
        padding: 5px;
    }
    .checkbox-container input[type="checkbox"] {
        margin-right: 10px;
    }
    .checkmark {
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 1px solid #ccc;
        margin-left: 5px;
        border-radius: 4px;
        background-color: white;
    }
    .fa-upload{
        font-size: 1.1rem;
        margin-left: 1rem;
    }
    .image_div{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    .upload_file_div{
        margin-top: 20px;
    }
    .fa-edit, .fa-save{
        cursor: pointer;
        font-size: 1rem;
        margin-left: 1.5rem;
    }
    table .white_label_link_input{
        width: 76%;
        padding: 4px;
    }
    td .cross_btn{
        color: red;
        font-size: 20px;
        top: -26px;
        left: -10px;
        position: relative;
        cursor: pointer;
    }
</style>
<div class="container-fluid">
    <div class="card-header flex">
        <h3>White Label Dashboard</h3>

        @can('hasAddPermission')
            @csrf
            <button type="button" id="open_add_domain_modal" class="add-domain btn btn-sm border-radius-0" style="margin-left: auto;">
                <i class="fa fa-plus"></i> Add Domain
            </button>
        @endcan
    </div>

    <div class="card">
        <div class="card-body table-responsive">
        <meta name="csrf-token" content="{{ csrf_token() }}">
            <table class="table table-bordered table-hover" id="whitelabellist">
                <thead>
                    <tr>
                        <th>Sr. No</th>
                        <th>Domain List</th>
                        <th>Logo</th>
                        <th>Favicon</th>
                        <th>Assignee</th>
                        @can('hasUpdatePermission')
                        <th>Action</th>
                        @endcan
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
    <!-- Add Domain Modal Starts here -->
    <div class="modal fade" tabindex="-1" role="dialog" id="edit_white_label_modal" data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><strong>Add White Label Domain</strong></h5>
                </div>
                <div class="modal-body">
                    <div class="row mb-1">
                        <label class="col-sm-3 control-label"><b>Add Link<span style="color: red;">*</span> :</b></label>
                        <div class="col-sm-9">
                            <input name="whitelabel_content" id="whitelabel_content" class="form-control modal-link" placeholder="Please Enter Link"><br>
                        </div>
                    </div>

                    <!-- Add Logo -->
                    <div class="row mb-3">
                        <label class="col-sm-3 control-label"><b>Upload Logo : </b></label>
                        <div class="col-sm-9">
                            <input type="file" name="logo_file" id="logo_file" class="form-control-file" accept="image/jpeg, image/png , image/ico">
                        </div>
                    </div>

                    <!-- Add Favicon -->
                    <div class="row mb-3">
                        <label class="col-sm-3 control-label"><b>Upload Favicon : </b></label>
                        <div class="col-sm-9">
                            <input type="file" name="favicon_file" id="favicon_file" class="form-control-file" accept="image/jpeg, image/png , image/ico">
                        </div>
                    </div>
                </div>
                <div class="modal-footer footerwidth">
                    <a type="button" class="btn btn-secondary btn-sm text-white close_icon" id="close" data-dismiss="modal">Close</a>
                    <button type="button" class="btn btn-primary text-white btn-sm" id="save_label_Content">Submit</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Add Domain Modal ends here -->
</div>

<script>

    //domain url validation
    function isUrlVerified(url){
        //  if http or https is not there then return false
        if(url.length<4) return false;
        let sub_str = url.substring(0,5);
        return sub_str.includes('http') || sub_str.includes('https');
    }

    function createDynamicImage(data,row,type){
        let crossBtnDiv =`
            <div id='cross_btn_div_${type}_${row.id}' class='hide' >
                <i title='Delete this ${type}' class="close-btn border-0 bg-transparent" id="cross_button_${type}_icon_${row.id}" onclick="removeImage('${type}','${row.id}')" >
                    <span class='cross_btn'> &cross;</span>
                </i>
            </div>`;
        let previewDiv = `
            <div id='preview_div_parent_${type}_${row.id}' class='${data?'':'hide'}'>
                <div id='preview_div_${type}_${row.id}'>
                    <a ${data? `href = ${data}` :''} id="anchor_${type}_${row.id}" target="_blank">
                        <img src="${data}" id='${row.id}_${type}_img_preview' width="60" height="60">
                    </a>
                </div>
            </div>`;
        let naDiv =`
            <div id='preview_div_na_${type}_${row.id}' class='${data?'hide':''}' >
                NA
            </div>`;
        let uploadFileDiv = `
            <div class='upload_file_div upload_file_div_${row.id} hide' id='upload_file_div_${type}_${row.id}'>
                <label for="${row.id}_div_${type}_input" id='${row.id}_div_${type}_input_label'>
                    <i class="fa fa-upload" aria-hidden="true"></i>
                </label>
                <input type ="file" id="${row.id}_div_${type}_input" onChange="changeImage('${row.id}','${type}')" class = 'hide'/>
            </div>`;

        return `
            <div class='image_div'>
                ${previewDiv}
                ${crossBtnDiv}
                ${naDiv}
                ${uploadFileDiv}
            </div>`;
    }
    
    function generateDropdown(user_assignee, id) {        
        let x = `
        <div class="form-group custom-dropdown-container">
            <div class="custom-dropdown-header" style="display: flex;">
            </div>
            <div class="dropdown-options-container">
                <select class="form-control ${id}_assignee_dropdown test_assignee" name="acc_id[]" multiple id="${id}_assignee_dropdown" style="height: 150px; overflow-y: auto;" disabled>`;

        if (user_assignee) user_assignee = user_assignee.split(',');
        else user_assignee = [];

        users.forEach(user => {
            if(user.Status > 0){
                let isSelected = user_assignee && user_assignee.includes(String(user.id)) ? 'selected' : '';
                x += `<option value="${user.id}" ${isSelected}>${user.account_name}-${user.id}</option>`;
            }
        });

        x += `</select>
            </div>
        </div>`;
        
        return x;
    }

    function white_label() {
        $("#whitelabellist").DataTable().clear().destroy();
        $('#whitelabellist').DataTable({
            "sScrollX": true,
            "serverSide": true,
            "processing": true,
            "paging": true,
            "searching": true,
            "ordering": true,
            "order": [[0, "asc"]],
            "scrollCollapse": true,
            "scrollY": 400,
            "pageLength": 20,
            "autoWidth": false,  // Prevents fixed column widths
            "responsive": true,
            columnDefs: [
                    { width: "500px", targets: 1 },
                    { width: "500px", targets: 2 },
                    { width: "500px", targets: 3 },
                    { width: "300px", targets: 4 }
            ],
            "language": { 
                search: '', 
                searchPlaceholder: "Search..."
            },
            "ajax": {
                "url": "{{ url('whitelabel_dashboard') }}",
                "type": "POST",
                "data": {
                    _token: "{{ csrf_token() }}"
                }
            },
            "columns": [
                { "data": "id" },
                { "data": "white_label_link", "render": function(data, type, row) {
                    return `<div id="${row.id}_div_url">    
                                <a href ='${data}' target="_blank" id='${row.id}_div_url_anchor'> ${data} </a>
                                <input type ="text" value='${data}' id="${row.id}_div_url_input"  class='hide white_label_link_input' />
                            </div>
                    `;
                }},
                { "data": "logo", "render": function(data, type, row) {
                    return createDynamicImage(data,row,'logo');
                }},
                { "data": "favicon", "render": function(data, type, row) {
                    return createDynamicImage(data,row,'favicon');
                }},
                {
                    "data": "assignee", 
                    "render": function(data, type, row) {
                        return generateDropdown(data, row.id);
                    }
                },
                { "data": "id", "render": function(data, type, row) {
                    return `
                        <span class = "fa fa-edit text-left" id='edit_save_icon_${data}' onClick = "editEnable('${data}')" > </span>
                    `;
                }},
            ],
            "drawCallback": function() {
                $('.test_assignee').multiselect({
                    includeSelectAllOption: true,
                    allSelectedText: 'All Accounts selected',
                    nonSelectedText: 'No Account selected',
                    selectAllValue: 'all',
                    selectAllText: 'Select all',
                    unselectAllText: 'Unselect all',
                    buttonWidth: '100%',
                    enableFiltering: true,
                    selectAllJustVisible: false,
                    templates: {
                        filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter border-radius-0" type="button">Clear</button></span>',
                    },
                    enableCaseInsensitiveFiltering: true,
                });
            }
        });
    }

    /*Dynamically change of Image and Favicon*/
    function changeImage(rowId, type) {
        let input_id = `${rowId}_div_${type}_input`;            // file input from upload
        let img_id = `${rowId}_${type}_img_preview`;             // image where src to be set
        let preview_span_id = `preview_div_na_${type}_${rowId}`; // NA div
        let preview_div_parent = `preview_div_parent_${type}_${rowId}`;
        let preview_div_child = `preview_div_${type}_${rowId}`;
        let crossBtn = `cross_btn_div_${type}_${rowId}`;
        
        let input = document.getElementById(input_id);
        let img = document.getElementById(img_id);

        if (input.files && input.files[0]) {
            let file = input.files[0];
            let validFormats = ["image/jpeg", "image/jpg", "image/png", "image/x-icon", "image/vnd.microsoft.icon"];
            if (!validFormats.includes(file.type)) {
                alert("Invalid file format! Please upload JPG, JPEG, PNG, or ICO.");
                input.value = "";
                return;
            }

            /* once the image being set for this, remove NA and set image */
            $(`#${preview_span_id}`).addClass('hide');
            $(`#${preview_div_parent}`).removeClass('hide');
            $(`#${preview_div_child}`).removeClass('hide');
            $(`#${crossBtn}`).removeClass('hide');       
            
            let reader = new FileReader();
            reader.onload = function(e) {
                img.src = e.target.result; // Set the image preview
            };
            reader.readAsDataURL(file);
        }
    }

    var users = @json($filtered_users);
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        white_label();
    });

    // id div
    // validations for edit data ID wise
    const saveData = (id) => {
        if(!id){
            toastr.error('Something Went wrong');
            return;
        }

        let assignee_class = `${id}_assignee_dropdown`; 
        let selectedAssignees = $(`.${assignee_class}`).val() || [];

        let formData = new FormData();
        
        let urlValue = document.getElementById(`${id}_div_url_input`).value;
        let isVerifiedUrl = isUrlVerified(urlValue);
        // if(isVerifiedUrl==false){
        //         toastr.error('Error in the URL');
        //         return;
        // }
        try{
            let checkUrl  = new URL(urlValue);
            if(!checkUrl.hostname){
                toastr.error('Error in the URL');
                return;
            }
        }
        catch(e){
            toastr.error('Invalid url');
            return;
        }
        if (urlValue) formData.append("url", urlValue);

        // let logoFile = document.getElementById(`${id}_div_logo_input`).files[0];
        // if (logoFile) formData.append("logo", logoFile);

        // let favFile = document.getElementById(`${id}_div_favicon_input`).files[0];
        // if (favFile) formData.append("favicon", favFile);

         // image is there
        if($(`#preview_div_na_logo_${id}`).hasClass('hide')){
            let newImage = $(`#${id}_div_logo_input`)[0].files[0];
            if(newImage){
                    // either new image added or image changed
                    formData.append("logo", newImage);
                    formData.append("logo_type", 'new image added');
            }
            else{
                formData.append("logo", null);
                formData.append("logo_type", 'nothing new added');
            }
        }
        // preview is not there: image is removed or previously only image was not there and now also image not updated in both the cases null to be updated in table
        else{
            formData.append("logo", null);
            formData.append("logo_type", 'nothing new added or deleted');
        }

        if($(`#preview_div_na_favicon_${id}`).hasClass('hide')){
            let newImage = $(`#${id}_div_favicon_input`)[0].files[0];
            // if image is there that means either new image is uploaded or image in changed or nothing is changed
            if(newImage){
                    // either new image added or image changed
                    formData.append("favicon", newImage);
                    formData.append("favicon_type", 'new image added');
            }
            else{
                formData.append("favicon", null);
                formData.append("favicon_type", 'nothing new added');
                }
        }
        else{
                formData.append("favicon", null);
                formData.append("favicon_type", 'nothing new added or deleted');
        }

        formData.append('assignees', selectedAssignees);
        formData.append('id',id);

        $.ajax({
            url: "save_whitelabel_edit_data",
            type: "POST",
            data: formData,
            contentType: false,
            processData: false,
            headers: { "X-CSRF-TOKEN": "{{ csrf_token() }}" }, 
            success: function(response) {
                response.status==true?toastr.success(response.message):toastr.error(response.message);
                white_label();
            },
            error: function(xhr, status, error) {
                toastr.error("Oops! Something went wrong!");
            }
        });

    };

    //to edit dashboard fields
    function editEnable(id) {
        let fav_div_input = `#${id}_div_favicon_input_label`;
        let logo_div_input = `#${id}_div_logo_input_label`;
        let url_div_input = `#${id}_div_url_input`;
        let div_anchor_url = `#${id}_div_url_anchor`;
        let assignDropdown = `#${id}_assignee_dropdown`;
        // let crossBtnLogo = `#cross_button_logo_${id}`;
        let crossBtnLogo = `#cross_btn_div_logo_${id}`;
        let uploadFIleDivLogo = `#upload_file_div_logo_${id}`;
        let crossBtnFavicon = `#cross_btn_div_favicon_${id}`;
        let uploadFIleDivFavicon = `#upload_file_div_favicon_${id}`;
        let anchor_image =  $(`#anchor_logo_${id}`).prop('href');
        let anchor_image_favicon =  $(`#anchor_favicon_${id}`).prop('href');

        if ($(url_div_input).hasClass('hide')) {
            // Enable fields for editing
            $(fav_div_input).removeClass('hide');
            $(url_div_input).removeClass('hide');
            $(div_anchor_url).addClass('hide');
            $(logo_div_input).removeClass('hide');
            $(`#edit_save_icon_${id}`).removeClass('fa-edit');
            $(`#edit_save_icon_${id}`).addClass('fa-save');
            $(assignDropdown).prop('disabled',false);
            $(assignDropdown).multiselect('enable');

            $(uploadFIleDivLogo).removeClass('hide');
            $(uploadFIleDivFavicon).removeClass('hide');
            
            if(anchor_image){
                $(crossBtnLogo).removeClass('hide');
            }
            if(anchor_image_favicon){
                $(crossBtnFavicon).removeClass('hide');
            }
        } else {
            $(`#edit_save_icon_${id}`).removeClass('fa-save');
            $(`#edit_save_icon_${id}`).addClass('fa-edit');
            $(assignDropdown).prop('disabled',true);
            $(assignDropdown).multiselect('disable'); 
            $(crossBtnLogo).addClass('hide');
            $(uploadFIleDivLogo).addClass('hide');
            $(crossBtnFavicon).addClass('hide');
            $(uploadFIleDivFavicon).addClass('hide');
              
            // Disable fields after saving
            $(fav_div_input).addClass('hide');
            $(url_div_input).addClass('hide');
            $(div_anchor_url).removeClass('hide');
            $(logo_div_input).addClass('hide');

            saveData(id);
        }
    }

    $(document).ready(function() {
        // Open modal when button is clicked
        $("#open_add_domain_modal").click(function() {
            $("#edit_white_label_modal").modal("show");
        });

        // Close modal when close button is clicked
        $("#close").click(function() {
            $("#whitelabel_content").val('');
            $("#logo_file").val('');
            $("#favicon_file").val('');
            $("#edit_white_label_modal").modal("hide");
        });

        // Handle form submission
        $("#save_label_Content").click(function() {
            let link = $("#whitelabel_content").val();
            let logo = $("#logo_file")[0].files[0];
            let favicon = $("#favicon_file")[0].files[0];
            try{
                let url_link = new URL(link);
                if(!url_link.hostname){
                     toastr.error('Error in the URL');
                    return;
                }
            }
            catch(e){
                toastr.error('Invalid url');
                return;
            }
            //let isVerifiedUrl = isUrlVerified(link);
            

            if (!link) {
                toastr.error("Please enter a link.");
                return;
            } 
            // else if(isVerifiedUrl==false){
            //     toastr.error("Invalid link. Please enter a valid URL.");
            //     return;
            // }

            let formData = new FormData();
            formData.append("whitelabel_link", link);
            if (logo) formData.append("logo_file", logo);
            if (favicon) formData.append("favicon_file", favicon);
            formData.append("_token", "{{ csrf_token() }}");
            $("#whitelabel_content").val('');
            $("#logo_file").val('');
            $("#favicon_file").val('');

            $.ajax({
                url: "{{ url('edit_whitelabel_link') }}",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    if(response.status == false){
                        toastr.error(response.message);
                    }
                    else toastr.success("White Label added successfully!", "Success");
                    $("#edit_white_label_modal").modal("hide");
                    $("#whitelabellist").DataTable().ajax.reload();
                },
                error: function(xhr) {
                    toastr.error("Something went wrong. Please try again.", "Error");
                }
            });
        });
    });


    //to display logo & favicon preview
    $(document).on('click', '#edit_whitelabel_link', function() {
        let id = $(this).data('id');
        let input = $(this).data('link');
        account_id_selected = id;

        $.ajax({
                type: "POST",
                url: "{{ url('/fetch_label_details') }}",

                data: {
                    "_token" : "{{ csrf_token() }}",
                    "input" : input,
                    "account_id":account_id_selected
                },
                dataType:'json',
                success: function(data) {
                    if(data.status==true){
                        // display the logo and favicon
                        data = data.data;
                        let logoURL = data.logo;
                        let favURL = data.favicon;
                        if(logoURL) {
                            $('.image_div_logo').removeClass('hide');
                            $('#image_logo').attr('src', logoURL);
                            $('#crossButton').show()
                        }
                        if(favURL) {
                            $('.image_div_favicon').removeClass('hide');
                            $('#image_favicon').attr('src', favURL);
                            $('#crossButton_favicon').show()
                        }
                    }
                }
            });

        $('#logo_file').val('');
        $('#favicon_file').val('');
        $('#whitelabel_content').val(input?input:'');
        $("#edit_white_label_modal").modal("show");
    });

    //logo validation
    $('#logo_file').on('change',function(){
        // file type allowances
        const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/vnd.microsoft.icon'];
        let file = this.files[0];
        if (file) {
            if (!allowedTypes.includes( file.type)) {
                alert('Only JPG, JPEG and PNG images are allowed');
                $(this).val('');
                return;

            }
            let reader = new FileReader();
            reader.onload = function (e) {
                $('.image_div_logo').removeClass('hide');
                $('#image_logo').attr('src', e.target.result);
                $('#crossButton').show()
            };
            reader.readAsDataURL(file);
        }
    })

    //favicon validation
    $('#favicon_file').on('change',function(){
        // file type allowances
        const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/ico', 'image/vnd.microsoft.icon'];
        let file = this.files[0];
        if (file) {
            if (!allowedTypes.includes( file.type)) {
                alert('Only JPG, JPEG, PNG and ICO images are allowed');
                $(this).val('');
                return;
            }

            let reader = new FileReader();
            reader.onload = function (e) {
                $('.image_div_favicon').removeClass('hide');
                $('#image_favicon').attr('src', e.target.result);
                $('#crossButton_favicon').show()
            };
            reader.readAsDataURL(file);
        }
    })

    //dropdown for assignee
    function assigneeDropdown(val) {
        var allDropdowns = document.querySelectorAll('.dropdown-menu');

        // Loop through all dropdowns and hide them
        allDropdowns.forEach(function(dropdown) {
            dropdown.style.display = 'none';
        });

        // Get the ID of the clicked dropdown
        var dropdownId = document.getElementById(val.replace('btn', 'dropdown'));

        // Show the clicked dropdown
        dropdownId.style.display = 'block';
    }

    document.addEventListener('click', function(event) {
        var allDropdowns = document.querySelectorAll('.dropdown-menu.assignee-dropdown-menu'); // Only target specific dropdowns
        var buttonClicked = event.target.closest('.assignee-dropdown-btn'); // Check if clicked on the button
        var dropdownClicked = event.target.closest('.dropdown-menu.assignee-dropdown-menu'); // Check if clicked inside the dropdown
        var navBarClicked = event.target.closest('.navbar'); // Prevent closing when clicking the navbar

        // Close dropdowns only if the click is outside the button, dropdown, and navbar
        if (!buttonClicked && !dropdownClicked && !navBarClicked) {
            allDropdowns.forEach(function(dropdown) {
                dropdown.style.display = 'none';
            });
        }
    });

    function removeImage(type,id){
        let message = confirm(`Do you really want to delete the ${type=='favicon'?'Favicon':'Logo'}?`);
        if(!message){
            return;
        }
        // remove-image would be there only if image is selected or there else it would not
        let preview_div_image_id = `#preview_div_${type}_${id}`;
        let anchor_image_id = `#anchor_${type}_${id}`;
        let preview_image_id = `#${id}_${type}_img_preview`;
        let na_div = `#preview_div_na_${type}_${id}`;
        let crossBtn = `#cross_btn_div_${type}_${id}`;

        $(anchor_image_id).prop('href',null);
        $(preview_image_id).prop('src',null);
        $(preview_div_image_id).addClass('hide');
        $(crossBtn).addClass('hide');
        $(`#${id}_div_${type}_input`).val('');
        $(na_div).removeClass('hide');

    }

</script>

@endsection