@extends('admin.layouts.layout')

@section('title', 'View Agreement: ' . $agreement->name)

@section('content')
<div class="mb-4">
    <div class="servicestitle">
        <h3>View Agreement: {{ $agreement->name }}</h3>
        <div class="d-flex gap-2 ms-auto">            
            @if($permission['versions'] ?? true)
            <a href="{{ route('agreements.versions', $agreement->id) }}" class="btn btn-info">
                <i class="fas fa-history"></i> View Versions
            </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">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">Agreement Details</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Name:</label>
                                    <p class="form-control-plaintext">{{ $agreement->name }}</p>
                                </div>
                                
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Service:</label>
                                    <p class="form-control-plaintext">
                                        {{ $agreement->service ? $agreement->service->service_name : 'N/A' }}
                                    </p>
                                </div>
                                
                                <div class="mb-3">
                                    <label class="form-label fw-bold">State:</label>
                                    <p class="form-control-plaintext">{{ $agreement->state ?: 'N/A' }}</p>
                                </div>
                                
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Status:</label>
                                    <p class="form-control-plaintext">
                                        <span class="badge bg-{{ $agreement->is_active ? 'success' : 'danger' }}">
                                            {{ $agreement->is_active ? 'Active' : 'Inactive' }}
                                        </span>
                                    </p>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Inspector Sign Required:</label>
                                    <p class="form-control-plaintext">
                                        {{ $agreement->inspector_sign_required ? 'Yes' : 'No' }}
                                    </p>
                                </div>
                                
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Change Order:</label>
                                    <p class="form-control-plaintext">
                                        {{ $agreement->is_change_order ? 'Yes' : 'No' }}
                                    </p>
                                </div>
                                
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Created By:</label>
                                    <p class="form-control-plaintext">
                                        {{ $agreement->creator ? $agreement->creator->first_name . ' ' . $agreement->creator->last_name : 'N/A' }}
                                    </p>
                                </div>
                                
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Last Updated By:</label>
                                    <p class="form-control-plaintext">
                                        {{ $agreement->updater ? $agreement->updater->first_name . ' ' . $agreement->updater->last_name : 'N/A' }}
                                    </p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label fw-bold">Banner Image:</label>
                            <div class="mt-2">
                                @if($agreement->banner_pic_image)
                                    <div class="banner-preview-container">
                                        <img src="{{ $agreement->banner_pic_image['original'] }}" 
                                            alt="Agreement Banner" 
                                            class="banner-preview" 
                                            style="max-width: 100%; max-height: 200px; border-radius: 6px;">
                                    </div>
                                @else
                                    <div class="banner-preview-container no-banner">
                                        <i class="fas fa-image fa-3x text-muted mb-2"></i>
                                        <p class="text-muted mb-0">No banner image uploaded</p>
                                        <small class="text-muted">Banner image will appear here when uploaded</small>
                                    </div>
                                @endif
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label fw-bold">Description:</label>
                            <div class="mt-2 p-3 border rounded bg-light">
                                {!! $agreement->description_html !!}
                            </div>
                        </div>
                        
                        @if($agreement->latestVersion)
                        <div class="mb-3">
                            <label class="form-label fw-bold">Latest Version:</label>
                            <p class="form-control-plaintext">
                                <span class="badge bg-secondary">v{{ $agreement->latestVersion->version_no }}</span>
                                - Created on {{ \App\Helpers\Helper::showdate($agreement->latestVersion->created_at) }}
                            </p>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('page_css')
<style>
.form-control-plaintext {
    padding: 0.375rem 0;
    margin-bottom: 0;
    color: #495057;
    background-color: transparent;
    border: solid transparent;
    border-width: 1px 0;
}

.form-label.fw-bold {
    color: #495057;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
}

/* Banner Image Styles - Matching Edit page */
.banner-preview-container {
    border: 2px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    background: #f8f9fa;
    text-align: center;
    transition: all 0.3s ease;
}

.banner-preview {
    max-width: 100%;
    max-height: 200px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.banner-preview-container:hover {
    border-color: #007bff;
    background: #e3f2fd;
}

.banner-preview-container.no-banner {
    border: 2px dashed #dee2e6;
    padding: 40px 20px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.banner-preview-container.no-banner:hover {
    border-color: #6c757d;
    background: #f8f9fa;
}
</style>
@endpush