@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="page-header">
        <div class="row align-items-center">
            <div class="col">
                <h3 class="page-title">
                    {{ $tierGroup->name }}
                </h3>
            </div>
            <div class="col-auto">
                <a href="{{ route('tier-groups.edit', $tierGroup) }}" class="btn btn-warning">
                    <i class="fe fe-edit"></i> Edit
                </a>
                <form method="POST" action="{{ route('tier-groups.destroy', $tierGroup) }}" style="display:inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure?')">
                        <i class="fe fe-trash"></i> Delete
                    </button>
                </form>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Tier Group Information</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label text-muted">Group Name</label>
                        <p class="mb-0"><strong>{{ $tierGroup->name }}</strong></p>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted">Company</label>
                        <p class="mb-0"><strong>{{ $tierGroup->company->name }}</strong></p>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted">Description</label>
                        <p class="mb-0">{{ $tierGroup->description ?? 'N/A' }}</p>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted">Rate Calculation Method</label>
                        <p class="mb-0">
                            <span class="badge bg-{{ $tierGroup->calculation_type === \App\Models\TierGroup::TYPE_FIXED_BRACKET ? 'secondary' : 'info' }}">
                                {{ $tierGroup->calculation_type_label }}
                            </span>
                        </p>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted">Status</label>
                        <p class="mb-0">
                            @if($tierGroup->is_active)
                                <span class="badge bg-success">Active</span>
                            @else
                                <span class="badge bg-danger">Inactive</span>
                            @endif
                        </p>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted">Created On</label>
                        <p class="mb-0">{{ $tierGroup->created_at->format('M d, Y H:i') }}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Summary</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <h6 class="text-muted">Associated Tiers</h6>
                        <h2>{{ $tierGroup->tiers()->count() }}</h2>
                    </div>
                    <div class="mb-3">
                        <h6 class="text-muted">Associated Clients</h6>
                        <h2>{{ $tierGroup->clients()->count() }}</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Pricing Tiers</h5>
                </div>
                <div class="card-body">
                    @if($tierGroup->tiers->count() > 0)
                            <table class="table table-hover table-striped" id="pricingTiersTable">
                                <thead>
                                    <tr>
                                        <th>Tier Name</th>
                                        <th>From (Units)</th>
                                        <th>To (Units)</th>
                                        <th>Price Per Unit</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($tierGroup->tiers as $tier)
                                        <tr>
                                            <td>
                                                <strong>{{ $tier->name }}</strong>
                                                @if($tier->is_minimum)
                                                    <span class="badge bg-primary">Minimum</span>
                                                @endif
                                            </td>
                                            <td>{{ $tier->min_units }}</td>
                                            <td>{{ $tier->max_units }}</td>
                                            <td>
                                                <strong>{{ number_format($tier->price_per_unit, 2) }}</strong>
                                                @if($tierGroup->calculation_type !== \App\Models\TierGroup::TYPE_FIXED_BRACKET)
                                                    <small class="text-muted">{{ $tier->is_minimum ? '(flat minimum)' : '/ cu.m' }}</small>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>

                    @else
                        <div class="alert alert-info mb-0">
                            No tiers assigned to this group yet. <a href="{{ route('tiers.create') }}">Create a tier</a>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Assigned Clients</h5>
                </div>
                <div class="card-body">
                    @if($tierGroup->clients->count() > 0)
                            <table class="table table-hover table-striped" id="assignedClientsTable">
                                <thead>
                                    <tr>
                                        <th>Client Name</th>
                                        <th>Account No</th>
                                        <th>Phone</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($tierGroup->clients as $client)
                                        <tr>
                                            <td><strong>{{ $client->name }}</strong></td>
                                            <td>{{ $client->account_number }}</td>
                                            <td>{{ $client->phone ?? 'N/A' }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                    @else
                        <div class="alert alert-info mb-0">
                            No clients assigned to this group yet. <a href="{{ route('clients.create') }}">Add a client</a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-md-12">
            <a href="{{ route('tier-groups.index') }}" class="btn btn-secondary">
                <i class="fe fe-arrow-left"></i> Back to Tier Groups
            </a>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // Ensure jQuery is available
    if (typeof jQuery !== 'undefined') {
        jQuery(document).ready(function($) {
            // Initialize DataTable for Pricing Tiers
            if ($('#pricingTiersTable').length && typeof $.fn.DataTable !== 'undefined') {
                $('#pricingTiersTable').DataTable({
                    responsive: true,
                    pageLength: 25,
                    language: {
                        search: "Filter:"
                    }
                });
            }

            // Initialize DataTable for Assigned Clients
            if ($('#assignedClientsTable').length && typeof $.fn.DataTable !== 'undefined') {
                $('#assignedClientsTable').DataTable({
                    responsive: true,
                    pageLength: 25,
                    language: {
                        search: "Filter:"
                    }
                });
            }
        });
    }
</script>
@endsection