<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>{{ trans('installer') }}</title>
    <meta name="description" content="{{ trans('meta-description') }}"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="generator" content="FacturaScripts"/>
    <meta name="robots" content="noindex"/>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.min.css"/>
    <link rel="shortcut icon" href="Core/Assets/Images/favicon.ico"/>
    <link rel="apple-touch-icon" sizes="180x180" href="Core/Assets/Images/apple-icon-180x180.png"/>
    <style>
        body {
            background-color: #FCF9FA;
        }
    </style>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="node_modules/@fortawesome/fontawesome-free/js/all.min.js"></script>
    <script>
        $(document).ready(function () {
            document.fs_install.fs_timezone.value = Intl.DateTimeFormat().resolvedOptions().timeZone;

            let db_type = document.fs_install.fs_db_type.value;
            if (db_type === 'mysql') {
                $("#mysql_socket_div").show();
                $("#pgsql_ssl_div").hide();
                $("#pgsql_endpoint").hide();
            } else if (db_type === 'postgresql') {
                $("#mysql_socket_div").hide();
                $("#pgsql_ssl_div").show();
                $("#pgsql_endpoint").show();
            }

            $('#db_type').on('change', function () {
                let str = '';
                $('#db_type option:selected').each(function () {
                    str = $(this).val();
                });
                if (str === 'mysql') {
                    $('#db_port').val(3306);
                    $('#db_user').val('root');
                    $("#mysql_socket_div").show();
                    $("#pgsql_ssl_div").hide();
                    $("#pgsql_endpoint").hide();
                } else if (str === 'postgresql') {
                    $('#db_port').val(5432);
                    $('#db_user').val('postgres');
                    $("#mysql_socket_div").hide();
                    $("#pgsql_ssl_div").show();
                    $("#pgsql_endpoint").show();
                }
            });

            $('#fs_lang').on('change', function () {
                let lang = $("#fs_lang option:selected").val();
                window.location.href = location.pathname + '?fs_lang=' + lang;
            });
        });
    </script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="" onclick="location.reload();">
            <img src="Core/Assets/Images/logo.png" width="30" height="30" class="align-top me-2" alt="FacturaScripts"/>
            FacturaScripts {{ version }}
        </a>

        <div class="navbar-nav ms-auto">
            <div class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                   aria-expanded="false">
                    <i class="fa-solid fa-question-circle fa-fw" aria-hidden="true"></i> {{ trans('help') }}
                </a>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                        <a class="dropdown-item" href="https://facturascripts.com/ayuda" rel="nofollow" target="_blank">
                            <i class="fa-solid fa-book fa-fw me-2" aria-hidden="true"></i> {{ trans('user-guide') }}
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="?phpinfo=TRUE">
                            <i class="fa-solid fa-info-circle fa-fw me-2" aria-hidden="true"></i> phpinfo
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="https://facturascripts.com/contacto" rel="nofollow"
                           target="_blank">
                            <i class="fa-solid fa-comment-dots fa-fw me-2" aria-hidden="true"></i>
                            {{ trans('support') }}
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>
<div class="container-fluid">
    <div class="row align-items-center">
        <div class="col-md-5 text-center mb-4 mb-md-0">
            <img src="Core/Assets/Images/install.png" alt="{{ trans('installer') }}" class="img-fluid" loading="lazy">
        </div>
        <div class="col-md-7 bg-white px-5">
            <br/>
            {% from 'Macro/Utils.html.twig' import message as show_message %}
            {{ show_message(log, ['error', 'critical'], 'danger') }}
            {{ show_message(log, ['warning'], 'warning') }}
            {{ show_message(log, ['notice'], 'success') }}
            <h1 class="h2 mt-3 mb-3">
                <i class="fa-solid fa-wand-magic-sparkles me-2"></i> {{ trans('installer') }}
            </h1>
            <p class="mb-4">{{ trans('installer-p') }}</p>
            <form name="fs_install" method="post" class="form">
                <!-- Configuración -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fa-solid fa-cog me-2"></i>{{ trans('configuration') }}</h5>
                    </div>
                    <div class="card-body pb-0">
                        <div class="row gx-2">
                            <div class="col-md-12 col-lg-6">
                                <div class="mb-3">
                                    {{ trans('language') }}:
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="fa-solid fa-language"></i>
                                        </span>
                                        <select id="fs_lang" name="fs_lang" class="form-select">
                                            {% for langCode, langName in i18n.getAvailableLanguages() %}
                                                {% if langCode == i18n.getLang() %}
                                                    <option value="{{ langCode }}" selected>{{ langName }}</option>
                                                {% else %}
                                                    <option value="{{ langCode }}">{{ langName }}</option>
                                                {% endif %}
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 col-lg-6">
                                <div class="mb-3">
                                    {{ trans('timezone') }}:
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="fa-regular fa-clock"></i>
                                        </span>
                                        <select name="fs_timezone" class="form-select">
                                            {% for tz in timezones %}
                                                <option value="{{ tz }}">{{ tz }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Usuario administrador -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fa-solid fa-user-shield me-2"></i>{{ trans('admin') }}</h5>
                    </div>
                    <div class="card-body pb-0">
                        <div class="row gx-2">
                            <div class="col-md-12 col-lg-6">
                                <div class="mb-3">
                                    {{ trans('user') }}:
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="fa-solid fa-user"></i>
                                        </span>
                                        <input type="text" name="fs_initial_user" value="{{ fsc.initial_user }}"
                                               class="form-control"
                                               placeholder="admin" maxlength="50"/>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 col-lg-6">
                                <div class="mb-3">
                                    {{ trans('password') }}:
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="fa-solid fa-lock"></i>
                                        </span>
                                        <input type="password" name="fs_initial_pass" value="{{ fsc.initial_pass }}"
                                               class="form-control" placeholder="admin" maxlength="32"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Base de datos -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fa-solid fa-database me-2"></i>{{ trans('database') }}</h5>
                    </div>
                    <div class="card-body pb-0">
                        <div class="row gx-2">
                            <div class="col-md-12 col-lg-6">
                                <div class="mb-3">
                                    {{ trans('db-type') }}:
                                    <select id="db_type" name="fs_db_type" class="form-select">
                                        {% if fsc.db_type == 'mysql' %}
                                            <option value="mysql" selected>MySQL</option>
                                            <option value="postgresql">PostgreSQL</option>
                                        {% else %}
                                            <option value="mysql">MySQL</option>
                                            <option value="postgresql" selected>PostgreSQL</option>
                                        {% endif %}
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12 col-lg-6">
                                <div class="mb-3">
                                    {{ trans('db-host') }}:
                                    <input type="text" name="fs_db_host" value="{{ fsc.db_host }}"
                                           class="form-control" required/>
                                </div>
                            </div>
                            <div class="col-md-12 col-lg-6">
                                <div class="mb-3">
                                    {{ trans('db-port') }}:
                                    <input type="number" id="db_port" name="fs_db_port"
                                           value="{{ fsc.db_port }}" class="form-control" required/>
                                </div>
                            </div>
                            <div class="col-md-12 col-lg-6">
                                <div class="mb-3">
                                    {{ trans('db-name') }}:
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="fa-solid fa-database"></i>
                                        </span>
                                        <input type="text" name="fs_db_name" value="{{ fsc.db_name }}"
                                               class="form-control" required/>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 col-lg-6">
                                <div class="mb-3">
                                    {{ trans('db-user') }}:
                                    <input type="text" id="db_user" name="fs_db_user" value="{{ fsc.db_user }}"
                                           class="form-control" required/>
                                </div>
                            </div>
                            <div class="col-md-12 col-lg-6">
                                <div class="mb-3">
                                    {{ trans('db-password') }}:
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="fa-solid fa-key"></i>
                                        </span>
                                        <input type="password" name="fs_db_pass" value="{{ fsc.db_pass }}"
                                               class="form-control"/>
                                    </div>
                                </div>
                            </div>
                            <div id="mysql_socket_div" class="col-md-12">
                                <div class="mb-3">
                                    {{ trans('mysql-socket') }}:
                                    <input type="text" name="mysql_socket" class="form-control"
                                           placeholder="{{ trans('optional') }}"/>
                                    <div class="form-text">{{ trans('mysql-socket-p') }}</div>
                                </div>
                            </div>
                            <div id="pgsql_ssl_div" class="col-md-12 col-lg-6">
                                <div class="mb-3">
                                    {{ trans('pgsql-ssl-mode') }}:
                                    <select name="pgsql_ssl_mode" class="form-select">
                                        <option value="" selected>------</option>
                                        <option value="disable">disable</option>
                                        <option value="allow">allow</option>
                                        <option value="prefer">prefer</option>
                                        <option value="require">require</option>
                                    </select>
                                </div>
                            </div>
                            <div id="pgsql_endpoint" class="col-md-12 col-lg-6">
                                <div class="mb-3">
                                    {{ trans('pgsql-endpoint') }}:
                                    <input type="text" name="pgsql_endpoint" class="form-control"
                                           placeholder="{{ trans('optional') }}"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Avanzado -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fa-solid fa-cogs me-2"></i>{{ trans('advanced') }}</h5>
                    </div>
                    <div class="card-body">
                        <div class="row align-items-center gx-2">
                            <div class="col-md-12 col-lg-6">
                                <div class="form-check">
                                    <label class="form-check-label">
                                        <input class="form-check-input" type="checkbox" name="fs_debug"
                                               value="true"/>
                                        {{ trans('debug-mode') }}
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-12 col-lg-6">
                                <div class="form-check">
                                    <label class="form-check-label">
                                        <input class="form-check-input" type="checkbox" name="fs_gtm"
                                               value="true"/>
                                        {{ trans('send-anonymous-data') }}
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-4 mb-5">
                    <button type="submit" class="btn btn-primary me-2">
                        <i class="fa-solid fa-check me-1" aria-hidden="true"></i> {{ trans('accept') }}
                    </button>
                    <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal"
                            data-bs-target="#licenseModal">
                        <i class="fa-regular fa-file-alt me-1" aria-hidden="true"></i> {{ trans('license') }}
                    </button>
                </div>
            </form>

            <!-- Modal de licencia -->
            <div class="modal fade" id="licenseModal" tabindex="-1" aria-labelledby="licenseModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="licenseModalLabel">
                                <i class="fa-regular fa-file-alt me-2"></i> {{ trans('license') }}
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div style="max-height: 500px; overflow-y: auto;">
                                <pre>{{ license }}</pre>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                <i class="fa-solid fa-times me-1"></i> {{ trans('close') }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <footer class="text-center pt-5 pb-3">
                &COPY; 2013-{{ 'now' | date('Y') }}
                <a href="https://facturascripts.com" rel="nofollow" target="_blank"
                   class="text-muted">FacturaScripts</a>
            </footer>
        </div>
    </div>
</div>
</body>
</html>