<?php

declare(strict_types=1);

use Fisharebest\Webtrees\Http\RequestHandlers\ControlPanel;
use Fisharebest\Webtrees\Http\RequestHandlers\MapDataImportAction;
use Fisharebest\Webtrees\Http\RequestHandlers\MapDataList;
use Fisharebest\Webtrees\I18N;
use Fisharebest\Webtrees\View;

/**
 * @var array<string> $files
 * @var string        $folder
 * @var string        $title
 */

?>

<?= view('components/breadcrumbs', ['links' => [route(ControlPanel::class) => I18N::translate('Control panel'), route(MapDataList::class)  => I18N::translate('Geographic data'), $title]]) ?>

<h3><?= $title ?></h3>

<form method="post" action="<?= e(route(MapDataImportAction::class)) ?>" id="upload_form" enctype="multipart/form-data">
    <div class="row mb-3">
        <label class="col-form-label col-sm-4">
            <input type="radio" name="source" id="import-client" value="client" checked>
            <?= I18N::translate('A file on your computer') ?>
        </label>
        <div class="col-sm-8">
            <input id="import-client-file" type="file" name="client_file" class="form-control">
        </div>
    </div>

    <div class="row mb-3">
        <label class="col-form-label col-sm-4">
            <input type="radio" name="source" id="import-server" value="server">
            <?= I18N::translate('A file on the server') ?>
        </label>
        <div class="col-sm-8">
            <div class="input-group" dir="ltr">
                <span class="input-group-text" dir="ltr">
                    <?= e($folder) ?>
                </span>

                <select name="server_file" class="form-select" dir="ltr" id="import-server-file">
                    <option selected="selected" value="">&nbsp;</option>
                    <?php foreach ($files as $file) : ?>
                        <option value="<?= e($file) ?>">
                            <?= e($file) ?>
                        </option>
                    <?php endforeach ?>
                </select>
            </div>
        </div>
    </div>

    <!-- Import options -->
    <fieldset class="row mb-3">
        <legend class="col-form-label col-sm-4">
            <?= I18N::translate('Import') ?>
        </legend>
        <div class="col-sm-8">
            <?= view('components/select', ['name' => 'options', 'selected' => '', 'options' => ['update' => I18N::translate('Only update existing records'), 'add' => I18N::translate('Only add new records'), 'addupdate' => I18N::translate('Add new, and update existing records')]]) ?>
        </div>
    </fieldset>

    <!-- SAVE BUTTON -->
    <div class="row mb-3">
        <div class="offset-sm-4 col-sm-8">
            <button type="submit" class="btn btn-primary">
                <?= view('icons/save') ?>
                <?= I18N::translate('continue') ?>
            </button>
            <a href="<?= e(route(MapDataList::class)) ?>">
                <?= view('icons/cancel') ?>
                <?= /* I18N: A button label. */ I18N::translate('cancel') ?>
            </a>
        </div>
    </div>

    <?= csrf_field() ?>
</form>

<?php View::push('javascript') ?>
<script>
  document.getElementById('import-client-file').addEventListener('focus', function () {
    document.getElementById('import-client').checked = true;
  });

  document.getElementById('import-server-file').addEventListener('focus', function () {
    document.getElementById('import-server').checked = true;
  });
</script>
<?php View::endpush() ?>
