291 lines
13 KiB
PHP
291 lines
13 KiB
PHP
<?php
|
|
$enablePrototypeComments = true;
|
|
include '../../header-invoice.php';
|
|
?>
|
|
|
|
<!-- Vendor CSS -->
|
|
<link rel="stylesheet" href="../../assets/vendor/libs/select2/select2.css" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css" />
|
|
|
|
<style>
|
|
/* Obłe krawędzie dla kółka wykadrowania w Cropper JS */
|
|
.cropper-view-box,
|
|
.cropper-face {
|
|
border-radius: 50%;
|
|
}
|
|
</style>
|
|
|
|
<div class="container-xxl flex-grow-1 container-p-y">
|
|
|
|
<h4 class="fw-bold py-3 mb-4">
|
|
<span class="text-muted fw-light">Zarządzanie firmą /</span> Informacje o firmie
|
|
</h4>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
|
|
<div class="card mb-4">
|
|
<h5 class="card-header border-bottom">Profil firmy</h5>
|
|
|
|
<div class="card-body mt-3">
|
|
<div class="d-flex align-items-start align-items-sm-center gap-4">
|
|
<img src="https://ui-avatars.com/api/?name=Firma&background=e7e7ff&color=696cff&size=150"
|
|
alt="Logo firmy" class="d-block rounded-circle" height="100" width="100" id="uploadedLogo"
|
|
style="object-fit: cover;">
|
|
<div class="button-wrapper">
|
|
<label for="upload" class="btn btn-primary me-2 mb-3" tabindex="0">
|
|
<span class="d-none d-sm-block">Wgraj nowe logo</span>
|
|
<i class="bx bx-upload d-block d-sm-none"></i>
|
|
<input type="file" id="upload" class="account-file-input" hidden
|
|
accept="image/png, image/jpeg, image/jpg">
|
|
</label>
|
|
<button type="button" class="btn btn-label-secondary account-image-reset mb-3">
|
|
<i class="bx bx-reset d-block d-sm-none"></i>
|
|
<span class="d-none d-sm-block">Usuń</span>
|
|
</button>
|
|
<p class="text-muted mb-0">Dozwolone formaty: JPG, GIF lub PNG. Max rozmiar 800K</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="my-0">
|
|
|
|
<div class="card-body">
|
|
<form id="formCompanyProfile" onsubmit="return false">
|
|
<div class="row">
|
|
<div class="mb-3 col-md-6">
|
|
<label for="companyShortName" class="form-label">
|
|
Krótka nazwa firmy
|
|
<i class="bx bx-info-circle text-muted ms-1 cursor-pointer" data-bs-toggle="tooltip"
|
|
data-bs-placement="top"
|
|
title="Nazwa będzie widoczna tylko dla Ciebie i współpracowników. Wykorzystywana w aplikacjach magico."></i>
|
|
</label>
|
|
<input class="form-control" type="text" id="companyShortName" name="companyShortName"
|
|
placeholder="Wpisz krótką nazwę..." value="" autofocus>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mb-4">
|
|
<h5 class="card-header border-bottom">Dane rozliczeniowe</h5>
|
|
<div class="card-body mt-3">
|
|
<form id="formBillingSettings" onsubmit="return false">
|
|
<div class="row g-4">
|
|
<div class="col-md-6">
|
|
<label for="locationLabel" class="form-label">Kraj</label>
|
|
<select id="locationLabel" class="form-select select2-country">
|
|
<option value="pl" selected>Polska</option>
|
|
<option value="us">Stany Zjednoczone</option>
|
|
<option value="gb">Wielka Brytania</option>
|
|
<option value="de">Niemcy</option>
|
|
<option value="fr">Francja</option>
|
|
<option value="it">Włochy</option>
|
|
<option value="es">Hiszpania</option>
|
|
<option value="ua">Ukraina</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<label for="nipNumber" class="form-label">Numer NIP</label>
|
|
<input type="text" name="nipNumber" id="nipNumber" placeholder="___-___-__-__"
|
|
class="form-control">
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<label for="companyFullName" class="form-label">Pełna nazwa firmy</label>
|
|
<input type="text" name="companyFullName" id="companyFullName"
|
|
placeholder="Wpisz pełną nazwę podmiotu..." class="form-control">
|
|
<div class="form-text">Do użytku w rozliczeniach i fakturach</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<label for="zipCode" class="form-label">Kod pocztowy</label>
|
|
<input type="text" name="zipCode" id="zipCode" placeholder="__-___"
|
|
class="form-control">
|
|
</div>
|
|
<div class="col-md-8">
|
|
<label for="cityName" class="form-label">Miasto</label>
|
|
<input type="text" name="cityName" id="cityName" placeholder="Wpisz miasto..."
|
|
class="form-control">
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<label for="addressDetails" class="form-label">Adres</label>
|
|
<input type="text" name="addressDetails" id="addressDetails"
|
|
placeholder="Ulica i numer budynku/lokalu" class="form-control">
|
|
</div>
|
|
|
|
<div class="col-md-12 mt-4">
|
|
<div class="border-top pt-4">
|
|
<label for="billingEmail" class="form-label">Dodatkowy adres e-mail do
|
|
rozliczeń</label>
|
|
<input type="email" name="billingEmail" id="billingEmail"
|
|
placeholder="np. ksiegowosc@twojafirma.pl" class="form-control mb-2">
|
|
|
|
<div class="alert alert-primary d-flex align-items-baseline mb-0" role="alert">
|
|
<span class="alert-icon align-middle me-2">
|
|
<i class="bx bx-info-circle"></i>
|
|
</span>
|
|
<div>
|
|
Dokumenty rozliczeniowe będą automatycznie wysyłane na powyższy adres
|
|
(opcjonalnie) oraz do wszystkich użytkowników posiadających rolę
|
|
<strong>"Właściciel"</strong> ustawioną w sekcji Zespół.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal dla Cropper.js -->
|
|
<div class="modal fade" id="cropModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="cropModalLabel">Wykadruj logo (koło)</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zamknij"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="img-container"
|
|
style="max-height: 400px; display: flex; justify-content: center; background-color: #f5f5f9;">
|
|
<img id="imageToCrop" src="" alt="Obraz do wykadrowania" style="max-width: 100%; display: block;">
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Anuluj</button>
|
|
<button type="button" class="btn btn-primary" id="cropButton">Zatwierdź logo</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="footer" class="footer" style="background: #e7e7ff; position: sticky; bottom: 0px; right: 0px;">
|
|
<footer class="content-footer footer">
|
|
<div class="container-xxl d-flex py-3 justify-content-center">
|
|
<button class="btn btn-primary btn-lg">Zapisz</button>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<div class="content-backdrop fade"></div>
|
|
|
|
<?php include '../../footer.php'; ?>
|
|
|
|
<!-- Scripts -->
|
|
<script src="../../assets/vendor/libs/select2/select2.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
// --- Inicjalizacja Tooltipów ---
|
|
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
|
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
|
return new bootstrap.Tooltip(tooltipTriggerEl);
|
|
});
|
|
|
|
// --- Inicjalizacja Select2 ---
|
|
function renderIcons(option) {
|
|
if (!option.id) { return option.text; }
|
|
var $icon = $(
|
|
"<span class='d-flex align-items-center'><img src='https://flagcdn.com/w20/" + option.id.toLowerCase() + ".png' class='me-2' style='width: 20px; border-radius: 2px;' alt='flag' />" + option.text + "</span>"
|
|
);
|
|
return $icon;
|
|
}
|
|
|
|
if ($('.select2-country').length) {
|
|
$('.select2-country').select2({
|
|
templateResult: renderIcons,
|
|
templateSelection: renderIcons,
|
|
escapeMarkup: function (es) { return es; }
|
|
});
|
|
}
|
|
|
|
// --- Inicjalizacja Cropper JS ---
|
|
let cropper;
|
|
const image = document.getElementById('imageToCrop');
|
|
const input = document.getElementById('upload');
|
|
const cropModalEl = document.getElementById('cropModal');
|
|
const uploadedLogo = document.getElementById('uploadedLogo');
|
|
let cropModal;
|
|
|
|
if (cropModalEl) {
|
|
cropModal = new bootstrap.Modal(cropModalEl);
|
|
}
|
|
|
|
if (input) {
|
|
input.addEventListener('change', function (e) {
|
|
const files = e.target.files;
|
|
if (files && files.length > 0) {
|
|
const file = files[0];
|
|
const reader = new FileReader();
|
|
reader.onload = function (e) {
|
|
image.src = e.target.result;
|
|
cropModal.show();
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
input.value = ''; // reset value to allow choosing the same file again
|
|
});
|
|
}
|
|
|
|
if (cropModalEl) {
|
|
cropModalEl.addEventListener('shown.bs.modal', function () {
|
|
cropper = new Cropper(image, {
|
|
aspectRatio: 1, // kwadrat = koło po zaokrągleniu
|
|
viewMode: 1,
|
|
dragMode: 'move',
|
|
autoCropArea: 0.8,
|
|
restore: false,
|
|
guides: false,
|
|
center: false,
|
|
highlight: false,
|
|
cropBoxMovable: true,
|
|
cropBoxResizable: true,
|
|
toggleDragModeOnDblclick: false,
|
|
});
|
|
});
|
|
|
|
cropModalEl.addEventListener('hidden.bs.modal', function () {
|
|
if (cropper) {
|
|
cropper.destroy();
|
|
cropper = null;
|
|
}
|
|
});
|
|
}
|
|
|
|
const cropBtn = document.getElementById('cropButton');
|
|
if (cropBtn) {
|
|
cropBtn.addEventListener('click', function () {
|
|
if (!cropper) return;
|
|
const canvas = cropper.getCroppedCanvas({
|
|
width: 300,
|
|
height: 300
|
|
});
|
|
uploadedLogo.src = canvas.toDataURL(); // aktualizacja logo
|
|
cropModal.hide();
|
|
});
|
|
}
|
|
|
|
// Reset obrazka
|
|
const resetBtn = document.querySelector('.account-image-reset');
|
|
if (resetBtn) {
|
|
resetBtn.addEventListener('click', () => {
|
|
uploadedLogo.src = 'https://ui-avatars.com/api/?name=Firma&background=e7e7ff&color=696cff&size=150';
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|