@extends('patent::layouts.master')

@section('title', 'Application Changes - ' . $application->aipt_ref)

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">Application Changes</h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('patent.dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('patent.applications.index') }}">Applications</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('patent.applications.edit', $applicationId) }}">{{ $application->aipt_ref }}</a></li>
                    <li class="breadcrumb-item active">Changes</li>
                </ol>
            </nav>
        </div>
        <div class="btn-group">
            <a href="{{ route('patent.applications.edit', $applicationId) }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Back to Application
            </a>
            <a href="{{ route('patent.changes.export', $applicationId) }}" class="btn btn-success">
                <i class="fas fa-download"></i> Export Changes
            </a>
        </div>
    </div>

    <!-- Application Info Card -->
    <div class="card mb-4 border-left-primary">
        <div class="card-body">
            <div class="row">
                <div class="col-md-3">
                    <h6 class="text-primary mb-1">AIPT Reference</h6>
                    <p class="mb-0 font-weight-bold">{{ $application->aipt_ref }}</p>
                </div>
                <div class="col-md-6">
                    <h6 class="text-primary mb-1">Application Title</h6>
                    <p class="mb-0">{{ $application->application_title }}</p>
                </div>
                <div class="col-md-3">
                    <h6 class="text-primary mb-1">Status</h6>
                    <span class="badge badge-{{ $application->application_status === 'Active' ? 'success' : ($application->application_status === 'Rejected' ? 'danger' : 'warning') }}">
                        {{ $application->application_status }}
                    </span>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Total Changes</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $statistics['total_changes'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-history fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Low Priority</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $statistics['by_severity']['low'] ?? 0 }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-check-circle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">High Priority</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $statistics['by_severity']['high'] ?? 0 }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-exclamation-triangle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-danger shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">Critical</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $statistics['by_severity']['critical'] ?? 0 }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-exclamation-circle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="card mb-4">
        <div class="card-header">
            <h6 class="m-0 font-weight-bold text-primary">Filters</h6>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('patent.changes.application', $applicationId) }}" class="row">
                <div class="col-md-2">
                    <label for="section" class="form-label">Section</label>
                    <select name="section" id="section" class="form-control">
                        <option value="">All Sections</option>
                        @foreach($sections as $section)
                            <option value="{{ $section }}" {{ ($filters['section'] ?? '') === $section ? 'selected' : '' }}>
                                {{ ucfirst(str_replace('_', ' ', $section)) }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="change_type" class="form-label">Change Type</label>
                    <select name="change_type" id="change_type" class="form-control">
                        <option value="">All Types</option>
                        @foreach($changeTypes as $type)
                            <option value="{{ $type }}" {{ ($filters['change_type'] ?? '') === $type ? 'selected' : '' }}>
                                {{ ucfirst(str_replace('_', ' ', $type)) }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="severity" class="form-label">Severity</label>
                    <select name="severity" id="severity" class="form-control">
                        <option value="">All Severities</option>
                        <option value="low" {{ ($filters['severity'] ?? '') === 'low' ? 'selected' : '' }}>Low</option>
                        <option value="medium" {{ ($filters['severity'] ?? '') === 'medium' ? 'selected' : '' }}>Medium</option>
                        <option value="high" {{ ($filters['severity'] ?? '') === 'high' ? 'selected' : '' }}>High</option>
                        <option value="critical" {{ ($filters['severity'] ?? '') === 'critical' ? 'selected' : '' }}>Critical</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="start_date" class="form-label">From Date</label>
                    <input type="date" name="start_date" id="start_date" class="form-control" value="{{ $filters['start_date'] ?? '' }}">
                </div>
                <div class="col-md-2">
                    <label for="end_date" class="form-label">To Date</label>
                    <input type="date" name="end_date" id="end_date" class="form-control" value="{{ $filters['end_date'] ?? '' }}">
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary mr-2">
                        <i class="fas fa-filter"></i> Filter
                    </button>
                    <a href="{{ route('patent.changes.application', $applicationId) }}" class="btn btn-secondary">
                        <i class="fas fa-undo"></i> Clear
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Changes Table -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Change History</h6>
        </div>
        <div class="card-body">
            @if($changes->count() > 0)
                <div class="table-responsive">
                    <table class="table table-bordered table-hover" id="changesTable">
                        <thead class="thead-light">
                            <tr>
                                <th>Date & Time</th>
                                <th>Change Type</th>
                                <th>Section</th>
                                <th>Field</th>
                                <th>Description</th>
                                <th>Severity</th>
                                <th>Changed By</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($changes as $change)
                                <tr>
                                    <td>
                                        <small class="text-muted">{{ $change->changed_at->format('Y-m-d') }}</small><br>
                                        <small class="font-weight-bold">{{ $change->changed_at->format('H:i:s') }}</small>
                                    </td>
                                    <td>
                                        <span class="badge {{ $change->change_type_badge_class }}">
                                            {{ ucfirst(str_replace('_', ' ', $change->change_type)) }}
                                        </span>
                                    </td>
                                    <td>
                                        <small class="text-muted">{{ ucfirst(str_replace('_', ' ', $change->section ?? 'N/A')) }}</small>
                                    </td>
                                    <td>
                                        @if($change->field_name)
                                            <code class="small">{{ $change->field_name }}</code>
                                        @else
                                            <small class="text-muted">-</small>
                                        @endif
                                    </td>
                                    <td>
                                        {{ $change->formatted_description }}
                                        @if($change->old_value && $change->new_value && $change->field_name)
                                            <br><small class="text-muted">
                                                <span class="text-danger">{{ Str::limit($change->old_value, 30) }}</span> 
                                                → 
                                                <span class="text-success">{{ Str::limit($change->new_value, 30) }}</span>
                                            </small>
                                        @endif
                                    </td>
                                    <td>
                                        <span class="badge {{ $change->severity_badge_class }}">
                                            {{ ucfirst($change->severity) }}
                                        </span>
                                    </td>
                                    <td>
                                        @if($change->user)
                                            <div class="d-flex align-items-center">
                                                <div class="avatar-sm mr-2">
                                                    <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 30px; height: 30px;">
                                                        {{ strtoupper(substr($change->user->username, 0, 1)) }}
                                                    </div>
                                                </div>
                                                <div>
                                                    <small class="font-weight-bold">{{ $change->user->username }}</small>
                                                </div>
                                            </div>
                                        @else
                                            <span class="badge badge-secondary">System</span>
                                        @endif
                                    </td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-primary" onclick="viewChangeDetails({{ $change->id }})">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="text-center py-4">
                    <i class="fas fa-history fa-3x text-gray-300 mb-3"></i>
                    <h5 class="text-gray-500">No Changes Found</h5>
                    <p class="text-gray-400">No changes match your current filters.</p>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Change Details Modal -->
<div class="modal fade" id="changeDetailsModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Change Details</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body" id="changeDetailsContent">
                <div class="text-center">
                    <i class="fas fa-spinner fa-spin"></i> Loading...
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
// Set up CSRF token for AJAX requests
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

$(document).ready(function() {
    $('#changesTable').DataTable({
        order: [[0, 'desc']],
        pageLength: 25,
        responsive: true,
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    });
});

function viewChangeDetails(changeId) {
    $('#changeDetailsModal').modal('show');
    $('#changeDetailsContent').html('<div class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading...</div>');
    
    $.ajax({
        url: `{{ route('patent.changes.details', '') }}/${changeId}`,
        method: 'GET',
        success: function(response) {
            console.log('Response:', response); // Debug log
            if (response && response.success && response.data) {
                const change = response.data;
                let content = `
                    <div class="row">
                        <div class="col-md-6">
                            <h6 class="text-primary">Basic Information</h6>
                            <table class="table table-sm">
                                <tr><td><strong>Change Type:</strong></td><td><span class="badge badge-info">${change.change_type.replace('_', ' ')}</span></td></tr>
                                <tr><td><strong>Section:</strong></td><td>${change.section || 'N/A'}</td></tr>
                                <tr><td><strong>Field:</strong></td><td><code>${change.field_name || 'N/A'}</code></td></tr>
                                <tr><td><strong>Severity:</strong></td><td><span class="badge badge-warning">${change.severity}</span></td></tr>
                                <tr><td><strong>Changed By:</strong></td><td>${change.changed_by}</td></tr>
                                <tr><td><strong>Date & Time:</strong></td><td>${change.changed_at}</td></tr>
                                <tr><td><strong>IP Address:</strong></td><td>${change.ip_address || 'N/A'}</td></tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <h6 class="text-primary">Change Details</h6>
                            <div class="mb-3">
                                <strong>Description:</strong>
                                <p class="mt-1">${change.description}</p>
                            </div>`;

                if (change.old_value || change.new_value) {
                    content += `
                            <div class="mb-3">
                                <strong>Value Changes:</strong>
                                <div class="mt-1">
                                    <div class="mb-2">
                                        <small class="text-muted">Old Value:</small>
                                        <div class="bg-light p-2 border-left border-danger">
                                            <code class="text-danger">${change.old_value || 'null'}</code>
                                        </div>
                                    </div>
                                    <div>
                                        <small class="text-muted">New Value:</small>
                                        <div class="bg-light p-2 border-left border-success">
                                            <code class="text-success">${change.new_value || 'null'}</code>
                                        </div>
                                    </div>
                                </div>
                            </div>`;
                }

                if (change.metadata && Object.keys(change.metadata).length > 0) {
                    content += `
                            <div class="mb-3">
                                <strong>Additional Information:</strong>
                                <div class="mt-1">
                                    <pre class="bg-light p-2 small">${JSON.stringify(change.metadata, null, 2)}</pre>
                                </div>
                            </div>`;
                }

                content += `
                        </div>
                    </div>`;

                $('#changeDetailsContent').html(content);
            } else {
                console.error('Invalid response format:', response);
                $('#changeDetailsContent').html('<div class="alert alert-danger">Invalid response format from server.</div>');
            }
        },
        error: function(xhr, status, error) {
            console.error('AJAX Error:', xhr, status, error); // Debug log
            let errorMessage = 'Error loading change details.';
            if (xhr.responseJSON && xhr.responseJSON.message) {
                errorMessage += ' ' + xhr.responseJSON.message;
            } else if (xhr.status) {
                errorMessage += ' (HTTP ' + xhr.status + ')';
            }
            $('#changeDetailsContent').html('<div class="alert alert-danger">' + errorMessage + '</div>');
        }
    });
}
</script>
@endpush

@endsection