@extends('layouts.app')

@section('title', $pageTitle)

@section('content')
<style>
.reminder-header {
    color: black;
    padding: 2rem 0;
    margin-bottom: 2rem;
    border-radius: 10px;
}

.action-btn {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s;
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loading-overlay.active {
    display: flex;
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-text {
    color: white;
    margin-top: 15px;
    font-size: 16px;
    font-weight: 500;
}

.loading-content {
    text-align: center;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

</style>

<!-- Loading Overlay -->
<div id="loadingOverlay" class="loading-overlay">
    <div class="loading-content">
        <div class="loading-spinner"></div>
        <div class="loading-text">Sending bulk SMS...</div>
    </div>
</div>

<div class="container-fluid">
    <!-- Header Section -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-6">
        <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white rounded-t-lg">
            <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
                <div class="flex flex-col">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-primary-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-bell text-primary-600 text-lg"></i>
                        </div>
                        <div>
                            <h5 class="text-lg font-semibold text-gray-900">{{ $pageTitle }}</h5>
                            <p class="text-xs text-gray-500">{{ $isCustom ? 'Review lockers by how long they have been expired' : 'Locker expiry notifications' }}</p>
                        </div>
                    </div>
                </div>
                <div class="flex flex-wrap gap-2">
                    @if($registrations->where('can_send_email', true)->count() > 0)
                    <button class="inline-flex items-center px-3 py-1.5 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700 transition-colors shadow-sm" onclick="sendBulkEmail()">
                        <i class="fas fa-envelope mr-2"></i> Send Email
                    </button>
                    @endif
                    @if($registrations->where('can_send_whatsapp', true)->count() > 0)
                    <button class="inline-flex items-center px-3 py-1.5 text-white text-sm rounded-md hover:bg-green-700 transition-colors shadow-sm" style="background-color: #25D366;" onclick="sendBulkWhatsapp()">
                        <i class="fab fa-whatsapp mr-2"></i> Send WhatsApp
                    </button>
                    @endif
                    <button class="inline-flex items-center px-3 py-1.5 bg-gray-600 text-white text-sm rounded-md hover:bg-gray-700 transition-colors shadow-sm" onclick="refreshPage()">
                        <i class="fas fa-sync-alt mr-2"></i> Refresh
                    </button>
                </div>
            </div>

            <!-- Stats Row -->
            @if($registrations->count() > 0)
            <div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-4 gap-3 mt-4 pt-4 border-t border-gray-200">
                <div class="bg-blue-50 rounded-lg p-3 text-center">
                    <div class="text-2xl font-bold text-blue-600">{{ $registrations->count() }}</div>
                    <div class="text-xs text-gray-600 mt-1">Total Lockers</div>
                </div>
                <div class="bg-green-50 rounded-lg p-3 text-center">
                    <div class="text-2xl font-bold text-green-600">{{ $registrations->where('can_send_email', true)->count() }}</div>
                    <div class="text-xs text-gray-600 mt-1">Email Ready</div>
                </div>
                <!-- <div class="bg-yellow-50 rounded-lg p-3 text-center">
                    <div class="text-2xl font-bold text-yellow-600">{{ $registrations->where('can_send_sms', true)->count() }}</div>
                    <div class="text-xs text-gray-600 mt-1">SMS Ready</div>
                </div> -->
                <div class="bg-green-50 rounded-lg p-3 text-center">
                    <div class="text-2xl font-bold" style="color: #25D366;">{{ $registrations->where('can_send_whatsapp', true)->count() }}</div>
                    <div class="text-xs text-gray-600 mt-1">WhatsApp Ready</div>
                </div>
                <div class="bg-orange-50 rounded-lg p-3 text-center hidden sm:block">
                    <div class="text-2xl font-bold text-orange-600">{{ $isCustom ? ($days === null ? $minDays . '+' : $minDays . '-' . $days) : $days }}</div>
                    <div class="text-xs text-gray-600 mt-1">{{ $isCustom ? 'Day Range' : 'Days to Expire' }}</div>
                </div>
            </div>
            @endif
        </div>
    </div>

    @if($isCustom)
    <form method="GET" action="{{ route('reminders.future-expiries') }}" class="mb-4 flex flex-wrap items-end gap-2 rounded-md border border-gray-200 bg-gray-50 p-3">
        <div class="flex w-full flex-wrap gap-2 pb-1">
            <a href="{{ route('reminders.future-expiries') }}" class="inline-flex h-8 items-center rounded-md border px-3 text-xs font-medium {{ $minDays === 91 && $days === 365 ? 'border-blue-300 bg-blue-100 text-blue-800' : 'border-gray-300 bg-white text-gray-700 hover:bg-gray-100' }}">Expired 91-365 days</a>
            <a href="{{ route('reminders.future-expiries', ['from_days' => 366]) }}" class="inline-flex h-8 items-center rounded-md border px-3 text-xs font-medium {{ $minDays === 366 && $days === null ? 'border-blue-300 bg-blue-100 text-blue-800' : 'border-gray-300 bg-white text-gray-700 hover:bg-gray-100' }}">Expired more than 1 year</a>
            <a href="{{ route('reminders.future-expiries', ['from_days' => 91]) }}" class="inline-flex h-8 items-center rounded-md border px-3 text-xs font-medium {{ $minDays === 91 && $days === null ? 'border-blue-300 bg-blue-100 text-blue-800' : 'border-gray-300 bg-white text-gray-700 hover:bg-gray-100' }}">All expired 91+ days</a>
        </div>
        <div>
            <label for="from_days" class="block text-xs font-medium text-gray-600">Minimum days expired</label>
            <input id="from_days" name="from_days" type="number" min="91" value="{{ $minDays }}" class="mt-1 h-8 w-32 rounded-md border border-gray-300 bg-white px-2 py-1 text-xs focus:outline-none focus:ring-2 focus:ring-primary-500">
        </div>
        <div>
            <label for="to_days" class="block text-xs font-medium text-gray-600">Maximum days expired</label>
            <input id="to_days" name="to_days" type="number" min="91" value="{{ $days }}" placeholder="No limit" class="mt-1 h-8 w-32 rounded-md border border-gray-300 bg-white px-2 py-1 text-xs focus:outline-none focus:ring-2 focus:ring-primary-500">
        </div>
        <button type="submit" class="h-8 rounded-md border border-blue-200 bg-blue-50 px-3 py-1 text-xs font-medium text-blue-700 hover:bg-blue-100">Filter</button>
        <a href="{{ route('reminders.future-expiries') }}" class="h-8 inline-flex items-center rounded-md border border-gray-300 bg-white px-3 py-1 text-xs font-medium text-gray-700 hover:bg-gray-100">Reset</a>
        <p class="w-full text-xs text-gray-500">Leave the maximum empty for no age limit. Example: minimum 366 with no maximum shows every locker expired for more than one year.</p>
    </form>
    @endif

    @if($registrations->count() > 0)
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">S.No</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client Information</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Expiry Details</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Phone</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Locker Details</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @foreach($registrations as $index => $expiry)
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ $index + 1 }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-medium">{{ $expiry->registration?->client?->name ?? 'N/A' }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $expiry->end_date ? \Carbon\Carbon::parse($expiry->end_date)->format('d M Y') : 'N/A' }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $expiry->registration?->client?->phone ?? 'N/A' }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $expiry->registration?->client?->email ?? 'N/A' }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $expiry->locker_number ?: ($expiry->locker?->locker_number ?? 'N/A') }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
                
    @else
        <!-- Empty State - Professional Design -->
        <div class="reminder-header">
            <div class="container text-center">
                <div class="mb-4">
                    <div class="d-inline-block p-4 bg-white bg-opacity-25 rounded-circle">
                        <i class="fas fa-bell-slash fa-4x"></i>
                    </div>
                </div>
                <h3 class="mb-3">{{ $isCustom ? 'No Expired Lockers Found' : 'No Lockers Expiring Within ' . $days . ' Days' }}</h3>
                <p class="mb-4 opacity-90">
                    @if($isCustom)
                        @if($days === null)
                            No lockers have been expired for {{ $minDays }} or more days.
                        @else
                            No lockers have been expired for between {{ $minDays }} and {{ $days }} days.
                        @endif
                    @else
                        No active locker contracts expire between today and the next {{ $days }} days.
                    @endif
                </p>
            </div>
        </div>

        @endif
</div>

@endsection

@push('scripts')
<script>
function sendEmail(registrationId, clientName, daysCount) {
    if (!confirm('Send email to ' + clientName + '?')) {
        return;
    }
    
    $.ajax({
        url: '{{ route("reminders.send-email") }}',
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            client_name: clientName,
            days_count: daysCount,
            registration_id: registrationId
        },
        success: function(response) {
            if (response.success) {
                showMessage('Success', response.message, 'success');
            } else {
                showMessage('Error', response.message, 'danger');
            }
        },
        error: function(xhr) {
            showMessage('Error', 'Failed to send email. Please try again.', 'danger');
        }
    });
}

function sendSms(registrationId, clientName, daysCount) {
    if (!confirm('Send SMS to ' + clientName + '?')) {
        return;
    }
    
    $.ajax({
        url: '{{ route("reminders.send-sms") }}',
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            client_name: clientName,
            days_count: daysCount,
            registration_id: registrationId
        },
        success: function(response) {
            if (response.success) {
                showMessage('Success', response.message, 'success');
            } else {
                showMessage('Error', response.message, 'danger');
            }
        },
        error: function(xhr) {
            showMessage('Error', 'Failed to send SMS. Please try again.', 'danger');
        }
    });
}

function sendWhatsapp(registrationId, clientName, daysCount) {
    if (!confirm('Send WhatsApp message to ' + clientName + '?')) {
        return;
    }
    
    // Log WhatsApp send (you can implement actual WhatsApp API later)
    $.ajax({
        url: '{{ route("reminders.send-sms") }}', // Using SMS route for now
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            client_name: clientName,
            days_count: daysCount,
            registration_id: registrationId
        },
        success: function(response) {
            if (response.success) {
                showMessage('Success', 'WhatsApp message sent successfully!', 'success');
            } else {
                showMessage('Error', response.message, 'danger');
            }
        },
        error: function(xhr) {
            showMessage('Error', 'Failed to send WhatsApp message. Please try again.', 'danger');
        }
    });
}

function sendBulkSms() {
    if (!confirm('Send SMS to all clients?')) {
        return;
    }
    
    // Show loading spinner
    showLoading('Sending SMS Reminder...');
    
    // Get the current days count from the page
    const daysCount = @json($days);
    
    fetch('{{ route('reminders.send-bulk-sms') }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            days_count: daysCount
        })
    })
    .then(response => {
        if (!response.ok) {
            return response.text().then(text => {
                throw new Error('Server error: ' + text);
            });
        }
        return response.json();
    })
    .then(data => {
        // Hide loading spinner
        hideLoading();
        
        if (data.success) {
            // Just reload page to show updated statistics
            location.reload();
        } else {
            showMessage('Error', data.message, 'error');
        }
    })
    .catch(error => {
        // Hide loading spinner
        hideLoading();
        
        showMessage('Error', 'Failed to send bulk SMS: ' + error.message, 'error');
    });
}

function showLoading(text) {
    document.querySelector('.loading-text').textContent = text;
    document.getElementById('loadingOverlay').classList.add('active');
}

function hideLoading() {
    document.getElementById('loadingOverlay').classList.remove('active');
}

function sendBulkEmail() {
    if (!confirm('Send Email to all clients?')) {
        return;
    }
    
    // Show loading spinner
    showLoading('Sending Email Reminder...');
    
    // Get the current days count from the page
    const daysCount = @json($days);
    
    fetch('{{ route('reminders.send-bulk-email') }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            days_count: daysCount
        })
    })
    .then(response => response.json())
    .then(data => {
        // Hide loading spinner
        hideLoading();
        
        if (data.success) {
            // Just reload page to show updated statistics
            location.reload();
        } else {
            showMessage('Error', data.message, 'error');
        }
    })
    .catch(error => {
        // Hide loading spinner
        hideLoading();
        
        showMessage('Error', 'Failed to send bulk Email: ' + error.message, 'error');
    });
}

function sendBulkWhatsapp() {
    if (!confirm('Send WhatsApp to all clients?')) {
        return;
    }
    
    // Show loading spinner
    showLoading('Sending WhatsApp Reminder...');
    
    // Get the current days count from the page
    const daysCount = @json($days);
    
    fetch('{{ route('reminders.send-bulk-whatsapp') }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            days_count: daysCount
        })
    })
    .then(response => {
        if (!response.ok) {
            return response.text().then(text => {
                throw new Error('Server error: ' + text);
            });
        }
        return response.json();
    })
    .then(data => {
        // Hide loading spinner
        hideLoading();
        
        if (data.success) {
            // Just reload page to show updated statistics
            location.reload();
        } else {
            showMessage('Error', data.message, 'error');
        }
    })
    .catch(error => {
        // Hide loading spinner
        hideLoading();
        
        showMessage('Error', 'Failed to send bulk WhatsApp: ' + error.message, 'error');
    });
}

function viewDetails(registrationId) {
    showMessage('Info', 'View details feature coming soon...', 'info');
}

function showMessage(title, message, type) {
    // Create a simple alert for now (you can replace with toast)
    alert(title + ': ' + message);
}

function refreshPage() {
    location.reload();
}
</script>
@endpush