@extends('admin.layouts.layout')

@section('content')
<div class="mb-4">
    <div class="servicestitle">
        <h3>Agreement Versions - {{ $agreement->name }}</h3>
        <div class="d-flex gap-2 ms-auto">
            @if($permission['show'] ?? true)
            <a href="{{ route('agreements.show', $agreement->id) }}" class="btn btn-info">
                <i class="fas fa-eye"></i> View Agreement
            </a>
            @endif
            @if($permission['edit'] ?? true)
            <a href="{{ route('agreements.edit', $agreement->id) }}" class="btn btn-primary">
                <i class="fas fa-edit"></i> Edit Agreement
            </a>
            @endif
            @if($permission['index'] ?? true)
            <a href="{{ route('agreements.index') }}" class="btn btn-dark waves-effect">
                <i class="fas fa-arrow-left"></i> Back to Agreements
            </a>
            @endif
        </div>
    </div>

    <div class="service_contentarea">
        <!-- Current Agreement Info -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">Current Agreement Details</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <p><strong>Name:</strong> {{ $agreement->name }}</p>
                        <p><strong>Service:</strong> {{ $agreement->service ? $agreement->service->service_name : 'N/A' }}</p>
                        <p><strong>State:</strong> {{ $agreement->state ?: 'N/A' }}</p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>Status:</strong> 
                            <span class="badge bg-{{ $agreement->is_active ? 'success' : 'danger' }}">
                                {{ $agreement->is_active ? 'Active' : 'Inactive' }}
                            </span>
                        </p>
                        <p><strong>Inspector Sign Required:</strong> {{ $agreement->inspector_sign_required ? 'Yes' : 'No' }}</p>
                        <p><strong>Change Order:</strong> {{ $agreement->is_change_order ? 'Yes' : 'No' }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Version History -->
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Version History</h5>
            </div>
            <div class="card-body">
                @if($agreement->versions->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Version</th>
                                    <th>Content Preview</th>
                                    <th>Modified By</th>
                                    <th>Date</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($agreement->versions->sortByDesc('version_no') as $version)
                                <tr>
                                    <td>
                                        <span class="badge bg-secondary fs-6">v{{ $version->version_no }}</span>
                                    </td>
                                    <td>
                                        <div class="version-preview">
                                            {!! Str::limit(strip_tags($version->description_html), 150) !!}
                                        </div>
                                    </td>
                                    <td>
                                        @if($version->editor)
                                            <div class="d-flex align-items-center">
                                                <div class="avatar-sm me-2">
                                                    <i class="fas fa-user-circle fa-2x text-muted"></i>
                                                </div>
                                                <div>
                                                    <div class="fw-bold">{{ $version->editor->first_name }} {{ $version->editor->last_name }}</div>
                                                    <small class="text-muted">{{ $version->editor->email }}</small>
                                                </div>
                                            </div>
                                        @else
                                            <span class="text-muted">Unknown</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="text-nowrap">
                                            <div class="fw-bold">{{ \App\Helpers\Helper::showdate($version->created_at, false) }}</div>
                                            <small class="text-muted">{{ $version->created_at->format('H:i') }}</small>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <button type="button" class="btn btn-sm btn-outline-primary view-version" 
                                                    data-version="{{ $version->id }}" 
                                                    data-content="{{ $version->description_html }}"
                                                    data-version-no="{{ $version->version_no }}"
                                                    data-date="{{ \App\Helpers\Helper::showdate($version->created_at) }}"
                                                    data-editor="{{ $version->editor ? $version->editor->first_name . ' ' . $version->editor->last_name : 'Unknown' }}">
                                                <i class="fas fa-eye"></i> View
                                            </button>
                                            <!-- <button type="button" class="btn btn-sm btn-outline-info compare-version" 
                                                    data-version="{{ $version->id }}" 
                                                    data-content="{{ $version->description_html }}">
                                                <i class="fas fa-exchange-alt"></i> Compare
                                            </button> -->
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="text-center py-5">
                        <i class="fas fa-history fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">No Version History</h5>
                        <p class="text-muted">This agreement hasn't been modified yet. Changes to the agreement content will create new versions automatically.</p>
                    </div>
                @endif
            </div>
        </div>

        <!-- Version Comparison Modal -->
        <div class="modal fade" id="versionModal" tabindex="-1" aria-labelledby="versionModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="versionModalLabel">Version Content</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="version-info mb-3">
                            <div class="row">
                                <div class="col-md-4">
                                    <strong>Version:</strong> <span id="modal-version-no"></span>
                                </div>
                                <div class="col-md-4">
                                    <strong>Modified By:</strong> <span id="modal-editor"></span>
                                </div>
                                <div class="col-md-4">
                                    <strong>Date:</strong> <span id="modal-date"></span>
                                </div>
                            </div>
                        </div>
                        <div class="version-content border rounded p-3 bg-light">
                            <div id="modal-content"></div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Comparison Modal -->
        <div class="modal fade" id="comparisonModal" tabindex="-1" aria-labelledby="comparisonModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="comparisonModalLabel">Version Comparison</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h6 class="text-primary">Current Version</h6>
                                <div class="border rounded p-3 bg-light" style="max-height: 400px; overflow-y: auto;">
                                    {!! $agreement->description_html !!}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h6 class="text-secondary">Version <span id="compare-version-no"></span></h6>
                                <div class="border rounded p-3 bg-light" style="max-height: 400px; overflow-y: auto;">
                                    <div id="compare-content"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('page_css')
<style>
.version-preview {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avatar-sm {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.version-info {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #dee2e6;
}

.version-content {
    font-size: 14px;
    line-height: 1.6;
}

.version-content h1, .version-content h2, .version-content h3, 
.version-content h4, .version-content h5, .version-content h6 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.version-content p {
    margin-bottom: 0.5rem;
}

.version-content ul, .version-content ol {
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
}
</style>
@endpush

@push('page_script')
<script>
$(document).ready(function() {
    // View version functionality
    $('.view-version').click(function() {
        const content = $(this).data('content');
        const versionNo = $(this).data('version-no');
        const date = $(this).data('date');
        const editor = $(this).data('editor');
        
        $('#modal-version-no').text('v' + versionNo);
        $('#modal-editor').text(editor);
        $('#modal-date').text(date);
        $('#modal-content').html(content);
        $('#versionModal').modal('show');
    });

    // Compare version functionality
    $('.compare-version').click(function() {
        const content = $(this).data('content');
        const versionNo = $(this).data('version-no');
        
        $('#compare-version-no').text(versionNo);
        $('#compare-content').html(content);
        $('#comparisonModal').modal('show');
    });

    // Initialize tooltips
    $('[data-bs-toggle="tooltip"]').tooltip();
});
</script>
@endpush