@extends('layouts.app')

@section('title', 'View Reference - ISP ERP System')

@section('page-title', 'View Reference')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h3 class="mb-0">
                                <i class="fas fa-eye me-2"></i>
                                View Reference
                            </h3>
                            <p class="mb-0 opacity-75">Reference details and information</p>
                        </div>
                        <div class="d-flex gap-2">
                            <a href="{{ route('references.index') }}" class="btn btn-secondary btn-custom">
                                <i class="fas fa-arrow-left me-2"></i>Back to References
                            </a>
                            <a href="{{ route('references.edit', $reference) }}" class="btn btn-warning btn-custom">
                                <i class="fas fa-edit me-2"></i>Edit Reference
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Reference Details -->
    <div class="row">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-user me-2"></i>
                        Reference Information
                    </h5>
                </div>
                <div class="custom-card-body">
                    <div class="info-grid">
                        <div class="info-item">
                            <div class="info-label">
                                <i class="fas fa-user text-primary me-1"></i>
                                Name
                            </div>
                            <div class="info-value">{{ $reference->name }}</div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">
                                <i class="fas fa-tag text-primary me-1"></i>
                                Type
                            </div>
                            <div class="info-value">
                                <span class="badge bg-{{ $reference->type === 'client' ? 'primary' : ($reference->type === 'employee' ? 'success' : 'secondary') }}">
                                    {{ ucfirst($reference->type) }}
                                </span>
                            </div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">
                                <i class="fas fa-phone text-primary me-1"></i>
                                Phone Number
                            </div>
                            <div class="info-value">{{ $reference->phone ?: 'Not provided' }}</div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">
                                <i class="fas fa-envelope text-primary me-1"></i>
                                Email Address
                            </div>
                            <div class="info-value">{{ $reference->email ?: 'Not provided' }}</div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">
                                <i class="fas fa-map-marker-alt text-primary me-1"></i>
                                Address
                            </div>
                            <div class="info-value">{{ $reference->address ?: 'Not provided' }}</div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">
                                <i class="fas fa-info-circle text-primary me-1"></i>
                                Description
                            </div>
                            <div class="info-value">{{ $reference->description ?: 'No description provided' }}</div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">
                                <i class="fas fa-toggle-on text-primary me-1"></i>
                                Status
                            </div>
                            <div class="info-value">
                                <span class="badge bg-{{ $reference->is_active ? 'success' : 'danger' }}">
                                    {{ $reference->is_active ? 'Active' : 'Inactive' }}
                                </span>
                            </div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">
                                <i class="fas fa-user-plus text-primary me-1"></i>
                                Created By
                            </div>
                            <div class="info-value">{{ $reference->creator->name ?? 'System' }}</div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">
                                <i class="fas fa-calendar text-primary me-1"></i>
                                Created At
                            </div>
                            <div class="info-value">{{ $reference->created_at->format('M d, Y \a\t h:i A') }}</div>
                        </div>

                        @if($reference->updated_at != $reference->created_at)
                        <div class="info-item">
                            <div class="info-label">
                                <i class="fas fa-user-edit text-primary me-1"></i>
                                Last Updated By
                            </div>
                            <div class="info-value">{{ $reference->updater->name ?? 'System' }}</div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">
                                <i class="fas fa-clock text-primary me-1"></i>
                                Last Updated At
                            </div>
                            <div class="info-value">{{ $reference->updated_at->format('M d, Y \a\t h:i A') }}</div>
                        </div>
                        @endif
                    </div>

                    <div class="d-flex justify-content-end gap-2 mt-4">
                        <a href="{{ route('references.index') }}" class="btn btn-secondary btn-custom">
                            <i class="fas fa-arrow-left me-2"></i>Back to References
                        </a>
                        <a href="{{ route('references.edit', $reference) }}" class="btn btn-warning btn-custom">
                            <i class="fas fa-edit me-2"></i>Edit Reference
                        </a>
                        <form action="{{ route('references.destroy', $reference) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this reference?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger btn-custom">
                                <i class="fas fa-trash me-2"></i>Delete Reference
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('styles')
<style>
.page-header-modern {
    background: linear-gradient(135deg, #2F4255 0%, #3d5a73 100%);
    color: white;
    padding: 2rem 0;
    margin-bottom: 2rem;
    border-radius: 0.5rem;
}

.card-modern {
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.info-item {
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 0.5rem;
    border-left: 4px solid #0d6efd;
}

.info-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.info-value {
    font-size: 1rem;
    color: #212529;
    word-break: break-word;
}

.btn-custom {
    border-radius: 0.5rem;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
}

.btn-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.custom-card {
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    overflow: hidden;
}

.custom-card-header {
    background: linear-gradient(135deg, #2F4255 0%, #3d5a73 100%);
    color: white;
    padding: 1rem 1.5rem;
}

.custom-card-body {
    padding: 1.5rem;
    background-color: #fff;
}
</style>
@endsection