{% extends "base.html" %}
{% block content %}

<!-- PAGE HERO -->
<div class="page-hero">
    <div>
        <h2><i class="bi bi-sliders2"></i> {{ l('Shop Settings', 'দোকান সেটিংস') }}</h2>
        <p class="page-subtitle">{{ l('Update shop name, owner info, contact and address', 'দোকানের নাম, মালিকের তথ্য, যোগাযোগ ও ঠিকানা আপডেট করুন') }}</p>
    </div>
</div>

<div class="row g-4" style="max-width: 900px;">

    <!-- LEFT: MAIN SETTINGS FORM -->
    <div class="col-lg-8">
        <div class="panel">
            <div class="panel-title"><i class="bi bi-building"></i> {{ l('Business Information', 'ব্যবসার তথ্য') }}</div>

            <form method="POST" id="settingsForm" novalidate>
                <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">

                <div class="row g-3">

                    <!-- Shop Name -->
                    <div class="col-md-12">
                        <label class="form-label-sm">{{ l('Shop Name', 'দোকানের নাম') }} <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text bg-light"><i class="bi bi-shop text-muted"></i></span>
                            <input type="text" class="form-control" name="shop_name"
                                   value="{{ shop.shop_name or '' }}" required
                                   placeholder="{{ l('e.g. Ahmed Traders, Priya General Store', 'যেমন: আহমেদ ট্রেডার্স, প্রিয়া জেনারেল স্টোর') }}">
                        </div>
                        <div class="invalid-feedback">{{ l('Shop name is required.', 'দোকানের নাম দেওয়া আবশ্যক।') }}</div>
                    </div>

                    <!-- Owner Name -->
                    <div class="col-md-6">
                        <label class="form-label-sm">{{ l('Owner Name', 'মালিকের নাম') }}</label>
                        <div class="input-group">
                            <span class="input-group-text bg-light"><i class="bi bi-person text-muted"></i></span>
                            <input type="text" class="form-control" name="owner_name"
                                   value="{{ shop.owner_name or '' }}"
                                   placeholder="{{ l('e.g. Md. Rafiqul Islam', 'যেমন: মোঃ রফিকুল ইসলাম') }}">
                        </div>
                    </div>

                    <!-- Phone Number -->
                    <div class="col-md-6">
                        <label class="form-label-sm">{{ l('Phone Number', 'ফোন নম্বর') }}</label>
                        <div class="input-group">
                            <span class="input-group-text bg-light"><i class="bi bi-telephone text-muted"></i></span>
                            <input type="text" class="form-control" name="phone"
                                   value="{{ shop.phone or '' }}"
                                   placeholder="01XXXXXXXXX">
                        </div>
                    </div>

                    <!-- Email (if field exists) -->
                    {% if shop.email is defined %}
                    <div class="col-md-6">
                        <label class="form-label-sm">{{ l('Email Address', 'ইমেইল') }}</label>
                        <div class="input-group">
                            <span class="input-group-text bg-light"><i class="bi bi-envelope text-muted"></i></span>
                            <input type="email" class="form-control" name="email"
                                   value="{{ shop.email or '' }}"
                                   placeholder="shop@example.com">
                        </div>
                    </div>
                    {% endif %}

                    <!-- Address -->
                    <div class="col-md-12">
                        <label class="form-label-sm">{{ l('Shop Address', 'দোকানের ঠিকানা') }}</label>
                        <textarea class="form-control" name="address" rows="3"
                                  placeholder="{{ l('Full address including area, city...', 'এলাকা, শহর সহ পূর্ণ ঠিকানা...') }}">{{ shop.address or '' }}</textarea>
                    </div>

                    <!-- TIN (if field exists) -->
                    {% if shop.tin is defined %}
                    <div class="col-md-6">
                        <label class="form-label-sm">{{ l('TIN / VAT Number', 'টিআইএন / ভ্যাট নম্বর') }}</label>
                        <input type="text" class="form-control" name="tin" value="{{ shop.tin or '' }}">
                    </div>
                    {% endif %}

                    <!-- Currency (if field exists) -->
                    {% if shop.currency is defined %}
                    <div class="col-md-6">
                        <label class="form-label-sm">{{ l('Currency Symbol', 'মুদ্রার চিহ্ন') }}</label>
                        <input type="text" class="form-control" name="currency" value="{{ shop.currency or '৳' }}" maxlength="5">
                    </div>
                    {% endif %}

                </div>

                <!-- SUBMIT -->
                <div class="d-flex align-items-center gap-3 mt-4 pt-3 border-top">
                    <button type="submit" class="btn btn-primary fw-bold px-5 py-2" id="saveBtn">
                        <i class="bi bi-check-circle me-1"></i>{{ l('Save Changes', 'পরিবর্তন সংরক্ষণ করুন') }}
                    </button>
                    <span class="text-muted small" id="saveStatus" style="display:none;">
                        <i class="bi bi-hourglass-split me-1"></i>{{ l('Saving...', 'সংরক্ষণ হচ্ছে...') }}
                    </span>
                </div>

            </form>
        </div>
    </div>

    <!-- RIGHT: INFO SIDEBAR -->
    <div class="col-lg-4">

        <!-- Current Info Preview -->
        <div class="panel" style="background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border:1px solid #bae6fd;">
            <div class="panel-title"><i class="bi bi-eye" style="color:#0284c7;"></i> {{ l('Current Info', 'বর্তমান তথ্য') }}</div>
            <div class="d-flex flex-column gap-3">
                <div>
                    <div class="form-label-sm mb-1">{{ l('Shop', 'দোকান') }}</div>
                    <div class="fw-bold text-dark">{{ shop.shop_name or '—' }}</div>
                </div>
                {% if shop.owner_name %}
                <div>
                    <div class="form-label-sm mb-1">{{ l('Owner', 'মালিক') }}</div>
                    <div class="fw-semibold text-dark">{{ shop.owner_name }}</div>
                </div>
                {% endif %}
                {% if shop.phone %}
                <div>
                    <div class="form-label-sm mb-1">{{ l('Phone', 'ফোন') }}</div>
                    <div class="fw-semibold text-dark">{{ shop.phone }}</div>
                </div>
                {% endif %}
                {% if shop.address %}
                <div>
                    <div class="form-label-sm mb-1">{{ l('Address', 'ঠিকানা') }}</div>
                    <div class="text-muted small">{{ shop.address }}</div>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Tips Card -->
        <div class="panel mt-3" style="background:#fffbeb;border:1px solid #fde68a;">
            <div class="panel-title" style="color:#92400e;"><i class="bi bi-lightbulb" style="color:#d97706;"></i> {{ l('Tips', 'পরামর্শ') }}</div>
            <ul class="small text-muted mb-0 ps-3" style="line-height:1.7;">
                <li>{{ l('Shop name appears on all invoices and receipts', 'দোকানের নাম সব ইনভয়েস ও রসিদে দেখা যায়') }}</li>
                <li>{{ l('Phone number is printed on customer receipts', 'ফোন নম্বর কাস্টমারের রসিদে প্রিন্ট হয়') }}</li>
                <li>{{ l('Address is shown in reports and printouts', 'ঠিকানা রিপোর্ট ও প্রিন্টআউটে দেখা যায়') }}</li>
            </ul>
        </div>

    </div>
</div>

<script>
document.getElementById('settingsForm').addEventListener('submit', function(e) {
    const form = this;
    if (!form.checkValidity()) {
        e.preventDefault();
        form.classList.add('was-validated');
        return;
    }
    const btn = document.getElementById('saveBtn');
    const status = document.getElementById('saveStatus');
    if (btn) { btn.disabled = true; btn.innerHTML = '<i class="bi bi-check-circle me-1"></i>{{ l("Saving...", "সংরক্ষণ হচ্ছে...") }}'; }
    if (status) status.style.display = 'inline-flex';
    form.classList.add('was-validated');
});
</script>

{% endblock %}