@extends('layouts.app')
@section('title', $page_title)

@php
    $schedules = json_decode($warmup_plan->schedule, true);
    $days = array_keys($schedules); // X-axis (Days)
    $emails = array_values($schedules); // Y-axis (Emails)
@endphp
@push('scripts')
<script src="{{asset('components/Chart.js/dist/Chart.min.js')}}"></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        var ctx = document.getElementById('warmupChart').getContext('2d');
        var warmupChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: @json($days), // Convert PHP array to JS array
                datasets: [{
                    label: '{{ __("app.emails_send") }}',
                    data: @json($emails),
                    borderColor: '#5C64CC',
                    backgroundColor: 'rgba(0, 0, 255, 0.1)',
                    borderWidth: 2,
                    fill: true,
                    tension: 0.3 // Smooth line
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    x: { title: { display: true, text: 'Day' } },
                    y: { title: { display: true, text: 'Emails Sent' }, beginAtZero: true }
                }
            }
        });
    });
</script>
@endpush

@section('content')
<div class="card custom-card">
  <div class="card-body">
    <a tabindex="-1" role="button"
          data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" title="{{__('app.warmup_plan')}}"
          data-bs-content="{{__('app.warmup_plan_help')}}" data-bs-custom-class="header-primary"><i class="bi bi-question-square text-primary"></i>
          </a>
    <form method="POST" action="{{route('warmup_plans.update', $warmup_plan->id)}}" class="row g-3 mt-0 needs-validation" novalidate>
      @csrf
      @method('PUT') 

      <div class="col-md-6">
        <label class="form-label">{{__('app.name')}}</label>
        <input type="text" class="form-control" placeholder="{{__('app.name')}}" value="{{ $warmup_plan->name }}" name="name" required>
      </div>
      <div class="col-md-6">
        <label class="form-label">{{__('app.active')}}</label>
        <select name="is_active" class="form-select form-select-lg">
          <option value="1" {{ $warmup_plan->is_active ? 'selected' : '' }}>{{ __('app.yes')}}</option>
          <option value="0" {{ $warmup_plan->is_active ? '' : 'selected' }}>{{ __('app.no') }}</option>
        </select>
      </div>
      <div class="col-md-6 mt-3">
        <label class="form-label">{{__('app.total_emails')}}</label>
        <input type="number" class="form-control" placeholder="{{__('app.total_emails')}}" value="{{ $warmup_plan->total_emails }}" name="total_emails" disabled>
      </div>
      <div class="col-md-6 mt-3">
        <label class="form-label">{{__('app.growth')}}</label>
        <input type="text" class="form-control" placeholder="{{__('app.growth_factor')}}" value="{{ $warmup_plan->growth_factor }}" name="growth_factor" disabled>
      </div>

      <div class="col-md-6 mt-3">
        <div class="row mx-0">
          <div class="col-md-6 mt-3 bg-gray-200 fw-bold py-1">{{__('app.days')}}</div>
          <div class="col-md-6 mt-3 bg-gray-200 fw-bold py-1">{{__('app.emails')}}</div>
        </div>
        @php $schedules = json_decode($warmup_plan->schedule); @endphp
        @foreach($schedules as $day => $schedule)
          <div class="row mx-0  {{ $loop->even ? 'bg-light' : 'bg-white' }}"">
            <div class="col-md-6 mt-3">{{$day+1}}</div>
            <div class="col-md-6 mt-3">{{$schedule}}</div>
          </div>
        @endforeach        
      </div>

      <div class="col-md-6 mt-3">
        <canvas id="warmupChart"></canvas>
      </div>

      <div class="col-12">
        <button type="submit" class="btn btn-primary btn-loading"><i class=""></i> {{__('app.update')}}</button>
        <a href="{{route('warmup_plans.index')}}">
        <button type="button" class="btn btn-danger btn-loading"><i class=""></i> {{__('app.exit')}}</button>
        </a>
        <span id="imap-msg" class="mx-3"></span>
      </div>
    </form>
  </div>
</div>
@endsection