@extends('layouts.admin')

@section('title', 'Organization Certificate Verification')

@section('content_header')
    <h1>Organization Certificate Verification</h1>
@stop

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Certification Management</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-primary btn-sm" id="sync-btn">
                            Sync Now
                        </button>
                        <button type="button" class="btn btn-info btn-sm" id="test-connection-btn">
                            Test Connection
                        </button>
                        <a href="{{ route('admin.certification.verification.organization.export', request()->query()) }}" class="btn btn-success btn-sm">
                            Export CSV
                        </a>
                        <a href="{{ route('admin.certification.verification.organization.manage-permissions') }}" class="btn btn-warning btn-sm">
                            Manage Permissions
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Statistics Cards -->
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <div class="info-box">
                                <span class="info-box-icon bg-info"><i class="fas fa-certificate"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Total Certifications</span>
                                    <span class="info-box-number">{{ number_format($stats['total_certifications']) }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="info-box">
                                <span class="info-box-icon bg-success"><i class="fas fa-clock"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Last Sync</span>
                                    <span class="info-box-number">{{ $stats['last_sync_human'] }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="info-box">
                                <span class="info-box-icon bg-warning"><i class="fas fa-calendar"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Last Sync Date</span>
                                    <span class="info-box-number">{{ $stats['last_sync'] ? \Carbon\Carbon::parse($stats['last_sync'])->format('M d, Y') : 'Never' }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="info-box">
                                <span class="info-box-icon bg-primary"><i class="fas fa-database"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Status</span>
                                    <span class="info-box-number">
                                        @if($stats['last_sync'])
                                            <span class="badge badge-success">Active</span>
                                        @else
                                            <span class="badge badge-danger">No Data</span>
                                        @endif
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Search and Filter Form -->
                    <form method="GET" action="{{ route('admin.certification.verification.organization.index') }}" class="mb-3" id="searchForm">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="search">Search</label>
                                    <input type="text" class="form-control" id="search" name="search" 
                                           value="{{ request('search') }}" placeholder="Certificate No, Company Name, Standards...">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="status">Status</label>
                                    <select class="form-control" id="status" name="status">
                                        <option value="">All Statuses</option>
                                        <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                                        <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <button type="submit" class="btn btn-primary form-control">
                                        Search
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <a href="{{ route('admin.certification.verification.organization.index') }}" class="btn btn-secondary form-control">
                                        Clear
                                    </a>
                                </div>
                            </div>
                        </div>
                    </form>

                    <!-- Certifications Table -->
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>CERTIFICATE NO.</th>
                                    <th>ACCOUNT NAME</th>
                                    <th>STANDARDS</th>
                                    <th>DATA UPDATED</th>
                                    <th>Synced At</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($certifications as $certification)
                                    <tr>
                                        <td>
                                            <strong>{{ $certification->certificate_no }}</strong>
                                        </td>
                                        <td>{{ Str::limit($certification->account_name, 30) ?: 'N/A' }}</td>
                                        <td>{{ Str::limit($certification->standards, 30) ?: 'N/A' }}</td>
                                        <td>{{ $certification->data_updated ? \Carbon\Carbon::parse($certification->data_updated)->format('M d, Y') : 'N/A' }}</td>
                                        <td>{{ $certification->synced_at ? \Carbon\Carbon::parse($certification->synced_at)->format('M d, Y h:i A') : 'N/A' }}</td>
                                        <td>
                                            <button type="button" class="btn btn-sm btn-info view-btn" 
                                                    data-id="{{ $certification->id }}">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center">
                                            <div class="alert alert-info">
                                                <i class="fas fa-info-circle"></i>
                                                No certifications found. 
                                                @if($stats['total_certifications'] == 0)
                                                    <a href="#" id="sync-btn-inline">Click here to sync from Google Sheets</a>.
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    @include('admin.partials.pagination', ['items' => $certifications, 'itemName' => 'certifications'])
                </div>
            </div>
        </div>
    </div>

    <!-- Certification Details Modal -->
    <div class="modal fade" id="certificationModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Certification Details</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="certificationDetails">
                    <!-- Content will be loaded here -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@stop

@section('js')
@parent
<script>
$(document).ready(function() {
    // Sync button handler
    $('#sync-btn, #sync-btn-inline').on('click', function(e) {
        e.preventDefault();
        const btn = $(this);
        const originalText = btn.html();
        
        btn.prop('disabled', true).html('Syncing...');
        
        $.post('{{ route("admin.certification.verification.organization.sync") }}', {
            _token: '{{ csrf_token() }}'
        })
        .done(function(response) {
            if (response.status === 'success') {
                let message = response.message;
                if (response.stats) {
                    message += `<br><small>Stats: Inserted: ${response.stats.inserted}, Updated: ${response.stats.updated}, Skipped: ${response.stats.skipped}, Deleted: ${response.stats.deleted || 0}</small>`;
                }
                showAlert('success', 'Sync Completed!', message + '<br>Refreshing page...');
                setTimeout(() => window.location.reload(true), 3000);
            } else {
                showAlert('danger', 'Error!', response.message);
            }
        })
        .fail(function(xhr) {
            const response = xhr.responseJSON;
            showAlert('danger', 'Error!', response?.message || 'Sync failed. Please try again.');
        })
        .always(function() {
            btn.prop('disabled', false).html(originalText);
        });
    });

    // Test connection button handler
    $('#test-connection-btn').on('click', function(e) {
        e.preventDefault();
        const btn = $(this);
        const originalText = btn.html();
        
        btn.prop('disabled', true).html('Testing...');
        
        $.post('{{ route("admin.certification.verification.organization.test-connection") }}', {
            _token: '{{ csrf_token() }}'
        })
        .done(function(response) {
            if (response.success) {
                let message = 'Connected to Google Sheets: ' + response.sheet_title;
                if (response.validated) {
                    message += ' <span class="badge badge-success">✓ Name Validated</span>';
                } else {
                    message += ' <span class="badge badge-warning">⚠ Name Not Validated</span>';
                }
                showAlert('success', 'Connection Successful!', message);
            } else {
                let errorMsg = response.error || response.message;
                if (response.expected && response.found) {
                    errorMsg += '<br><strong>Expected:</strong> "' + response.expected + '"<br><strong>Found:</strong> "' + response.found + '"';
                    errorMsg += '<br><small>Update GOOGLE_SHEETS_EXPECTED_NAME in .env to match the actual spreadsheet name.</small>';
                }
                showAlert('danger', 'Connection Failed!', errorMsg);
            }
        })
        .fail(function(xhr) {
            const response = xhr.responseJSON;
            showAlert('danger', 'Connection Failed!', response?.message || 'Connection test failed.');
        })
        .always(function() {
            btn.prop('disabled', false).html(originalText);
        });
    });

    // View button handler using event delegation
    $(document).on('click', '.view-btn', function(e) {
        e.preventDefault();
        const id = $(this).data('id');
        viewCertificationDetails(id);
    });

    // Function to show Bootstrap alerts
    function showAlert(type, title, message) {
        const alertHtml = `
            <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                <strong>${title}</strong> ${message}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        `;
        
        // Remove existing alerts
        $('.alert').remove();
        
        // Add new alert at the top of the content
        $('.content').prepend(alertHtml);
        
        // Auto-hide after 5 seconds
        setTimeout(function() {
            $('.alert').fadeOut();
        }, 5000);
    }

    // Function to load and display certification details
    function viewCertificationDetails(id) {
        // Show loading spinner
        $('#certificationDetails').html(`
            <div class="text-center">
                <i class="fas fa-spinner fa-spin fa-2x"></i>
                <p>Loading certification details...</p>
            </div>
        `);
        $('#certificationModal').modal('show');
        
        // Fetch certification details via AJAX
        $.ajax({
            url: '/admin/certification/verification/organization/details/' + id,
            method: 'GET',
            success: function(response) {
            if (response.status === 'success') {
                const cert = response.data;
                let statusBadge = '';
                
                // Create status badge
                switch(cert.certification_status) {
                    case 'active':
                        statusBadge = '<span class="badge badge-success">Active</span>';
                        break;
                    case 'inactive':
                        statusBadge = '<span class="badge badge-secondary">Inactive</span>';
                        break;
                    default:
                        statusBadge = '<span class="badge badge-secondary">' + cert.certification_status + '</span>';
                }
                
                $('#certificationDetails').html(`
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">
                                        <i class="fas fa-certificate"></i> 
                                        Certification Details - ${cert.certificate_no}
                                    </h4>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <table class="table table-sm table-borderless">
                                                <tr>
                                                    <td><strong>Certificate Number:</strong></td>
                                                    <td>${cert.certificate_no || 'N/A'}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Account Name:</strong></td>
                                                    <td>${cert.account_name || 'N/A'}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Standards:</strong></td>
                                                    <td>${cert.standards || 'N/A'}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Status:</strong></td>
                                                    <td>${statusBadge}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Data Updated:</strong></td>
                                                    <td>${cert.data_updated ? cert.data_updated.split('T')[0] : 'N/A'}</td>
                                                </tr>
                                            </table>
                                        </div>
                                        <div class="col-md-6">
                                            <table class="table table-sm table-borderless">
                                                <tr>
                                                    <td><strong>Scope Certificate:</strong></td>
                                                    <td>${cert.scope_certificate || 'N/A'}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Accreditation Scheme:</strong></td>
                                                    <td>${cert.accreditation_scheme_specific || 'N/A'}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Last Synced:</strong></td>
                                                    <td>${cert.synced_at ? new Date(cert.synced_at).toLocaleString() : 'N/A'}</td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    ${cert.address ? `
                                    <div class="row mt-3">
                                        <div class="col-12">
                                            <h6><strong>Address:</strong></h6>
                                            <div class="border rounded p-2 bg-light">
                                                ${cert.address}
                                            </div>
                                        </div>
                                    </div>
                                    ` : ''}
                                    ${cert.raw ? `
                                    <div class="row mt-3">
                                        <div class="col-12">
                                            <h6><strong>Raw Data:</strong></h6>
                                            <div class="border rounded p-2 bg-light">
                                                <small><pre>${JSON.stringify(cert.raw, null, 2)}</pre></small>
                                            </div>
                                        </div>
                                    </div>
                                    ` : ''}
                                </div>
                            </div>
                        </div>
                    </div>
                `);
            } else {
                $('#certificationDetails').html(`
                    <div class="alert alert-danger">
                        <i class="fas fa-exclamation-triangle"></i>
                        ${response.message || 'Failed to load certification details.'}
                    </div>
                `);
                }
            },
            error: function(xhr) {
                let errorMessage = 'Failed to load certification details.';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                }
                
                $('#certificationDetails').html(`
                    <div class="alert alert-danger">
                        <i class="fas fa-exclamation-triangle"></i>
                        ${errorMessage}
                    </div>
                `);
            }
        });
    }
});

// Handle search form to remove empty parameters
$('#searchForm').on('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const params = new URLSearchParams();
    
    // Only add non-empty parameters
    for (let [key, value] of formData.entries()) {
        if (value && value.trim() !== '') {
            params.append(key, value);
        }
    }
    
    // Build clean URL
    const cleanUrl = this.action + (params.toString() ? '?' + params.toString() : '');
    
    // Navigate to clean URL
    window.location.href = cleanUrl;
});
</script>
@stop