@extends('layouts.admin')

@section('title', 'View Point - EV Charging Network')

@section('breadcrumb_title', 'Settings')
@section('breadcrumb_sub_title', 'Points')
@section('page_title', 'View Point')

@section('content')
<div class="min-h-screen bg-gray-50">
    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Point Details</h5>
                    <p class="text-sm mb-0">
                        View detailed information about this point.
                    </p>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-control-label">Point Name</label>
                                <p class="form-control-plaintext">{{ $point->name }}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-control-label">Points Value</label>
                                <p class="form-control-plaintext">
                                    <span class="badge badge-info">{{ $point->points }} pts</span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-control-label">Status</label>
                                <p class="form-control-plaintext">
                                    <span class="badge badge-{{ $point->isActive() ? 'success' : 'secondary' }}">
                                        {{ $point->status->value }}
                                    </span>
                                </p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-control-label">Slug</label>
                                <p class="form-control-plaintext">{{ $point->slug }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-control-label">Created At</label>
                                <p class="form-control-plaintext">{{ $point->created_at->format('M d, Y H:i:s') }}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-control-label">Updated At</label>
                                <p class="form-control-plaintext">{{ $point->updated_at->format('M d, Y H:i:s') }}</p>
                            </div>
                        </div>
                    </div>
                    @if($point->createdBy)
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-control-label">Created By</label>
                                <p class="form-control-plaintext">{{ $point->createdBy->name ?? 'N/A' }}</p>
                            </div>
                        </div>
                    </div>
                    @endif
                    <div class="row">
                        <div class="col-12">
                            <div class="d-flex justify-content-end">
                                <a href="{{ route('points.index') }}" class="btn btn-secondary me-2">Back to List</a>
                                <a href="{{ route('points.edit', $point) }}" class="btn btn-primary">Edit Point</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection