@extends('layouts.app')

@section('content')
<div class="flex flex-col sm:flex-row justify-between sm:items-center mb-6 space-y-4 sm:space-y-0">
    <h1 class="text-2xl sm:text-3xl font-heading tracking-wide">Dashboard Campaigns</h1>
    <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4 w-full sm:w-auto">
        <!-- Search Form -->
        <form action="{{ route('dashboard.index') }}" method="GET" class="flex flex-grow w-full sm:w-auto">
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Search subject..." class="flex-grow border border-gray-300 rounded-l-md shadow-sm py-2 px-3 focus:outline-none focus:ring-brand focus:border-brand sm:text-sm w-full sm:w-48 lg:w-64">
            <button type="submit" class="bg-gray-100 hover:bg-gray-200 border border-l-0 border-gray-300 rounded-r-md px-3 py-2 text-gray-600 whitespace-nowrap">
                Search
            </button>
            @if(request('search'))
                <a href="{{ route('dashboard.index') }}" class="ml-2 text-sm text-brand flex items-center hover:underline whitespace-nowrap">Clear</a>
            @endif
        </form>
        <a href="{{ route('dashboard.create') }}" class="w-full sm:w-auto bg-brand hover:bg-brand-hover text-white font-bold py-2 px-4 rounded flex items-center justify-center whitespace-nowrap">
            + New Campaign
        </a>
    </div>
</div>

<div class="bg-white shadow overflow-hidden sm:rounded-md mb-6">
    <ul class="divide-y divide-gray-200">
        @forelse ($campaigns as $campaign)
        <li>
            <div class="px-4 py-4 sm:px-6">
                <div class="flex items-center justify-between">
                    <p class="text-sm font-medium text-brand truncate">
                        {{ $campaign->subject ?: '(No Subject)' }}
                    </p>
                    <div class="ml-2 flex-shrink-0 flex">
                        <p class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                            {{ $campaign->status === 'COMPLETED' ? 'bg-green-100 text-green-800' : ($campaign->status === 'SENDING' ? 'bg-yellow-100 text-yellow-800' : 'bg-gray-100 text-gray-800') }}">
                            {{ $campaign->status }}
                        </p>
                    </div>
                </div>
                <div class="mt-2 sm:flex sm:justify-between">
                    <div class="sm:flex">
                        <div class="flex flex-wrap items-center gap-4 text-sm">
                            <div class="flex items-center space-x-1">
                                <span class="text-gray-500">Pending:</span>
                                <span class="font-semibold text-gray-700">{{ $campaign->pending_count }}</span>
                            </div>
                            <div class="flex items-center space-x-1">
                                <span class="text-gray-500">Sent:</span>
                                <span class="font-semibold text-green-600">{{ $campaign->sent_count }}</span>
                            </div>
                            <div class="flex items-center space-x-1">
                                <span class="text-gray-500">Failed:</span>
                                <span class="font-semibold text-red-600">{{ $campaign->failed_count }}</span>
                            </div>
                            <div class="flex items-center space-x-1 bg-gray-100 px-2 py-0.5 rounded">
                                <span class="text-gray-600 font-medium">Total:</span>
                                <span class="font-bold text-gray-900">{{ $campaign->total_recipients }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="mt-2 flex flex-col sm:items-end text-sm text-gray-500 sm:mt-0 space-y-2">
                        <p>
                            Created at <time datetime="{{ $campaign->created_at }}">{{ $campaign->created_at->format('M d, Y') }}</time>
                        </p>
                        <div class="flex space-x-3 mt-2 sm:mt-0">
                            <a href="{{ route('dashboard.show', $campaign->id) }}" class="text-brand hover:text-brand-hover font-semibold transition">View Detail</a>
                            <button type="button" onclick="openDeleteModal({{ $campaign->id }})" class="text-red-500 hover:text-red-700 font-semibold transition">Delete</button>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        @empty
        <li>
            <div class="px-4 py-10 sm:px-6 text-center text-gray-500">
                {{ request('search') ? 'No campaigns matched your search.' : 'No campaigns found. Create one to get started!' }}
            </div>
        </li>
        @endforelse
    </ul>
    
    @if ($campaigns->hasPages())
    <div class="px-4 py-3 border-t border-gray-200 sm:px-6">
        {{ $campaigns->appends(request()->query())->links() }}
    </div>
    @endif
</div>

<!-- Delete Confirmation Modal -->
<div id="deleteModal" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
  <div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
    <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" aria-hidden="true" onclick="closeDeleteModal()"></div>
    <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
    <div class="inline-block overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
      <div class="px-4 pt-5 pb-4 bg-white sm:p-6 sm:pb-4">
        <div class="sm:flex sm:items-start">
          <div class="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto bg-red-100 rounded-full sm:mx-0 sm:h-10 sm:w-10">
            <svg class="w-6 h-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
          </div>
          <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
            <h3 class="text-lg font-medium leading-6 text-gray-900" id="modal-title">Delete Campaign</h3>
            <div class="mt-2">
              <p class="text-sm text-gray-500">Are you sure you want to delete this campaign? All of its data will be permanently removed. This action cannot be undone.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="px-4 py-3 bg-gray-50 sm:px-6 sm:flex sm:flex-row-reverse">
        <form id="delete-form" action="{{ route('dashboard.delete') }}" method="POST">
            @csrf
            @method('DELETE')
            <input type="hidden" name="campaign_id" id="delete-campaign-id">
            <button type="submit" class="inline-flex justify-center w-full px-4 py-2 text-base font-medium text-white bg-red-600 border border-transparent rounded-md shadow-sm hover:bg-red-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">Delete</button>
        </form>
        <button type="button" onclick="closeDeleteModal()" class="inline-flex justify-center w-full px-4 py-2 mt-3 text-base font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">Cancel</button>
      </div>
    </div>
  </div>
</div>

@push('scripts')
<script>
    function openDeleteModal(id) {
        document.getElementById('delete-campaign-id').value = id;
        document.getElementById('deleteModal').classList.remove('hidden');
    }
    
    function closeDeleteModal() {
        document.getElementById('deleteModal').classList.add('hidden');
    }
</script>
@endpush
@endsection