@extends('admin.layouts.layout')

@section('css')
<style>
    .detail-section {
        background: #fff;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .detail-section h5 {
        color: #333;
        margin-bottom: 15px;
        font-weight: 600;
        border-bottom: 2px solid #f8f9fa;
        padding-bottom: 10px;
    }
    
    .detail-row {
        margin-bottom: 15px;
    }
    
    .detail-label {
        font-weight: 600;
        color: #666;
        margin-bottom: 5px;
    }
    
    .detail-value {
        color: #333;
    }
    
    .status-badge {
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 500;
        text-transform: uppercase;
    }

    .status-active {
        background-color: #d4edda;
        color: #155724;
    }

    .status-inactive {
        background-color: #f8d7da;
        color: #721c24;
    }
    
    .service-item {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 6px;
        padding: 10px;
        margin-bottom: 8px;
    }
    
    .service-item:last-child {
        margin-bottom: 0;
    }
</style>
@endsection

@section('content')
<div class="mb-4">
    <div class="main_contentarea mt-2">
        <div class="container">
            <!-- Header -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h3>Template Details</h3>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('admin.home') }}">Dashboard</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('report-templates.master-templates.index') }}">Report Templates</a></li>
                            <li class="breadcrumb-item active">{{ $row->name }}</li>
                        </ol>
                    </nav>
                </div>
                <div>
                    <a href="{{ route('report-templates.master-templates.index') }}" class="btn btn-outline-secondary me-2">
                        <i class="fas fa-arrow-left"></i> Back to List
                    </a>
                    @if($permission['edit'])
                    <a href="{{ route('report-templates.master-templates.edit', $row->id) }}" class="btn btn-primary">
                        <i class="fas fa-edit"></i> Edit Template
                    </a>
                    @endif
                </div>
            </div>

            <div class="row">
                <!-- Basic Information -->
                <div class="col-lg-8">
                    <div class="detail-section">
                        <h5><i class="fas fa-info-circle"></i> Basic Information</h5>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="detail-row">
                                    <div class="detail-label">Template Name</div>
                                    <div class="detail-value">
                                        <strong>{{ $row->name }}</strong>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="detail-row">
                                    <div class="detail-label">Status</div>
                                    <div class="detail-value">
                                        <span class="status-badge {{ $row->is_active ? 'status-active' : 'status-inactive' }}">
                                            {{ $row->is_active ? 'Active' : 'Inactive' }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="detail-row">
                                    <div class="detail-label">Template Type</div>
                                    <div class="detail-value">
                                        <span class="badge bg-secondary">{{ ucfirst($row->template_type) }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="detail-row">
                                    <div class="detail-label">Structure Type</div>
                                    <div class="detail-value">
                                        <span class="badge bg-light text-dark">{{ ucfirst(str_replace('_', ' ', $row->structure_type)) }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        @if($row->tenant)
                        <div class="row">
                            <div class="col-md-6">
                                <div class="detail-row">
                                    <div class="detail-label">Tenant</div>
                                    <div class="detail-value">{{ $row->tenant->name }}</div>
                                </div>
                            </div>
                        </div>
                        @endif

                        <div class="row">
                            <div class="col-md-6">
                                <div class="detail-row">
                                    <div class="detail-label">Created Date</div>
                                    <div class="detail-value">{{ $row->created_at->format('M d, Y h:i A') }}</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="detail-row">
                                    <div class="detail-label">Last Updated</div>
                                    <div class="detail-value">{{ $row->updated_at->format('M d, Y h:i A') }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Associated Services -->
                <div class="col-lg-4">
                    <div class="detail-section">
                        <h5><i class="fas fa-layer-group"></i> Associated Services</h5>
                        
                        @if($row->templateServices->count() > 0)
                            <div class="detail-row">
                                <div class="detail-label">Total Services: {{ $row->templateServices->count() }}</div>
                            </div>
                            
                            <div class="services-list">
                                @foreach($row->templateServices as $templateService)
                                    @if($templateService->service)
                                    <div class="service-item">
                                        <div class="fw-bold">{{ $templateService->service->service_name }}</div>
                                        @if($templateService->service->description)
                                        <div class="text-muted small">{{ Str::limit($templateService->service->description, 100) }}</div>
                                        @endif
                                        <div class="mt-1">
                                            <span class="badge bg-info">{{ ucfirst($templateService->service->service_type) }}</span>
                                            <span class="badge bg-warning">{{ ucfirst($templateService->service->fee_type) }}</span>
                                        </div>
                                    </div>
                                    @endif
                                @endforeach
                            </div>
                        @else
                            <div class="text-center py-4">
                                <div class="text-muted">
                                    <i class="fas fa-inbox fa-2x mb-2"></i>
                                    <p>No services associated with this template.</p>
                                </div>
                            </div>
                        @endif
                    </div>

                    <!-- Quick Actions -->
                    <div class="detail-section">
                        <h5><i class="fas fa-bolt"></i> Quick Actions</h5>
                        
                        <div class="d-grid gap-2">
                            @if($permission['edit'])
                            <a href="{{ route('report-templates.master-templates.edit', $row->id) }}" class="btn btn-primary">
                                <i class="fas fa-edit"></i> Edit Template
                            </a>
                            @endif
                            
                            @if($permission['destroy'])
                            <button type="button" class="btn btn-outline-danger" onclick="deleteTemplate({{ $row->id }})">
                                <i class="fas fa-trash"></i> Delete Template
                            </button>
                            @endif
                            
                            @if($permission['edit'])
                            <button type="button" class="btn btn-outline-secondary" onclick="toggleStatus({{ $row->id }})">
                                <i class="fas fa-toggle-{{ $row->is_active ? 'on' : 'off' }}"></i> 
                                {{ $row->is_active ? 'Deactivate' : 'Activate' }}
                            </button>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirm Delete</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete the template "<strong>{{ $row->name }}</strong>"?</p>
                <p class="text-danger"><small>This action cannot be undone and will also remove all associated services.</small></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirm-delete">Delete</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script>
function deleteTemplate(id) {
    $('#deleteModal').modal('show');
    
    $('#confirm-delete').off('click').on('click', function() {
        $.ajax({
            url: '{{ route("report-templates.master-templates.destroy", ":id") }}'.replace(':id', id),
            type: 'DELETE',
            data: { _token: '{{ csrf_token() }}' },
            success: function(response) {
                $('#deleteModal').modal('hide');
                if (response.status) {
                    showNotification('success', response.message);
                    // Redirect to index after successful deletion
                    setTimeout(function() {
                        window.location.href = '{{ route("report-templates.master-templates.index") }}';
                    }, 1500);
                } else {
                    showNotification('error', response.message || 'Error deleting template');
                }
            },
            error: function(xhr) {
                $('#deleteModal').modal('hide');
                console.error('Delete error:', xhr);
                showNotification('error', 'Error deleting template');
            }
        });
    });
}

function toggleStatus(id) {
    $.ajax({
        url: '{{ route("report-templates.master-templates.toggle-status", ":id") }}'.replace(':id', id),
        type: 'POST',
        data: { _token: '{{ csrf_token() }}' },
        success: function(response) {
            if (response.status) {
                showNotification('success', response.message);
                // Reload page to reflect changes
                setTimeout(function() {
                    location.reload();
                }, 1500);
            } else {
                showNotification('error', response.message || 'Error updating status');
            }
        },
        error: function(xhr) {
            console.error('Status toggle error:', xhr);
            showNotification('error', 'Error updating status');
        }
    });
}

function showNotification(type, message) {
    if (typeof toastr !== 'undefined') {
        toastr[type](message);
    } else if (typeof Swal !== 'undefined') {
        Swal.fire({
            icon: type === 'success' ? 'success' : 'error',
            title: type === 'success' ? 'Success' : 'Error',
            text: message,
            timer: 3000,
            showConfirmButton: false
        });
    } else {
        alert(message);
    }
}
</script>
@endsection