team_directory/resources/views/Admin/pbx.blade.php
2023-05-31 17:57:45 -04:00

174 lines
12 KiB
PHP
Executable file

@extends('Layouts.layout')
@section('Title', 'PBX Pins')
@section('css')
<link href="{{ asset('/css/pbx.css') }}" rel="stylesheet">
@stop
@section('Content')
<body>
<div id="loadOverlay"
style="background-color:#ffffff; position:absolute; top:0px; left:0px; width:100%; min-height:10000vh; z-index:3000;">
</div>
<div id="overlay"></div>
@include('Components.sidenav', ['state' => 'Admin'])
<div class="main">
<div class="header">
<p id="title">PBX Pins</p>
<p id="logged-user"><svg id="user"width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M12.16 10.87C12.06 10.86 11.94 10.86 11.83 10.87C9.45 10.79 7.56 8.84 7.56 6.44C7.56 3.99 9.54 2 12 2C14.45 2 16.44 3.99 16.44 6.44C16.43 8.84 14.54 10.79 12.16 10.87Z"
stroke="#808080" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M7.15997 14.56C4.73997 16.18 4.73997 18.82 7.15997 20.43C9.90997 22.27 14.42 22.27 17.17 20.43C19.59 18.81 19.59 16.17 17.17 14.56C14.43 12.73 9.91997 12.73 7.15997 14.56Z"
stroke="#808080" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
{{ $data['curr_user'] }}</p>
</div>
<div class="action-bar">
{{-- Search for PBX User --}}
<form method="POST" action={{ action('App\Http\Controllers\PBXController@pbxSearch') }}
enctype="multipart/form-data">
@csrf
@method('post')
<div class="input-group" id="search-pbx">
<input type="text" class="form-control" id="search" name="search" placeholder="Search..." />
<div class="input-group-append">
<button class="btn btn-secondary" type="submit"
style="background: #23A6F0; border-radius: 0px 5px 5px 0px;"><svg id="search-icon"
xmlns="http://www.w3.org/2000/svg" width="17.49" height="17.49"
fill="rgba(255, 255, 255)" class="bi bi-search" viewBox="0 0 16 16">
<path
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
</svg></button>
</div>
</div>
</form>
<form method="POST" action={{ action('App\Http\Controllers\PBXController@createPin') }}
enctype="multipart/form-data">
@csrf
@method('post')
<div class="input-group" id="new-pbx">
<input type="text" class="form-control" id="add-pbx" name="add-pbx" placeholder="Email..." />
<div class="input-group-append">
<button class="btn btn-secondary" type="submit"
style="background: #23A6F0; border-radius: 0px 5px 5px 0px;"><svg
xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
class="bi bi-person-fill-add" viewBox="0 0 16 16">
<path
d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm.5-5v1h1a.5.5 0 0 1 0 1h-1v1a.5.5 0 0 1-1 0v-1h-1a.5.5 0 0 1 0-1h1v-1a.5.5 0 0 1 1 0Zm-2-6a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
<path
d="M2 13c0 1 1 1 1 1h5.256A4.493 4.493 0 0 1 8 12.5a4.49 4.49 0 0 1 1.544-3.393C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4Z" />
</svg></button>
</div>
@if (!empty($data['error']))
@if ($data['error'] == '1')
<p class="warning">User already has an assigned pin</p>
@elseif ($data['error'] == '2')
<p class="warning">Please enter a valid email</p>
@endif
@endif
</div>
</form>
</div>
<div class="grid-container">
@foreach ($data['pins'] as $pin)
@if ($pin->pin !== 0)
<div class="card" id="pbx-id{{ $pin->id }}">
<div class='card' id='modal' data-id="{{ $pin->id }}">
<div class='card-details' id='modal-details'>
<svg class="confirm-icon" xmlns="http://www.w3.org/2000/svg" width="32"
height="32" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path
d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
</svg>
<h1>Disable PBX Pin</h1>
<h3>Are you sure you want to disable this PBX Pin?</h3>
</div>
<div class="options">
<button type="button" id="cancel" class="btn btn-secondary"
onclick="hideModal({{ $pin->id }})">Cancel</button>
{{-- <button type="button" id="delete" class="btn btn-danger" value={{ $pin->id }} href="{{route('pbx.disable', $pin->id)}}">Delete</button> --}}
<button class="btn btn-danger" id="delete"><a class="btn-link" href=" {{route('pbx.disable', $pin->id)}}">Disable</a></button>
</div>
</div>
<div class="card-actions">
<button class="action-icon" id="disable" type="button"
onclick="showModal({{ $pin->id }})" value={{ $pin->id }}>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-dash-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z" />
</svg>
</button>
</div>
<span class="card-header">
<svg class="card-image" viewBox="0 0 50 47" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M46.5833 45.3333C46.5833 45.3333 49.6666 45.3333 49.6666 42.2222C49.6666 39.1111 46.5832 29.7778 34.2499 29.7778C21.9166 29.7778 18.8333 39.1111 18.8333 42.2222C18.8333 45.3333 21.9166 45.3333 21.9166 45.3333H46.5833ZM21.9844 42.2222H46.5154C46.5299 42.2205 46.5442 42.2184 46.5586 42.216L46.5833 42.2098C46.5771 41.3884 46.0683 39.0053 44.2399 36.8587C42.5379 34.8458 39.5471 32.8889 34.2499 32.8889C28.9558 32.8889 25.965 34.8489 24.2599 36.8587C22.4315 39.0053 21.9197 41.3916 21.9166 42.2098C21.9392 42.2142 21.9618 42.2183 21.9844 42.2222V42.2222ZM34.2499 23.5556C35.8854 23.5556 37.4539 22.9 38.6104 21.7331C39.7669 20.5662 40.4166 18.9836 40.4166 17.3333C40.4166 15.6831 39.7669 14.1004 38.6104 12.9336C37.4539 11.7667 35.8854 11.1111 34.2499 11.1111C32.6144 11.1111 31.0459 11.7667 29.8894 12.9336C28.733 14.1004 28.0833 15.6831 28.0833 17.3333C28.0833 18.9836 28.733 20.5662 29.8894 21.7331C31.0459 22.9 32.6144 23.5556 34.2499 23.5556ZM43.4999 17.3333C43.4999 18.559 43.2607 19.7727 42.7958 20.905C42.3309 22.0374 41.6496 23.0663 40.7907 23.933C39.9317 24.7997 38.912 25.4872 37.7897 25.9562C36.6675 26.4253 35.4646 26.6667 34.2499 26.6667C33.0352 26.6667 31.8324 26.4253 30.7101 25.9562C29.5878 25.4872 28.5681 24.7997 27.7092 23.933C26.8502 23.0663 26.1689 22.0374 25.704 20.905C25.2392 19.7727 24.9999 18.559 24.9999 17.3333C24.9999 14.858 25.9745 12.484 27.7092 10.7337C29.4439 8.98333 31.7967 8 34.2499 8C36.7032 8 39.0559 8.98333 40.7907 10.7337C42.5254 12.484 43.4999 14.858 43.4999 17.3333V17.3333ZM21.7193 30.6489C20.4859 30.257 19.2145 29.9994 17.9268 29.8804C17.2032 29.811 16.4767 29.7768 15.7499 29.7778C3.41658 29.7778 0.333252 39.1111 0.333252 42.2222C0.333252 44.2973 1.36 45.3333 3.41659 45.3333H16.4159C15.9588 44.3621 15.7309 43.2972 15.7499 42.2222C15.7499 39.08 16.9123 35.8693 19.1108 33.1876C19.86 32.2729 20.7326 31.4173 21.7193 30.6489ZM15.5033 32.8889C10.3603 32.9511 7.44033 34.88 5.75992 36.8587C3.91917 39.0178 3.41659 41.4102 3.41659 42.2222H12.6666C12.6666 38.9711 13.6625 35.7324 15.5033 32.8889ZM4.95825 18.8889C4.95825 16.4135 5.9328 14.0396 7.66751 12.2892C9.40223 10.5389 11.755 9.55556 14.2083 9.55556C16.6615 9.55556 19.0143 10.5389 20.749 12.2892C22.4837 14.0396 23.4583 16.4135 23.4583 18.8889C23.4583 21.3642 22.4837 23.7382 20.749 25.4886C19.0143 27.2389 16.6615 28.2222 14.2083 28.2222C11.755 28.2222 9.40223 27.2389 7.66751 25.4886C5.9328 23.7382 4.95825 21.3642 4.95825 18.8889V18.8889ZM14.2083 12.6667C12.5728 12.6667 11.0042 13.3222 9.84776 14.4891C8.69129 15.656 8.04158 17.2387 8.04158 18.8889C8.04158 20.5391 8.69129 22.1218 9.84776 23.2887C11.0042 24.4556 12.5728 25.1111 14.2083 25.1111C15.8438 25.1111 17.4123 24.4556 18.5687 23.2887C19.7252 22.1218 20.3749 20.5391 20.3749 18.8889C20.3749 17.2387 19.7252 15.656 18.5687 14.4891C17.4123 13.3222 15.8438 12.6667 14.2083 12.6667Z"
fill="#23A6F0" />
</svg>
<p class="card-name">{{ $pin->name }}</p>
</span>
@if (is_null($pin->pin))
<p class="card-details">N/A</p>
@else
<p class="card-details">{{ $pin->pin }}</p>
@endif
</div>
@endif
@endforeach
<script>
const modals = document.querySelectorAll("[id=modal]");
console.log(modals);
function showModal(id) {
for (let i = 0; i < modals.length; i++) {
if (modals[i].getAttribute('data-id') == id){
modals[i].style.display="block";
let backdrop = document.getElementById("overlay").style.display="block";
document.body.style.overflow="hidden";
break;
}
}
}
function hideModal(id) {
for (let i = 0; i < modals.length; i++) {
if (modals[i].getAttribute('data-id') == id){
modals[i].style.display="none";
let backdrop = document.getElementById("overlay").style.display="none";
document.body.style.overflow="unset";
break;
}
}
}
</script>
</body>
@stop