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

{% block title %}{% if branch %}Edit Branch{% else %}Add Branch{% endif %}{% endblock %}

{% block content %}
<div class="container-fluid px-4 py-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card shadow">
                <div class="card-header bg-white py-3">
                    <h2 class="text-xl font-semibold mb-0">
                        {% if branch %}
                        Edit Branch: {{ branch.name }}
                        {% else %}
                        Add New Branch
                        {% endif %}
                    </h2>
                </div>
                <div class="card-body">
                    <form method="post" class="needs-validation" novalidate>
                        {% csrf_token %}
                        
                        <div class="mb-3">
                            <label for="name" class="form-label">Branch Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="name" name="name" value="{{ branch.name|default:'' }}" required>
                            <div class="invalid-feedback">Please provide a branch name.</div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="code" class="form-label">Branch Code <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="code" name="code" value="{{ branch.code|default:'' }}" required>
                            <div class="invalid-feedback">Please provide a branch code.</div>
                            <small class="text-muted">Unique identifier for this branch</small>
                        </div>
                        
                        <div class="mb-3">
                            <label for="address" class="form-label">Address</label>
                            <textarea class="form-control" id="address" name="address" rows="3">{{ branch.address|default:'' }}</textarea>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="phone_number" class="form-label">Phone Number</label>
                                <input type="tel" class="form-control" id="phone_number" name="phone_number" value="{{ branch.phone_number|default:'' }}">
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="email" class="form-label">Email</label>
                                <input type="email" class="form-control" id="email" name="email" value="{{ branch.email|default:'' }}">
                            </div>
                        </div>
                        
                        <div class="mb-3 form-check">
                            <input type="checkbox" class="form-check-input" id="is_main_branch" name="is_main_branch" {% if branch.is_main_branch %}checked{% endif %}>
                            <label class="form-check-label" for="is_main_branch">Main Branch</label>
                            <small class="d-block text-muted">Only one branch can be set as the main branch</small>
                        </div>
                        
                        {% if branch %}
                        <div class="mb-3 form-check">
                            <input type="checkbox" class="form-check-input" id="is_active" name="is_active" {% if branch.is_active %}checked{% endif %}>
                            <label class="form-check-label" for="is_active">Active</label>
                        </div>
                        {% endif %}
                        
                        <!-- M-Pesa Configuration Section -->
                        <div class="card mt-4">
                            <div class="card-header bg-light">
                                <h5 class="mb-0">
                                    <i class="fas fa-mobile-alt mr-2"></i>M-Pesa Configuration
                                </h5>
                                <small class="text-muted">Configure M-Pesa settings for this branch. Only shortcode is configurable per branch.</small>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label for="mpesa_shortcode" class="form-label">M-Pesa Shortcode</label>
                                    <input type="text" class="form-control" id="mpesa_shortcode" name="mpesa_shortcode" 
                                           value="{{ branch.mpesa_shortcode|default:'' }}" 
                                           placeholder="4159523">
                                    <small class="text-muted">PayBill number for this branch. Leave blank to use default: 4159523</small>
                                </div>
                                
                                <div class="alert alert-info">
                                    <strong>Production M-Pesa Configuration:</strong><br>
                                    <strong>Shortcode:</strong> {{ branch.get_mpesa_shortcode }}<br>
                                    <strong>Consumer Key:</strong> 9mD1A3H1qw5grqdqkZ4X1G9zbNxioydHXL5An4nkUGRlNRKr<br>
                                    <strong>Consumer Secret:</strong> C2dqBSaGFUIporfYYuyhQgnfPEqLvCS3GvfAJ91ENkXI2bhqptlVXAqMelsEpLQR<br>
                                    <strong>Environment:</strong> Production<br>
                                    <small class="text-muted">These credentials are hardcoded for your production account.</small>
                                </div>
                            </div>
                        </div>
                        
                        <div class="d-flex justify-content-between mt-4">
                            <a href="{% url 'users:branch_list' %}" class="btn btn-outline-secondary">
                                <span>←</span> Back to List
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <span>💾</span> {% if branch %}Update{% else %}Create{% endif %} Branch
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Form validation
    (function() {
        'use strict';
        
        const forms = document.querySelectorAll('.needs-validation');
        
        Array.from(forms).forEach(form => {
            form.addEventListener('submit', event => {
                if (!form.checkValidity()) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                
                form.classList.add('was-validated');
            }, false);
        });
    })();
</script>
{% endblock %}