@php
    use Carbon\Carbon;

    $start = Carbon::parse($policy->start_date);
    $end = Carbon::parse($policy->end_date);
    $now = Carbon::now();

    // Calculate progress percentage
    if ($now->lt($start)) {
        $progress = 0;
    } elseif ($now->gt($end)) {
        $progress = 100;
    } else {
        $progress = round(($now->diffInDays($start) / $end->diffInDays($start)) * 100, 1);
    }

    // Determine color & status
    $status = strtolower($policy->status);
@endphp

<div class="product-box row">

  {{-- Chart Section --}}
  <div class="col-sm-6 d-flex align-items-center justify-content-center">
    <div class="card shadow p-3 mb-3 w-100">
      <div class="card-header bg-white border-0 pb-1">
        <h5 class="fw-bold font-light text-center">Policy Progress</h5>
      </div>
      <div class="card-body pt-2">
      <div id="policyProgressChart"
          style="width:100%; height:280px;"
          data-progress="{{ $progress }}"
          data-status="{{ $status }}"
          data-start="{{ $policy->start_date }}"
          data-end="{{ $policy->end_date }}">
      </div>
      </div>
    </div>
  </div>

  {{-- Policy Info Section --}}
  <div class="product-details col-sm-6 text-start">
    <div class="card shadow p-3 mb-3 w-100">
      <div class="card-header bg-white border-0 pb-1 mb-2">
        <h5 class="fw-bold font-light text-center">Policy Information</h5>
      </div>

      <div class="card-body p-0">
        <div class="pb-2 mb-2 border-bottom border-dotted">
          <h4 class="fw-bold font-primary mb-2">Policy: {{ $policy->policy_number }}</h4>
        </div>

        <div class="pb-2 mb-2 border-bottom border-dotted">
          <h6 class="f-w-600 text-secondary mb-1">Coverage Type:</h6>
          <span class="badge bg-primary text-white">{{ ucfirst($policy->coverage_type) }}</span>
        </div>

        <div class="pb-2 mb-2 border-bottom border-dotted">
          <h6 class="f-w-600 text-secondary mb-1">Sum Assured</h6>
          <p class="mb-0 fs-6 fw-bold text-success">Br {{ number_format($policy->sum_assured, 2) }}</p>
        </div>

        <div class="pb-2 mb-2 border-bottom border-dotted">
          <h6 class="f-w-600 text-secondary mb-1">Contribution Amount</h6>
          <p class="mb-0 fs-6 fw-bold text-warning">Br {{ number_format($policy->contribution_amount, 2) }}</p>
        </div>

        <div class="row pb-2 mb-2 border-bottom border-dotted">
          <div class="col-md-6">
            <h6 class="text-secondary mb-1">Start Date</h6>
            <p class="mb-0">{{ \Carbon\Carbon::parse($policy->start_date)->format('Y-m-d') }}</p>
          </div>
          <div class="col-md-6">
            <h6 class="text-secondary mb-1">End Date</h6>
            <p class="mb-0">{{ \Carbon\Carbon::parse($policy->end_date)->format('Y-m-d') }}</p>
          </div>
        </div>

        <div class="pb-2 mb-2 border-bottom border-dotted">
          <h6 class="text-secondary mb-1">Frequency</h6>
          <p class="mb-0">{{ ucfirst($policy->frequency) }}</p>
        </div>

        <div class="pb-2 mb-2 border-bottom border-dotted">
          <h6 class="text-secondary mb-1">Status</h6>
          <span class="badge bg-light-{{ $policy->status == 'active' ? 'success' : ($policy->status == 'expired' ? 'danger' : 'secondary') }}">
            {{ ucfirst($policy->status) }}
          </span>
        </div>

        <div class="pb-2 mb-2 border-bottom border-dotted">
          <h6 class="text-secondary mb-1">Created By</h6>
          <p class="mb-0">{{ $policy->created_by ?? 'System' }}</p>
        </div>

        <div class="product-view mt-2">
          <h6 class="f-w-600 text-secondary mb-1">Additional Terms</h6>
          <p class="small mb-0">{{ $policy->additional_terms ?: 'No additional terms.' }}</p>
        </div>
      </div>
    </div>
  </div>

</div>

{{-- Chart --}}
<script>
function renderPolicyChart(el) {
    if (!el) return;

    const progress = parseFloat(el.dataset.progress || 0);
    const status = el.dataset.status || 'pending';
    const start = el.dataset.start;
    const end = el.dataset.end;

    let color = '#007bff'; // default blue
    if (status === 'active') color = '#28a745';
    else if (status === 'expired') color = '#6c757d';
    else if (status === 'pending') color = '#ffc107';
    else if (status === 'cancelled') color = '#dc3545';

    const options = {
        chart: {
            height: 280,
            type: 'radialBar',
        },
        series: [progress],
        colors: [color],
        plotOptions: {
            radialBar: {
                hollow: { size: '58%' },
                track: {
                    background: '#f0f0f0',
                    strokeWidth: '100%',
                },
          dataLabels: {
            show: true,
            name: {
              show: false
            },
            value: {
              show: true,
              fontSize: '28px',
              fontWeight: 700,
              color: '#000',
              offsetY: 0, // Center vertically
              formatter: val => `${val}%`,
            }
          },
                      },
        },
        labels: [`${start} → ${end}`],
    };

    new ApexCharts(el, options).render();
}

</script>