{% extends "layouts/base.twig" %}

{% block title %}{{ translations.create_product_availability_period }}{% endblock %}

{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.create_product_availability_period }}</h3>
        <p class="text-subtitle text-muted">{{ translations.availability_period_subtitle }}</p>
    </div>
{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
        <h4>{{ translations.create_product_availability_period }}</h4>
    </div>
    <form method="POST">
        <div class="card-body">

            <div class="mb-3">
                <label for="name" class="form-label required">{{ translations.name }}</label>
                <input type="text" id="name" name="name" class="form-control" required maxlength="255"
                       value="{{ old('name') }}" placeholder="{{ translations.enter_name }}">
            </div>
            <div class="mb-3">
                <label for="description" class="form-label">{{ translations.description }}</label>
                <textarea id="description" name="description" class="form-control" rows="3" maxlength="500"
                          placeholder="{{ translations.enter_description }}">{{ old('description') }}</textarea>
            </div>
            <div class="form-check form-switch mb-3">
                <input class="form-check-input" type="checkbox" id="is_recurring" name="is_recurring" value="1" {% if old('is_recurring') %}checked{% endif %}>
                <label class="form-check-label" for="is_recurring">{{ translations.recurring }}</label>
            </div>
            <div class="form-text mb-3">{{ translations.recurring_info|default('recurring_info') }}</div>
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="start_date" class="form-label required">{{ translations.start_date }}</label>
                    <input type="date" id="start_date" name="start_date" class="form-control" required
                           value="{{ old('start_date') }}">
                </div>
                <div class="col-md-6 mb-3">
                    <label for="end_date" class="form-label">{{ translations.end_date }}</label>
                    <input type="date" id="end_date" name="end_date" class="form-control"
                           value="{{ old('end_date') }}">
                </div>
            </div>
        </div>
        <div class="card-footer text-end">
            <button type="submit" class="btn btn-success"><i class="bi bi-check-circle"></i> {{ translations.add }}</button>
            <a href="{{ root }}/product-availability-periods" class="btn btn-outline-secondary">{{ translations.back }}</a>
        </div>
    </form>
</div>
{% endblock %}