@extends('layouts.app')

@section('title', 'Email Management')

@section('content')
<div x-data="{ showModal: false }" class="space-y-4 md:space-y-6">

    <!-- Stats Cards -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
        <div class="bg-gradient-to-br from-blue-600/80 to-blue-700/80 backdrop-blur-xl border border-blue-500/30 rounded-xl p-4 md:p-6 shadow-2xl text-white">
            <div class="flex items-center">
                <div class="bg-white/20 rounded-lg p-2 mr-3">
                    <i class="ti ti-mail text-xl"></i>
                </div>
                <div>
                    <p class="text-blue-200 text-xs">Total Emails</p>
                    <p class="text-2xl font-bold">{{ $emails->total() }}</p>
                </div>
            </div>
        </div>
        
        <div class="bg-gradient-to-br from-green-600/80 to-green-700/80 backdrop-blur-xl border border-green-500/30 rounded-xl p-4 md:p-6 shadow-2xl text-white">
            <div class="flex items-center">
                <div class="bg-white/20 rounded-lg p-2 mr-3">
                    <i class="ti ti-check text-xl"></i>
                </div>
                <div>
                    <p class="text-green-200 text-xs">Sent Today</p>
                    <p class="text-2xl font-bold">{{ $emails->where('status', 'sent')->filter(function($email) { return $email->sent_at && $email->sent_at->isToday(); })->count() }}</p>
                </div>
            </div>
        </div>
        
        <div class="bg-gradient-to-br from-yellow-600/80 to-yellow-700/80 backdrop-blur-xl border border-yellow-500/30 rounded-xl p-4 md:p-6 shadow-2xl text-white">
            <div class="flex items-center">
                <div class="bg-white/20 rounded-lg p-2 mr-3">
                    <i class="ti ti-file-invoice text-xl"></i>
                </div>
                <div>
                    <p class="text-yellow-200 text-xs">Invoice Emails</p>
                    <p class="text-2xl font-bold">{{ $emails->where('type', 'invoice')->count() }}</p>
                </div>
            </div>
        </div>
        
        <div class="bg-gradient-to-br from-red-600/80 to-red-700/80 backdrop-blur-xl border border-red-500/30 rounded-xl p-4 md:p-6 shadow-2xl text-white">
            <div class="flex items-center">
                <div class="bg-white/20 rounded-lg p-2 mr-3">
                    <i class="ti ti-mail-x text-xl"></i>
                </div>
                <div>
                    <p class="text-red-200 text-xs">Failed</p>
                    <p class="text-2xl font-bold">{{ $emails->where('status', 'failed')->count() }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Email Table -->
    <div class="bg-slate-800/90 backdrop-blur-xl border border-slate-700/50 rounded-xl md:rounded-2xl shadow-2xl">
        <div class="p-4 md:p-6 border-b border-slate-700">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                <h4 class="text-xl font-semibold text-white">Email History</h4>
                <div class="flex flex-wrap gap-2">
                    <button @click="showModal = true" class="bg-gradient-to-r from-red-600 to-yellow-600 hover:from-red-700 hover:to-yellow-700 text-white px-4 py-2 rounded-lg text-sm transition-all flex items-center gap-2">
                        <i class="ti ti-plus"></i>
                        <span class="hidden sm:inline">Compose</span>
                    </button>
                    <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm transition-all flex items-center gap-2">
                        <i class="ti ti-download"></i>
                        <span class="hidden sm:inline">Export</span>
                    </button>
                    <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm transition-all flex items-center gap-2">
                        <i class="ti ti-refresh"></i>
                        <span class="hidden sm:inline">Refresh</span>
                    </button>
                </div>
            </div>
        </div>
        <div class="p-4 md:p-6">
            <div class="mb-4">
                <div class="relative">
                    <input type="text" id="searchInput" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg pl-10 pr-4 py-3 text-white placeholder-slate-400 focus:ring-2 focus:ring-red-500 focus:border-red-500" placeholder="Search emails...">
                    <svg class="absolute left-3 top-3.5 h-5 w-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                </div>
            </div>
            <div class="table-wrapper" style="overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; max-width: calc(100vw - 4rem); touch-action: pan-x;">
                <table class="w-full min-w-[700px] divide-y divide-slate-700" id="emailsTable">
                    <thead class="bg-slate-700/50">
                        <tr>
                            <th class="px-3 md:px-6 py-3 md:py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider cursor-pointer hover:text-white transition-colors">
                                <div class="flex items-center gap-2">
                                    Date
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4"></path>
                                    </svg>
                                </div>
                            </th>
                            <th class="px-3 md:px-6 py-3 md:py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider cursor-pointer hover:text-white transition-colors">
                                <div class="flex items-center gap-2">
                                    To
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4"></path>
                                    </svg>
                                </div>
                            </th>
                            <th class="px-3 md:px-6 py-3 md:py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider cursor-pointer hover:text-white transition-colors">
                                <div class="flex items-center gap-2">
                                    Subject
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4"></path>
                                    </svg>
                                </div>
                            </th>
                            <th class="px-3 md:px-6 py-3 md:py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider cursor-pointer hover:text-white transition-colors">
                                <div class="flex items-center gap-2">
                                    Type
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4"></path>
                                    </svg>
                                </div>
                            </th>
                            <th class="px-3 md:px-6 py-3 md:py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider cursor-pointer hover:text-white transition-colors">
                                <div class="flex items-center gap-2">
                                    Status
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4"></path>
                                    </svg>
                                </div>
                            </th>
                            <th class="px-3 md:px-6 py-3 md:py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-700">
                        @foreach($emails as $email)
                        <tr class="hover:bg-slate-700/30 transition-colors">
                            <td class="px-3 md:px-6 py-3 md:py-4 whitespace-nowrap text-sm text-slate-300">
                                {{ $email->created_at->format('M d, Y H:i') }}
                            </td>
                            <td class="px-3 md:px-6 py-3 md:py-4 whitespace-nowrap text-sm text-white">
                                {{ Str::limit($email->to, 25) }}
                            </td>
                            <td class="px-3 md:px-6 py-3 md:py-4 text-sm text-white">
                                {{ Str::limit($email->subject, 30) }}
                            </td>
                            <td class="px-3 md:px-6 py-3 md:py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-semibold rounded-full border {{ $email->type === 'invoice' ? 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30' : 'bg-blue-500/20 text-blue-400 border-blue-500/30' }}">
                                    {{ ucfirst($email->type) }}
                                </span>
                            </td>
                            <td class="px-3 md:px-6 py-3 md:py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-semibold rounded-full border {{ $email->status === 'sent' ? 'bg-green-500/20 text-green-400 border-green-500/30' : ($email->status === 'failed' ? 'bg-red-500/20 text-red-400 border-red-500/30' : 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30') }}">
                                    {{ ucfirst($email->status) }}
                                </span>
                            </td>
                            <td class="px-3 md:px-6 py-3 md:py-4 whitespace-nowrap text-sm">
                                <div class="flex items-center space-x-2">
                                    <button class="text-blue-400 hover:text-blue-300 transition-colors" title="View">
                                        <i class="ti ti-eye text-lg"></i>
                                    </button>
                                    <button class="text-red-400 hover:text-red-300 transition-colors" title="Delete">
                                        <i class="ti ti-trash text-lg"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            
            @if($emails->hasPages())
            <div class="mt-4 pt-4 border-t border-slate-700">
                {{ $emails->links() }}
            </div>
            @endif
        </div>
    </div>

    <!-- Compose Email Modal -->
    <div x-show="showModal" x-transition class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
        <div class="flex items-center justify-center min-h-screen px-4">
            <div class="fixed inset-0 bg-black opacity-50" @click="showModal = false"></div>
            <div class="relative bg-slate-800 rounded-2xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto border border-slate-700">
                <div class="sticky top-0 bg-slate-800 px-6 py-4 border-b border-slate-700 flex justify-between items-center">
                    <h3 class="text-xl font-semibold text-white">Compose Email</h3>
                    <button @click="showModal = false" class="text-slate-400 hover:text-white">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
                <div class="p-6">
                    <form id="emailForm" enctype="multipart/form-data" class="space-y-4">
                        @csrf
                        <div class="flex items-center space-x-3">
                            <input type="checkbox" id="customEmail" onchange="toggleEmailInput()" class="w-4 h-4 text-red-600 bg-slate-700 border-slate-600 rounded focus:ring-red-500">
                            <label for="customEmail" class="text-sm text-slate-300">Custom Email</label>
                        </div>

                        <div id="customerEmailSelect">
                            <label class="block text-sm font-medium text-slate-300 mb-2">Customer</label>
                            <select id="customerEmail" name="customer" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-red-500 focus:border-red-500">
                                <option value="">Select Customer</option>
                            </select>
                        </div>

                        <div id="emailInput" style="display: none;">
                            <label class="block text-sm font-medium text-slate-300 mb-2">To</label>
                            <input type="email" id="to" name="to" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-red-500 focus:border-red-500">
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">CC</label>
                                <input type="email" id="cc" name="cc" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-red-500 focus:border-red-500">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">BCC</label>
                                <input type="email" id="bcc" name="bcc" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-red-500 focus:border-red-500">
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Subject</label>
                            <input type="text" id="subject" name="subject" required class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-red-500 focus:border-red-500">
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Message</label>
                            <textarea id="body" name="body" rows="8" required class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-red-500 focus:border-red-500 resize-none"></textarea>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Attachments</label>
                            <input type="file" id="attachments" name="attachments[]" multiple class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-red-500 focus:border-red-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-red-600 file:text-white hover:file:bg-red-700">
                            <p class="text-xs text-slate-400 mt-1">Max file size: 10MB per file</p>
                        </div>

                        <div class="flex justify-end space-x-3 pt-4 border-t border-slate-700">
                            <button type="button" @click="showModal = false" class="px-4 py-2 text-slate-400 hover:text-white transition-colors">
                                Cancel
                            </button>
                            <button type="submit" class="bg-gradient-to-r from-red-600 to-yellow-600 hover:from-red-700 hover:to-yellow-700 text-white px-6 py-2 rounded-lg transition-all duration-300 shadow-lg">
                                Send Email
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.getElementById('emailForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    
    fetch('{{ route("email.send") }}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Email sent successfully!');
            location.reload();
        } else {
            alert('Error: ' + data.message);
        }
    })
    .catch(error => {
        alert('Error sending email');
    });
});

$(document).ready(function() {
    $('#customerEmail').select2({
        placeholder: 'Search customers...',
        allowClear: true,
        ajax: {
            url: '{{ route("api.customers.search") }}',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    q: params.term,
                    page: params.page
                };
            },
            processResults: function (data, params) {
                params.page = params.page || 1;
                return {
                    results: data.data.map(function(customer) {
                        return {
                            id: customer.id,
                            text: customer.text,
                            email: customer.email
                        };
                    }),
                    pagination: {
                        more: (params.page * 30) < data.total
                    }
                };
            },
            cache: true
        },
        minimumInputLength: 1,
        templateResult: function(customer) {
            if (customer.loading) return customer.text;
            return $('<span>' + customer.text + (customer.email ? ' (' + customer.email + ')' : '') + '</span>');
        },
        templateSelection: function(customer) {
            return customer.text || customer.email;
        }
    });
});

function toggleEmailInput() {
    const customEmail = document.getElementById('customEmail');
    const customerEmailSelect = document.getElementById('customerEmailSelect');
    const emailInput = document.getElementById('emailInput');
    const customerField = document.getElementById('customerEmail');
    const emailField = document.getElementById('to');
    
    if (customEmail.checked) {
        customerEmailSelect.style.display = 'none';
        emailInput.style.display = 'block';
        customerField.removeAttribute('required');
        emailField.setAttribute('required', 'required');
    } else {
        customerEmailSelect.style.display = 'block';
        emailInput.style.display = 'none';
        customerField.setAttribute('required', 'required');
        emailField.removeAttribute('required');
    }
}
</script>
@endsection