{% extends 'base.html' %}
{% load static %}

{% block title %}Delete Location - {{ location.name }}{% endblock %}

{% block content %}
<div class="content">
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="row">
            <div class="col-12">
                <div class="page-header">
                    <div class="page-title">
                        <h4>Delete Location</h4>
                        <h6>Confirm deletion of location: {{ location.location_code }} - {{ location.name }}</h6>
                    </div>
                    <div class="page-btn">
                        <a href="{% url 'inventory:location_detail' location.id %}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left me-1"></i>Back to Location
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Delete Confirmation -->
        <div class="row justify-content-center">
            <div class="col-lg-8 col-md-10 col-12">
                <div class="card">
                    <div class="card-header bg-danger text-white">
                        <h5 class="card-title mb-0">
                            <i class="fa fa-exclamation-triangle me-2"></i>
                            Confirm Location Deletion
                        </h5>
                    </div>
                    <div class="card-body">
                        <!-- Warning Message -->
                        <div class="alert alert-danger" role="alert">
                            <h6><i class="fa fa-warning me-2"></i>Warning: This action cannot be undone!</h6>
                            <p class="mb-0">
                                You are about to permanently delete this location. This will affect all associated data.
                            </p>
                        </div>

                        <!-- Location Information -->
                        <div class="location-info mb-4">
                            <h6>Location to be deleted:</h6>
                            <div class="card bg-light">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <table class="table table-borderless mb-0">
                                                <tr>
                                                    <td><strong>Location Code:</strong></td>
                                                    <td>{{ location.location_code }}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Name:</strong></td>
                                                    <td>{{ location.name }}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Type:</strong></td>
                                                    <td>{{ location.get_location_type_display }}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Building:</strong></td>
                                                    <td>{{ location.building|default:"-" }}</td>
                                                </tr>
                                            </table>
                                        </div>
                                        <div class="col-md-6">
                                            <table class="table table-borderless mb-0">
                                                <tr>
                                                    <td><strong>Manager:</strong></td>
                                                    <td>{{ location.location_manager.get_full_name|default:"Not assigned" }}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Status:</strong></td>
                                                    <td>
                                                        {% if location.is_active %}
                                                            <span class="badge bg-success">Active</span>
                                                        {% else %}
                                                            <span class="badge bg-danger">Inactive</span>
                                                        {% endif %}
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Created:</strong></td>
                                                    <td>{{ location.created_at|date:"M d, Y" }}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Full Address:</strong></td>
                                                    <td>{{ location.full_address|default:"Not specified" }}</td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Impact Analysis -->
                        <div class="impact-analysis mb-4">
                            <h6>Impact Analysis:</h6>
                            <div class="row">
                                <div class="col-md-3 col-sm-6 col-12">
                                    <div class="impact-item">
                                        <div class="impact-icon bg-warning">
                                            <i class="fa fa-boxes"></i>
                                        </div>
                                        <div class="impact-content">
                                            <h5>{{ stock_count|default:0 }}</h5>
                                            <p>Stock Items</p>
                                            {% if stock_count > 0 %}
                                                <small class="text-danger">Will be affected</small>
                                            {% else %}
                                                <small class="text-success">No impact</small>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6 col-12">
                                    <div class="impact-item">
                                        <div class="impact-icon bg-info">
                                            <i class="fa fa-sitemap"></i>
                                        </div>
                                        <div class="impact-content">
                                            <h5>{{ child_locations_count|default:0 }}</h5>
                                            <p>Child Locations</p>
                                            {% if child_locations_count > 0 %}
                                                <small class="text-danger">Will be orphaned</small>
                                            {% else %}
                                                <small class="text-success">No impact</small>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6 col-12">
                                    <div class="impact-item">
                                        <div class="impact-icon bg-success">
                                            <i class="fa fa-dollar-sign"></i>
                                        </div>
                                        <div class="impact-content">
                                            <h5>${{ total_value|default:0|floatformat:2 }}</h5>
                                            <p>Total Value</p>
                                            {% if total_value > 0 %}
                                                <small class="text-warning">Inventory value</small>
                                            {% else %}
                                                <small class="text-success">No value</small>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6 col-12">
                                    <div class="impact-item">
                                        <div class="impact-icon bg-primary">
                                            <i class="fa fa-history"></i>
                                        </div>
                                        <div class="impact-content">
                                            <h5>{{ transaction_count|default:0 }}</h5>
                                            <p>Transactions</p>
                                            {% if transaction_count > 0 %}
                                                <small class="text-info">Historical data</small>
                                            {% else %}
                                                <small class="text-success">No transactions</small>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Blocking Conditions -->
                        {% if blocking_conditions %}
                        <div class="blocking-conditions mb-4">
                            <div class="alert alert-danger">
                                <h6><i class="fa fa-stop-circle me-2"></i>Cannot Delete Location</h6>
                                <p>This location cannot be deleted due to the following conditions:</p>
                                <ul class="mb-0">
                                    {% for condition in blocking_conditions %}
                                        <li>{{ condition }}</li>
                                    {% endfor %}
                                </ul>
                            </div>
                            <div class="text-center">
                                <a href="{% url 'inventory:location_detail' location.id %}" class="btn btn-primary">
                                    <i class="fa fa-arrow-left me-2"></i>Return to Location
                                </a>
                            </div>
                        </div>
                        {% else %}
                        <!-- Pre-deletion Actions -->
                        {% if stock_count > 0 or child_locations_count > 0 %}
                        <div class="pre-deletion-actions mb-4">
                            <h6>Required Actions Before Deletion:</h6>
                            <div class="alert alert-warning">
                                <ul class="mb-0">
                                    {% if stock_count > 0 %}
                                        <li>
                                            <strong>Move or remove {{ stock_count }} stock item{{ stock_count|pluralize }}</strong>
                                            <br><small>All inventory must be transferred to other locations or removed from the system.</small>
                                        </li>
                                    {% endif %}
                                    {% if child_locations_count > 0 %}
                                        <li>
                                            <strong>Reassign {{ child_locations_count }} child location{{ child_locations_count|pluralize }}</strong>
                                            <br><small>Child locations will become orphaned and need new parent locations.</small>
                                        </li>
                                    {% endif %}
                                </ul>
                            </div>
                            
                            <div class="action-buttons mb-3">
                                {% if stock_count > 0 %}
                                    <button type="button" class="btn btn-outline-warning me-2" onclick="transferAllStock()">
                                        <i class="fa fa-exchange-alt me-1"></i>Transfer All Stock
                                    </button>
                                {% endif %}
                                {% if child_locations_count > 0 %}
                                    <button type="button" class="btn btn-outline-info me-2" onclick="reassignChildLocations()">
                                        <i class="fa fa-sitemap me-1"></i>Reassign Child Locations
                                    </button>
                                {% endif %}
                            </div>
                        </div>
                        {% endif %}

                        <!-- Confirmation Form -->
                        <div class="confirmation-form">
                            <h6>Deletion Confirmation:</h6>
                            <form method="post" id="deleteForm">
                                {% csrf_token %}
                                
                                <!-- Force Delete Option -->
                                {% if stock_count > 0 or child_locations_count > 0 %}
                                <div class="form-group mb-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="forceDelete" name="force_delete">
                                        <label class="form-check-label text-danger" for="forceDelete">
                                            <strong>Force delete location and all associated data</strong>
                                            <br><small>This will permanently remove all stock items and reassign child locations to no parent.</small>
                                        </label>
                                    </div>
                                </div>
                                {% endif %}

                                <!-- Confirmation Text -->
                                <div class="form-group mb-3">
                                    <label for="confirmationText" class="form-label">
                                        Type <strong>"{{ location.location_code }}"</strong> to confirm deletion:
                                    </label>
                                    <input type="text" class="form-control" id="confirmationText" 
                                           placeholder="Enter location code to confirm" required>
                                </div>

                                <!-- Reason for Deletion -->
                                <div class="form-group mb-4">
                                    <label for="deletionReason" class="form-label">Reason for deletion (optional):</label>
                                    <textarea class="form-control" id="deletionReason" name="deletion_reason" 
                                              rows="3" placeholder="Explain why this location is being deleted..."></textarea>
                                </div>

                                <!-- Action Buttons -->
                                <div class="text-center">
                                    <a href="{% url 'inventory:location_detail' location.id %}" class="btn btn-secondary me-3">
                                        <i class="fa fa-times me-1"></i>Cancel
                                    </a>
                                    <button type="submit" class="btn btn-danger" id="deleteButton" disabled>
                                        <i class="fa fa-trash me-1"></i>Delete Location
                                    </button>
                                </div>
                            </form>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const confirmationText = document.getElementById('confirmationText');
    const deleteButton = document.getElementById('deleteButton');
    const deleteForm = document.getElementById('deleteForm');
    const expectedCode = '{{ location.location_code }}';

    // Enable/disable delete button based on confirmation text
    if (confirmationText && deleteButton) {
        confirmationText.addEventListener('input', function() {
            if (this.value === expectedCode) {
                deleteButton.disabled = false;
                deleteButton.classList.remove('btn-secondary');
                deleteButton.classList.add('btn-danger');
            } else {
                deleteButton.disabled = true;
                deleteButton.classList.remove('btn-danger');
                deleteButton.classList.add('btn-secondary');
            }
        });
    }

    // Form submission confirmation
    if (deleteForm) {
        deleteForm.addEventListener('submit', function(e) {
            const forceDeleteCheckbox = document.getElementById('forceDelete');
            const hasBlockingConditions = {{ stock_count|default:0 }} > 0 || {{ child_locations_count|default:0 }} > 0;
            
            if (hasBlockingConditions && (!forceDeleteCheckbox || !forceDeleteCheckbox.checked)) {
                e.preventDefault();
                alert('Please address the blocking conditions or check "Force delete" to proceed.');
                return false;
            }

            const confirmed = confirm(
                'Are you absolutely sure you want to delete this location?\n\n' +
                'This action cannot be undone and will permanently remove:\n' +
                '- Location: {{ location.location_code }} - {{ location.name }}\n' +
                '- All associated stock items\n' +
                '- All transaction history\n' +
                '- All child location relationships'
            );

            if (!confirmed) {
                e.preventDefault();
                return false;
            }

            // Show loading state
            deleteButton.disabled = true;
            deleteButton.innerHTML = '<i class="fa fa-spinner fa-spin me-1"></i>Deleting...';
        });
    }
});

function transferAllStock() {
    console.log('Opening stock transfer interface...');
    alert('Stock transfer interface would open here, allowing you to move all stock items to other locations.');
}

function reassignChildLocations() {
    console.log('Opening child location reassignment interface...');
    alert('Child location management interface would open here, allowing you to reassign parent locations.');
}
</script>

<style>
.impact-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    margin-bottom: 1rem;
}

.impact-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-right: 1rem;
}

.impact-content h5 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: bold;
}

.impact-content p {
    margin: 0;
    color: #6c757d;
    font-size: 0.9rem;
}

.impact-content small {
    font-size: 0.8rem;
}

.action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.confirmation-form {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

#deleteButton:disabled {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
}

@media (max-width: 768px) {
    .impact-item {
        flex-direction: column;
        text-align: center;
    }
    
    .impact-icon {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
    
    .action-buttons {
        flex-direction: column;
    }
    
    .action-buttons .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}
</style>
{% endblock %}