{% extends 'theme/users_base.html' %}
{% load static %}

{% block title %}Register - AL WASAY{% endblock %}

{% block content %}
<div class="min-h-screen bg-accent py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-4xl mx-auto">
        <div class="text-center mb-8">
            <h1 class="text-3xl font-semibold font-poppins text-primary">Select Registration Type</h1>
        </div>

        <div class="flex justify-center mb-8">
            <div class="bg-accent-light rounded-full p-1 flex">
                <button type="button" id="personalTab" onclick="switchTab('personal')"
                    class="tab-btn flex items-center gap-2 px-8 py-3 rounded-full text-sm font-medium font-poppins transition-all duration-200">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                    </svg>
                    Personal
                </button>
                <button type="button" id="businessTab" onclick="switchTab('business')"
                    class="tab-btn flex items-center gap-2 px-8 py-3 rounded-full text-sm font-medium font-poppins transition-all duration-200">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                    </svg>
                    Business
                </button>
            </div>
        </div>

        {% if form.non_field_errors %}
        <div class="mb-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md font-poppins">
            {% for error in form.non_field_errors %}
                <p>{{ error }}</p>
            {% endfor %}
        </div>
        {% endif %}

        <form method="post" enctype="multipart/form-data" class="bg-white shadow-sm rounded-lg p-8">
            {% csrf_token %}
            <input type="hidden" name="customer_type" id="customerType" value="personal">

            <fieldset id="companySection" class="mb-8 hidden">
                <legend id="companySectionTitle" class="text-lg font-medium font-poppins text-primary-dark mb-4 pb-2 border-b border-secondary/30 w-full">Business Information</legend>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium font-poppins text-primary-dark mb-1">
                            Company Name <span id="companyNameRequired" class="text-red-500">*</span>
                        </label>
                        {{ form.company_name }}
                        {% if form.company_name.errors %}
                            <p class="mt-1 text-sm text-red-600 font-poppins">{{ form.company_name.errors.0 }}</p>
                        {% endif %}
                    </div>
                    <div>
                        <label class="block text-sm font-medium font-poppins text-primary-dark mb-1">Company Legal Name</label>
                        {{ form.company_legal_name }}
                    </div>
                    <div>
                        <label class="block text-sm font-medium font-poppins text-primary-dark mb-1">
                            Company Email ID <span id="companyEmailRequired" class="text-red-500">*</span>
                        </label>
                        {{ form.company_email }}
                        {% if form.company_email.errors %}
                            <p class="mt-1 text-sm text-red-600 font-poppins">{{ form.company_email.errors.0 }}</p>
                        {% endif %}
                    </div>
                    <div>
                        <label class="block text-sm font-medium font-poppins text-primary-dark mb-1">VAT/Tax Number</label>
                        {{ form.vat_tax_number }}
                    </div>
                </div>
            </fieldset>

            <fieldset class="mb-8">
                <legend class="text-lg font-medium font-poppins text-primary-dark mb-4 pb-2 border-b border-secondary/30 w-full">Personal Information</legend>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium font-poppins text-primary-dark mb-1">Job Title</label>
                        {{ form.job_title }}
                    </div>
                    <div>
                        <label class="block text-sm font-medium font-poppins text-primary-dark mb-1">
                            Email <span class="text-red-500">*</span>
                        </label>
                        {{ form.email }}
                        {% if form.email.errors %}
                            <p class="mt-1 text-sm text-red-600 font-poppins">{{ form.email.errors.0 }}</p>
                        {% endif %}
                    </div>
                    <div>
                        <label class="block text-sm font-medium font-poppins text-primary-dark mb-1">
                            First Name <span class="text-red-500">*</span>
                        </label>
                        {{ form.first_name }}
                        {% if form.first_name.errors %}
                            <p class="mt-1 text-sm text-red-600 font-poppins">{{ form.first_name.errors.0 }}</p>
                        {% endif %}
                    </div>
                    <div>
                        <label class="block text-sm font-medium font-poppins text-primary-dark mb-1">
                            Last Name <span class="text-red-500">*</span>
                        </label>
                        {{ form.last_name }}
                        {% if form.last_name.errors %}
                            <p class="mt-1 text-sm text-red-600 font-poppins">{{ form.last_name.errors.0 }}</p>
                        {% endif %}
                    </div>
                </div>
            </fieldset>

            <fieldset class="mb-8">
                <legend class="text-lg font-medium font-poppins text-primary-dark mb-4 pb-2 border-b border-secondary/30 w-full">Password</legend>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium font-poppins text-primary-dark mb-1">
                            Password <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            {{ form.password1 }}
                            <button type="button" onclick="togglePassword('id_password1', 'eyeIcon1')" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700">
                                <svg id="eyeIcon1" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                                </svg>
                            </button>
                        </div>
                        {% if form.password1.errors %}
                            <p class="mt-1 text-sm text-red-600 font-poppins">{{ form.password1.errors.0 }}</p>
                        {% endif %}
                    </div>
                    <div>
                        <label class="block text-sm font-medium font-poppins text-primary-dark mb-1">
                            Confirm Password <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            {{ form.password2 }}
                            <button type="button" onclick="togglePassword('id_password2', 'eyeIcon2')" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700">
                                <svg id="eyeIcon2" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                                </svg>
                            </button>
                        </div>
                        {% if form.password2.errors %}
                            <p class="mt-1 text-sm text-red-600 font-poppins">{{ form.password2.errors.0 }}</p>
                        {% endif %}
                    </div>
                </div>
            </fieldset>

            <fieldset class="mb-8">
                <legend class="text-lg font-medium font-poppins text-primary-dark mb-4 pb-2 border-b border-secondary/30 w-full">Legal Address</legend>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium font-poppins text-primary-dark mb-1">
                            Street Address <span class="text-red-500">*</span>
                        </label>
                        {{ form.street_address }}
                        {% if form.street_address.errors %}
                            <p class="mt-1 text-sm text-red-600 font-poppins">{{ form.street_address.errors.0 }}</p>
                        {% endif %}
                    </div>
                    <div>
                        <label class="block text-sm font-medium font-poppins text-primary-dark mb-1">
                            City <span class="text-red-500">*</span>
                        </label>
                        {{ form.city }}
                        {% if form.city.errors %}
                            <p class="mt-1 text-sm text-red-600 font-poppins">{{ form.city.errors.0 }}</p>
                        {% endif %}
                    </div>
                    <div>
                        <label class="block text-sm font-medium font-poppins text-primary-dark mb-1">
                            Country <span class="text-red-500">*</span>
                        </label>
                        {{ form.country }}
                        {% if form.country.errors %}
                            <p class="mt-1 text-sm text-red-600 font-poppins">{{ form.country.errors.0 }}</p>
                        {% endif %}
                    </div>
                    <div>
                        <label class="block text-sm font-medium font-poppins text-primary-dark mb-1">State/Province</label>
                        {{ form.state_province }}
                    </div>
                    <div>
                        <label class="block text-sm font-medium font-poppins text-primary-dark mb-1">
                            Zip Code <span class="text-red-500">*</span>
                        </label>
                        {{ form.zip_code }}
                        {% if form.zip_code.errors %}
                            <p class="mt-1 text-sm text-red-600 font-poppins">{{ form.zip_code.errors.0 }}</p>
                        {% endif %}
                    </div>
                    <div>
                        <label class="block text-sm font-medium font-poppins text-primary-dark mb-1">
                            Phone Number <span class="text-red-500">*</span>
                        </label>
                        {{ form.phone_number }}
                        {% if form.phone_number.errors %}
                            <p class="mt-1 text-sm text-red-600 font-poppins">{{ form.phone_number.errors.0 }}</p>
                        {% endif %}
                    </div>
                </div>
            </fieldset>

            <fieldset id="documentsSection" class="mb-8 hidden">
                <legend class="text-lg font-medium font-poppins text-primary-dark mb-4 pb-2 border-b border-secondary/30 w-full">
                    Documents <span class="text-sm font-normal text-secondary">(File Supported: PDF, JPEG, JPG, PNG, Max Size: 2MB)</span>
                </legend>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium font-poppins text-primary-dark mb-2">Upload Business Permit</label>
                        <div class="file-upload-wrapper">
                            <input type="file" name="business_permit" id="business_permit" accept=".pdf,.jpeg,.jpg,.png" class="hidden">
                            <button type="button" onclick="document.getElementById('business_permit').click()" 
                                class="px-6 py-2 border border-secondary rounded-md text-sm font-medium font-poppins text-primary-dark bg-white hover:bg-accent transition">
                                Browse File
                            </button>
                            <span id="business_permit_name" class="ml-3 text-sm text-secondary font-poppins"></span>
                        </div>
                        {% if form.business_permit.errors %}
                            <p class="mt-1 text-sm text-red-600 font-poppins">{{ form.business_permit.errors.0 }}</p>
                        {% endif %}
                    </div>

                    <div>
                        <label class="block text-sm font-medium font-poppins text-primary-dark mb-2">
                            Upload Commercial/Trading License <span id="licenseRequired" class="text-red-500">*</span>
                        </label>
                        <div class="file-upload-wrapper">
                            <input type="file" name="commercial_trading_license" id="commercial_trading_license" accept=".pdf,.jpeg,.jpg,.png" class="hidden">
                            <button type="button" onclick="document.getElementById('commercial_trading_license').click()" 
                                class="px-6 py-2 border border-secondary rounded-md text-sm font-medium font-poppins text-primary-dark bg-white hover:bg-accent transition">
                                Browse File
                            </button>
                            <span id="commercial_trading_license_name" class="ml-3 text-sm text-secondary font-poppins"></span>
                        </div>
                        {% if form.commercial_trading_license.errors %}
                            <p class="mt-1 text-sm text-red-600 font-poppins">{{ form.commercial_trading_license.errors.0 }}</p>
                        {% endif %}
                    </div>

                    <div>
                        <label class="block text-sm font-medium font-poppins text-primary-dark mb-2">
                            Upload VAT Registration Certificate <span id="vatRequired" class="text-red-500">*</span>
                        </label>
                        <div class="file-upload-wrapper">
                            <input type="file" name="vat_registration_certificate" id="vat_registration_certificate" accept=".pdf,.jpeg,.jpg,.png" class="hidden">
                            <button type="button" onclick="document.getElementById('vat_registration_certificate').click()" 
                                class="px-6 py-2 border border-secondary rounded-md text-sm font-medium font-poppins text-primary-dark bg-white hover:bg-accent transition">
                                Browse File
                            </button>
                            <span id="vat_registration_certificate_name" class="ml-3 text-sm text-secondary font-poppins"></span>
                        </div>
                        {% if form.vat_registration_certificate.errors %}
                            <p class="mt-1 text-sm text-red-600 font-poppins">{{ form.vat_registration_certificate.errors.0 }}</p>
                        {% endif %}
                    </div>

                    <div>
                        <label class="block text-sm font-medium font-poppins text-primary-dark mb-2">
                            Upload Owner Passport Copy <span class="text-red-500">*</span>
                        </label>
                        <div class="file-upload-wrapper">
                            <input type="file" name="owner_passport_copy" id="owner_passport_copy" accept=".pdf,.jpeg,.jpg,.png" class="hidden">
                            <button type="button" onclick="document.getElementById('owner_passport_copy').click()" 
                                class="px-6 py-2 border border-secondary rounded-md text-sm font-medium font-poppins text-primary-dark bg-white hover:bg-accent transition">
                                Browse File
                            </button>
                            <span id="owner_passport_copy_name" class="ml-3 text-sm text-secondary font-poppins"></span>
                        </div>
                        {% if form.owner_passport_copy.errors %}
                            <p class="mt-1 text-sm text-red-600 font-poppins">{{ form.owner_passport_copy.errors.0 }}</p>
                        {% endif %}
                    </div>

                    <div>
                        <label class="block text-sm font-medium font-poppins text-primary-dark mb-2">
                            Upload National ID <span class="text-red-500">*</span>
                        </label>
                        <div class="file-upload-wrapper">
                            <input type="file" name="national_id" id="national_id" accept=".pdf,.jpeg,.jpg,.png" class="hidden">
                            <button type="button" onclick="document.getElementById('national_id').click()" 
                                class="px-6 py-2 border border-secondary rounded-md text-sm font-medium font-poppins text-primary-dark bg-white hover:bg-accent transition">
                                Browse File
                            </button>
                            <span id="national_id_name" class="ml-3 text-sm text-secondary font-poppins"></span>
                        </div>
                        {% if form.national_id.errors %}
                            <p class="mt-1 text-sm text-red-600 font-poppins">{{ form.national_id.errors.0 }}</p>
                        {% endif %}
                    </div>
                </div>
            </fieldset>

            <div class="flex items-center gap-4 pt-6 border-t border-secondary/30">
                <a href="{% url 'users:login' %}" 
                    class="text-primary hover:text-primary-dark font-medium font-poppins transition">
                    Already have an account?
                </a>
                <button type="submit" 
                    class="px-8 py-3 bg-primary-dark text-accent font-medium font-poppins rounded-md hover:bg-primary transition">
                    Submit
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    const submittedCustomerType = '{{ form.data.customer_type|default:"personal" }}';
    
    document.addEventListener('DOMContentLoaded', function() {
        if (submittedCustomerType === 'business') {
            switchTab('business');
        } else {
            switchTab('personal');
        }
    });

    function togglePassword(inputId, iconId) {
        const input = document.getElementById(inputId);
        const icon = document.getElementById(iconId);
        
        if (input.type === 'password') {
            input.type = 'text';
            icon.innerHTML = `
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"></path>
            `;
        } else {
            input.type = 'password';
            icon.innerHTML = `
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
            `;
        }
    }

    function switchTab(type) {
        const personalTab = document.getElementById('personalTab');
        const businessTab = document.getElementById('businessTab');
        const customerTypeInput = document.getElementById('customerType');
        const companySection = document.getElementById('companySection');
        const documentsSection = document.getElementById('documentsSection');

        if (type === 'personal') {
            personalTab.classList.add('bg-primary', 'text-accent');
            personalTab.classList.remove('text-secondary');
            businessTab.classList.remove('bg-primary', 'text-accent');
            businessTab.classList.add('text-secondary');
            customerTypeInput.value = 'personal';
            companySection.classList.add('hidden');
            documentsSection.classList.add('hidden');
        } else {
            businessTab.classList.add('bg-primary', 'text-accent');
            businessTab.classList.remove('text-secondary');
            personalTab.classList.remove('bg-primary', 'text-accent');
            personalTab.classList.add('text-secondary');
            customerTypeInput.value = 'business';
            companySection.classList.remove('hidden');
            documentsSection.classList.remove('hidden');
        }
    }

    const fileInputs = ['business_permit', 'commercial_trading_license', 'vat_registration_certificate', 'owner_passport_copy', 'national_id'];
    fileInputs.forEach(function(inputId) {
        const input = document.getElementById(inputId);
        if (input) {
            input.addEventListener('change', function() {
                const fileName = this.files[0] ? this.files[0].name : '';
                document.getElementById(inputId + '_name').textContent = fileName;
            });
        }
    });
</script>
{% endblock %}