Files
2023-12-22 12:35:55 +08:00

491 lines
41 KiB
PHP

@extends('theme::user.layouts.app')
<style>
.nav-link.active .svg-stroke {
stroke: #364257;
}
.nav-link .svg-stroke {
stroke: #ffffff;
}
div#update_password_response {
padding: 10px 70px;
padding-top: 20px;
}
</style>
@section('content')
<input type="hidden" id="update_notification_status_url" value="{{ route('settings.update.notification.status', [':notification']) }}" >
<div class="user-management-page">
<div class="title-wrapper">
<h2 class="page-title">Settings</h2>
</div>
<div class="custom-nav-tabs">
<ul class="nav nav-tabs nav-justified">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#userList">
<svg style="width: 28px;" class="mr-3" xmlns="http://www.w3.org/2000/svg" width="43" height="42" viewBox="0 0 43 42" fill="none">
<path class="svg-stroke" d="M21 35.875H12.25C7 35.875 3.5 33.25 3.5 27.125V14.875C3.5 8.75 7 6.125 12.25 6.125H29.75C35 6.125 38.5 8.75 38.5 14.875V20.125" stroke="#364257" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path class="svg-stroke" d="M29.75 15.75L24.2725 20.125C22.47 21.56 19.5125 21.56 17.71 20.125L12.25 15.75" stroke="#364257" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path class="svg-stroke" fill-rule="evenodd" clip-rule="evenodd" d="M23.7501 30.7312V32.2712C23.7501 33.1812 24.4938 33.9337 25.4126 33.9337C26.9963 33.9337 27.6438 35.0537 26.8476 36.4275C26.3926 37.215 26.6638 38.2387 27.4601 38.6937L28.9738 39.56C29.6651 39.9712 30.5576 39.7262 30.9688 39.035L31.0651 38.8687C31.8613 37.495 33.1563 37.495 33.9438 38.8687L34.0401 39.035C34.4513 39.7262 35.3438 39.9712 36.0351 39.56L37.5488 38.6937C38.3451 38.2387 38.6163 37.2237 38.1613 36.4275C37.3651 35.0537 38.0126 33.9337 39.5963 33.9337C40.5151 33.9337 41.2588 33.1812 41.2588 32.2712V30.7312C41.2588 29.8125 40.5063 29.0687 39.5963 29.0687C38.0126 29.0687 37.3651 27.9487 38.1613 26.575C38.6163 25.7875 38.3451 24.7637 37.5488 24.3087L36.0351 23.4425C35.3438 23.0312 34.4513 23.2762 34.0401 23.9675L33.9438 24.1337C33.1476 25.5075 31.8526 25.5075 31.0651 24.1337L30.9688 23.9675C30.5576 23.2762 29.6651 23.0312 28.9738 23.4425L27.4601 24.3087C26.6638 24.7637 26.3926 25.7875 26.8476 26.575C27.6438 27.9487 26.9963 29.0687 25.4126 29.0687C24.4938 29.0687 23.7501 29.8212 23.7501 30.7312ZM35.125 31.5011C35.125 32.9508 33.9498 34.1261 32.5 34.1261C31.0503 34.1261 29.875 32.9508 29.875 31.5011C29.875 30.0513 31.0503 28.8761 32.5 28.8761C33.9498 28.8761 35.125 30.0513 35.125 31.5011Z" fill="#364257"/>
</svg>
Preferred Settings
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#userAccessRight">
<svg style="width: 28px;" class="mr-3" xmlns="http://www.w3.org/2000/svg" width="43" height="42" viewBox="0 0 48 47" fill="none">
<path class="svg-stroke" d="M12.5833 19.5827V15.666C12.5833 9.18393 14.5416 3.91602 24.3333 3.91602C34.125 3.91602 36.0833 9.18393 36.0833 15.666V19.5827" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path class="svg-stroke" d="M24.3333 36.2292C27.0372 36.2292 29.2291 34.0372 29.2291 31.3333C29.2291 28.6294 27.0372 26.4375 24.3333 26.4375C21.6294 26.4375 19.4375 28.6294 19.4375 31.3333C19.4375 34.0372 21.6294 36.2292 24.3333 36.2292Z" fill="white" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path class="svg-stroke" d="M34.125 43.084H14.5416C6.70831 43.084 4.74998 41.1257 4.74998 33.2923V29.3757C4.74998 21.5423 6.70831 19.584 14.5416 19.584H34.125C41.9583 19.584 43.9166 21.5423 43.9166 29.3757V33.2923C43.9166 41.1257 41.9583 43.084 34.125 43.084Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Password
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#accessLog">
<svg style="width: 30px;" class="mr-3" xmlns="http://www.w3.org/2000/svg" width="43" height="42" viewBox="0 0 76 75" fill="none">
<path class="svg-stroke" d="M46.5641 20C41.5465 20 36.9545 21.4336 33.4489 23.7744C31.8697 23.4384 30.2345 23.2592 28.5769 23.2592C18.6089 23.2592 10.5001 29.4528 10.5001 37.0576C10.5001 41.112 12.7737 44.8752 16.7609 47.496L15.8425 53.7904C15.7753 54.2384 15.9881 54.6864 16.3801 54.9104C16.5593 55.0112 16.7497 55.0672 16.9513 55.0672C17.1865 55.0672 17.4217 54.9888 17.6233 54.8432L23.6825 50.3296C28.4649 51.3488 33.6841 50.7888 37.9065 48.8512C40.5273 49.8144 43.4505 50.3744 46.5641 50.3744C48.4121 50.3744 50.2489 50.184 52.0185 49.792L58.7945 54.8432C58.9961 54.9888 59.2313 55.0672 59.4665 55.0672C59.6681 55.0672 59.8585 55.0112 60.0377 54.9104C60.4297 54.6752 60.6425 54.2384 60.5753 53.7904L59.5449 46.7232C63.9689 43.8336 66.5001 39.6672 66.5001 35.1872C66.5001 26.8208 57.5513 20 46.5641 20ZM23.6825 48.0336C23.3577 47.9552 23.0217 48.0224 22.7529 48.224L18.4521 51.4384L19.0793 47.0928C19.1465 46.6448 18.9337 46.208 18.5417 45.9728C14.8569 43.7664 12.7401 40.5072 12.7401 37.0576C12.7401 30.6848 19.8409 25.5104 28.5657 25.5104C29.4057 25.5104 30.2457 25.5552 31.0633 25.656C28.2857 28.2656 26.6169 31.5808 26.6169 35.1984C26.6169 40.3056 29.9545 44.8192 35.0393 47.5744C31.5001 48.728 27.4233 48.9296 23.6825 48.0336ZM57.7529 45.2C57.3609 45.4352 57.1593 45.872 57.2153 46.32L57.9657 51.4384L52.9481 47.6976C52.7577 47.552 52.5225 47.4736 52.2761 47.4736C52.1865 47.4736 52.1081 47.4848 52.0185 47.5072C50.2489 47.9328 48.4121 48.1456 46.5641 48.1456C36.8089 48.1456 28.8681 42.3328 28.8681 35.1984C28.8681 28.064 36.8089 22.2512 46.5641 22.2512C56.3193 22.2512 64.2601 28.0528 64.2601 35.1872C64.2601 39.0736 61.8857 42.7248 57.7529 45.2Z" fill="white"/>
<path class="svg-stroke" d="M47.4938 26.7755C45.9594 26.5067 44.4138 26.9211 43.2378 27.9067C42.0618 28.8923 41.3898 30.3371 41.3898 31.8715C41.3898 32.4875 41.8938 32.9915 42.5098 32.9915C43.1258 32.9915 43.6298 32.4875 43.6298 31.8715C43.6298 30.9979 44.0106 30.1803 44.6826 29.6203C45.3546 29.0491 46.2282 28.8251 47.113 28.9819C48.289 29.1835 49.2522 30.1579 49.465 31.3339C49.7114 32.7339 48.9722 34.0891 47.6618 34.6043C46.3178 35.1419 45.4554 36.3627 45.4554 37.7291V38.8715C45.4554 39.4875 45.9594 39.9915 46.5754 39.9915C47.1914 39.9915 47.6954 39.4875 47.6954 38.8715V37.7291C47.6954 37.2027 48.1098 36.8443 48.5018 36.6875C50.809 35.7691 52.1082 33.4059 51.6826 30.9419C51.2906 28.8587 49.577 27.1451 47.4938 26.7755Z" fill="white"/>
<path class="svg-stroke" d="M45.7689 41.772C45.5561 41.9736 45.4441 42.2648 45.4441 42.5672C45.4441 42.8584 45.5561 43.1496 45.7689 43.3512C45.9705 43.564 46.2617 43.676 46.5641 43.676C46.8553 43.676 47.1465 43.564 47.3481 43.3512C47.5609 43.1496 47.6841 42.8584 47.6841 42.5672C47.6841 42.2648 47.5609 41.9736 47.3481 41.772C46.9337 41.3464 46.1833 41.3576 45.7689 41.772Z" fill="white"/>
</svg>
Online Help
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="userList">
<div class="flex items-center w-full mt-6">
<div class="col" style="margin-left: 30px;">
<label class="font">Push Notification</label>
</div>
<div class="col flex justify-end" style="margin-right: 30px;">
<div class="form-check form-switch" align="right">
<input class="form-check-input ml-1 noti-checkbox" type="checkbox" id="flexSwitchCheckDefault" data-noti-key="{{ \App\Models\UserNotificationSetting::USER_PUSH_NOTIFICATION }}" {{ $user_push_notification ? ($user_push_notification->is_active ? 'checked' : '') : '' }} >
</div>
</div>
</div>
<div class="flex items-center w-full">
<div class="col" style="margin-left: 30px;">
<label class="font">Bookkeeping Queue Status</label>
</div>
<div class="col flex justify-end" style="margin-right: 30px;">
<div class="form-check form-switch" align="right">
<input class="form-check-input ml-1 noti-checkbox" type="checkbox" id="flexSwitchCheckDefault" data-noti-key="{{ \App\Models\UserNotificationSetting::USER_BOOKKEEPING_QUEUE }}" {{ $user_bookkeeping_queue ? ($user_bookkeeping_queue->is_active ? 'checked' : '') : '' }} >
</div>
</div>
</div>
<div class="flex items-center w-full">
<div class="col" style="margin-left: 30px;">
<label class="font">Company Secretary Queue Status</label>
</div>
<div class="col flex justify-end" style="margin-right: 30px;">
<div class="form-check form-switch" align="right">
<input class="form-check-input ml-1 noti-checkbox" type="checkbox" id="flexSwitchCheckDefault" data-noti-key="{{ \App\Models\UserNotificationSetting::USER_COMPANY_SECURTY_QUEUE }}" {{ $user_company_security_queue ? ($user_company_security_queue->is_active ? 'checked' : '') : '' }} >
</div>
</div>
</div>
<div class="flex items-center w-full">
<div class="col" style="margin-left: 30px;">
<label class="font">Chat Room New Message</label>
</div>
<div class="col flex justify-end" style="margin-right: 30px;">
<div class="form-check form-switch" align="right">
<input class="form-check-input ml-1 noti-checkbox" type="checkbox" id="flexSwitchCheckDefault" data-noti-key="{{ \App\Models\UserNotificationSetting::USER_CHAT_ROOM }}" {{ $user_chat_room ? ($user_chat_room->is_active ? 'checked' : '') : '' }} >
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="userAccessRight">
<div id="update_password_response" ></div>
<form action="{{ route('settings.update.password') }}" id="update_password_form" >
<div class="row mt-20">
<div class="col-xxl-5 flex justify-end">
<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220" viewBox="0 0 220 220" fill="none">
<circle cx="110" cy="110" r="110" fill="#F7F7F7"/>
<path d="M144.712 153.022L97.8601 126.094C94.3867 124.093 91.5723 118.745 91.5723 114.142V82.4552C91.5723 77.8523 94.3867 75.7843 97.8601 77.73L144.712 104.658C148.186 106.659 151 112.007 151 116.61V148.297C151 152.9 148.186 155.012 144.712 153.022Z" fill="#E8A30A"/>
<path d="M128.148 165.654L149.078 153.191L136.391 124.539L116.689 134.234L128.148 165.654Z" fill="#E8A30A"/>
<path d="M73.5566 89.4606L94.2072 77.1973L99.3783 115.377L73.5566 89.4606Z" fill="#E8A30A"/>
<path d="M124.185 165.252L77.2767 138.324C73.8033 136.334 71 130.986 71 126.383V94.674C71 90.0711 73.8033 88.0031 77.2767 89.9488L124.185 116.888C127.647 118.878 130.461 124.226 130.461 128.829V160.516C130.461 165.119 127.647 167.242 124.185 165.252Z" fill="#F9CB07"/>
<path d="M96.5978 89.0269V64.9561C96.5978 55.1832 103.489 51.2251 111.988 56.0615C120.487 60.9424 127.378 72.8277 127.378 82.5895V106.66" stroke="#CC8B09" stroke-width="10.46" stroke-miterlimit="10"/>
<path d="M96.3864 93.119C100.155 93.119 103.21 91.3618 103.21 89.1942C103.21 87.0267 100.155 85.2695 96.3864 85.2695C92.6177 85.2695 89.5625 87.0267 89.5625 89.1942C89.5625 91.3618 92.6177 93.119 96.3864 93.119Z" fill="#CC8B09"/>
<path d="M127.379 109.508C131.147 109.508 134.203 107.75 134.203 105.583C134.203 103.415 131.147 101.658 127.379 101.658C123.61 101.658 120.555 103.415 120.555 105.583C120.555 107.75 123.61 109.508 127.379 109.508Z" fill="#CC8B09"/>
</svg>
</div>
<div class="col-xxl-7">
<div class="col">
<div class="row" style="margin: 0px;margin-top: 20px;">
<div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
<h1 style="color: rgb(0,0,0);font-size: 20px;">Current Password </h1>
</div>
<div class="col-xxl-7">
<div class="flex items-center justify-end relative w-full">
<input name="password" required class="w-full form-control form-control-sm" type="password" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);">
<svg class="absolute mr-2 w-6 h-6" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M2.29243 6.35475C2.61993 6.10287 3.08925 6.16338 3.34223 6.48951L3.34478 6.49271C3.34816 6.49693 3.35472 6.50503 3.36448 6.5167C3.38399 6.54004 3.41624 6.57759 3.46135 6.62687C3.55162 6.72549 3.69298 6.87063 3.88633 7.04255C4.27335 7.38664 4.86585 7.83549 5.67161 8.23426C6.72929 8.75769 8.16282 9.19926 9.99966 9.19926C11.8365 9.19926 13.27 8.75769 14.3277 8.23426C15.1335 7.83549 15.726 7.38664 16.113 7.04255C16.3063 6.87063 16.4477 6.72549 16.538 6.62687C16.5831 6.57759 16.6153 6.54004 16.6349 6.5167C16.6446 6.50503 16.6512 6.49693 16.6545 6.49271L16.6568 6.48991C16.9098 6.16375 17.3794 6.10287 17.7069 6.35475C18.0352 6.60727 18.0967 7.07815 17.8442 7.40649L17.8429 7.40814L17.8413 7.41019L17.8372 7.41549L17.8251 7.43073C17.8153 7.44291 17.8021 7.4591 17.7855 7.47896C17.7523 7.51867 17.7053 7.57312 17.6444 7.63966C17.5227 7.77267 17.3449 7.95442 17.1097 8.16354C16.758 8.47622 16.2764 8.85147 15.6607 9.21637L16.8819 11.6082C17.0703 11.9771 16.9239 12.4289 16.555 12.6172C16.1861 12.8056 15.7343 12.6592 15.546 12.2903L14.317 9.8833C13.3369 10.2834 12.1493 10.5939 10.7497 10.6772V12.9493C10.7497 13.3635 10.4139 13.6993 9.99966 13.6993C9.58545 13.6993 9.24966 13.3635 9.24966 12.9493V10.6772C7.85001 10.5939 6.66248 10.2834 5.68229 9.8833L4.45335 12.2903C4.265 12.6592 3.81324 12.8056 3.44433 12.6172C3.07542 12.4289 2.92905 11.9771 3.11741 11.6082L4.33861 9.21637C3.72289 8.85147 3.24133 8.47622 2.88965 8.16354C2.65445 7.95442 2.47664 7.77267 2.35489 7.63966C2.29398 7.57312 2.24701 7.51867 2.2138 7.47896C2.19719 7.4591 2.18402 7.44291 2.17425 7.43073L2.16216 7.41549L2.15802 7.41019L2.15643 7.40814L2.15575 7.40726C1.90323 7.07893 1.96409 6.60727 2.29243 6.35475Z" fill="#364257"/>
</svg>
</div>
</div>
</div>
<div class="row" style="margin: 0px;margin-top: 20px;">
<div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
<h1 style="color: rgb(0,0,0);font-size: 20px;">New Password </h1>
</div>
<div class="col-xxl-7">
<div class="flex items-center justify-end relative w-full">
<input name="new_password" required class="w-full form-control form-control-sm" type="password" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);">
<svg class="absolute mr-2 w-6 h-6" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M2.29243 6.35475C2.61993 6.10287 3.08925 6.16338 3.34223 6.48951L3.34478 6.49271C3.34816 6.49693 3.35472 6.50503 3.36448 6.5167C3.38399 6.54004 3.41624 6.57759 3.46135 6.62687C3.55162 6.72549 3.69298 6.87063 3.88633 7.04255C4.27335 7.38664 4.86585 7.83549 5.67161 8.23426C6.72929 8.75769 8.16282 9.19926 9.99966 9.19926C11.8365 9.19926 13.27 8.75769 14.3277 8.23426C15.1335 7.83549 15.726 7.38664 16.113 7.04255C16.3063 6.87063 16.4477 6.72549 16.538 6.62687C16.5831 6.57759 16.6153 6.54004 16.6349 6.5167C16.6446 6.50503 16.6512 6.49693 16.6545 6.49271L16.6568 6.48991C16.9098 6.16375 17.3794 6.10287 17.7069 6.35475C18.0352 6.60727 18.0967 7.07815 17.8442 7.40649L17.8429 7.40814L17.8413 7.41019L17.8372 7.41549L17.8251 7.43073C17.8153 7.44291 17.8021 7.4591 17.7855 7.47896C17.7523 7.51867 17.7053 7.57312 17.6444 7.63966C17.5227 7.77267 17.3449 7.95442 17.1097 8.16354C16.758 8.47622 16.2764 8.85147 15.6607 9.21637L16.8819 11.6082C17.0703 11.9771 16.9239 12.4289 16.555 12.6172C16.1861 12.8056 15.7343 12.6592 15.546 12.2903L14.317 9.8833C13.3369 10.2834 12.1493 10.5939 10.7497 10.6772V12.9493C10.7497 13.3635 10.4139 13.6993 9.99966 13.6993C9.58545 13.6993 9.24966 13.3635 9.24966 12.9493V10.6772C7.85001 10.5939 6.66248 10.2834 5.68229 9.8833L4.45335 12.2903C4.265 12.6592 3.81324 12.8056 3.44433 12.6172C3.07542 12.4289 2.92905 11.9771 3.11741 11.6082L4.33861 9.21637C3.72289 8.85147 3.24133 8.47622 2.88965 8.16354C2.65445 7.95442 2.47664 7.77267 2.35489 7.63966C2.29398 7.57312 2.24701 7.51867 2.2138 7.47896C2.19719 7.4591 2.18402 7.44291 2.17425 7.43073L2.16216 7.41549L2.15802 7.41019L2.15643 7.40814L2.15575 7.40726C1.90323 7.07893 1.96409 6.60727 2.29243 6.35475Z" fill="#364257"/>
</svg>
</div>
</div>
</div>
<div class="row" style="margin: 0px;margin-top: 20px;">
<div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
<h1 style="color: rgb(0,0,0);font-size: 20px;">Confirm Password </h1>
</div>
<div class="col-xxl-7">
<div class="flex items-center justify-end relative w-full">
<input name="confirm_password" required class="w-full form-control form-control-sm" type="password" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);">
<svg class="absolute mr-2 w-6 h-6" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M2.29243 6.35475C2.61993 6.10287 3.08925 6.16338 3.34223 6.48951L3.34478 6.49271C3.34816 6.49693 3.35472 6.50503 3.36448 6.5167C3.38399 6.54004 3.41624 6.57759 3.46135 6.62687C3.55162 6.72549 3.69298 6.87063 3.88633 7.04255C4.27335 7.38664 4.86585 7.83549 5.67161 8.23426C6.72929 8.75769 8.16282 9.19926 9.99966 9.19926C11.8365 9.19926 13.27 8.75769 14.3277 8.23426C15.1335 7.83549 15.726 7.38664 16.113 7.04255C16.3063 6.87063 16.4477 6.72549 16.538 6.62687C16.5831 6.57759 16.6153 6.54004 16.6349 6.5167C16.6446 6.50503 16.6512 6.49693 16.6545 6.49271L16.6568 6.48991C16.9098 6.16375 17.3794 6.10287 17.7069 6.35475C18.0352 6.60727 18.0967 7.07815 17.8442 7.40649L17.8429 7.40814L17.8413 7.41019L17.8372 7.41549L17.8251 7.43073C17.8153 7.44291 17.8021 7.4591 17.7855 7.47896C17.7523 7.51867 17.7053 7.57312 17.6444 7.63966C17.5227 7.77267 17.3449 7.95442 17.1097 8.16354C16.758 8.47622 16.2764 8.85147 15.6607 9.21637L16.8819 11.6082C17.0703 11.9771 16.9239 12.4289 16.555 12.6172C16.1861 12.8056 15.7343 12.6592 15.546 12.2903L14.317 9.8833C13.3369 10.2834 12.1493 10.5939 10.7497 10.6772V12.9493C10.7497 13.3635 10.4139 13.6993 9.99966 13.6993C9.58545 13.6993 9.24966 13.3635 9.24966 12.9493V10.6772C7.85001 10.5939 6.66248 10.2834 5.68229 9.8833L4.45335 12.2903C4.265 12.6592 3.81324 12.8056 3.44433 12.6172C3.07542 12.4289 2.92905 11.9771 3.11741 11.6082L4.33861 9.21637C3.72289 8.85147 3.24133 8.47622 2.88965 8.16354C2.65445 7.95442 2.47664 7.77267 2.35489 7.63966C2.29398 7.57312 2.24701 7.51867 2.2138 7.47896C2.19719 7.4591 2.18402 7.44291 2.17425 7.43073L2.16216 7.41549L2.15802 7.41019L2.15643 7.40814L2.15575 7.40726C1.90323 7.07893 1.96409 6.60727 2.29243 6.35475Z" fill="#364257"/>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-20">
<div class="col flex justify-center">
<button type="submit" class="btn btn-success" style="color: #FFFFFF;background: #009B9A;font-size: 19px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 50px;">Save</button>
</div>
</div>
</form>
</div>
<div class="tab-pane fade" id="accessLog">
<div class="row" style="background-color: #F4F7FA;" id="firstpage">
<div class="col-xxl-4" style="border-right-width: 2px;">
<div class="flex pl-5 pt-3">
<h2 style="font-size: 24px;">Contact Us</h2>
</div>
<div style="padding-left: 25px;" class="flex pl-7 pt-4 justify-start items-center">
<svg style="width: 35px;" xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35" fill="none">
<path d="M32.0397 26.7306C32.0397 27.2556 31.923 27.7952 31.6751 28.3202C31.4272 28.8452 31.1063 29.341 30.6834 29.8077C29.9688 30.5952 29.1813 31.1639 28.2917 31.5285C27.4167 31.8931 26.4688 32.0827 25.448 32.0827C23.9605 32.0827 22.3709 31.7327 20.6938 31.0181C19.0167 30.3035 17.3397 29.341 15.6772 28.1306C14.0001 26.9056 12.4105 25.5493 10.8938 24.0473C9.39175 22.5306 8.0355 20.941 6.82508 19.2785C5.62925 17.616 4.66675 15.9535 3.96675 14.3056C3.26675 12.6431 2.91675 11.0535 2.91675 9.53685C2.91675 8.54518 3.09175 7.59727 3.44175 6.72227C3.79175 5.83268 4.34591 5.01602 5.11883 4.28685C6.05216 3.3681 7.073 2.91602 8.15216 2.91602C8.5605 2.91602 8.96883 3.00352 9.33341 3.17852C9.71258 3.35352 10.048 3.61602 10.3105 3.99518L13.6938 8.76393C13.9563 9.12852 14.1459 9.46393 14.2772 9.78477C14.4084 10.091 14.4813 10.3973 14.4813 10.6743C14.4813 11.0243 14.3792 11.3743 14.1751 11.7098C13.9855 12.0452 13.7084 12.3952 13.3584 12.7452L12.2501 13.8973C12.0897 14.0577 12.0167 14.2473 12.0167 14.4806C12.0167 14.5973 12.0313 14.6993 12.0605 14.816C12.1042 14.9327 12.148 15.0202 12.1772 15.1077C12.4397 15.5889 12.8917 16.216 13.5334 16.9743C14.1897 17.7327 14.8897 18.5056 15.648 19.2785C16.4355 20.0514 17.1938 20.766 17.9667 21.4223C18.7251 22.0639 19.3522 22.5014 19.848 22.7639C19.9209 22.7931 20.0084 22.8368 20.1105 22.8806C20.2272 22.9243 20.3438 22.9389 20.4751 22.9389C20.723 22.9389 20.9126 22.8514 21.073 22.691L22.1813 21.5973C22.5459 21.2327 22.8959 20.9556 23.2313 20.7806C23.5667 20.5764 23.9022 20.4743 24.2667 20.4743C24.5438 20.4743 24.8355 20.5327 25.1563 20.6639C25.4772 20.7952 25.8126 20.9848 26.1772 21.2327L31.0042 24.6598C31.3834 24.9223 31.6459 25.2285 31.8063 25.5931C31.9522 25.9577 32.0397 26.3223 32.0397 26.7306Z" stroke="#009B9A" stroke-width="1.5" stroke-miterlimit="10"/>
</svg>
&emsp;<a href="{{ $siteSetting ? 'tel:' . $siteSetting->phone : '#' }}" style="color: #2C21FE"><u>{{ $siteSetting ? $siteSetting->phone : 'N/A' }}</u></a>
&emsp;
</div>
<div style="padding-left: 25px;" class="flex pl-7 pt-4 justify-start items-center">
<svg style="width: 35px;" xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35" fill="none">
<path d="M10.0626 30.041C12.2501 31.3535 14.8751 32.0827 17.5001 32.0827C25.5209 32.0827 32.0834 25.5202 32.0834 17.4993C32.0834 9.47852 25.5209 2.91602 17.5001 2.91602C9.47925 2.91602 2.91675 9.47852 2.91675 17.4993C2.91675 20.1243 3.64591 22.6035 4.81258 24.791L3.35719 30.3887C3.16247 31.1376 3.85567 31.8144 4.59973 31.6018L10.0626 30.041Z" stroke="#009B9A" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M24.0625 21.6541C24.0625 21.8903 24.0099 22.1331 23.8982 22.3694C23.7865 22.6056 23.6419 22.8288 23.4513 23.0388C23.1292 23.3931 22.7743 23.6491 22.3734 23.8131C21.9791 23.9772 21.5519 24.0625 21.0918 24.0625C20.4214 24.0625 19.705 23.905 18.9492 23.5834C18.1934 23.2619 17.4376 22.8288 16.6883 22.2841C15.9325 21.7328 15.2161 21.1225 14.5326 20.4466C13.8556 19.7641 13.2444 19.0488 12.6989 18.3006C12.16 17.5525 11.7262 16.8044 11.4107 16.0628C11.0952 15.3147 10.9375 14.5994 10.9375 13.9169C10.9375 13.4706 11.0164 13.0441 11.1741 12.6503C11.3318 12.25 11.5816 11.8825 11.9299 11.5544C12.3506 11.1409 12.8106 10.9375 13.297 10.9375C13.481 10.9375 13.665 10.9769 13.8293 11.0556C14.0002 11.1344 14.1514 11.2525 14.2697 11.4231L15.7945 13.5691C15.9128 13.7331 15.9982 13.8841 16.0574 14.0284C16.1165 14.1663 16.1494 14.3041 16.1494 14.4288C16.1494 14.5863 16.1034 14.7437 16.0114 14.8947C15.9259 15.0456 15.801 15.2031 15.6433 15.3606L15.1438 15.8791C15.0715 15.9512 15.0387 16.0366 15.0387 16.1416C15.0387 16.1941 15.0452 16.24 15.0584 16.2925C15.0781 16.345 15.0978 16.3844 15.1109 16.4237C15.2293 16.6403 15.433 16.9225 15.7222 17.2638C16.0179 17.605 16.3334 17.9528 16.6752 18.3006C17.0301 18.6484 17.3718 18.97 17.7202 19.2653C18.0619 19.5541 18.3445 19.7509 18.568 19.8691C18.6009 19.8822 18.6403 19.9019 18.6863 19.9216C18.7389 19.9412 18.7915 19.9478 18.8506 19.9478C18.9623 19.9478 19.0478 19.9084 19.1201 19.8363L19.6196 19.3441C19.7839 19.18 19.9416 19.0553 20.0928 18.9766C20.244 18.8847 20.3951 18.8387 20.5594 18.8387C20.6843 18.8387 20.8158 18.865 20.9603 18.9241C21.1049 18.9831 21.2561 19.0684 21.4204 19.18L23.5959 20.7222C23.7667 20.8403 23.885 20.9781 23.9573 21.1422C24.0231 21.3062 24.0625 21.4703 24.0625 21.6541Z" stroke="#009B9A" stroke-width="1.5" stroke-miterlimit="10"/>
</svg>
&emsp;<a href="{{ $siteSetting ? 'https://api.whatsapp.com/send?phone=' . $siteSetting->whatsapp : '#' }}" style="color: #2C21FE"><u>{{ $siteSetting ? $siteSetting->whatsapp : 'N/A' }}</u></a>
</div>
<div style="padding-left: 25px;" class="flex pl-7 pt-4 justify-start items-center">
<svg style="width: 35px;" xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35" fill="none">
<path d="M24.7917 29.8952H10.2084C5.83341 29.8952 2.91675 27.7077 2.91675 22.6035V12.3952C2.91675 7.29102 5.83341 5.10352 10.2084 5.10352H24.7917C29.1667 5.10352 32.0834 7.29102 32.0834 12.3952V22.6035C32.0834 27.7077 29.1667 29.8952 24.7917 29.8952Z" stroke="#009B9A" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M24.7916 13.125L20.227 16.7708C18.7249 17.9667 16.2603 17.9667 14.7582 16.7708L10.2083 13.125" stroke="#009B9A" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
&emsp;<a href="{{ $siteSetting ? 'mailto:' . $siteSetting->email : '#' }}" style="color: #2C21FE"><u>{{ $siteSetting ? $siteSetting->email : 'N/A' }}</u></a>
</div>
<div style="padding-left: 25px;" class="flex pl-7 pt-4 justify-start items-center">
<svg style="width: 35px;" xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35" fill="none">
<path d="M32.0834 13.1258V21.8758C32.0834 25.5216 31.3543 28.0737 29.7209 29.7216L20.4167 20.4174L31.6897 9.14453C31.9522 10.2966 32.0834 11.6091 32.0834 13.1258Z" stroke="#009B9A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M31.6897 9.14311L9.14382 31.6889C4.75423 30.6827 2.91675 27.6493 2.91675 21.8743V13.1243C2.91675 5.83268 5.83341 2.91602 13.1251 2.91602H21.8751C27.6501 2.91602 30.6834 4.75352 31.6897 9.14311Z" stroke="#009B9A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M29.7209 29.7202C28.073 31.3535 25.5209 32.0827 21.8751 32.0827H13.1251C11.6084 32.0827 10.2959 31.9514 9.1438 31.6889L20.4167 20.416L29.7209 29.7202Z" stroke="#009B9A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.10002 11.6383C10.0917 7.36536 16.5084 7.36536 17.5 11.6383C18.0688 14.1466 16.4938 16.2758 15.1083 17.5883C14.1021 18.5508 12.5125 18.5508 11.4917 17.5883C10.1063 16.2758 8.51668 14.1466 9.10002 11.6383Z" stroke="#009B9A" stroke-width="1.5"/>
<path d="M13.2629 12.6882H13.276" stroke="#009B9A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
&emsp;
<span>{{ $siteSetting ? $siteSetting->address : 'N/A' }}</span>
</div>
<div style="padding-left: 25px;" class="flex pl-7 pt-4 justify-start items-center">
<svg style="width: 35px;" xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35" fill="none">
<path d="M32.0834 17.4993C32.0834 25.5493 25.5501 32.0827 17.5001 32.0827C9.45008 32.0827 2.91675 25.5493 2.91675 17.4993C2.91675 9.44935 9.45008 2.91602 17.5001 2.91602C25.5501 2.91602 32.0834 9.44935 32.0834 17.4993Z" stroke="#009B9A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22.9104 22.1366L18.3896 19.4387C17.6021 18.972 16.9604 17.8491 16.9604 16.9303V10.9512" stroke="#009B9A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
&emsp;{{ $siteSetting ? $siteSetting->office_hour : 'N/A' }}
</div>
<div class="flex pt-4 justify-center items-center">
<button data-bs-toggle="modal" data-bs-target="#newUserModal" class="btn btn-success" style="color: #FFFFFF;background: #009B9A;font-size: 19px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 50px;">Enquiry</button>
</div>
<div class="flex pt-2 justify-center items-center">
<a href="/setting/enquiries" class="btn btn-success" style="color: #FFFFFF;background: #009B9A;font-size: 19px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 50px;">My Enquiry</a>
</div>
</div>
<div class="col-xxl-8 px-0">
<div class="flex px-3 py-2">
<h2 style="font-size: 20px;">Online Documents</h2>
</div>
<div class="flex">
<table class="table table-bordered" style="background-color: #fff;">
<tbody>
<tr>
<td class="px-3">
<div class="flex items-center w-full" style="white-space: nowrap;">
1. Payment Methods
<div class="flex justify-end w-full">
<svg class="open-second-page" data-id="payment_method_btn" style="width: 24px;" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z" fill="#F3CF5D" stroke="#F3CF5D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 12H16" stroke="#364257" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 16V8" stroke="#364257" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
</td>
</tr>
<tr>
<td class="px-3">
<div class="flex items-center w-full" style="white-space: nowrap;">
2. Payment Terms &amp; Conditions
<div class="flex justify-end w-full">
<svg class="open-second-page" data-id="payment-terms" style="width: 24px;" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z" fill="#F3CF5D" stroke="#F3CF5D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 12H16" stroke="#364257" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 16V8" stroke="#364257" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="flex px-3 py-2">
<h2 style="font-size: 20px;">FAQ</h2>
</div>
<div class="flex">
<table class="table table-bordered" style="background-color: #fff;">
<tbody>
@foreach($faq_lists as $faq)
<tr>
<td class="px-3">
<div class="flex items-center w-full" style="">
<p style="white-space: nowrap;"><span style="color: #009B9A;">{{ strtolower(app()->getLocale()) == 'zh_hk' ? $faq->title_chinese : $faq->title_english }}</p>
<div class="flex justify-end w-full">
<svg class="open-second-page" data-id="faq-pannel-{{ $faq->id }}" style="width: 24px;" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z" fill="#F3CF5D" stroke="#F3CF5D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 12H16" stroke="#364257" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 16V8" stroke="#364257" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
<div class="row d-none" style="background-color: #F4F7FA;" id="secondpage">
@foreach($faq_lists as $faq)
<div class="col-xxl-12 second-pannel" id="faq-pannel-{{ $faq->id }}" >
<div class="flex px-3 py-2">
<h2 style="font-size: 20px;">{{ strtolower(app()->getLocale()) == 'zh_hk' ? $faq->title_chinese : $faq->title_english }}</h2>
</div>
<div class="flex" style="background: #fff;">
<div class="col px-3">
{!! strtolower(app()->getLocale()) == 'zh_hk' ? $faq->details_chinese : $faq->details_english !!}
</div>
</div>
<div class="flex justify-center">
<button type="button" class="back_payment_method_btn btn red-btn mx-3 my-5">Back</button>
</div>
</div>
@endforeach
<div class="col-xxl-12 second-pannel" id="payment_method_btn" >
<div class="flex px-3 py-2">
<h2 style="font-size: 20px;">Payment Methods</h2>
</div>
<div class="flex" style="background: #fff;">
<div class="col px-3">
<strong>Cash, Octopus, Cheque or American Express</strong><br>
Visit our office in person to apply and settle payment by cash (HKD only), Octopus, cheque* or American Express credit card*.
*Services will be provided after cashing the cheque (takes 1.5 working days on average)*Additional service fees may be charged when using American Express.
<br><br>
<strong>Faster Payment System (FPS)</strong><br>
FPS ID: 8234402 OR<br>
Mobile Number: +852-56457083 (Beneficiary bank: Default)
<br><br>
<strong>Cheque or Bank Transfer</strong><br>
Cheque should be crossed and made payable to "Numstation Limited"
<ul class="pl-5">
<li style="list-style: disc;" class="list-disc">HSBCAccount No.: 123-456789-001</li>
<li style="list-style: disc;" class="list-disc">Bank of ChinaAccount No.: 012-878-00065427</li>
</ul>
<br>
<strong>Others</strong><br>
You may use these payment methods on bbc‧me Self-Service Platform or BBC-Pay. There would be an extra handling fee and it would be calculated on the Platform.
<ul class="pl-5">
<li style="list-style: disc;" class="list-disc">PayMe</li>
<li style="list-style: disc;" class="list-disc">PayPal (which included Visa & Master Cards)</li>
<li style="list-style: disc;" class="list-disc">WeChat Pay (for CNY Only)</li>
<li style="list-style: disc;" class="list-disc">Alipay (for CNY Only)</li>
</ul>
</div>
</div>
<div class="flex justify-center">
<button type="button" class="back_payment_method_btn btn red-btn mx-3 my-5">Back</button>
</div>
</div>
<div class="col-xxl-12 second-pannel" id="payment-terms" >
<div class="flex px-3 py-2">
<h2 style="font-size: 20px;">Payment Terms &amp; Conditions</h2>
</div>
<div class="flex" style="background: #fff;">
<div class="col px-3">
<strong>Cash, Octopus, Cheque or American Express</strong><br>
Visit our office in person to apply and settle payment by cash (HKD only), Octopus, cheque* or American Express credit card*.
*Services will be provided after cashing the cheque (takes 1.5 working days on average)*Additional service fees may be charged when using American Express.
<br><br>
<strong>Faster Payment System (FPS)</strong><br>
FPS ID: 8234402 OR<br>
Mobile Number: +852-56457083 (Beneficiary bank: Default)
<br><br>
<strong>Cheque or Bank Transfer</strong><br>
Cheque should be crossed and made payable to "Numstation Limited"
<ul class="pl-5">
<li style="list-style: disc;" class="list-disc">HSBCAccount No.: 123-456789-001</li>
<li style="list-style: disc;" class="list-disc">Bank of ChinaAccount No.: 012-878-00065427</li>
</ul>
<br>
<strong>Others</strong><br>
You may use these payment methods on bbc‧me Self-Service Platform or BBC-Pay. There would be an extra handling fee and it would be calculated on the Platform.
<ul class="pl-5">
<li style="list-style: disc;" class="list-disc">PayMe</li>
<li style="list-style: disc;" class="list-disc">PayPal (which included Visa & Master Cards)</li>
<li style="list-style: disc;" class="list-disc">WeChat Pay (for CNY Only)</li>
<li style="list-style: disc;" class="list-disc">Alipay (for CNY Only)</li>
</ul>
</div>
</div>
<div class="flex justify-center">
<button type="button" class="back_payment_method_btn btn red-btn mx-3 my-5">Back</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{-- Enquiry Modal --}}
<div class="modal fade custom-modal style2" id="newUserModal" tabindex="-1" aria-labelledby="newUserModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content mx-auto">
<div class="modal-body p-0">
<p class="modal-title">Enquiry</p>
<div id="enquiry-response-con" ></div>
<form id="submit_enquiry_form" action="{{ route('settings.submit.enquiry') }}" class="theme-form">
<div class="row">
<div class="col-md-6">
<div class="row mb-5 align-items-center">
<div class="col-auto">
<label class="col-form-label">Name</label>
</div>
<div class="col">
<input type="text" class="form-control" value="" name="name" required >
</div>
</div>
</div>
<div class="col-md-6">
<div class="row mb-5 align-items-center">
<div class="col-auto">
<label class="col-form-label">Phone</label>
</div>
<div class="col">
<input type="text" class="form-control" value="" name="phone" required >
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row mb-5 align-items-center">
<div class="col-auto">
<label class="col-form-label">Email</label>
</div>
<div class="col">
<input type="email" class="form-control" value="" name="email" required >
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="row mb-5 align-items-center">
<div class="col-auto">
<label class="col-form-label">Type</label>
</div>
<div class="col">
<select class="w-100" name="category" required >
<option value="company_secretary" selected>Company Secretary</option>
<option value="general" >Gneral</option>
</select>
</div>
</div>
</div>
<div class="col-md-8">
<div class="row mb-5 align-items-center">
<div class="col-auto">
<label class="col-form-label">Title</label>
</div>
<div class="col">
<input type="text" class="form-control" value="" name="title" required >
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row mb-5 align-items-center">
<div class="col-auto">
<label class="col-form-label">Message</label>
</div>
<div class="col">
<textarea style="border-radius: 45px; height: 150px;" class="form-control" id="floatingTextarea" name="message" required ></textarea>
</div>
</div>
</div>
</div>
<div class="d-flex align-items-center justify-content-center">
<button type="submit" class="btn blue-btn mx-3">Submit</button>
<button type="button" class="btn red-btn mx-3" data-bs-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div>
</div>
</div>
@endsection
@section('script')
<script type="text/javascript" src="{{ asset('themes/' . $theme->folder . '/js/customer/settings-main.js') }}"></script>
<script>
$(function() {
$('.open-second-page').on('click', function() {
$('#firstpage').addClass('d-none');
$('#secondpage').removeClass('d-none');
var pannel_id = $(this).attr('data-id');
$('.second-pannel').hide();
$('#' + pannel_id).show();
});
$('.back_payment_method_btn').on('click', function() {
$('#firstpage').removeClass('d-none');
$('#secondpage').addClass('d-none');
});
});
</script>
@endsection