{% extends "pos/base.html" %}

{% block title %}
{% if staff %}Edit Staff{% else %}Add Staff{% endif %}
{% endblock %}

{% block heading %}
{% if staff %}Edit Staff{% else %}Add Staff{% endif %}
{% endblock %}

{% block stylesheets %}
<style>
    .staff-form-page .staff-form-card {
        border: 1px solid #e3e6f0;
        border-radius: 8px;
        box-shadow: 0 0.15rem 1.75rem rgba(58, 59, 69, .08);
    }

    .staff-form-page .staff-main-form {
        background: #fff !important;
        border: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .staff-form-page label {
        color: #000;
        font-size: 13px;
        font-weight: 700;
        margin-bottom: 4px;
    }

    .staff-form-page .form-control {
        color: #000;
        font-size: 13px;
    }

    .staff-form-page .required-star {
        color: #e74a3b;
        font-weight: 700;
    }

    .staff-form-page .form-help {
        font-size: 12px;
        color: #6c757d;
        margin-top: 4px;
    }

    .staff-form-page .form-actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        border-top: 1px solid #e3e6f0;
        padding-top: 14px;
        margin-top: 8px;
    }

    @media (max-width: 767.98px) {
        .staff-form-page .form-actions {
            flex-direction: column;
        }

        .staff-form-page .form-actions .btn {
            width: 100%;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="staff-form-page">

    <div class="card staff-form-card">
        <div class="card-body">

            <form method="post" class="staff-main-form">
                {% csrf_token %}

                <div class="row">

                    <div class="col-md-4 mb-3">
                        <label>
                            Staff Type <span class="required-star">*</span>
                        </label>
                        <select name="booker_type" class="form-control form-control-sm" required>
                            {% for value, label in staff_type_choices %}
                                <option value="{{ value }}" {% if booker_type_value == value %}selected{% endif %}>
                                    {{ label }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="col-md-4 mb-3">
                        <label>Status</label>
                        <select name="status" class="form-control form-control-sm">
                            {% for value, label in status_choices %}
                                <option value="{{ value }}" {% if status_value == value %}selected{% endif %}>
                                    {{ label }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="col-md-4 mb-3">
                        <label>Sort Order</label>
                        <input
                            type="number"
                            name="sort_order"
                            value="{{ sort_order_value }}"
                            class="form-control form-control-sm"
                        >
                    </div>

                    <div class="col-md-6 mb-3">
                        <label>
                            Name <span class="required-star">*</span>
                        </label>
                        <input
                            type="text"
                            name="name"
                            value="{{ name_value }}"
                            class="form-control form-control-sm"
                            required
                            autofocus
                            placeholder="Enter staff name"
                        >
                    </div>

                    <div class="col-md-6 mb-3">
                        <label>Mobile</label>
                        <input
                            type="text"
                            name="mobile"
                            value="{{ mobile_value }}"
                            class="form-control form-control-sm"
                            placeholder="Enter mobile number"
                        >
                        <div class="form-help">
                            Same staff type mein duplicate mobile allow nahi hoga.
                        </div>
                    </div>

                    <div class="col-md-6 mb-3">
                        <label>Phone</label>
                        <input
                            type="text"
                            name="phone"
                            value="{{ phone_value }}"
                            class="form-control form-control-sm"
                            placeholder="Enter phone number"
                        >
                    </div>

                    <div class="col-md-6 mb-3">
                        <label>Address</label>
                        <input
                            type="text"
                            name="address"
                            value="{{ address_value }}"
                            class="form-control form-control-sm"
                            placeholder="Enter address"
                        >
                    </div>

                    <div class="col-md-12 mb-3">
                        <label>Remarks</label>
                        <textarea
                            name="remarks"
                            rows="3"
                            class="form-control form-control-sm"
                            placeholder="Enter remarks"
                        >{{ remarks_value }}</textarea>
                    </div>

                </div>

                <div class="form-actions">
                    <a href="{% url 'restaurant:staff:list' %}" class="btn btn-secondary btn-sm">
                        <i class="fas fa-arrow-left"></i> Back
                    </a>

                    <button type="submit" class="btn btn-primary btn-sm">
                        {% if staff %}
                            <i class="fas fa-save"></i> Update Staff
                        {% else %}
                            <i class="fas fa-save"></i> Save Staff
                        {% endif %}
                    </button>
                </div>

            </form>

        </div>
    </div>

</div>
{% endblock %}