{% extends 'admin.html.twig' %}

{% block title %}Paquetes{% endblock %}

{% block content %}

<header class="container-xl mb-3">
    <div class="col-12">
        <section class="d-flex justify-content-between align-items-center">
            <h4 class="m-0 p-0 text-primary" style="font-weight: 700;font-size: 14px;">
                {{ title }}
            </h4>
            <div>
                <button class="btn btn-primary" data-id="0" data-bs-toggle="modal" data-bs-target="#modalPackageDetail">
                    Agregar servicio
                </button>
            </div>
        </section>
    </div>
</header>

<style>
    {# .input-custom {
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    } #}
    .select-custom {
        width: 40ch;
    }
</style>

<section class="container-xl">
    <form class="col-12" id="formPackage">

        <div class="card rounded-0 mb-3" spellcheck="false" autocomplete="off">
            <section class="card-body p-3">
                <article class="row mb-3">
                    <div class="col-6">
                        <label class="form-label required">Nombre del paquete</label>
                        <input type="text" class="form-control" name="nombre" id="nombre" required>
                    </div>
                    <div class="col-6">
                        <label class="form-label required">Cliente</label>
                        <select name="cliente" id="cliente" class="form-select" required></select>
                    </div>
                </article>
                <article class="row mb-3">
                    <div class="col-4">
                        <label class="form-label required">N° de pax</label>
                        <input type="text" class="form-control" name="pax" id="pax" required>
                    </div>
                    <div class="col-4">
                        <label class="form-label required">Moneda</label>
                        <select name="moneda" id="moneda" class="form-select" required></select>
                    </div>
                    <div class="col-4">
                        <label class="form-label required">Pais</label>
                        <select name="pais" id="pais" class="form-select" required></select>
                    </div>
                </article>
                <article class="row">
                    <div class="col-4">
                        <label class="form-label required">Fecha de entrada</label>
                        <input type="date" class="form-control" name="fecha_entrada" id="fecha_entrada" required> 
                    </div>
                    <div class="col-4">
                        <label class="form-label required">Fecha de salida</label>
                        <input type="date" class="form-control" name="fecha_salida" id="fecha_salida" required> 
                    </div>
                    <div class="col-4">
                        <label class="form-label">Hotel</label>
                        <select name="hotel" id="hotel" class="form-select" required></select>
                    </div>
                </article>
            </section>
        </div>

        <div class="card rounded-0 mb-3 border-top-0">
            <div class="card-body p-0 datatable">
                <table class="table table-vcenter table-nowrap table-no-line" id="tablePackageDetail"></table>
            </div>
        </div>

        <button class="btn btn-dark " type="submit">Guardar</button>
    </form>
</section>

{% include "package/form-service.html.twig" %}

{% endblock %}

{% block javascripts %}
<script src="{{ asset('assets/js/app/package/form.js') }}"></script>
{% endblock %}