a:5:{s:7:"#markup";O:25:"Drupal\Core\Render\Markup":1:{s:9:"*string";s:5457:"<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>

  .client-profile {
    max-width: 1200px;
    margin: 30px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }

  .client-profile header {
    text-align: left;
    margin-bottom: 30px;
  }

  .client-profile .business-name {
    font-size: 2.2rem;
    font-weight: 700;
    color: #2c3e50;
  }

  .client-profile .client-type {
    color: #7f8c8d;
    margin-top: 5px;
  }


  .contact-info .info-item {
    margin-bottom: 15px;
    color: #34495e;
  }

  .contact-info .info-item i {
    font-size: 1.5rem;
    color: #2980b9;
    margin-right: 10px;
  }

  .contact-info .info-item a {
    color: #2980b9;
  }

  /* Adjust layout on smaller screens */
  @media (max-width: 768px) {
    .contact-info .info-item {
      width: 100%;
    }
  }

  /* Digital solutions */
  .digital-solutions {
    margin-bottom: 30px;
  }

  .digital-solutions h2 {
    font-weight: 600;
    color: #34495e;
    margin-bottom: 15px;
  }

  .digital-solutions ul {
    list-style-type: none;
    padding: 0;
  }

  .digital-solutions li {
    color: #2980b9;
    margin-bottom: 8px;
  }

  .digital-solutions a {
    color: #2980b9;
    text-decoration: none;
  }

  /* Invoices and Chart Section */
  .invoices {
    margin-bottom: 40px;
  }
  .invoices h2 {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 20px;
    text-align: center;
  }

  /* Change the grid layout to flexbox */
  .grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .grid a {
    flex: 1;
    min-width: 250px;
    text-decoration: none;

  }

  .grid .item {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    transition: opacity 0.2s;
  }

  .grid a:hover .item,
  .grid a:focus-visible .item {
    opacity: 0.7;
  }

  .grid .item h4 {
    color: #2c3e50;
  }

  .grid .item p {
    font-size: 1.5rem;
    color: #34495e;
    margin: 8px 0;
  }

 .grid .item .status {
    font-weight: bold;
  }

  .grid .item .status.paid {
    color: #27ae60;
  }

 .grid .item .status.unpaid {
    color: #e74c3c;
  }


  @media (max-width: 768px) {
   .grid .item {
      padding: 15px;
    }
  }

  /* Donut Chart Styling */
  .invoices canvas {
    width: 100% !important;
    max-width: 300px;
    margin: 0 auto 30px auto;
    display: block;
  }

  @media (max-width: 768px) {
    .contact-info p {
      width: 100%;
      margin-bottom: 10px;
    }

    .digital-solutions ul {
      padding-left: 20px;
    }

    .invoices .invoice-table th, .invoices .invoice-table td {
      padding: 10px;
    }

    .invoices canvas {
      width: 100% !important;
      max-width: 250px;
    }
  }

  .back-to-overview:hover {
    text-decoration: underline;
  }
</style>
<article class="client-profile">
  <header>
    <a href="/dashboard/clients" class="back-to-overview">Back to Client list</a>
  </header>

  <div class="contact-info">
    <div class="info-item">
      <i class="fas fa-user"></i>
      <strong>Business: </strong>Sayre Sportsmen&#039;s Clu8b
    </div>
    <div class="info-item">
      <i class="fas fa-envelope"></i>
      <strong>Email: </strong> <a href="mailto:place@epix.net">place@epix.net</a>
    </div>
    <div class="info-item">
      <i class="fas fa-phone"></i>
      <strong>Phone: </strong> <a href="tel:(570) 888-6089">(570) 888-6089</a>
    </div>
    <div class="info-item">
      <i class="fas fa-map-marker-alt"></i>
      <strong>Address: </strong> 572 Club Ln, Athens, PA 18810
    </div>
    <div class="info-item">
      <i class="fas fa-calendar"></i>
      <strong>Client since: </strong> 04-10-2025
    </div>
  </div>

      <div class="digital-solutions">
      <h2>Applications</h2>
      <div class="grid">
              </div>
    </div>
        <h2>Documents</h2>
    <div class="grid">
          </div>
        <h2>Invoices</h2>
    <div class="invoices">
                              <div class="item">
        <canvas id="invoiceChart"></canvas>
      </div>
      <div class="grid">
                     </div>

      <script>
        const paidCount = 0;
        const unpaidCount = 0;
        const paidTotal = 0;
        const unpaidTotal = 0;
        const ctx = document.getElementById('invoiceChart').getContext('2d');
        const invoiceChart = new Chart(ctx, {
          type: 'doughnut',
          data: {
            labels: [
              'Paid - $' + paidTotal.toFixed(2) + ' (' + paidCount + ' invoices)',
              'Unpaid - $' + unpaidTotal.toFixed(2) + ' (' + unpaidCount + ' invoices)'
            ],
            datasets: [{
              label: 'Invoices Paid vs Unpaid',
              data: [paidTotal, unpaidTotal],
              backgroundColor: ['#4caf50', '#f44336'], // Green for paid, red for unpaid
              borderWidth: 1
            }]
          },
          options: {
            responsive: true,
            plugins: {
              legend: {
                position: 'top',
              },
              tooltip: {
                callbacks: {
                  label: function(tooltipItem) {
                    return tooltipItem.label + ': $' + tooltipItem.raw.toFixed(2);
                  }
                }
              }
            }
          }
        });
      </script>
    </div>
  </article>
";}s:9:"#attached";a:3:{s:14:"html_head_link";a:0:{}s:7:"library";a:1:{i:0;s:20:"history/mark-as-read";}s:14:"drupalSettings";a:1:{s:7:"history";a:1:{s:17:"nodesToMarkAsRead";a:1:{i:34;b:1;}}}}s:6:"#cache";a:3:{s:8:"contexts";a:7:{i:0;s:31:"route.name.is_layout_builder_ui";i:1;s:8:"url.site";i:2;s:28:"languages:language_interface";i:3;s:5:"theme";i:4;s:16:"user.permissions";i:5;s:24:"user.roles:authenticated";i:7;s:8:"timezone";}s:4:"tags";a:4:{i:0;s:9:"node_view";i:1;s:7:"node:34";i:2;s:6:"user:1";i:4;s:18:"config:system.site";}s:7:"max-age";i:-1;}s:17:"#cache_properties";a:1:{i:0;s:6:"#title";}s:6:"#title";O:25:"Drupal\Core\Render\Markup":1:{s:9:"*string";s:42:"
<span>Sayre Sportsmen&#039;s Club</span>
";}}