@extends('layouts.app')

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

@section('page-title', 'View Bandwidth Request')

@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>
                                Bandwidth Request Details
                            </h3>
                            <p class="mb-0 opacity-75">Request ID: #{{ $bandwidthUpdownRequest->id }}</p>
                        </div>
                        <div class="d-flex gap-2">
                            <a href="{{ route('bandwidth-updown-requests.index') }}" class="btn btn-secondary btn-custom">
                                <i class="fas fa-arrow-left me-2"></i>Back to Requests
                            </a>
                            @if($bandwidthUpdownRequest->status === 'pending')
                                <a href="{{ route('bandwidth-updown-requests.edit', $bandwidthUpdownRequest) }}" class="btn btn-warning btn-custom">
                                    <i class="fas fa-edit me-2"></i>Edit
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <!-- Request Details -->
    <div class="row">
        <div class="col-md-8">
            <div class="custom-card">
                <div class="custom-card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-info-circle me-2"></i>
                        Request Information
                    </h5>
                </div>
                <div class="custom-card-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <strong>User:</strong>
                            <p class="mb-0">
                                @if($bandwidthUpdownRequest->user)
                                    {{ $bandwidthUpdownRequest->user->company_name ? $bandwidthUpdownRequest->user->company_name . ' - ' . $bandwidthUpdownRequest->user->name : $bandwidthUpdownRequest->user->name }}
                                    @if($bandwidthUpdownRequest->user->email)
                                        <br><small class="text-muted">{{ $bandwidthUpdownRequest->user->email }}</small>
                                    @endif
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </p>
                        </div>
                        <div class="col-md-6">
                            <strong>Request Type:</strong>
                            <p class="mb-0">
                                <span class="badge bg-{{ $bandwidthUpdownRequest->request_type === 'upgrade' ? 'success' : ($bandwidthUpdownRequest->request_type === 'downgrade' ? 'warning' : 'danger') }}">
                                    {{ ucfirst($bandwidthUpdownRequest->request_type) }}
                                </span>
                            </p>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <strong>Effective Date:</strong>
                            <p class="mb-0">
                                {{ $bandwidthUpdownRequest->effective_date ? $bandwidthUpdownRequest->effective_date->format('M d, Y') : '-' }}
                            </p>
                        </div>
                        <div class="col-md-6">
                            <strong>Status:</strong>
                            <p class="mb-0">
                                <span class="badge bg-{{ $bandwidthUpdownRequest->status === 'approved' ? 'success' : ($bandwidthUpdownRequest->status === 'rejected' ? 'danger' : ($bandwidthUpdownRequest->status === 'processed' ? 'info' : 'warning')) }}">
                                    {{ ucfirst($bandwidthUpdownRequest->status) }}
                                </span>
                            </p>
                        </div>
                    </div>

                    @if($bandwidthUpdownRequest->new_bandwidth_mbps)
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <strong>New Bandwidth:</strong>
                                <p class="mb-0">{{ number_format($bandwidthUpdownRequest->new_bandwidth_mbps, 2) }} Mbps</p>
                            </div>
                        </div>
                    @endif

                    @if($bandwidthUpdownRequest->currentSalesInvoice)
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <strong>Current Sales Invoice:</strong>
                                <p class="mb-0">
                                    <a href="{{ route('sales-invoices.show', $bandwidthUpdownRequest->currentSalesInvoice) }}">
                                        {{ $bandwidthUpdownRequest->currentSalesInvoice->invoice_no }}
                                    </a>
                                </p>
                            </div>
                        </div>
                    @endif

                    @if($bandwidthUpdownRequest->currentSalesInvoiceItem)
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <strong>Current Sales Invoice Item:</strong>
                                <p class="mb-0">{{ $bandwidthUpdownRequest->currentSalesInvoiceItem->item_name }}</p>
                            </div>
                        </div>
                    @endif

                    @if($bandwidthUpdownRequest->salesInvoice)
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <strong>Generated Sales Invoice:</strong>
                                <p class="mb-0">
                                    <a href="{{ route('sales-invoices.show', $bandwidthUpdownRequest->salesInvoice) }}">
                                        {{ $bandwidthUpdownRequest->salesInvoice->invoice_no }}
                                    </a>
                                </p>
                            </div>
                        </div>
                    @endif

                    @if($bandwidthUpdownRequest->salesInvoiceItem)
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <strong>Generated Sales Invoice Item:</strong>
                                <p class="mb-0">{{ $bandwidthUpdownRequest->salesInvoiceItem->item_name }}</p>
                            </div>
                        </div>
                    @endif

                    @if($bandwidthUpdownRequest->notes)
                        <div class="row mb-3">
                            <div class="col-12">
                                <strong>Notes:</strong>
                                <p class="mb-0">{{ $bandwidthUpdownRequest->notes }}</p>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="custom-card">
                <div class="custom-card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-user-cog me-2"></i>
                        Actions & History
                    </h5>
                </div>
                <div class="custom-card-body">
                    @if($bandwidthUpdownRequest->status === 'pending')
                        <div class="mb-3">
                            <form action="{{ route('bandwidth-updown-requests.approve', $bandwidthUpdownRequest) }}" method="POST" class="d-inline">
                                @csrf
                                <button type="submit" class="btn btn-success btn-block w-100 mb-2" onclick="return confirm('Are you sure you want to approve this request?')">
                                    <i class="fas fa-check me-2"></i>Approve Request
                                </button>
                            </form>
                        </div>

                        <div class="mb-3">
                            <button type="button" class="btn btn-danger btn-block w-100" data-bs-toggle="modal" data-bs-target="#rejectModal">
                                <i class="fas fa-times me-2"></i>Reject Request
                            </button>
                        </div>
                    @endif

                    <hr>

                    <div class="mb-3">
                        <strong>Created By:</strong>
                        <p class="mb-0">
                            {{ $bandwidthUpdownRequest->creator ? $bandwidthUpdownRequest->creator->name : '-' }}
                            <br><small class="text-muted">{{ $bandwidthUpdownRequest->created_at->format('M d, Y H:i') }}</small>
                        </p>
                    </div>

                    @if($bandwidthUpdownRequest->approver)
                        <div class="mb-3">
                            <strong>Approved/Rejected By:</strong>
                            <p class="mb-0">
                                {{ $bandwidthUpdownRequest->approver->name }}
                                <br><small class="text-muted">{{ $bandwidthUpdownRequest->approved_at ? $bandwidthUpdownRequest->approved_at->format('M d, Y H:i') : '-' }}</small>
                            </p>
                        </div>
                    @endif

                    <div class="mb-3">
                        <strong>Last Updated:</strong>
                        <p class="mb-0">
                            <small class="text-muted">{{ $bandwidthUpdownRequest->updated_at->format('M d, Y H:i') }}</small>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Reject Modal -->
@if($bandwidthUpdownRequest->status === 'pending')
<div class="modal fade" id="rejectModal" tabindex="-1" aria-labelledby="rejectModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="rejectModalLabel">Reject Request</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('bandwidth-updown-requests.reject', $bandwidthUpdownRequest) }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="rejection_notes" class="form-label">Rejection Notes (Optional)</label>
                        <textarea class="form-control" id="rejection_notes" name="rejection_notes" rows="3" maxlength="2000"></textarea>
                        <small class="form-text text-muted">Please provide a reason for rejection (optional)</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger">Reject Request</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif
@endsection

@section('styles')
<style>
.custom-card {
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    margin-bottom: 1.5rem;
}

.custom-card-header {
    background-color: #fff;
    border-bottom: 1px solid #dee2e6;
    padding: 1rem 1.5rem;
}

.custom-card-body {
    padding: 1.5rem;
}

.btn-custom {
    border-radius: 0.375rem;
}

.btn-block {
    display: block;
    width: 100%;
}
</style>
@endsection