{% extends "layouts/base.html" %}

{% load static %}

{% block title %}
{% if zone.pk %}
Edit Zone - {{ zone.name }}
{% else %}
New Zone
{% endif %}
{% endblock title %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'plugins/select2/css/select2.min.css' %}">
<link rel="stylesheet" href="{% static 'plugins/sweetalert2/sweetalert2.min.css' %}">
<style>
    .form-section {
        background: #fff;
        border: 1px solid #e9ecef;
        border-radius: 0.5rem;
        margin-bottom: 1.5rem;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        transition: box-shadow 0.15s ease-in-out;
        overflow: hidden;
    }
    
    .form-section:hover {
        box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    }
    
    .section-header {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        padding: 1rem 1.5rem;
        border-bottom: 1px solid #e9ecef;
        border-radius: 0.5rem 0.5rem 0 0;
    }
    
    .section-content {
        padding: 1.5rem;
    }
    
    .form-label {
        font-weight: 600;
        color: #495057;
        margin-bottom: 0.5rem;
    }
    
    .form-control, .form-select {
        border: 1px solid #ced4da;
        border-radius: 0.375rem;
        padding: 0.75rem;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
    
    .form-control:focus, .form-select:focus {
        border-color: #80bdff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
    
    .required-field::after {
        content: " *";
        color: #dc3545;
    }
    
    .required {
        color: #dc3545;
    }
    
    .form-text {
        color: #6c757d;
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }
    
    .preview-section {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .preview-item {
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #dee2e6;
    }
    
    .preview-item:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }
    
    .preview-label {
        font-weight: 600;
        color: #495057;
        margin-bottom: 5px;
    }
    
    .preview-value {
        color: #6c757d;
        font-size: 0.9rem;
    }
    
    .action-buttons {
        background: #f8f9fa;
        border-top: 1px solid #e9ecef;
        padding: 1.5rem;
        margin-top: 2rem;
        border-radius: 0.5rem;
        text-align: right;
    }
    
    .btn {
        border-radius: 0.375rem;
        padding: 0.75rem 1.5rem;
        font-weight: 500;
        transition: all 0.15s ease-in-out;
    }
    
    .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    }
    
    .btn-group .btn {
        margin-right: 10px;
    }
    
    .btn-group .btn:last-child {
        margin-right: 0;
    }
    
    .error-message {
        color: #dc3545;
        font-size: 0.875rem;
        margin-top: 0.25rem;
        display: block;
    }
    
    .success-message {
        color: #28a745;
        font-size: 0.875rem;
        margin-top: 0.25rem;
        display: block;
    }
    
    .is-invalid {
        border-color: #dc3545;
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
        animation: shake 0.5s;
    }
    
    .is-valid {
        border-color: #28a745;
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    }
    
    .select2-container--default .select2-selection--single {
        height: 38px;
        border: 1px solid #ced4da;
        border-radius: 0.375rem;
    }
    
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 36px;
        padding-left: 12px;
    }
    
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 36px;
    }
    
    .select2-dropdown {
        border: 1px solid #ced4da;
        border-radius: 0.375rem;
    }
    
    /* Loading spinner styles */
    .loading-spinner {
        display: inline-block;
        width: 16px;
        height: 16px;
        border: 2px solid #f3f3f3;
        border-top: 2px solid #007bff;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    /* Disabled button styles */
    .btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
    
    @keyframes shake {
        0%, 100% { transform: translateX(0); }
        25% { transform: translateX(-5px); }
        75% { transform: translateX(5px); }
    }
    
    /* Form validation styles */
    .form-control.is-valid {
        border-color: #28a745;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='m2.3 6.73.94-.94 1.88 1.88 3.75-3.75.94.94-4.69 4.69z'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right calc(0.375em + 0.1875rem) center;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }
    
    .form-control.is-invalid {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 3.6.4.4.4-.4M5.8 8.4l.4-.4.4.4m0-4.8l-.4.4-.4-.4'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right calc(0.375em + 0.1875rem) center;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }
    
    @media (max-width: 768px) {
        .section-content {
            padding: 15px;
        }
        
        .action-buttons {
            text-align: center;
        }
        
        .btn-group {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .btn-group .btn {
            margin-right: 0;
        }
    }
</style>
{% endblock extra_css %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title">{% if zone.pk %}Edit Zone{% else %}Create Zone{% endif %}</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{% url 'channels:channel_list' %}">Channels</a></li>
            <li class="breadcrumb-item"><a href="{% url 'channels:zone_list' %}">Zones</a></li>
            {% if zone.pk %}
                <li class="breadcrumb-item"><a href="{% url 'channels:zone_detail' zone.id %}">{{ zone.name }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">Edit</li>
            {% else %}
                <li class="breadcrumb-item active" aria-current="page">Create</li>
            {% endif %}
        </ol>
    </div>
</div>
{% endblock breadcrumb %}

{% block content %}
<form method="post" id="zone-form" novalidate>
    {% csrf_token %}
    
    <div class="row">
        <div class="col-lg-8">
            <!-- Basic Information -->
            <div class="form-section">
                <div class="section-header">
                    <h5 class="mb-0">
                        <i class="fe fe-info me-2"></i>Basic Information
                    </h5>
                </div>
                <div class="section-content">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="{{ form.name.id_for_label }}" class="form-label required-field">
                                    <i class="fe fe-map-pin me-1"></i>Zone Name
                                </label>
                                {{ form.name }}
                                {% if form.name.errors %}
                                    <div class="error-message">{{ form.name.errors.0 }}</div>
                                {% endif %}
                                <div class="form-text">Enter a unique name for this zone</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="{{ form.channel.id_for_label }}" class="form-label required-field">
                                    <i class="fe fe-tv me-1"></i>Channel
                                </label>
                                {{ form.channel }}
                                {% if form.channel.errors %}
                                    <div class="error-message">{{ form.channel.errors.0 }}</div>
                                {% endif %}
                                <div class="form-text">Select the channel this zone belongs to</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="{{ form.zone_type.id_for_label }}" class="form-label">
                                    <i class="fe fe-tag me-1"></i>Zone Type
                                </label>
                                {{ form.zone_type }}
                                {% if form.zone_type.errors %}
                                    <div class="error-message">{{ form.zone_type.errors.0 }}</div>
                                {% endif %}
                                <div class="form-text">Specify the type of this zone</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="{{ form.location.id_for_label }}" class="form-label">
                                    <i class="fe fe-map me-1"></i>Location
                                </label>
                                {{ form.location }}
                                {% if form.location.errors %}
                                    <div class="error-message">{{ form.location.errors.0 }}</div>
                                {% endif %}
                                <div class="form-text">Physical or logical location of the zone</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="{{ form.description.id_for_label }}" class="form-label">
                            <i class="fe fe-file-text me-1"></i>Description
                        </label>
                        {{ form.description }}
                        {% if form.description.errors %}
                            <div class="error-message">{{ form.description.errors.0 }}</div>
                        {% endif %}
                        <div class="form-text">Provide a detailed description of this zone</div>
                    </div>
                </div>
            </div>
            
            <!-- Additional Configuration -->
            {% if form.additional_fields %}
            <div class="form-section">
                <div class="section-header">
                    <h5 class="mb-0">
                        <i class="fe fe-settings me-2"></i>Additional Configuration
                    </h5>
                </div>
                <div class="section-content">
                    <!-- Add any additional form fields here -->
                    {% for field in form.additional_fields %}
                        <div class="mb-3">
                            <label for="{{ field.id_for_label }}" class="form-label">
                                {{ field.label }}
                            </label>
                            {{ field }}
                            {% if field.errors %}
                                <div class="error-message">{{ field.errors.0 }}</div>
                            {% endif %}
                            {% if field.help_text %}
                                <div class="form-text">{{ field.help_text }}</div>
                            {% endif %}
                        </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        </div>
        
        <div class="col-lg-4">
            <!-- Zone Preview -->
            <div class="form-section">
                <div class="section-header">
                    <h5 class="mb-0">
                        <i class="fe fe-eye me-2"></i>Zone Preview
                    </h5>
                </div>
                <div class="section-content">
                    <div id="zone-preview">
                        <div class="preview-item">
                            <span class="preview-label">Name:</span>
                            <span class="preview-value" id="preview-name">{% if zone.name %}{{ zone.name }}{% else %}Enter zone name{% endif %}</span>
                        </div>
                        <div class="preview-item">
                            <span class="preview-label">Channel:</span>
                            <span class="preview-value" id="preview-channel">{% if zone.channel %}{{ zone.channel.display_name|default:zone.channel.name }}{% else %}Select channel{% endif %}</span>
                        </div>
                        <div class="preview-item">
                            <span class="preview-label">Type:</span>
                            <span class="preview-value" id="preview-type">{% if zone.zone_type %}{{ zone.get_zone_type_display }}{% else %}Not specified{% endif %}</span>
                        </div>
                        <div class="preview-item">
                            <span class="preview-label">Location:</span>
                            <span class="preview-value" id="preview-location">{% if zone.location %}{{ zone.location }}{% else %}Not specified{% endif %}</span>
                        </div>
                        <div class="preview-item">
                            <span class="preview-label">Description:</span>
                            <span class="preview-value" id="preview-description">{% if zone.description %}{{ zone.description|truncatechars:50 }}{% else %}No description{% endif %}</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Help & Tips -->
            <div class="form-section">
                <div class="section-header">
                    <h5 class="mb-0">
                        <i class="fe fe-help-circle me-2"></i>Help & Tips
                    </h5>
                </div>
                <div class="section-content">
                    <div class="alert alert-info">
                        <h6 class="alert-heading">Zone Guidelines</h6>
                        <ul class="mb-0 small">
                            <li>Zone names should be unique within a channel</li>
                            <li>Choose descriptive names for easy identification</li>
                            <li>Zone types help categorize and organize zones</li>
                            <li>Location can be physical or logical reference</li>
                        </ul>
                    </div>
                    
                    {% if zone.pk %}
                    <div class="alert alert-warning">
                        <h6 class="alert-heading">Editing Zone</h6>
                        <p class="mb-0 small">Changes to this zone will be applied immediately. Make sure to review your changes before saving.</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    
    <!-- Form Actions -->
    <div class="action-buttons">
        <div class="d-flex justify-content-between align-items-center flex-wrap">
            <div class="btn-group">
                <button type="submit" class="btn btn-primary">
                    <i class="fe fe-save me-1"></i>
                    {% if zone.pk %}Update Zone{% else %}Create Zone{% endif %}
                </button>
                <a href="{% if zone.pk %}{% url 'channels:zone_detail' zone.id %}{% else %}{% url 'channels:zone_list' %}{% endif %}" class="btn btn-secondary">
                    <i class="fe fe-x me-1"></i> Cancel
                </a>
            </div>
            
            {% if zone.pk %}
            <div>
                <button type="button" class="btn btn-outline-danger" onclick="deleteZone('{{ zone.id }}')">
                    <i class="fe fe-trash-2 me-1"></i> Delete Zone
                </button>
            </div>
            {% endif %}
        </div>
    </div>
</form>
{% endblock content %}

{% block modals %}
{% if zone.pk %}
<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">Confirm Delete</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="text-center mb-3">
                    <i class="fe fe-alert-triangle text-warning" style="font-size: 3rem;"></i>
                </div>
                <h6 class="text-center mb-3">Delete Zone "{{ zone.name }}"?</h6>
                <p class="text-center text-muted mb-3">This action will permanently delete this zone and cannot be undone.</p>
                
                <div class="alert alert-warning">
                    <h6 class="alert-heading">Warning!</h6>
                    <p class="mb-0">Deleting this zone will:</p>
                    <ul class="mb-0 mt-2">
                        <li>Remove all zone configurations</li>
                        <li>Delete associated zone data</li>
                        <li>This action cannot be reversed</li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fe fe-x me-1"></i> Cancel
                </button>
                <button type="button" class="btn btn-danger" id="confirmDelete">
                    <i class="fe fe-trash-2 me-1"></i> Delete Zone
                </button>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endblock modals %}

{% block extra_js %}
<script src="{% static 'plugins/select2/js/select2.min.js' %}"></script>
<script src="{% static 'plugins/sweetalert2/sweetalert2.min.js' %}"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize Select2 for better dropdowns
    $('#{{ form.channel.id_for_label }}, #{{ form.zone_type.id_for_label }}').select2({
        width: '100%',
        placeholder: function() {
            return $(this).data('placeholder');
        },
        allowClear: true
    });
    
    // Add Bootstrap classes to form fields
    $('input[type="text"], input[type="email"], input[type="url"], textarea, select').addClass('form-control');
    $('select').addClass('form-select');
    
    // Real-time preview updates
    function updatePreview() {
        // Update name
        const name = $('#{{ form.name.id_for_label }}').val() || 'Enter zone name';
        $('#preview-name').text(name);
        
        // Update channel
        const channelSelect = $('#{{ form.channel.id_for_label }}');
        const channelText = channelSelect.find('option:selected').text() || 'Select channel';
        $('#preview-channel').text(channelText);
        
        // Update type
        const typeSelect = $('#{{ form.zone_type.id_for_label }}');
        const typeText = typeSelect.find('option:selected').text() || 'Not specified';
        $('#preview-type').text(typeText);
        
        // Update location
        const location = $('#{{ form.location.id_for_label }}').val() || 'Not specified';
        $('#preview-location').text(location);
        
        // Update description
        const description = $('#{{ form.description.id_for_label }}').val();
        const truncatedDesc = description ? (description.length > 50 ? description.substring(0, 50) + '...' : description) : 'No description';
        $('#preview-description').text(truncatedDesc);
    }
    
    // Bind preview updates to form changes
    $('#{{ form.name.id_for_label }}, #{{ form.location.id_for_label }}, #{{ form.description.id_for_label }}').on('input', updatePreview);
    $('#{{ form.channel.id_for_label }}, #{{ form.zone_type.id_for_label }}').on('change', updatePreview);
    
    // Form validation
    $('#zone-form').on('submit', function(e) {
        let isValid = true;
        
        // Clear previous errors
        $('.is-invalid').removeClass('is-invalid');
        $('.error-message').remove();
        
        // Validate required fields
        const requiredFields = ['{{ form.name.id_for_label }}', '{{ form.channel.id_for_label }}'];
        
        requiredFields.forEach(function(fieldId) {
            const field = $('#' + fieldId);
            if (!field.val() || field.val().trim() === '') {
                field.addClass('is-invalid');
                field.after('<div class="error-message">This field is required.</div>');
                isValid = false;
            }
        });
        
        // Validate zone name length
        const nameField = $('#{{ form.name.id_for_label }}');
        if (nameField.val() && nameField.val().length > 100) {
            nameField.addClass('is-invalid');
            nameField.after('<div class="error-message">Zone name must be 100 characters or less.</div>');
            isValid = false;
        }
        
        if (!isValid) {
            e.preventDefault();
            
            // Scroll to first error
            const firstError = $('.is-invalid').first();
            if (firstError.length) {
                $('html, body').animate({
                    scrollTop: firstError.offset().top - 100
                }, 500);
            }
        }
    });
    
    // Initialize preview
    updatePreview();
});

// Delete zone function
{% if zone.pk %}
function deleteZone(zoneId) {
    Swal.fire({
        title: 'Delete Zone?',
        text: 'This action cannot be undone. All zone data will be permanently deleted.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#dc3545',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Yes, delete it!',
        cancelButtonText: 'Cancel'
    }).then((result) => {
        if (result.isConfirmed) {
            Swal.fire({
                title: 'Deleting...',
                text: 'Please wait while we delete the zone.',
                allowOutsideClick: false,
                allowEscapeKey: false,
                showConfirmButton: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });
            
            $.ajax({
                url: '/channels/zones/' + zoneId + '/delete/',
                method: 'POST',
                headers: {
                    'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
                },
                success: function(response) {
                    Swal.fire({
                        title: 'Deleted!',
                        text: 'Zone has been successfully deleted.',
                        icon: 'success',
                        timer: 2000,
                        showConfirmButton: false
                    }).then(() => {
                        window.location.href = '{% url "channels:zone_list" %}';
                    });
                },
                error: function(xhr) {
                    let errorMessage = 'Delete failed. Please try again.';
                    if (xhr.responseJSON && xhr.responseJSON.error) {
                        errorMessage = xhr.responseJSON.error;
                    }
                    Swal.fire({
                        title: 'Error!',
                        text: errorMessage,
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                }
            });
        }
    });
}
{% endif %}
</script>
{% endblock extra_js %}