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

{% block title %}{{ title }} - Ghana Wholesale Management{% endblock %}

{% block breadcrumb %}
<li class="breadcrumb-item"><a href="{% url 'dashboard' %}">Home</a></li>
<li class="breadcrumb-item"><a href="{% url 'shop_list' %}">Shops</a></li>
<li class="breadcrumb-item active">{{ title }}</li>
{% endblock %}

{% block page_title %}
<div class="d-flex justify-content-between align-items-center">
    <div>
        <h1 class="h2 mb-0">
            <i class="bi bi-shop"></i> {{ title }}
        </h1>
        <p class="text-muted mb-0">
            {% if title == 'Create Shop' %}
            Add a new shop, store, or warehouse location in Ghana
            {% else %}
            Update shop information and settings
            {% endif %}
        </p>
    </div>
    <div>
        <a href="{% url 'shop_list' %}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> Back to Shops
        </a>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-8">
        <!-- Main Form Card -->
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="bi bi-info-circle"></i> Shop Information
                </h5>
            </div>
            <div class="card-body">
                {% if form.errors %}
                <div class="alert alert-danger">
                    <h6><i class="bi bi-exclamation-triangle"></i> Please correct the errors below:</h6>
                    <ul class="mb-0">
                        {% for field in form %}
                            {% for error in field.errors %}
                                <li><strong>{{ field.label }}:</strong> {{ error }}</li>
                            {% endfor %}
                        {% endfor %}
                        {% for error in form.non_field_errors %}
                            <li>{{ error }}</li>
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}
                
                <form method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    
                    <!-- Shop Basic Information -->
                    <div class="mb-4">
                        <h6 class="border-bottom pb-2 mb-3">
                            <i class="bi bi-card-heading"></i> Basic Information
                        </h6>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.code.id_for_label }}" class="form-label">
                                    Shop Code
                                    <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="bi bi-tag"></i>
                                    </span>
                                    {{ form.code|add_class:"form-control"|attr:"placeholder:ACC-MKT001, KUM-WH001, etc." }}
                                </div>
                                <small class="form-text text-muted">Unique identifier (e.g., ACC001 for Accra shop, KUM001 for Kumasi)</small>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.name.id_for_label }}" class="form-label">
                                    Shop Name
                                    <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="bi bi-shop"></i>
                                    </span>
                                    {{ form.name|add_class:"form-control"|attr:"placeholder:Enter shop name" }}
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.shop_type.id_for_label }}" class="form-label">
                                    Shop Type
                                    <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="bi bi-grid"></i>
                                    </span>
                                    {{ form.shop_type|add_class:"form-select" }}
                                </div>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.manager.id_for_label }}" class="form-label">
                                    Shop Manager
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="bi bi-person-badge"></i>
                                    </span>
                                    {{ form.manager|add_class:"form-control"|attr:"placeholder:Select manager" }}
                                </div>
                                <small class="form-text text-muted">Assign a user as shop manager</small>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Contact Information -->
                    <div class="mb-4">
                        <h6 class="border-bottom pb-2 mb-3">
                            <i class="bi bi-telephone"></i> Ghana Contact Information
                        </h6>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.phone.id_for_label }}" class="form-label">
                                    Phone Number
                                    <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="bi bi-phone"></i>
                                    </span>
                                    {{ form.phone|add_class:"form-control"|attr:"placeholder:0241234567 or 0501234567" }}
                                </div>
                                <small class="form-text text-muted">Ghana number format: 024, 050, 054, 055, 059 followed by 7 digits</small>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.email.id_for_label }}" class="form-label">
                                    Email Address
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="bi bi-envelope"></i>
                                    </span>
                                    {{ form.email|add_class:"form-control"|attr:"placeholder:shop@example.com"|attr:"type:email" }}
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Address Information - OPTIONAL FIELDS -->
                    <div class="mb-4">
                        <h6 class="border-bottom pb-2 mb-3">
                            <i class="bi bi-geo-alt"></i> Ghana Address (Optional)
                        </h6>
                        
                        <div class="mb-3">
                            <label for="{{ form.location.id_for_label }}" class="form-label">
                                Market/Area
                                <span class="text-muted">(Optional)</span>
                            </label>
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="bi bi-geo"></i>
                                </span>
                                {{ form.location|add_class:"form-control"|attr:"placeholder:Madina Market, Kasoa, Osu, etc." }}
                            </div>
                            <small class="form-text text-muted">Market name or area within the city</small>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.city.id_for_label }}" class="form-label">
                                    City/Town
                                </label>
                                {{ form.city|add_class:"form-control"|attr:"placeholder:Accra, Kumasi, Tamale, etc." }}
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.region.id_for_label }}" class="form-label">
                                    Region
                                    <span class="text-muted">(Optional)</span>
                                </label>
                                {{ form.region|add_class:"form-select" }}
                            </div>
                        </div>
                    </div>
                    
                    <!-- Operating Hours -->
                    <div class="mb-4">
                        <h6 class="border-bottom pb-2 mb-3">
                            <i class="bi bi-clock"></i> Ghana Business Hours
                        </h6>
                        
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label for="{{ form.opening_date.id_for_label }}" class="form-label">
                                    Opening Date
                                    <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="bi bi-calendar"></i>
                                    </span>
                                    {{ form.opening_date|add_class:"form-control"|attr:"type:date" }}
                                </div>
                            </div>
                            
                            <div class="col-md-4 mb-3">
                                <label for="{{ form.opening_time.id_for_label }}" class="form-label">
                                    Opening Time
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="bi bi-clock"></i>
                                    </span>
                                    {{ form.opening_time|add_class:"form-control"|attr:"type:time" }}
                                </div>
                                <small class="form-text text-muted">Typically 8:00 AM in Ghana</small>
                            </div>
                            
                            <div class="col-md-4 mb-3">
                                <label for="{{ form.closing_time.id_for_label }}" class="form-label">
                                    Closing Time
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="bi bi-clock"></i>
                                    </span>
                                    {{ form.closing_time|add_class:"form-control"|attr:"type:time" }}
                                </div>
                                <small class="form-text text-muted">Typically 6:00 PM or 8:00 PM</small>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Status -->
                    <div class="mb-4">
                        <h6 class="border-bottom pb-2 mb-3">
                            <i class="bi bi-toggle2-on"></i> Shop Status
                        </h6>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="form-check form-switch">
                                    {{ form.is_active|add_class:"form-check-input" }}
                                    <label class="form-check-label" for="{{ form.is_active.id_for_label }}">
                                        <strong>Active Shop</strong>
                                    </label>
                                </div>
                                <small class="form-text text-muted">Inactive shops won't appear in dropdowns</small>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Form Actions -->
                    <div class="border-top pt-4 mt-4">
                        <div class="d-flex justify-content-between">
                            <div>
                                <a href="{% url 'shop_list' %}" class="btn btn-outline-secondary">
                                    <i class="bi bi-x-circle"></i> Cancel
                                </a>
                            </div>
                            <div>
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-check-circle"></i>
                                    {% if title == 'Create Shop' %}
                                    Create Shop
                                    {% else %}
                                    Update Shop
                                    {% endif %}
                                </button>
                                <button type="submit" name="save_and_add" class="btn btn-outline-primary">
                                    <i class="bi bi-plus-circle"></i> Save & Add Another
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <!-- Sidebar Help -->
    <div class="col-md-4">
        <!-- Help Card -->
        <div class="card mb-4">
            <div class="card-header bg-info text-white">
                <h5 class="card-title mb-0">
                    <i class="bi bi-question-circle"></i> Ghana Business Tips
                </h5>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <h6><i class="bi bi-lightbulb"></i> Ghana-Specific Tips:</h6>
                    <ul class="mb-0">
                        <li><strong>Shop Codes:</strong> Use city codes (ACC, KUM, TAM) + numbers</li>
                        <li><strong>Phone Numbers:</strong> Use Ghana format (024, 050, 054, 055, 059)</li>
                        <li><strong>Address:</strong> Optional - can add later</li>
                        <li><strong>Business Hours:</strong> Typically 8am-6pm, Mon-Sat</li>
                    </ul>
                </div>
                
                <h6 class="mt-3">Common Shop Types in Ghana:</h6>
                <div class="list-group list-group-flush">
                    <div class="list-group-item">
                        <strong>Retail Shop</strong>
                        <small class="d-block text-muted">Mini-mart, Provision store, Boutique</small>
                    </div>
                    <div class="list-group-item">
                        <strong>Wholesale</strong>
                        <small class="d-block text-muted">Bulk goods for retailers</small>
                    </div>
                    <div class="list-group-item">
                        <strong>Warehouse/Store</strong>
                        <small class="d-block text-muted">Storage for distribution</small>
                    </div>
                    <div class="list-group-item">
                        <strong>Supermarket</strong>
                        <small class="d-block text-muted">Large retail outlet</small>
                    </div>
                </div>
                
                <div class="alert alert-warning mt-3">
                    <h6><i class="bi bi-exclamation-triangle"></i> Important:</h6>
                    <small class="mb-0">
                        • Keep accurate records for Ghana Revenue Authority (GRA)<br>
                        • Note VAT registration status if applicable<br>
                        • Consider mobile money payment options
                    </small>
                </div>
            </div>
        </div>
        
        <!-- Required Fields -->
        <div class="card">
            <div class="card-header bg-light">
                <h5 class="card-title mb-0">
                    <i class="bi bi-asterisk"></i> Required Information
                </h5>
            </div>
            <div class="card-body">
                <p class="text-muted small mb-2">Fields marked with <span class="text-danger">*</span> are required:</p>
                <ul class="small mb-0">
                    <li>Shop Code (Unique identifier)</li>
                    <li>Shop Name</li>
                    <li>Shop Type</li>
                    <li>Ghana Phone Number</li>
                    <li>Opening Date</li>
                    <li><strike>Address fields (Optional)</strike></li>
                </ul>
                <p class="text-success small mt-2">
                    <i class="bi bi-check-circle"></i> Address fields (location, region) are optional
                </p>
            </div>
        </div>
        
        <!-- Sample Shop Codes -->
        <div class="card mt-4">
            <div class="card-header bg-success text-white">
                <h5 class="card-title mb-0">
                    <i class="bi bi-tags"></i> Sample Shop Codes
                </h5>
            </div>
            <div class="card-body">
                <table class="table table-sm">
                    <thead>
                        <tr>
                            <th>City</th>
                            <th>Code Prefix</th>
                            <th>Example</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Accra</td>
                            <td>ACC</td>
                            <td>ACC001, ACC-MKT01</td>
                        </tr>
                        <tr>
                            <td>Kumasi</td>
                            <td>KUM</td>
                            <td>KUM001, KUM-WH01</td>
                        </tr>
                        <tr>
                            <td>Tamale</td>
                            <td>TAM</td>
                            <td>TAM001, TAM-SH01</td>
                        </tr>
                        <tr>
                            <td>Cape Coast</td>
                            <td>CAP</td>
                            <td>CAP001, CAP-SH01</td>
                        </tr>
                        <tr>
                            <td>Takoradi</td>
                            <td>TAK</td>
                            <td>TAK001, TAK-WH01</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
    .required-label::after {
        content: " *";
        color: #dc3545;
    }
    
    .form-section {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 25px;
    }
    
    .form-section h6 {
        color: #2c3e50;
        font-weight: 600;
    }
    
    .input-group-text {
        background-color: #f8f9fa;
        border-right: none;
    }
    
    .form-control:focus + .input-group-text {
        border-color: #86b7fe;
        background-color: #e7f1ff;
    }
    
    .form-switch .form-check-input:checked {
        background-color: #198754;
        border-color: #198754;
    }
    
    /* Optional field styling */
    .optional-field {
        opacity: 0.9;
    }
    
    .optional-field .form-label {
        font-weight: normal;
    }
    
    /* Ghana flag colors */
    .ghana-flag {
        background: linear-gradient(90deg, #CF0921 33%, #FCD20F 34% 66%, #006B3D 67%);
        height: 3px;
        margin-bottom: 10px;
        border-radius: 2px;
    }
</style>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Auto-generate shop code if empty
        const codeField = document.getElementById('{{ form.code.id_for_label }}');
        const nameField = document.getElementById('{{ form.name.id_for_label }}');
        
        if (codeField && !codeField.value && nameField) {
            nameField.addEventListener('blur', function() {
                if (!codeField.value && this.value) {
                    // Generate Ghana-style code
                    const name = this.value.toUpperCase();
                    const cityCodes = {
                        'ACCRA': 'ACC', 'KUMASI': 'KUM', 'TAMALE': 'TAM',
                        'CAPE COAST': 'CAP', 'TAKORADI': 'TAK', 'SUNYANI': 'SUN',
                        'HO': 'HO', 'WA': 'WA', 'BOLGATANGA': 'BOL'
                    };
                    
                    let cityCode = 'SH'; // Default
                    for (const [city, code] of Object.entries(cityCodes)) {
                        if (name.includes(city)) {
                            cityCode = code;
                            break;
                        }
                    }
                    
                    // Generate number
                    const randomNum = Math.floor(Math.random() * 999) + 1;
                    codeField.value = cityCode + randomNum.toString().padStart(3, '0');
                }
            });
        }
        
        // Set default times for Ghana (8am-6pm)
        const openingTime = document.getElementById('{{ form.opening_time.id_for_label }}');
        const closingTime = document.getElementById('{{ form.closing_time.id_for_label }}');
        
        if (openingTime && !openingTime.value) {
            openingTime.value = '08:00';
        }
        if (closingTime && !closingTime.value) {
            closingTime.value = '18:00';
        }
        
        // Validate Ghana phone number format
        const phoneField = document.getElementById('{{ form.phone.id_for_label }}');
        if (phoneField) {
            phoneField.addEventListener('blur', function() {
                const phone = this.value.trim();
                if (phone) {
                    // Ghana phone regex: starts with 02, 05, or 054, 055, 059, 024, 050
                    const ghanaRegex = /^(02[0-9]|05[0-9]|054|055|059|024|050|056|057)\d{7}$/;
                    if (!ghanaRegex.test(phone.replace(/\s+/g, ''))) {
                        this.classList.add('is-invalid');
                        const errorDiv = document.createElement('div');
                        errorDiv.className = 'invalid-feedback';
                        errorDiv.textContent = 'Enter a valid Ghana phone number (e.g., 0241234567)';
                        if (!this.parentNode.querySelector('.invalid-feedback')) {
                            this.parentNode.appendChild(errorDiv);
                        }
                    } else {
                        this.classList.remove('is-invalid');
                        const errorMsg = this.parentNode.querySelector('.invalid-feedback');
                        if (errorMsg) errorMsg.remove();
                    }
                }
            });
        }
        
        // Form validation - ONLY check required fields
        const form = document.querySelector('form');
        form.addEventListener('submit', function(e) {
            let isValid = true;
            
            // Define which fields are actually required
            const requiredFields = [
                'code', 'name', 'shop_type', 'phone', 'opening_date'
            ];
            
            requiredFields.forEach(fieldName => {
                const field = document.getElementById('id_' + fieldName);
                if (field && !field.value.trim()) {
                    isValid = false;
                    field.classList.add('is-invalid');
                    
                    if (!field.nextElementSibling || !field.nextElementSibling.classList.contains('invalid-feedback')) {
                        const errorDiv = document.createElement('div');
                        errorDiv.className = 'invalid-feedback';
                        errorDiv.textContent = 'This field is required.';
                        field.parentNode.appendChild(errorDiv);
                    }
                }
            });
            
            // Location and region are OPTIONAL - remove any validation errors
            const locationField = document.getElementById('id_location');
            const regionField = document.getElementById('id_region');
            
            if (locationField) locationField.classList.remove('is-invalid');
            if (regionField) regionField.classList.remove('is-invalid');
            
            if (!isValid) {
                e.preventDefault();
                const firstError = form.querySelector('.is-invalid');
                if (firstError) {
                    firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            }
        });
        
        // Remove error class on input
        const inputs = form.querySelectorAll('input, select, textarea');
        inputs.forEach(input => {
            input.addEventListener('input', function() {
                this.classList.remove('is-invalid');
                const errorMsg = this.parentNode.querySelector('.invalid-feedback');
                if (errorMsg) errorMsg.remove();
            });
        });
    });
</script>
{% endblock %}