@php
    $isLocked = in_array($campaign->status, [
        'queued',
        'sending',
        'completed',
    ]);
@endphp
<x-app-layout>
  <x-slot name="header">
    <h2 class="font-semibold text-xl text-gray-800 leading-tight"> Edit Campaign </h2>
  </x-slot>
  <div class="em-page">
    {{-- Page Header --}}
    <div class="em-page-header">
      <div>
        <h1 class="em-page-title">
          {{ $campaign->name }}
        </h1>
        <div class="em-page-subtitle"> Manage campaign content, delivery and recipient activity. </div>
      </div>
      <span class="em-status em-status-{{ $campaign->status }}">
        {{ ucfirst($campaign->status) }}
      </span>
    </div>
    {{-- Messages --}} @if(session('success')) <div class="em-alert em-alert-success">
      {{ session('success') }}
    </div> @endif @if(session('error')) <div class="em-alert em-alert-danger">
      {{ session('error') }}
    </div> @endif {{-- Locked Notice --}} @if($isLocked) <div class="em-locked">
      <div>
        <strong>Campaign locked.</strong>
        <div class="mt-1 text-sm"> This campaign has already started sending and can no longer be edited. </div>
      </div>
    </div> @endif {{-- Campaign Information --}}

    {{-- Statistics --}}
    <div class="em-stats">
      <div class="em-stat-card">
        <div class="em-stat-label"> Total Recipients </div>
        <div id="stat-total" class="em-stat-number">
          {{ number_format($stats['total']) }}
        </div>
      </div>
      <div class="em-stat-card">
        <div class="em-stat-label"> Sent </div>
        <div id="stat-sent" class="em-stat-number">
          {{ number_format($stats['sent']) }}
        </div>
      </div>
      <div class="em-stat-card">
        <div class="em-stat-label"> Failed </div>
        <div id="stat-failed" class="em-stat-number">
          {{ number_format($stats['failed']) }}
        </div>
      </div>
      <div class="em-stat-card">
        <div class="em-stat-label"> Pending </div>
        <div id="stat-pending" class="em-stat-number">
          {{ number_format($stats['pending']) }}
        </div>
      </div>
    </div>
    
    {{-- Campaign Editor --}}
    <div class="em-card">
      <div class="em-card-header">
        <div>
          <h3 class="em-card-title"> Campaign Editor </h3>
          <div class="em-card-description"> Sender, subject, recipients, message body and attachments. </div>
        </div>
      </div>
      <div class="em-card-body">
        <form
            method="POST"
            action="{{ route('campaigns.update', $campaign) }}"
            enctype="multipart/form-data"
        >
            @csrf
            @method('PUT')

            @include('campaigns._form')

            <div class="em-actions mt-6">

                @if(!$isLocked)
                    <button
                        type="submit"
                        class="em-btn em-btn-primary"
                    >
                        Save Changes
                    </button>
                @endif

                <a
                    href="{{ route('campaigns.index') }}"
                    class="em-btn em-btn-secondary"
                >
                    Back to Campaigns
                </a>

            </div>
        </form>
        @if(!$isLocked)

            @foreach($campaign->attachments as $attachment)

                <form
                    id="delete-attachment-{{ $attachment->id }}"
                    method="POST"
                    action="{{ route(
                        'campaigns.attachments.destroy',
                        [$campaign, $attachment]
                    ) }}"
                    class="hidden"
                >
                    @csrf
                    @method('DELETE')
                </form>

            @endforeach

        @endif
      </div>
    </div>
    {{-- Send Campaign --}}
    <div class="em-card">
      <div class="em-card-body">
        <div class="em-send-box">
          <div>
            <div class="em-send-title"> Send Campaign </div>
            <div class="em-send-description"> This campaign contains {{ number_format($stats['total']) }} recipients. </div>
          </div>
          <div class="em-actions"> @if(!in_array($campaign->status, [ 'queued', 'sending', 'completed' ])) <form method="POST" action="{{ route('campaigns.send', $campaign) }}" onsubmit="return confirm('Send this campaign now?');"> @csrf <button type="submit" class="em-btn em-btn-success"> Send Campaign </button>
            </form> @endif @if( $stats['failed'] > 0 && !in_array($campaign->status, [ 'queued', 'sending' ]) ) <form method="POST" action="{{ route('campaigns.retry-failed', $campaign) }}" onsubmit="return confirm('Retry all failed recipients?');"> @csrf <button type="submit" class="em-btn em-btn-warning"> Retry Failed ({{ number_format($stats['failed']) }}) </button>
            </form> @endif </div>
        </div>
      </div>
    </div>
    {{-- Send Test --}}
    <div class="em-card">
      <div class="em-card-header">
        <div>
          <h3 class="em-card-title"> Send Test Email </h3>
          <div class="em-card-description"> Send a copy of this campaign before the full delivery. </div>
        </div>
      </div>
      <div class="em-card-body">
        <form method="POST" action="{{ route('campaigns.send-test', $campaign) }}"> @csrf <div class="em-filter-grid">
            <div>
              <label for="test_email" class="em-label"> Test Email Address </label>
              <input type="email" id="test_email" name="test_email" value="{{ old(
                                    'test_email',
                                    auth()->user()->email
                                ) }}" class="em-input" required> @error('test_email') <div class="text-red-600 text-sm mt-1">
                {{ $message }}
              </div> @enderror
            </div>
            <div></div>
            <div></div>
            <div>
              <button type="submit" class="em-btn em-btn-dark"> Send Test </button>
            </div>
          </div>
        </form>
      </div>
    </div>
    {{-- Delivery Log --}}
    <div class="em-card">
      <div class="em-card-header">
        <div>
           <h3 class="em-card-title"> Delivery Logs </h3>
            <div class="em-card-description"> Export campaign delivery results as CSV. </div>
        </div>
        <div class="em-actions">
          <a href="{{ route('campaigns.download-log', $campaign) }}" class="em-btn em-btn-dark"> Download All </a>
          <a href="{{ route('campaigns.download-log', [
                            $campaign,
                            'status' => 'sent'
                        ]) }}" class="em-btn em-btn-secondary"> Download Sent </a>
          <a href="{{ route('campaigns.download-log', [
                            $campaign,
                            'status' => 'failed'
                        ]) }}" class="em-btn em-btn-secondary"> Download Failed </a>
          <a href="{{ route('campaigns.download-log', [
                            $campaign,
                            'status' => 'pending'
                        ]) }}" class="em-btn em-btn-secondary"> Download Pending </a>
        </div>
      </div>
      <div class="em-card-body">
        {{-- Filters --}}
        <form method="GET" action="{{ route(
                        'campaigns.edit',
                        $campaign
                    ) }}" class="mb-6">
          <div class="em-filter-grid">
            <div>
              <label for="search" class="em-label"> Search </label>
              <input type="text" name="search" id="search" value="{{ request('search') }}" placeholder="Email or name" class="em-input">
            </div>
            <div>
              <label for="status" class="em-label"> Status </label>
              <select name="status" id="status" class="em-select">
                <option value=""> All </option>
                <option value="pending" @selected( request('status')==='pending' )> Pending </option>
                <option value="sent" @selected( request('status')==='sent' )> Sent </option>
                <option value="failed" @selected( request('status')==='failed' )> Failed </option>
              </select>
            </div>
            <div>
              <label for="per_page" class="em-label"> Per Page </label>
              <select name="per_page" id="per_page" class="em-select"> @foreach([ 25, 50, 100, 250 ] as $size) <option value="{{ $size }}" @selected( (int) request( 'per_page' , 25 )===$size )>
                  {{ $size }}
                </option> @endforeach </select>
            </div>
            <div class="em-actions">
              <button type="submit" class="em-btn em-btn-primary"> Filter </button>
              <a href="{{ route(
                                    'campaigns.edit',
                                    $campaign
                                ) }}" class="em-btn em-btn-secondary"> Reset </a>
            </div>
          </div>
        </form>
        {{-- Table --}}
        <div class="em-table-wrap">
          <table class="em-table">
            <thead>
              <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Status</th>
                <th>Attempts</th>
                <th>Sent At</th>
                <th>Error</th>
                @if(!$isLocked)
                    <th>Actions</th>
                @endif
              </tr>
            </thead>
            <tbody> @forelse( $recipients as $recipient ) <tr>
                <td>
                  {{ $recipient->name ?: '-' }}
                </td>
                <td>
                  {{ $recipient->email }}
                </td>
                <td>
                  <span class="em-status em-status-{{ $recipient->status }}">
                    {{ ucfirst(
                                                $recipient->status
                                            ) }}
                  </span>
                </td>
                <td>
                  {{ $recipient->attempts }}
                </td>
                <td>
                  {{ $recipient->sent_at
                                            ? $recipient
                                                ->sent_at
                                                ->format(
                                                    'M d, Y g:i A'
                                                )
                                            : '-' }}
                </td>
                <td class="em-error-text">
                  {{ $recipient
                                            ->error_message
                                            ?: '-' }}
                </td>

                @if(!$isLocked)

                    <td>

                        <form
                            method="POST"
                            action="{{ route(
                                'campaigns.recipients.destroy',
                                [
                                    $campaign,
                                    $recipient
                                ]
                            ) }}"
                            onsubmit="return confirm(
                                'Remove {{ $recipient->email }} from this campaign?'
                            );"
                        >

                            @csrf
                            @method('DELETE')

                            <button
                                type="submit"
                                class="em-btn em-btn-danger em-btn-sm"
                            >
                                Remove
                            </button>

                        </form>

                    </td>

                @endif
              </tr> @empty <tr>
                <td
                    colspan="{{ $isLocked ? 6 : 7 }}"
                    class="text-center"
                >
                    No recipient log yet.
                </td>
              </tr> @endforelse </tbody>
          </table>
        </div>
        {{-- Pagination --}}
        <div class="mt-5">
          {{ $recipients->links() }}
        </div>
      </div>
    </div>

    <div class="em-card">
      <div class="em-card-header">
        <h3 class="em-card-title"> Campaign Information </h3>
      </div>
      <div class="em-card-body">
        <div class="em-info-grid">
          <div>
            <div class="em-info-label"> Created By </div>
            <div class="em-info-value">
              {{ $campaign->creator?->name ?? '-' }}
            </div>
          </div>
          <div>
            <div class="em-info-label"> Created At </div>
            <div class="em-info-value">
              {{ $campaign->created_at?->format('M d, Y g:i A') }}
            </div>
          </div>
          <div>
            <div class="em-info-label"> Last Updated By </div>
            <div class="em-info-value">
              {{ $campaign->updater?->name ?? '-' }}
            </div>
          </div>
          <div>
            <div class="em-info-label"> Last Updated </div>
            <div class="em-info-value">
              {{ $campaign->last_touched_at
                                ? $campaign->last_touched_at->format('M d, Y g:i A')
                                : $campaign->updated_at->format('M d, Y g:i A') }}
            </div>
          </div>
        </div>
      </div>
    </div>
    
    
    {{-- Activity History --}}
    <div class="em-card">
      <div class="em-card-header">
        <div>
          <h3 class="em-card-title"> Activity History </h3>
          <div class="em-card-description"> Recent activity for this campaign. </div>
        </div>
      </div>
      <div class="em-card-body"> @forelse( $activities as $activity ) <div class="em-activity-item">
          <div class="em-activity-user">
            {{ $activity->user?->name
                                ?? 'System' }}
          </div>
          <div class="em-activity-description">
            {{ $activity->description
                                ?: ucfirst(
                                    str_replace(
                                        '_',
                                        ' ',
                                        $activity->action
                                    )
                                ) }}
          </div>
          <div class="em-activity-time">
            {{ $activity
                                ->created_at
                                ->format(
                                    'M d, Y g:i A'
                                ) }}
          </div>
        </div> @empty <div class="text-gray-500"> No activity yet. </div> @endforelse </div>
    </div>
  </div> @push('scripts') <script>
    document.addEventListener('DOMContentLoaded', function() {
      const statsUrl = @json(route('campaigns.stats', $campaign));
      async function refreshCampaignStats() {
        try {
          const response = await fetch(statsUrl, {
            headers: {
              'Accept': 'application/json'
            }
          });
          if (!response.ok) {
            return;
          }
          const data = await response.json();
          document.getElementById('stat-total').textContent = Number(data.total).toLocaleString();
          document.getElementById('stat-sent').textContent = Number(data.sent).toLocaleString();
          document.getElementById('stat-failed').textContent = Number(data.failed).toLocaleString();
          document.getElementById('stat-pending').textContent = Number(data.pending).toLocaleString();
        } catch (error) {
          console.error('Unable to refresh campaign stats.', error);
        }
      }
      refreshCampaignStats();
      setInterval(refreshCampaignStats, 5000);
    });
  </script> @endpush
</x-app-layout>