@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;
    }
    #brandName_Meta::placeholder {
        color: #ccc;   /* or any light gray */
        opacity: 1;    /* ensures it’s not faded */
    }
</style>
<style>
  .modal-md-custom {
    max-width: 600px; /* Medium width between default (~500px) and modal-lg (800px) */
  }

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

  .form-control:read-only {
    background-color: #3a3a3a !important;
    cursor: not-allowed;
  }

  .modal-content {
    padding: 1.5rem;
  }

  .modal-footer button {
    min-width: 90px;
  }

  .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;
    }
  }
.access_token {
    display: flex;
    justify-content: space-between;  /* token on left, copy button on right */
    align-items: center;
    padding: 10px;
    border: 1px solid #DEE2E6;
    border-radius: 5px;
    background-color: #F8F9FA;
    min-width: 0; /* important for flex wrapping */
    gap: 10px;
}

.token-text {
    flex: 1;       /* take up remaining space */
    min-width: 0;  /* allow wrapping */
}

.access_token .text {
    word-break: break-all;
    white-space: normal;
    display: block;
}

.copy-button {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
}



</style>
<div id="pageLoader" 
     style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; 
            background:rgba(0,0,0,0.5); z-index:9999; text-align:center; padding-top:20%;">
    <div class="spinner-border text-light" role="status" style="width:3rem; height:3rem;">
        <span class="sr-only">Loading...</span>
    </div>
</div>

<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"> --}}
                    
                    

                <div class="col-md-9 d-flex align-items-start">
                    <!-- Token box with copy button inside -->
                    <div class="access_token flex-grow-1 mx-3">
                        <div class="token-text">
                            <label for="meta_access_token" class="meta_access"><strong>Meta Access Token :</strong></label>
                            <span class="text" id="meta_access_token">{{ $meta }}</span>
                        </div>
                        <button class="copy-button ms-2" id="copy_url">
                            <i class="fas fa-copy"></i>
                        </button>
                    </div>
                </div>

                <!-- Refresh button -->
                <div>
                    <button type="submit" 
                            class="refresh_ad_account btn-md btn excel-btn border-radius-0 me-3" 
                            style="line-height:1.5">
                        Refresh
                    </button>
                </div>




                {{-- </div> --}}
            </div>
            <table class="table-bordered table-hover top" id="accountdetails">
                <thead>
                    <tr>
                        <th>Sl.No</th>
                        <th>Account Name</th>
                        <th>Ad Account Id</th>
                        <th>Email ID</th>
                        <th>Brand Name</th>
                        <th>UserName</th>
                        <th>User ID</th>
                        <th>Account Status</th>
                        <th>Webhook Status</th>
                        @can('hasAddPermission')
                        <th>Action</th>
                        @endcan
                        <th>Create Audience</th>
                        <th>Upload GAID</th>
                        <th>Audience List</th>
                        <th>Redirection URL</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

<!-- Modal Error -->
<div class="modal fade" tabindex="-1" role="dialog" id="failed_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>Error</strong></h5>
            </div>
            <div class="modal-body">
                <form id="postbackForm">
                    <div class="form-group">
                        <p id="error_message"></p>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <div>
                    <button type="button" class="btn btn-sm btn-primary shadow-sm open-reject-modal" 
        style="width:120px" data-dismiss="modal">Close</button>
                </div>
                <div id="create_audience">

                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal end error -->

<!-- Upload Gaid Modal -->
<div class="modal fade" id="UploadGaidModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog Audience_modal" style="width:100% !important;">
        <form id="upload_gaid_list" enctype="multipart/form-data">
            <div class="modal-content audience_content">
                <div class="modal-header">
                    <h5 class="modal-title"><b>Create Audience Group</b></h5>
                    <!-- Upload API errors will appear here -->
                    <div id="uploadExistingError" class="alert alert-danger" style="display:none;"></div>
                </div>

                <div class="modal-body">
                    <!-- Audience status list -->
                    <div id="audienceStatusList" class="mb-3"></div>
                    <p class="text-muted mb-4">
                        <b>Is your audience group list prepared correctly?</b><br>
                        Columns that are not formatted correctly in your gaid file can result in errors.
                    </p>
                    <!-- Download Sample -->
                    <div class="mb-4 mt-2 Download-btn">
                        <a href="{{ url('FeedSampleGaid/sample_gaid_file.csv') }}" class="btn btn-outline-primary" download>
                            <i class="fa fa-download"></i> Download Sample GAID
                        </a>
                    </div>

                    <!-- File Upload with Drag & Drop -->
                    <div id="gaids-drop-area" 
                         class="text-center gaids-upload-container mb-4 p-3"
                         style="border:2px dashed #ccc; border-radius:8px; cursor:pointer; transition: border-color 0.3s ease;">
                        <p class="text-muted">Supported formats: CSV / TXT</p>
                        <div>
                            Drag and drop to upload<br>
                            Or <label for="upload_gaid_ids" class="text-primary" style="cursor:pointer;">choose file</label>
                            <input type="file" name="gaid_file" id="upload_gaid_ids" accept=".csv,.txt" style="display:none;">
                            <p id="selectedFile" class="small text-muted mt-2"></p>
                        </div>
                    </div>

                    <!-- Audience Name -->
                    <div class="form-group">
                        <label><b>Audience name</b></label>
                        <input class="form-control" type="text" id="gaid_ids_text" onkeyup="checkAudience()" placeholder="Enter Audience Group Name" required>
                        <input type="hidden" id="accountID">
                        <!-- Audience check message -->
                        <small id="audienceCheckMessage" class="d-block mt-1"></small>
                    </div>

                    <!-- General Upload Errors -->
                    <div id="uploadError" class="alert alert-danger" style="display:none;"></div>
                </div>

                <div class="modal-footer gaidFooter">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-success">Submit</button>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- Upload Gaid Modal end -->

<!-- Upload Gaid Modal -->
<div class="modal fade" id="ShowAudienceListModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document"> <!-- ✅ full-width modal -->
        <div class="modal-content audience_content">
            <div class="modal-header">
                <h5 class="modal-title"><b id="ad_account_id"> </b></h5>
                <!-- Upload API errors will appear here -->
                <div id="audienceError" class="alert alert-danger" style="display:none;"></div>
            </div>

            <div class="modal-body">
                <!-- Audience status list -->
                <div id="audienceFullList" class="mb-3"></div>
            </div>

            <div class="modal-footer gaidFooter">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- Upload Gaid Modal end -->

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="confirmDeleteAudience" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header bg-danger text-white">
        <h5 class="modal-title">Confirm Delete</h5>
        <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
        <input type="hidden" id="deleteAudienceID">
      </div>
      <div class="modal-body">
        <p>Are you sure you want to delete this audience group?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
        <button type="button" id="confirmDeleteBtn" class="btn btn-danger btn-sm">Delete</button>
      </div>
    </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"> <!-- Custom Medium Size -->
    <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 or Confirm Email</h4>
        <div class="row g-3">
            <input type="hidden" name="account-id" id="account-id">
            <input type="hidden" name="user-id" id="user-id">
            <!-- Email Dropdown -->
            <div class="col-md-12 mb-3">
                <label for="metaAccountEmailInput" class="form-label text-white">Select Email</label>
                <input class="form-control bg-secondary text-white border-0 p-2" list="metaAccountEmailList" id="metaAccountEmailInput" placeholder="Select Email for Update">
                <datalist id="metaAccountEmailList"></datalist>
            </div>
            <!-- Readonly Email Display -->
            <div class="col-md-12 mb-4">
                <label for="metaAccountModalEmail" class="form-label">Current Email</label>
                <input readonly type="text" class="form-control bg-secondary text-white border-0 p-2" id="metaAccountModalEmail" />
            </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 -->

<!-- Add brand name start-->
<div class="modal fade" id="addMetaBrandname" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static">
  <div class="modal-dialog modal-md-custom" role="document"> <!-- Custom Medium Size -->
    <div class="modal-content bg-dark text-white rounded shadow-lg border-0 p-3">
      
      <!-- Form Start -->
      <form id="brandNameForm" onsubmit="return false;"> 
        <!-- Modal Body -->
        <div class="modal-body">
          <h4 class="mb-4 border-bottom pb-2">Enter Brand Name</h4>
          <div class="row g-3">
              <div class="col-md-12 mb-3">
                  <input type="text" 
                         class="form-control bg-secondary text-white border-0 p-2" 
                         placeholder="Enter Brand Name" 
                         id="brandName_Meta" 
                         maxlength="100">
                  <input type="hidden" id="brandName_accID">
              </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="submit" class="btn btn-primary btn-md px-4 text-white">
            Submit
          </button>
        </div>
      </form>
      <!-- Form End -->

    </div>
  </div>
</div>
<!-- Add brand name end -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<script type="application/javascript">

$(document).ready(function() {
    adaccountsdetails_list();
});

const input = document.getElementById('metaAccountEmailInput');
const dataList = document.getElementById('metaAccountEmailList');
const userIdInput = document.getElementById('user-id');
input.addEventListener('input', () => {
    const inputValue = input.value;
    const options = dataList.querySelectorAll('option');

    for (let option of options) {
        if (option.value === inputValue) {
            const label = option.getAttribute('data-label');
            const dataId = option.getAttribute('data-id');
            userIdInput.value = dataId;
            break;
        }
    }
});

$(document).on('click',"#updateAdAccountUser", function() {
    const email = $(this).data("email");
    const account_id = $(this).data("account-id");
    $('#metaAccountModalEmail').val(email??'NA');
    $('#account-id').val(account_id);
    $('#metaAccountEmailInput').val('');
    $('#user-id').val('');
});

$(document).on('click',".refresh_ad_account", function() {
    $.ajax({
        url: "{{ url('refreshAdAccounts') }}",
        type: "GET",
        dataType: "json",
        success: function(response) {
            adaccountsdetails_list();
        }
    });
});
//all records displaying here
function adaccountsdetails_list() {
    $("#accountdetails").DataTable().clear().destroy();
    $('#accountdetails').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-ad-accounts') }}",
            "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: "account_name"},
            { data: "account_id"},
            { data: "email",
                render: function(data, type, row, meta){
                    return row.email??'NA';
                }
            },
            { data: "brand_name",
                render: function(data, type, row, meta) {
                    return `<div id="brand_cell_${row.account_id}" style="text-align: center;">${row.brand_name ? row.brand_name : ""} &nbsp;<i class="fa fa-edit" style="cursor:pointer;color:blue;" onclick="showBrandNameModal('${row.account_id}','${row.brand_name ? row.brand_name : ""}')"></i></div>`;
                }
            },
            { data: "username",
                render: function(data, type, row, meta){
                    return row.username??'NA';
                }
            },
            { data: "user_id",
                render: function(data, type, row, meta){
                    return row.user_id!='0' ? row.user_id : 'NA';
                }
            },
            { data: "account_status",
                render: function(data, type, row, meta){
                    var accountStatus = row.account_status == 1 ? 'Active' : row.account_status == 2 ? 'Disabled' : row.account_status == 3 ? 'Unsettled' : row.account_status == 7 ? 'Pending Risk Review' : row.account_status == 8 ? 'Pending Settlement' : row.account_status == 9 ? 'In Grace Period' : row.account_status == 100 ? 'Pending Closure' : row.account_status == 101 ? 'Closed' : row.account_status == 201 ? 'Any Active' : row.account_status == 202 ? 'Any Closed' : 'NA';
                    if(row.account_status == 1){
                        data = `<span class="text-success approve-span-'+row.id+'">${accountStatus}</span>`;
                    }else{
                        data = `<span class="text-danger reject-span-'+row.id+'">${accountStatus}</span>`;
                    }
                return data;
                }
            },
            { data: "is_subscribed",
                render: function(data, type, row, meta){
                    var webhookStatus = row.is_subscribed == 1 ? 'Enabled' : 'Not Enabled';
                    if(row.is_subscribed == 1){
                        data = `<span class="text-success approve-span-'+row.id+'">${webhookStatus}</span>`;
                    }else{
                        data = `<span class="text-danger reject-span-'+row.id+'">${webhookStatus}</span>`;
                    }
                return data;
                }
            },
            @can('hasAddPermission') {
                data: "user_id",
                render: function(data, type, row, meta) {
                    return `<button type="button" id="updateAdAccountUser" onclick="getEmailList()" class="btn btn-sm btn-primary shadow-sm open-reject-modal" data-toggle="modal" data-target="#metaAccountModal" data-account-id="${row.account_id}" data-email="${row.email}">Assign Users</button>`;
                }
            },
            @endcan
            { data: "user_id",
                render: function(data, type, row, meta) {
                    if(row.user_id) {
                        if(row.gaid_status == 0){
                            return `<button type="button" onclick="getAccountId(this, ${row.account_id})" 
                                class="btn btn-sm btn-primary shadow-sm open-reject-modal" 
                                style="width:120px">
                                Create Audience 
                            </button>`;
                        }
                        else if(row.gaid_status == 3){
                            return `<button type="button"
                                    class="btn btn-sm btn-danger shadow-sm open-reject-modal"
                                    style="width:120px"
                                    id="failed-btn-${row.account_id}"
                                    data-account-id="${row.account_id}"
                                    data-gaid-response="${row.gaid_response}"
                                    onclick="showModal(this.dataset.accountId, this.dataset.gaidResponse)">
                                    Failed
                            </button> `;
                        }
                        else if(row.gaid_status == 2){
                            return `<button type="button"class="btn btn-sm btn-success shadow-sm open-reject-modal" style="width:120px">Audience Ready </button>`
                        }
                        else if(row.gaid_status == 1){
                            return `<button type="button" class="btn btn-sm shadow-sm open-reject-modal" style="background: #ff8e01 !important;color: white;width:120px" disabled>Processing... </button>`;
                        }
                    } else {
                        return `<span data-bs-toggle="tooltip" data-bs-placement="top" title="Assign user first">
                                    <button type="button" 
                                            class="btn btn-sm btn-secondary shadow-sm open-reject-modal" 
                                            style="width:120px" 
                                            disabled>
                                        Create Audience
                                    </button>
                                </span>`;
                    }
                }
            },
            { data: "user_id",
                render: function(data, type, row, meta) {
                    if(row.user_id && (row.upload_gaid_status == 2 || row.upload_gaid_status == 0)) {
                         return `<button type="button"
                                id="upload-btn-${row.account_id}"
                                class="btn btn-sm btn-primary shadow-sm"
                                style="width:120px"
                                onclick="showUploadGaidModal(${row.account_id})">
                                Upload CSV
                            </button>`;
                    } else if(row.upload_gaid_status == 1) {
                        pollGaidProgress(row.account_id)
                    return `
                            <div class="progress position-relative" id="progress-${row.account_id}" style="width:120px;height:30px;">
                                <!-- progress bar has no text inside -->
                                <div class="progress-bar progress-bar-striped progress-bar-animated" 
                                    role="progressbar" style="width:0%"></div>

                                <!-- overlay label is centered and always visible -->
                                <span class="progress-label position-absolute w-100 text-center" 
                                    style="top:0; left:0; line-height:30px; font-weight:500; color:#000; z-index:2;">
                                    Processing 0%
                                </span>
                            </div>
                        `;
                    } else if(row.user_id && row.upload_gaid_status == 3){
                        return `<button type="button"
                                id="upload-btn-${row.account_id}"
                                class="btn btn-sm btn-primary shadow-sm"
                                style="width:120px"
                                onclick='showUploadGaidModal(${row.account_id}, \`${row.upload_gaid_response}\`)'>
                                Upload CSV
                            </button>`;
                    }
                    return `<button type="button"
                                class="btn btn-sm btn-secondary shadow-sm"
                                style="width:120px"
                                data-toggle="tooltip"
                                data-placement="top"
                                title="Assign User First"
                                disabled>
                                Upload CSV
                            </button>`;
                }
            },
            { data: "user_id",
                render: function(data, type, row, meta) {
                    if(row.user_id) {
                         return `<button type="button"
                                id="audience-list-btn-${row.account_id}"
                                class="btn btn-sm btn-primary shadow-sm"
                                style="width:120px"
                                onclick="showAudienceList(${row.account_id},'${row.account_name}')">
                                Audience List
                            </button>`;
                    }
                    return `<button type="button"
                            class="btn btn-sm btn-secondary shadow-sm"
                            style="width:120px"
                            disabled
                            data-toggle="tooltip"
                            data-placement="top"
                            title="Assign User First">
                        Audience List
                    </button>`;
                }
            },
            {
                title: 'Redirection URL',
                data: 'id',
                render: function(data, type, row, meta){
                return `<button type="button" onclick="adAccountRedirect(${row.account_id})" 
                        class="btn btn-sm btn-primary shadow-sm open-reject-modal" 
                        style="width:120px">
                        Redirect 
                    </button>`;
                 }
            }
        ],
        fnRowCallback: function(nRow, aData) {
            return nRow;
        },
        fnDrawCallback: function( settings ) {
            $('.paginate_button').click(function(){
                $('.dataTables_scrollBody').scrollTop(0);
            })
        }
    });
}
$(function () {
  $('[data-toggle="tooltip"]').tooltip();
});


// Update function
function updateRecord() {
    const metaUsersId = $('#user-id').val();
    const account_id = $('#account-id').val();
    $.ajax({
        "url": "{{ url('update-emails-account') }}",
        "dataType": "json",
        "type": "POST",
        "contentType": "application/json",
        "data": JSON.stringify({
            _token: "{{csrf_token()}}",
            account_id:account_id,
            metaUsersId:metaUsersId || [],
        }),
        success: function (response) {
            if(response.updated===1){
                toastr.success('User Assigned to Ad Account Successfully!!!');
                $('#metaAccountModal').modal('hide');
                adaccountsdetails_list();
            } else {
                toastr.error('Failed to Update!!');
            }
        },
        error: function (xhr) {
            toastr.error('Failed to Update!!!');
        }
    });
}

// Handle form submit (Enter key OR button click)
$('#brandNameForm').on('submit', function(e) {
    e.preventDefault(); // stop page reload
    const brand_name    =   $('#brandName_Meta').val();
    const account_id    =   $('#brandName_accID').val();
    $.ajax({
        "url": "{{ url('update-brandname-meta') }}",
        "dataType": "json",
        "type": "POST",
        "contentType": "application/json",
        "data": JSON.stringify({
            _token      :   "{{csrf_token()}}",
            account_id  :   account_id,
            brand_name  :   brand_name,
        }),
        success: function (response) {
            if(response.updated===1){
                toastr.success('Brand name Assigned to Ad Account Successfully!!!');
                $('#addMetaBrandname').modal('hide');
                $(`#brand_cell_${account_id}`).html(`
                    ${brand_name} &nbsp;
                    <i class="fa fa-edit" style="cursor:pointer;color:blue;" 
                    onclick="showBrandNameModal('${account_id}','${brand_name}')"></i>
                `);
            } else {
                toastr.error('Failed to Update!!');
            }
        },
        error: function (xhr) {
            toastr.error('Failed to Update!!!');
        }
    });
});

//
function showBrandNameModal(id, brand) {
    $('#addMetaBrandname').modal('show');
    $('#brandName_accID').val(id);

    if (!brand || brand.trim() === "") {
        $('#brandName_Meta').val('');  // clear input
    } else {
        $('#brandName_Meta').val(brand); // set input
    }
}

// Load Email Listy
function getEmailList() {
    $.ajax({
        "url"      : "{{ url('get-email-list') }}",
        "type"     : 'POST',
        "dataType" : 'json',
        "data" :{
            _token: "{{csrf_token()}}",
        },
        success: function(response) {
            $("#metaAccountEmailList").empty()
            var emailList = '';
            response.forEach(function(data){
                emailList +=`<option value="${data.email}" data-id=${data.id}></option>`;
            });
            $("#metaAccountEmailList").html(emailList);
        }
    });
}
function getAccountId(btn, id) {
    $.ajax({
        url: "{{ url('startMetaAudienceProcess') }}",
        type: 'POST',
        dataType: 'json',
        data: {
            _token: "{{csrf_token()}}",
            account_id: id,
        },
        beforeSend: function() {
            // Change modal button immediately
            $(btn).replaceWith(
                `<button type="button" class="btn btn-sm shadow-sm" 
                    style="background:#ff8e01 !important;color:white;width:120px" disabled>
                    Processing...
                </button>`
            );

            // Change original Failed button in the table
            $(`#failed-btn-${id}`).replaceWith(
                `<button type="button" class="btn btn-sm shadow-sm" 
                    style="background:#ff8e01 !important;color:white;width:120px" disabled>
                    Processing...
                </button>`
            );
        },
        success: function(response) {
            // Optional: you can also auto-close the modal after success
            $('#failed_modal').modal('hide');
        }
    });
}

function showModal(id, message) {
    $('#failed_modal').modal('show');
    var create_audience = `
        <button type="button" onclick="getAccountId(this, ${id})" 
            class="btn btn-sm btn-primary shadow-sm open-reject-modal" 
            style="width:120px">
            Create Audience
        </button>`;
    $('#error_message').html(makeLinksClickable(message));
    $('#create_audience').html(create_audience);
}
function makeLinksClickable(text) {
  const urlRegex = /(https?:\/\/[^\s]+)/g;
  return text.replace(urlRegex, function(url) {
    return '<a href="' + url + '" target="_blank" rel="noopener noreferrer">' + url + '</a>';
  });
}
document.addEventListener("DOMContentLoaded", function(){
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl)
    })
});

// function showUploadGaidModal(id,error_msg) {
//     $('#UploadGaidModal').modal('show');
//     $('#accountID').val(id);
//     $('#uploadExistingError').val(error_msg);
// }
function showAudienceList(accountId,accName) {
    $('#ad_account_id').text("Ad Account " + accName);
    let formData = new FormData();
    formData.append('_token', '{{ csrf_token() }}');
    formData.append('account_id', accountId);
    // ✅ Show loader before ajax
    $("#pageLoader").show();
    $.ajax({
        url: "{{ url('getAllAudienceList') }}",
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(res) {
            if (res && res.data && res.data.length > 0) {
                let audienceHtml = `
                    <div class="table-responsive"> <!-- ✅ fixes side scroll -->
                        <table id="audienceTable" class="table table-sm table-bordered mb-0 w-100">
                            <thead>
                                <tr>
                                    <th>S.No</th>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th>Created On</th>
                                    <th>Updated On</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>`;

                function formatDate(ts) {
                    if (!ts) return "-";
                    let d = new Date(ts * 1000);
                    return d.toLocaleString();
                }

                res.data.forEach((row, index) => {
                    audienceHtml += `
                        <tr>
                            <td>${index + 1}</td>
                            <td>${row.name}</td>
                            <td>${row.subtype}</td>
                            <td>${formatDate(row.time_created)}</td>
                            <td>${formatDate(row.time_updated)}</td>
                            <td style="text-align:center;">
                                <i class="fa fa-trash text-danger" style="cursor:pointer;" 
                                data-id="${row.id}" 
                                onclick="askDeleteAudience('${row.id}')"></i>
                            </td>
                        </tr>`;
                });

                function formatDate(ts) {
                    if (!ts) return "-";
                    let d = new Date(ts * 1000);
                    return d.toLocaleString("en-GB", {
                        day: "2-digit",
                        month: "2-digit",
                        year: "numeric",
                        hour: "numeric",
                        minute: "2-digit",
                        hour12: true
                    });
                }

                audienceHtml += `</tbody></table></div>`;

                $('#audienceFullList').html(audienceHtml);

                // ✅ Initialize DataTable
                $('#audienceTable').DataTable({
                    pageLength: 10,
                    lengthChange: false,   // hide "Show entries"
                    ordering: false,       // disable column sorting
                    searching: true,       // ✅ search bar enabled
                    info: false,           // hide "Showing 1 to X"
                    autoWidth: false,      // fix auto column sizing
                    language: {
                        search: "_INPUT_",
                        searchPlaceholder: "Search audience..."
                    }
                });

                // ✅ Show modal after table init
                $("#ShowAudienceListModal").modal("show");
            } else {
                $('#audienceFullList').html('<p class="text-warning">No audiences found.</p>');
                $("#ShowAudienceListModal").modal("show");
            }
        },
        error: function(err) {
            console.error("Error fetching audiences:", err);
            $('#audienceFullList').html('<p class="text-danger">Failed to load audiences.</p>');
            $("#ShowAudienceListModal").modal("show");
        },
        complete: function() {
            // ✅ Always hide loader (success or error)
            $("#pageLoader").hide();
        }
    });
}


function askDeleteAudience(accID) {
    $("#confirmDeleteAudience").modal("show");
    $('#deleteAudienceID').val(accID)
}

$("#confirmDeleteBtn").on("click", function() {
    let audienceToDelete = document.getElementById('deleteAudienceID').value;
    if (!audienceToDelete) return;

    let formData = new FormData();
    formData.append('_token', '{{ csrf_token() }}');
    formData.append('account_id', audienceToDelete);

    $("#pageLoader").show();

    $.ajax({
        url: "{{ url('deleteAudienceGroup') }}",
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(res) {
            if (res.success) {
                toastr.success('Audience deleted successfully!');
                // Remove row from DataTable without refreshing
                $('#audienceTable')
                    .DataTable()
                    .row($(`i[data-id="${audienceToDelete}"]`).parents("tr"))
                    .remove()
                    .draw();
            } else {
                toastr.error('Failed to delete audience!');
            }
        },
        error: function(err) {
            toastr.error('Error deleting audience!');
        },
        complete: function() {
            $("#pageLoader").hide();
            $("#confirmDeleteAudience").modal("hide");
            audienceToDelete = null;
        }
    });
});

function showUploadGaidModal(accountId, gaidResponseJson) {
    $('#audienceStatusList').html('');
    $('#gaid_ids_text').val('');
    $('#accountID').val('');
    $('#upload_gaid_ids').val(''); // clear file input
    $('#selectedFile').text('');
    $('#audienceCheckMessage').text('');
    $('#uploadError').hide().text('');
    $('#uploadExistingError').hide().text('');
    $('#UploadGaidModal').modal('show');
    $('#accountID').val(accountId);

    // Parse JSON safely
    let gaidResponse = {};
    try { gaidResponse = JSON.parse(gaidResponseJson); } catch(e) {}

    let formData = new FormData();
    formData.append('_token', '{{ csrf_token() }}');
    formData.append('account_id', accountId);

    $.ajax({
        url: "{{ url('checkExistingAudienceList') }}",
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(res) {
            let audienceHtml = `
                <div style="max-height: 200px; overflow-y: auto;"> 
                    <table class="table table-sm table-bordered mb-0" style="text-align:center;">
                        <thead>
                            <tr>
                                <th>Audience</th>
                                <th>Status</th>
                                <th>Valid Gaid</th>
                                <th>Invalid Gaid</th>
                            </tr>
                        </thead>
                        <tbody>`;

            // ✅ From DB audiences
            if (res && res.length > 0) {
                res.forEach(row => {
                    let badge = row.status == 1
                        ? `<span class="badge badge-success">Success</span>`
                        : `<span class="badge badge-danger">Failed</span>`;
                    audienceHtml += `<tr><td>${row.audience_name}</td><td>${badge}</td><td>${row.valid_gaid_uploaded_count}</td><td>${row.invalid_gaid_uploaded_count}</td></tr>`;
                });
            }

            // ✅ From GAID response error
            if (gaidResponse && gaidResponse.audience_name) {
                let errMsg = gaidResponse?.details?.error?.message || gaidResponse.error || "Unknown error";
                let infoIcon = `<i class="fa fa-info-circle text-muted ml-1" data-toggle="tooltip" title="${errMsg}"></i>`;
                audienceHtml += `<tr>
                    <td>${gaidResponse.audience_name}</td>
                    <td><span class="badge badge-danger">Failed</span> ${infoIcon}</td>
                </tr>`;
            }

            audienceHtml += `</tbody></table></div>`;
            $('#audienceStatusList').html(audienceHtml);

            // Activate Bootstrap tooltip
            $('[data-toggle="tooltip"]').tooltip();

        },
        error: function(err) {
            console.error("Error fetching audiences:", err);
            $('#audienceStatusList').html('<p class="text-danger">Failed to load audiences.</p>');
        }
    }); 
}


// Handle submit
$('#upload_gaid_list').on('submit', function(e) {
    e.preventDefault();

    let accountId    = $('#accountID').val();
    let audienceName = $('#gaid_ids_text').val().trim();
    let fileInput    = $('#upload_gaid_ids')[0].files[0];
    let valid        = true;

    // Reset previous errors
    $('#uploadError').hide().text('');

    // ✅ Validate Audience Name
    if (audienceName === '') {
        $('#uploadError').show().text("Please enter an audience name.");
        valid = false;
    }

    // ✅ Validate File Selection
    if (!fileInput) {
        $('#uploadError').show().text("Please select a GAID file to upload.");
        valid = false;
    } else {
        // ✅ Check File Extension
        let allowed = ['csv', 'txt'];
        let ext = fileInput.name.split('.').pop().toLowerCase();
        if (!allowed.includes(ext)) {
            $('#uploadError').show().text("Invalid file format. Only CSV or TXT allowed.");
            valid = false;
        }
    }

    if (!valid) {
        return; // ❌ Stop submission
    }

    let formData = new FormData();
    formData.append('_token', '{{ csrf_token() }}');
    formData.append('account_id', accountId);
    formData.append('audience_name', audienceName);
    formData.append('gaid_file', fileInput);

    $.ajax({
        url: "{{ url('startUploadGaidProcess') }}",
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(res) {
            $('#UploadGaidModal').modal('hide');

            let btn = $(`#upload-btn-${accountId}`);
            btn.replaceWith(`
                <div class="progress" id="progress-${accountId}" style="width:120px;height:30px;">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" 
                         role="progressbar" style="width:0%">0%</div>
                </div>
            `);
            pollGaidProgress(accountId);
        },
        error: function(xhr) {
            if (xhr.responseJSON && xhr.responseJSON.message) {
                toastr.error(xhr.responseJSON.message);
            } else {
                toastr.error("Something went wrong!");
            }
        }
    });
});


// Polling function
function pollGaidProgress(accountId) {
    $.get(`gaid_progress/${accountId}`, function(res) {
        if (res.status) {
            let completedJobs = res.completed_jobs;
            let totalJobs = res.total_jobs;
            let status = res.upload_status;

            // calculate percentage (force minimum 0)
            let percent = (totalJobs === 0) 
                ? 0 
                : (completedJobs / totalJobs) * 100;

            percent = percent > 100 ? 100 : percent;

            let bar = $(`#progress-${accountId} .progress-bar`);
            let label = $(`#progress-${accountId} .progress-label`);
            label.text('Processing ' + Math.round(percent) + '%');

            let container = $(`#progress-${accountId}`);
            // let label = container.find(".progress-label");

            if (status == 1) { // Processing
                bar.removeClass("bg-success bg-danger")
                .addClass("progress-bar-orange progress-bar-animated text-dark fw-bold")
                .css("width", (percent || 5) + "%")
                .css("opacity", "0.7") // ✅ makes the text look like background
                .text();
                label.text('Processing ' + Math.round(percent) + '%'); // <-- insert this
                setTimeout(() => pollGaidProgress(accountId), 5000);
            } else if (status == 2) { // Done
                bar.removeClass("progress-bar-animated progress-bar-orange bg-danger")
                   .addClass("bg-success")
                   .css("width", "100%");

                label.text("Done");

                // Replace with button after 3s
                setTimeout(() => {
                    container.replaceWith(`
                        <button type="button"
                            id="upload-btn-${accountId}"
                            class="btn btn-sm btn-primary shadow-sm"
                            style="width:120px"
                            onclick="showUploadGaidModal(${accountId})">
                            Upload CSV
                        </button>
                    `);
                }, 3000);

            } else if (status == 3) { // Failed
                bar.removeClass("progress-bar-animated progress-bar-orange bg-success")
                   .addClass("bg-danger")
                   .css("width", "100%");

                label.text("Failed");

                // Replace with button after 3s
                setTimeout(() => {
                    container.replaceWith(`
                        <button type="button"
                            id="upload-btn-${accountId}"
                            class="btn btn-sm btn-primary shadow-sm"
                            style="width:120px"
                            onclick="showUploadGaidModal(${accountId})">
                            Upload CSV
                        </button>
                    `);
                }, 3000);
            }
        }
    });
}

// Show selected filename
$('#upload_gaid_ids').on('change', function() {
    let fileName = this.files.length ? this.files[0].name : '';
    $('#selectedFile').text(fileName ? `Selected: ${fileName}` : '');
});

// Audience check feedback
function checkAudience() {
    let accountId = $('#accountID').val();
    let audienceName = $('#gaid_ids_text').val().trim();

    if (!audienceName) {
        $('#audienceCheckMessage').text('').removeClass("text-danger text-success");
        return;
    }

    let formData = new FormData();
    formData.append('_token', '{{ csrf_token() }}');
    formData.append('account_id', accountId);
    formData.append('audience_name', audienceName);
    let new_audience = '✅ New Audience Group with name "' + audienceName + '" will be created';

    $.ajax({
        url: "{{ url('checkExistingAudience') }}",
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(res) {
            if (res === true || res === "true") {
                $('#audienceCheckMessage')
                    .removeClass("text-success")
                    .addClass("text-success")
                    .text("This audience name already exists. These GAIDs will be added to the existing group.");
            } else {
                $('#audienceCheckMessage')
                    .removeClass("text-success")
                    .addClass("text-success")
                    .text(new_audience);
            }
        },
        error: function() {
            $('#audienceCheckMessage')
                .removeClass("text-success")
                .addClass("text-danger")
                .text("Error checking audience");
        }
    });
}

function adAccountRedirect(accNO) {
    let url = `https://adsmanager.facebook.com/adsmanager/manage/campaigns?global_scope_id=1301304427783329&business_id=1301304427783329&act=${accNO}`;
    window.open(url, '_blank'); // opens in new tab
}

document.addEventListener("DOMContentLoaded", function () {
    const dropArea = document.getElementById("gaids-drop-area");
    const fileInput = document.getElementById("upload_gaid_ids");
    const selectedFile = document.getElementById("selectedFile");

    // Prevent default drag behaviors
    ["dragenter", "dragover", "dragleave", "drop"].forEach(eventName => {
        dropArea.addEventListener(eventName, e => e.preventDefault(), false);
        document.body.addEventListener(eventName, e => e.preventDefault(), false);
    });

    // Highlight border on dragover
    ["dragenter", "dragover"].forEach(eventName => {
        dropArea.addEventListener(eventName, () => dropArea.style.borderColor = "#0d6efd", false);
    });
    ["dragleave", "drop"].forEach(eventName => {
        dropArea.addEventListener(eventName, () => dropArea.style.borderColor = "#ccc", false);
    });

    // Handle dropped files
    dropArea.addEventListener("drop", e => {
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            fileInput.files = files; // Assign dropped file to hidden input
            selectedFile.textContent = `Selected: ${files[0].name}`;
        }
    });

    // Handle manual file selection
    fileInput.addEventListener("change", () => {
        if (fileInput.files.length > 0) {
            selectedFile.textContent = `Selected: ${fileInput.files[0].name}`;
        }
    });
});

$("body").on("click", "#copy_url", function() {
    copyToClipboard("#meta_access_token", this);
});

function copyToClipboard(textElementId, buttonElement) {
    event.preventDefault();
    const textToCopy = $(textElementId).text();
    const tempInput = $("<input>");
    $("body").append(tempInput);
    tempInput.val(textToCopy).select();
    document.execCommand("copy");
    tempInput.remove();

    const copyButton = $(buttonElement);
    copyButton.text('Copied');
    setTimeout(function() {
        copyButton.html('<i class="fas fa-copy"></i>');
    }, 2000); // 2 seconds delay
}

</script>
@endsection