@extends('layouts.app')
@section('title', 'Prospects Initial Data')

@section('content')
    <!-- <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script> -->
<style>
  .badge
{font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    font-family: "IBM Plex Sans", sans-serif;
    line-height: 1.5;}
    
  </style>


<!-- Main content -->
        <section class="content">

      <div class="row">

       
        
        <div class="col-12">
          <div class="box">
       
            <div class="box-body">           
    <!-- <div class="d-flex justify-content-between align-items-center"> -->
    <h4 class="box-title text-info mb-0"><i class="icon-Add-user"><span class="path1"></span><span class="path2"></span></i> Prospects Initial Data</h4>

        <!-- <h4 class="box-title"><i class="icon-Add-user"><span class="path1"></span><span class="path2"></span></i> </h4> -->


    <!-- </div> -->
    <hr class="my-15">


              <div class="table-responsive">
                <table id="tickets11" class="table mt-0 table-hover no-wrap" data-page-size="10">
                  <thead>
                            <tr>
                              <th>#</th>
                              <th>Name</th>                  
                              <th>Email</th>
                              <th>Phone Number</th>
                               <th>Company Name</th>
                               <th>Created At</th>


                            </tr>
                  </thead>
                  <tbody>
                
          

                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
   
<style>
.modal-dialog {
    max-width: 580px !important;   
    margin: auto;
    margin-top: 20px !important;
}
</style>



<style>
.custom-modal-width {
    max-width: 90% !important; 
    width: 780px !important;
}
</style>


<!-- Styles -->
<style>
  .modal .modal-content {
    background-color: #fff;
    font-family: 'Poppins', sans-serif;
    border-radius: 12px;
  }

  .modal-body .fw-semibold {
    font-weight: 500;
    font-size: 14px;
    color: #212529;
    margin-top: 4px;
  }

  .modal-body .text-muted {
    font-size: 12px;
    color: #6c757d;
  }

  .modal-body .d-flex .fs-5 {
    margin-top: 4px;
  }

  .modal-dialog {
    max-width: 750px;
  }

  .modal .modal-body {
    padding-top: 18px !important;
    padding-bottom: 4px !important;
  }

  .modal-header {
    padding-top: 10px !important;
    padding-bottom: 6px !important;
  }
</style>


 

      </div>
      <!-- /.row -->

    </section>
        <!-- /.content -->

        <script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
        
<script>
$(document).ready(function() {
    // Format mobile numbers
    $('.phone').each(function() {
        const phoneText = $(this).text();
        
        const countryCode = phoneText.slice(0, -10); // Extract the country code from the beginning
        const phoneNumber = phoneText.slice(-10); // Extract the last 10 digits

        const formattedMobile = `${countryCode}(${phoneNumber.substr(0, 3)})-${phoneNumber.substr(3, 3)}-${phoneNumber.substr(6)}`;
        
        $(this).text(formattedMobile);
    });
});
</script>



<script>
$(document).ready(function() {
    // Format mobile numbers
    $('.mobile').each(function() {
        const mobile = $(this).text();
        const formattedMobile = `(${mobile.substr(0, 3)}) ${mobile.substr(3, 3)}-${mobile.substr(6)}`;
        $(this).text(formattedMobile);
    });
});
</script>


<script>
document.querySelectorAll('.dropdown').forEach(dropdown => {
    dropdown.addEventListener('shown.bs.dropdown', function () {
        const menu = dropdown.querySelector('.dropdown-menu');
        document.body.appendChild(menu);
        menu.style.position = 'absolute';
        const rect = dropdown.getBoundingClientRect();
        menu.style.top = `${rect.bottom}px`;
        menu.style.left = `${rect.left}px`;
    });

    dropdown.addEventListener('hidden.bs.dropdown', function () {
        const menu = dropdown.querySelector('.dropdown-menu');
        dropdown.appendChild(menu); // Return the dropdown to its original place
        menu.style.position = '';
        menu.style.top = '';
        menu.style.left = '';
    });
});
</script>
  <script>
$(document).ready(function(){
    $('#tickets11').DataTable({
        processing: true,
        serverSide: true,
        searching: true, // enable searching
        ajax: "{{ url('prospects-initial-data') }}", // replace with your route
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex' },
            { data: 'name', name: 'name' },
            { data: 'email', name: 'email' },
            { data: 'phone_number', name: 'phone_number' },
            { data: 'company_name', name: 'company_name' },
            { data: 'created_at', name: 'created_at' },

        ],

              language: {
    processing: `
        <span style="display:flex; align-items:center; justify-content:center; gap:8px;">
            <img src="https://i.gifer.com/ZZ5H.gif"
                 alt="Loading..." style="width:20px; height:20px;">
            Processing...
        </span>
    `
}

    });
});
</script>

@endsection