@extends('layouts.modern')

@section('page-title', 'Business Details')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
    <li class="breadcrumb-item"><a href="{{ route('businesses.index') }}">Businesses</a></li>
    <li class="breadcrumb-item active">{{ $business->company_name }}</li>
@endsection

@section('action-buttons')
    <a href="{{ route('businesses.edit', $business->id) }}" class="btn btn-outline-primary">
        <i class="fas fa-edit"></i>
        Edit Business
    </a>
    <a href="{{ route('businesses.index') }}" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left"></i>
        Back to List
    </a>
@endsection

@section('content')
<div class="p-4">
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Business Information</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label"><strong>Company Name:</strong></label>
                            <p class="mb-0">{{ $business->company_name }}</p>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label class="form-label"><strong>Contact Name:</strong></label>
                            <p class="mb-0">{{ $business->contact_name ?: 'Not specified' }}</p>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label class="form-label"><strong>Contact Number:</strong></label>
                            <p class="mb-0">{{ $business->contact_number ?: 'Not specified' }}</p>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label class="form-label"><strong>Status:</strong></label>
                            <p class="mb-0">
                                @if($business->is_active)
                                    <span class="badge bg-success">Active</span>
                                @else
                                    <span class="badge bg-danger">Inactive</span>
                                @endif
                            </p>
                        </div>
                        
                        <div class="col-12 mb-3">
                            <label class="form-label"><strong>Company Address:</strong></label>
                            <p class="mb-0">{{ $business->company_address ?: 'Not specified' }}</p>
                        </div>
                        
                        <div class="col-md-4 mb-3">
                            <label class="form-label"><strong>City:</strong></label>
                            <p class="mb-0">{{ $business->city ?: 'Not specified' }}</p>
                        </div>
                        
                        <div class="col-md-4 mb-3">
                            <label class="form-label"><strong>State:</strong></label>
                            <p class="mb-0">{{ $business->state ?: 'Not specified' }}</p>
                        </div>
                        
                        <div class="col-md-4 mb-3">
                            <label class="form-label"><strong>Country:</strong></label>
                            <p class="mb-0">{{ $business->country ?: 'Not specified' }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Actions</h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ route('businesses.edit', $business->id) }}" class="btn btn-outline-primary">
                            <i class="fas fa-edit"></i>
                            Edit Business
                        </a>
                        
                        <button type="button" class="btn btn-outline-primary" 
                                onclick="confirmDelete('{{ $business->id }}', '{{ addslashes($business->company_name) }}')">
                            <i class="fas fa-trash"></i>
                            Delete Business
                        </button>
                        
                        <!-- Hidden delete form -->
                        <form id="delete-form-{{ $business->id }}" 
                              action="{{ route('businesses.destroy', $business->id) }}" 
                              method="POST" 
                              style="display: none;">
                            @csrf
                            @method('DELETE')
                        </form>
                    </div>
                </div>
            </div>
            
            <div class="card mt-3">
                <div class="card-header">
                    <h5 class="card-title mb-0">System Information</h5>
                </div>
                <div class="card-body">
                    <div class="mb-2">
                        <small class="text-muted">Business ID:</small><br>
                        <code>{{ $business->id }}</code>
                    </div>
                    <div class="mb-2">
                        <small class="text-muted">Created:</small><br>
                        {{ $business->created_at->format('M d, Y H:i') }}
                    </div>
                    <div class="mb-0">
                        <small class="text-muted">Last Updated:</small><br>
                        {{ $business->updated_at->format('M d, Y H:i') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Stylish Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="deleteModalLabel">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    Confirm Deletion
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="text-center mb-3">
                    <i class="fas fa-trash-alt text-danger" style="font-size: 3rem;"></i>
                </div>
                <h6 class="text-center mb-3">Are you sure you want to delete this business?</h6>
                <div class="alert alert-warning">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-info-circle me-2"></i>
                        <div>
                            <strong>Business:</strong> <span id="businessNameToDelete"></span><br>
                            <small class="text-muted">This action cannot be undone and will permanently remove all business data.</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>
                    Cancel
                </button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">
                    <i class="fas fa-trash me-1"></i>
                    Delete Business
                </button>
            </div>
        </div>
    </div>
</div>

<script>
let businessToDelete = null;

function confirmDelete(businessId, businessName) {
    // Store the business info for deletion
    businessToDelete = {
        id: businessId,
        name: businessName
    };
    
    // Update modal content
    document.getElementById('businessNameToDelete').textContent = businessName;
    
    // Show the modal
    const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
    deleteModal.show();
}

// Handle the actual deletion when confirm button is clicked
document.getElementById('confirmDeleteBtn').addEventListener('click', function() {
    if (businessToDelete) {
        document.getElementById('delete-form-' + businessToDelete.id).submit();
    }
});
</script>

@endsection