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

{% block title %}Create Customer Request{% endblock %}

{% block content %}
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-6">
    <!-- Page Header -->
    <div class="mb-8">
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
            <div>
                <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Create Customer Request</h1>
                <p class="text-gray-600 dark:text-gray-400 mt-1">Create a new customer service request</p>
            </div>
            <div>
                <a href="{% url 'reports:customer_requests_list' %}"
                    class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors">
                    <span>←</span> Back to Requests
                </a>
            </div>
        </div>
    </div>

    <!-- Request Form -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-6">Request Details</h2>
        
        <form method="POST" class="space-y-6">
            {% csrf_token %}
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Customer Selection -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Customer <span class="text-red-500">*</span>
                    </label>
                    <select name="customer_id" required
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                        <option value="">Select Customer</option>
                        {% for customer in customers %}
                            <option value="{{ customer.id }}">{{ customer.get_full_name }} - {{ customer.phone_number }}</option>
                        {% endfor %}
                    </select>
                </div>

                <!-- Request Type -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Request Type <span class="text-red-500">*</span>
                    </label>
                    <select name="request_type" required
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                        <option value="">Select Request Type</option>
                        {% for value, label in type_choices %}
                            <option value="{{ value }}">{{ label }}</option>
                        {% endfor %}
                    </select>
                </div>

                <!-- Priority -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Priority <span class="text-red-500">*</span>
                    </label>
                    <select name="priority" required
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                        {% for value, label in priority_choices %}
                            <option value="{{ value }}" {% if value == 'medium' %}selected{% endif %}>{{ label }}</option>
                        {% endfor %}
                    </select>
                </div>

                <!-- Subject -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Subject <span class="text-red-500">*</span>
                    </label>
                    <input type="text" name="subject" required
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                        placeholder="Brief description of the request">
                </div>

                <!-- Description -->
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Description <span class="text-red-500">*</span>
                    </label>
                    <textarea name="description" rows="4" required
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                        placeholder="Detailed description of the customer's request or issue"></textarea>
                </div>
            </div>

            <!-- Submit Button -->
            <div class="flex justify-end space-x-4">
                <a href="{% url 'reports:customer_requests_list' %}"
                    class="px-6 py-2 text-sm font-medium text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors">
                    Cancel
                </a>
                <button type="submit"
                    class="px-6 py-2 text-sm font-medium text-white bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all transform hover:-translate-y-0.5">
                    <span>+</span> Create Request
                </button>
            </div>
        </form>
    </div>

    <!-- Request Guidelines -->
    <div class="bg-blue-50 dark:bg-blue-900 rounded-xl p-6 mt-8">
        <h3 class="text-lg font-semibold text-blue-900 dark:text-blue-100 mb-4">
            <span>ℹ️</span> Request Guidelines
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-blue-800 dark:text-blue-200">
            <div>
                <h4 class="font-semibold mb-2">Request Types:</h4>
                <ul class="space-y-1">
                    <li><strong>General Inquiry:</strong> General questions about services</li>
                    <li><strong>Account Issue:</strong> Problems with customer account</li>
                    <li><strong>Payment Issue:</strong> Payment-related problems</li>
                    <li><strong>Loan Request:</strong> New loan applications or modifications</li>
                </ul>
            </div>
            <div>
                <h4 class="font-semibold mb-2">Priority Levels:</h4>
                <ul class="space-y-1">
                    <li><strong>Low:</strong> Non-urgent requests (3-5 business days)</li>
                    <li><strong>Medium:</strong> Standard requests (1-2 business days)</li>
                    <li><strong>High:</strong> Urgent requests (same day response)</li>
                    <li><strong>Critical:</strong> Emergency issues (immediate response)</li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}