@extends('layouts.app')

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

@section('page-title', 'View Commission Item')

@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 Commission Item
                            </h3>
                            <p class="mb-0 opacity-75">Commission item details and information</p>
                        </div>
                        <div class="d-flex gap-2">
                            <a href="{{ route('commission-items.index') }}" class="btn btn-secondary btn-custom">
                                <i class="fas fa-arrow-left me-2"></i>Back to List
                            </a>
                            <a href="{{ route('commission-items.edit', $commissionItem) }}" class="btn btn-warning btn-custom">
                                <i class="fas fa-edit me-2"></i>Edit Item
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Commission Item Details -->
    <div class="row">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="info-group">
                                <label class="info-label">ID</label>
                                <div class="info-value">{{ $commissionItem->id }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-group">
                                <label class="info-label">Bandwidth Item</label>
                                <div class="info-value">
                                    <strong>{{ $commissionItem->bandwidthItem->name ?? 'N/A' }}</strong>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="info-group">
                                <label class="info-label">Item Code</label>
                                <div class="info-value">
                                    @if($commissionItem->item_code)
                                        <span class="badge bg-primary">{{ $commissionItem->item_code }}</span>
                                    @else
                                        <span class="text-muted">N/A</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-group">
                                <label class="info-label">Sub Tag</label>
                                <div class="info-value">
                                    <span class="badge bg-info">
                                        {{ $commissionItem->subTag->name ?? 'N/A' }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="info-group">
                                <label class="info-label">Status</label>
                                <div class="info-value">
                                    <span class="badge {{ $commissionItem->status === 'active' ? 'bg-success' : 'bg-secondary' }}">
                                        {{ ucfirst($commissionItem->status) }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-group">
                                <label class="info-label">Created At</label>
                                <div class="info-value">{{ $commissionItem->created_at->format('M d, Y H:i:s') }}</div>
                            </div>
                        </div>
                    </div>

                    @if($commissionItem->description)
                        <div class="row">
                            <div class="col-12">
                                <div class="info-group">
                                    <label class="info-label">Description</label>
                                    <div class="info-value">
                                        <div class="description-content">
                                            {{ $commissionItem->description }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                </div>
            </div>
        </div>
    </div>

    <!-- Action Buttons -->
    <div class="row">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-body">
                    <div class="d-flex justify-content-between">
                        <a href="{{ route('commission-items.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left me-2"></i>Back to List
                        </a>
                        <div class="d-flex gap-2">
                            <a href="{{ route('commission-items.edit', $commissionItem) }}" class="btn btn-warning">
                                <i class="fas fa-edit me-2"></i>Edit Item
                            </a>
                            <form action="{{ route('commission-items.destroy', $commissionItem) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this commission item?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger">
                                    <i class="fas fa-trash me-2"></i>Delete Item
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.info-group {
    margin-bottom: 1.5rem;
}

.info-label {
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 0.5rem;
    display: block;
}

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

.description-content {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.375rem;
    border-left: 4px solid #007bff;
    white-space: pre-wrap;
}
</style>
@endsection