@extends('layouts.app')

@section('title', 'View Bandwidth Item')

@section('content')
<div class="container-fluid">
    <!-- Back Button -->
    <div class="row mb-3">
        <div class="col-12">
            <a href="{{ route('reseller.bandwidth-items.index') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left mr-2"></i>Back to Bandwidth Items
            </a>
        </div>
    </div>

    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0 text-gray-800">
                        <i class="fas fa-list mr-2"></i>View Bandwidth Item
                    </h1>
                    <p class="text-muted">Detailed information about {{ $item->name }}</p>
                </div>
                <div>
                    <button class="btn btn-warning" data-toggle="modal" data-target="#editItemModal">
                        <i class="fas fa-edit mr-2"></i>Edit Item
                    </button>
                    <button class="btn btn-danger" onclick="deleteItem({{ $item->id }})">
                        <i class="fas fa-trash mr-2"></i>Delete Item
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Item Details -->
    <div class="row">
        <div class="col-lg-8">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-info">Item Information</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-4">
                            <div class="d-flex align-items-center">
                                <div class="mr-3">
                                    <div class="icon-circle bg-info">
                                        <i class="fas fa-list text-white"></i>
                                    </div>
                                </div>
                                <div>
                                    <h5 class="mb-1">{{ $item->name }}</h5>
                                    <span class="badge badge-primary">{{ $item->usage_count ?? 0 }} Usage</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-4">
                            <div class="text-right">
                                <div class="text-muted small">Created</div>
                                <div class="font-weight-bold">{{ $item->created_at->format('M d, Y H:i') }}</div>
                                <div class="text-muted small mt-1">Last Updated</div>
                                <div class="font-weight-bold">{{ $item->updated_at->format('M d, Y H:i') }}</div>
                            </div>
                        </div>
                    </div>
                    
                    <hr>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label font-weight-bold text-info">Service Category:</label>
                            <p class="mb-0">
                                @if($item->serviceCategory)
                                    <span class="badge badge-primary">{{ $item->serviceCategory->name }}</span>
                                    @if($item->serviceCategory->code)
                                        <br><small class="text-muted">Code: {{ $item->serviceCategory->code }}</small>
                                    @endif
                                @else
                                    <span class="text-muted">No category assigned</span>
                                @endif
                            </p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label font-weight-bold text-info">Provider:</label>
                            <p class="mb-0">
                                @if($item->provider)
                                    <span class="badge badge-secondary">{{ $item->provider->name }}</span>
                                @else
                                    <span class="text-muted">No provider assigned</span>
                                @endif
                            </p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label font-weight-bold text-info">Description:</label>
                            <p class="mb-0">
                                @if($item->description)
                                    {{ $item->description }}
                                @else
                                    <span class="text-muted">No description provided</span>
                                @endif
                            </p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label font-weight-bold text-info">Buying Price:</label>
                            <p class="mb-0">
                                @if($item->buying_price)
                                    <i class="fas fa-dollar-sign mr-1 text-success"></i>{{ number_format($item->buying_price, 2) }}
                                @else
                                    <span class="text-muted">Not set</span>
                                @endif
                            </p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label font-weight-bold text-info">Selling Price:</label>
                            <p class="mb-0">
                                @if($item->selling_price)
                                    <i class="fas fa-dollar-sign mr-1 text-success"></i>{{ number_format($item->selling_price, 2) }}
                                @else
                                    <span class="text-muted">Not set</span>
                                @endif
                            </p>
                        </div>
                        @if($item->buying_price && $item->selling_price)
                        <div class="col-md-12 mb-3">
                            <label class="form-label font-weight-bold text-info">Profit Margin:</label>
                            <p class="mb-0">
                                @php
                                    $margin = $item->selling_price - $item->buying_price;
                                    $marginPercentage = $item->buying_price > 0 ? ($margin / $item->buying_price) * 100 : 0;
                                @endphp
                                <span class="badge badge-{{ $margin >= 0 ? 'success' : 'danger' }}">
                                    {{ $margin >= 0 ? '+' : '' }}{{ number_format($margin, 2) }} 
                                    ({{ number_format($marginPercentage, 1) }}%)
                                </span>
                            </p>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <!-- Quick Actions -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-info">Quick Actions</h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <button class="btn btn-warning" data-toggle="modal" data-target="#editItemModal">
                            <i class="fas fa-edit mr-2"></i>Edit Item
                        </button>
                        <button class="btn btn-danger" onclick="deleteItem({{ $item->id }})">
                            <i class="fas fa-trash mr-2"></i>Delete Item
                        </button>
                        <a href="{{ route('reseller.bandwidth-items.index') }}" class="btn btn-secondary">
                            <i class="fas fa-list mr-2"></i>View All Items
                        </a>
                    </div>
                </div>
            </div>

            <!-- Item Statistics -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-info">Item Statistics</h6>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6 mb-3">
                            <div class="border-right">
                                <div class="h4 mb-0 text-info">{{ $item->usage_count ?? 0 }}</div>
                                <div class="text-muted small">Usage Count</div>
                            </div>
                        </div>
                        <div class="col-6 mb-3">
                            <div class="h4 mb-0 text-info">{{ $item->created_at->diffInDays(now()) }}</div>
                            <div class="text-muted small">Days Active</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Pricing Information -->
            @if($item->buying_price || $item->selling_price)
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-info">Pricing Information</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        @if($item->buying_price)
                        <div class="col-12 mb-2">
                            <div class="d-flex justify-content-between">
                                <span class="text-muted">Buying Price:</span>
                                <span class="font-weight-bold text-success">${{ number_format($item->buying_price, 2) }}</span>
                            </div>
                        </div>
                        @endif
                        @if($item->selling_price)
                        <div class="col-12 mb-2">
                            <div class="d-flex justify-content-between">
                                <span class="text-muted">Selling Price:</span>
                                <span class="font-weight-bold text-success">${{ number_format($item->selling_price, 2) }}</span>
                            </div>
                        </div>
                        @endif
                        @if($item->buying_price && $item->selling_price)
                        <div class="col-12">
                            <hr class="my-2">
                            <div class="d-flex justify-content-between">
                                <span class="text-muted">Profit:</span>
                                <span class="font-weight-bold text-{{ $margin >= 0 ? 'success' : 'danger' }}">
                                    ${{ number_format($margin, 2) }}
                                </span>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
            @endif

            <!-- Bandwidth Item Information -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-info">Bandwidth Item Information</h6>
                </div>
                <div class="card-body">
                    <div class="text-center">
                        <i class="fas fa-list fa-3x text-info mb-3"></i>
                        <h6 class="text-info">Bandwidth Item</h6>
                        <p class="text-muted small mb-0">
                            This item represents a specific type of bandwidth service (e.g., GGC, FB, INT, LOCAL).
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Edit Item Modal -->
<div class="modal fade" id="editItemModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Bandwidth Item</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form action="{{ route('reseller.bandwidth-items.update', $item->id) }}" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="name" class="form-label">Item Name *</label>
                        <input type="text" class="form-control" id="name" name="name" value="{{ $item->name }}" required
                               placeholder="e.g., GGC, FB, INT, LOCAL">
                        <div class="form-text">Enter a unique name for the bandwidth item</div>
                    </div>
                    <div class="mb-3">
                        <label for="providers_name_id_edit" class="form-label">Provider *</label>
                        <select class="form-control" id="providers_name_id_edit" name="providers_name_id" required>
                            <option value="">Select Provider</option>
                            @foreach($providers as $provider)
                                <option value="{{ $provider->id }}" {{ $item->providers_name_id == $provider->id ? 'selected' : '' }}>
                                    {{ $provider->name }}
                                </option>
                            @endforeach
                        </select>
                        <div class="form-text">Select the primary provider for this bandwidth item</div>
                    </div>
                    <div class="mb-3">
                        <label for="sub_sub_account_id_edit" class="form-label">Sub Sub Account</label>
                        <select class="form-control" id="sub_sub_account_id_edit" name="sub_sub_account_id">
                            <option value="">Select Sub Sub Account</option>
                            @foreach($subSubAccountTypes as $subSubAccount)
                                <option value="{{ $subSubAccount->sub_sub_account_type_id }}" {{ $item->sub_sub_account_id == $subSubAccount->sub_sub_account_type_id ? 'selected' : '' }}>
                                    @if($subSubAccount->subAccountType){{ $subSubAccount->subAccountType->sub_type_name }} - @endif{{ $subSubAccount->account_name }}@if($subSubAccount->account_code) ({{ $subSubAccount->account_code }})@endif
                                </option>
                            @endforeach
                        </select>
                        <div class="form-text">Select the sub sub account type for this bandwidth item</div>
                    </div>
                    <div class="mb-3">
                        <label for="service_category_id" class="form-label">Service Category *</label>
                        <select class="form-control" id="service_category_id" name="service_category_id" required>
                            <option value="">Select Service Category</option>
                            @foreach($serviceCategories as $category)
                                <option value="{{ $category->id }}" {{ $item->service_category_id == $category->id ? 'selected' : '' }}>
                                    {{ $category->name }} @if($category->code) ({{ $category->code }}) @endif
                                </option>
                            @endforeach
                        </select>
                        <div class="form-text">Select the service category for this bandwidth item</div>
                    </div>
                    <div class="mb-3">
                        <label for="description" class="form-label">Description</label>
                        <textarea class="form-control" id="description" name="description" rows="3"
                                  placeholder="Describe what this bandwidth item is used for...">{{ $item->description }}</textarea>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="buying_price" class="form-label">Buying Price</label>
                            <input type="number" class="form-control" id="buying_price" name="buying_price" 
                                   step="0.01" min="0" value="{{ $item->buying_price }}" placeholder="0.00">
                            <div class="form-text">Cost price for this bandwidth item</div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="selling_price" class="form-label">Selling Price</label>
                            <input type="number" class="form-control" id="selling_price" name="selling_price" 
                                   step="0.01" min="0" value="{{ $item->selling_price }}" placeholder="0.00">
                            <div class="form-text">Selling price for this bandwidth item</div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-warning">Update Item</button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
.icon-circle {
    height: 3rem;
    width: 3rem;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.border-right {
    border-right: 1px solid #e3e6f0 !important;
}
</style>

<script>
function deleteItem(id) {
    if (confirm('Are you sure you want to delete this bandwidth item?')) {
        // Create a form and submit it
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '{{ route("reseller.bandwidth-items.destroy", ":id") }}'.replace(':id', id);
        
        // Add CSRF token
        const csrfToken = document.createElement('input');
        csrfToken.type = 'hidden';
        csrfToken.name = '_token';
        csrfToken.value = '{{ csrf_token() }}';
        form.appendChild(csrfToken);
        
        // Add method override for DELETE
        const methodField = document.createElement('input');
        methodField.type = 'hidden';
        methodField.name = '_method';
        methodField.value = 'DELETE';
        form.appendChild(methodField);
        
        // Submit the form
        document.body.appendChild(form);
        form.submit();
    }
}
</script>

@endsection