@extends('layouts.app')

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

@section('content')
@section('page_title')
    Meta Pages
@endsection
<style>
    input:read-only{
        cursor      : pointer;
    }
    #campaigndetails_wrapper{
        top: 50px;
    }
    .mb-n5{
        margin-bottom: -5rem !important;
    }
</style>
<style>
  .modal-md-custom {
    max-width: 600px;
  }

  .form-label {
    font-weight: 500;
  }

  .form-control.auto-expand {
    resize: none;
    overflow: hidden;
    transition: height 0.2s ease;
  }
  /* Style the multiselect button */
.btn.multiselect {
    background-color: #6c757d;   /* Dark background */
    color: #fff;              /* White text */
    border: 1px solid #444;
}

/* Style dropdown items */
.multiselect-container {
    background-color: #6c757d;
    color: #fff;
    border: 1px solid #444;
}
/* Style checked items */
.multiselect-container li.active  {
    background-color: #444 !important;
    color: #fff !important;
}

.meta-assets-dropdown{
    display: flex;
    justify-content: space-between;
    align-items: inherit;
    padding-right: 15px;
    padding-left: 15px;
}

  @media (max-width: 640px) {
    .modal-md-custom {
      max-width: 100%;
      margin: 1rem;
    }
  }
</style>

<div class="container-fluid">
    <div class="card mt-4">
        <div class="card-body table-responsive">
            <div class="row meta-assets-dropdown">
                <div class="form-group" style="min-width: 200px;">@include('whistle_feed.menu_dropdown.metadropdown')</div>
                <div class="form-group">
                    <button type="submit" class="refresh_pages btn-md btn excel-btn border-radius-0" style="line-height:1.5">Refresh</button>
                </div>
            </div>
            <table class="table-bordered table-hover top" id="metapagedetails">
                <thead>
                    <tr>
                        <th>Sl.No</th>
                        <th>Page Name</th>
                        <th>Page Id</th>
                        <th>Category</th>
                        <th>Category List</th>
                        @can('hasAddPermission')
                        <th>Action</th>
                        @endcan
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

<!-- Add Reject Reason modal start-->
<div class="modal fade" id="metaAccountModal" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modal-md-custom" role="document">
        <div class="modal-content bg-dark text-white rounded shadow-lg border-0 p-3">
            <!-- Modal Body -->
            <div class="modal-body">
                <h4 class="mb-4 border-bottom pb-2">Select Email</h4>
                <div class="row g-3">
                    <input type="hidden" name="page-id" id="page-id">
                    <input type="hidden" name="user-id" id="user-id">
                    <!-- Email Dropdown -->
                    <div class="col-md-12 mb-3">
                        <label for="metaAccounEmailList" class="form-label col-md-12">Assign User Email's</label>
                        <select class="form-control bg-secondary text-white border-0 p-2 w-full" multiple id="metaAccounEmailList" name="metaAccounEmailList[]"></select>
                    </div>
                    <!-- Expanding Textarea -->
                    <div class="col-md-12 mb-3">
                        <label for="metaAccountSelectedEmail" class="form-label">Selected Users</label>
                        <div id="metaAccountSelectedEmail" class="form-control bg-secondary text-white border-0 px-2 py-1" style="white-space: pre-line; overflow-y: auto; max-height: 200px; min-height: 60px; height: auto; resize: none; line-height: 1.5; margin-top: 0; font-size: 16px;"></div>
                    </div>
                </div>
            </div>

            <!-- Modal Footer -->
            <div class="modal-footer bg-dark border-0 d-flex justify-content-end gap-2 mt-3">
                <button type="button" class="btn btn-outline-light btn-md px-4" id="modal-close" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary btn-md px-4 text-white" onclick="updateRecord()">Submit</button>
            </div>
        </div>
    </div>
</div>
<!-- Add Reject Reason modal end -->
<script type="application/javascript">

$(document).ready(function() {
    meta_pagesdetails_list();

    $('#metaAccounEmailList').multiselect({
        enableFiltering : true,
        enableCaseInsensitiveFiltering : true,
        allSelectedText : 'All Selected',
        nonSelectedText : 'Select Email\'s',
        selectAllText : 'Select All',
        unselectAllText : 'UnSelect All',
        selectAllJustVisible : false,
        includeSelectAllOption : true,
        maxHeight : 200,
        numberDisplayed : 1,
        buttonWidth : '100%',
        onChange: function(option, checked) {
            updateSelectedEmails();
        },

        onSelectAll: function() {
            updateSelectedEmails();
        },

        onDeselectAll: function() {
            updateSelectedEmails();
        }
    });
});

$(document).on('click',".refresh_pages", function() {
    $.ajax({
        url: "{{ url('refreshPages') }}",
        type: "GET",
        dataType: "json",
        success: function(response) {
            meta_pagesdetails_list();
        }
    });
});

$(document).on('click',"#updateAdAccountUser", function() {
    $('#page-id').val($(this).data('page-id'));
    var preSelectedUserIds = $(this).data('user-id')
    if (typeof preSelectedUserIds === 'string') {
        preSelectedUserIds = preSelectedUserIds.split(',').map(s => s.trim()).filter(Boolean);
    }else if (typeof preSelectedUserIds === 'number') {
        preSelectedUserIds = [preSelectedUserIds.toString()];
    } else if (Array.isArray(preSelectedUserIds)) {
        preSelectedUserIds = preSelectedUserIds.map(id => id.toString());
    } else {
        preSelectedUserIds = [];
    }
    $.ajax({
        "url"      : "{{ url('get-email-list') }}",
        "type"     : 'POST',
        "dataType" : 'json',
        "data" :{
            _token: "{{csrf_token()}}",
        },
        success: function(response) {
            $("#metaAccounEmailList").empty()
            var emailList = '';
            let selectedEmails = [];
            response.forEach(function(data){
                const isSelected = preSelectedUserIds.includes(data.id.toString());
                const selectedAttr = isSelected ? 'selected' : '';
                emailList += `<option value="${data.id}" ${selectedAttr}>${data.email}</option>`;
                if (isSelected) selectedEmails.push(data.email)
            });
            $("#metaAccounEmailList").html(emailList);
            $('#metaAccounEmailList').multiselect('rebuild');
            $('#metaAccountSelectedEmail').text(selectedEmails.length ? selectedEmails.join('\n') : 'None');
        }
    });
});

// Update function
function updateRecord() {
    const metaUsersList = $('#metaAccounEmailList').val();
    const page_id = $('#page-id').val();
    $.ajax({
        "url": "{{ url('update-emails-page') }}",
        "dataType": "json",
        "type": "POST",
        "contentType": "application/json",
        "data": JSON.stringify({
            _token: "{{csrf_token()}}",
            page_id:page_id,
            metaUsersList:metaUsersList || [],
        }),
        success: function (response) {
            if(response.updated===1){
                toastr.success('User\'s Assigned to Pages Successfully!!');
                $('#metaAccountModal').modal('hide');
                meta_pagesdetails_list()
            } else {
                toastr.error('Failed to Update!!');
            }
        },
        error: function (xhr) {
            toastr.error('Failed to Update!!');
        }
    });
}

// Shared function to update display
function updateSelectedEmails() {
    const selectedOptions = $('#metaAccounEmailList option:selected');
    const selectedTexts = selectedOptions.map(function () {
        return $(this).text();
    }).get();

    $('#metaAccountSelectedEmail').text(selectedTexts.length ? selectedTexts.join("\n") : "None");
}

//all records displaying here
function meta_pagesdetails_list() {
    $("#metapagedetails").DataTable().clear().destroy();
    $('#metapagedetails').DataTable({
        "bAutoWidth": false,
        "lengthChange": false,
        "processing": true,
        "serverSide": true,
        "paging": true,
        "searching": true,
        "scrollX": true,
        "pageLength": 50,
        "lengthChange": false, 
        "ordering": true,
        "scrollY":  400,
        "scrollCollapse": true,
        "fixedHeader":{header: true},
        "language": { search: '', searchPlaceholder: "Search..." },
        "order": [
            [1, "desc"]
        ],
        "ajax": {
            "url": "{{ url('meta-pages') }}",
            "dataType": "json",
            "type": "POST",
            "data": {
                _token: "{{csrf_token()}}"
            },
        },
        "columnDefs": [
              { orderable: false, targets: 0 }
        ],
        "columns": [
            { data: "id",
                render: function(data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            { data: "page_name"},
            { data: "page_id"},
            { data: "category"},
            { data: "category_list"},
            @can('hasAddPermission') {
                data: "",
                render: function(data, type, row, meta) {
                    return `<button type="button" id="updateAdAccountUser" class="btn btn-sm btn-primary shadow-sm open-reject-modal" data-toggle="modal" data-target="#metaAccountModal" data-page-id="${row.page_id} "data-user-id="${row.user_id}">Assign Users</button>`;
                }
            }
            @endcan
        ],
        fnRowCallback: function(nRow, aData) {
            return nRow;
        },
        fnDrawCallback: function( settings ) {
            $('.paginate_button').click(function(){
                $('.dataTables_scrollBody').scrollTop(0);
            })
        }
    });
}
</script>
@endsection