<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container" >
<div class="row" >
<div class="col-4">
<div class="card bg-light mb-3" style="">
<div class="card-header">Osnovne informacije o predmetu</div>
<div class="card-body">
<div class="form-row">
<div class="form-group col-md-6" style="margin-bottom:0.5rem!important;">
<input id="brojPredmeta" type="text" value="S1 3 K 03" class="form-control form-control-sm" placeholder="S1 3 K 03XXXX XX K">
<small class="text-muted">Broj predmeta</small>
</div>
<div class="form-group col-md-6" style="margin-bottom:0.5rem!important;">
<input id="datumpresude" type="text" class="form-control form-control-sm hasDatepicker" placeholder="Datum presude" aria-describedby="datumpresude">
<small class="text-muted">Datum presude</small>
</div>
<div class="input-group col-md-7 mb-3">
<input id="imelica" type="text" class="form-control form-control-sm" placeholder="Ime osuđenog">
<div id="imelicarod" class="input-group-append">
<button id="imelicarodbtn" class="btn btn-outline-secondary btn-sm" type="button">
<i class="fa fa-male" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="input-group col-md-3 mb-3">
<button id="pravosnaznostpresude" class="btn btn-outline-secondary btn-sm" type="button">Pravosnažnost?</button>
</div>
<!-- PODACI PRESUDI -->
<script>
$("#datumpresude, #pravosnaznostpresude").datepicker({
dateFormat: "dd.mm.yy",
onSelect: function(dateText, instance) {
var datumlisenja = $(this).datepicker('getDate'); // Učitaj vrijeme lišenja
var krajlisenja = $(this).datepicker('getDate'); // Kopiraj vrijeme lišenja
krajlisenja.setDate(krajlisenja.getDate() + 18); // Dodaj 18 dana pritvora na vrijeme lišenja
$('.datumpresude').text($.datepicker.formatDate('dd.mm.yy.', datumlisenja) + 'godine'); // Formatiraj na naš način
$('.krajlisenja').text($.datepicker.formatDate('dd.mm.yy.', krajlisenja) + 'godine'); // Formatiraj na naš način
krajlisenjaeks = $.datepicker.parseDate(instance.settings.dateFormat, dateText, instance.settings); // Učitaj vrijeme lišenja
krajlisenjaeks.setMonth(krajlisenjaeks.getMonth() + 6); // Dodaj 6 mjeseci pritvora na vrijeme lišenja
$('.krajlisenjaeks').text($.datepicker.formatDate('dd.mm.yy.', krajlisenjaeks) + 'godine'); // Formatiraj na naš način
}
});
</script>
</div>
</div>
</div>
<div id="izaberizadatke" class="card">
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div style="width: 69%;display: inline-flex;">
<span class="nazivzadatka">Pravosnažnost presude</span>
</div>
<button type="button" class="btn btn-light btn-sm" style="display: none;">Opcije</button>
<label class="checkbox">
<input type="checkbox" id="fin-pravosnaznost" name="zadaci">
<span class="default"></span>
</label>
<div class="card card-body" style="border:0;display:none;">
Anim pariatur cliche repre henderit....
</div>
</li>
<li class="list-group-item">
<div style="width: 69%;display: inline-flex;">
<span class="nazivzadatka">Izvršenje kazne zatvora</span>
</div>
<button type="button" class="btn btn-light btn-sm" style="display: none;">Opcije</button>
<label class="checkbox">
<input type="checkbox" id="fin-izvrsenjekazne" name="zadaci">
<span class="default"></span>
</label>
<div class="card card-body" style="border:0;display:none;">
Anim pariatur cliche repre henderit....
</div>
</li>
<li class="list-group-item">
<div style="width: 69%;display: inline-flex;">
<span class="nazivzadatka">Obavijesti oštećene o pravosnažnosti presude</span>
</div>
<button type="button" class="btn btn-light btn-sm" style="display: none;">Opcije</button>
<label class="checkbox">
<input type="checkbox" id="fin-obavijestiostecene" name="zadaci">
<span class="default"></span>
</label>
<div class="card card-body" style="border:0;display:none;">
Anim pariatur cliche repre henderit....
</div>
</li>
<li class="list-group-item">
<div style="width: 69%;display: inline-flex;">
<span class="nazivzadatka">Naredba za uništenje</span>
</div>
<button type="button" class="btn btn-light btn-sm" style="display: none;">Opcije</button>
<label class="checkbox">
<input type="checkbox" id="fin-naredbaunistenje" name="zadaci">
<span class="default"></span>
</label>
<div class="card card-body" style="border:0;display:none;">
Anim pariatur cliche repre henderit....
</div>
</li>
<li class="list-group-item">
<div style="width: 69%;display: inline-flex;">
<span class="nazivzadatka">Dostavi presudu MP BiH (407. ZKP BiH)</span>
</div>
<button type="button" class="btn btn-light btn-sm" style="display: none;">Opcije</button>
<label class="checkbox">
<input type="checkbox" id="fin-dostaviMPBiH" name="zadaci">
<span class="default"></span>
</label>
<div class="card card-body" style="border:0;display:none;">
Anim pariatur cliche repre henderit....
</div>
</li>
<li class="list-group-item">
<div style="width: 69%;display: inline-flex;">
<span class="nazivzadatka">Dostavi presudu Ministarstvu sigurnosti BiH (za strane državljane)</span>
</div>
<button type="button" class="btn btn-light btn-sm" style="display: none;">Opcije</button>
<label class="checkbox">
<input type="checkbox" id="fin-dostaviMSBiH" name="zadaci">
<span class="default"></span>
</label>
<div class="card card-body" style="border:0;display:none;">
Anim pariatur cliche repre henderit....
</div>
</li>
<li class="list-group-item">
<div style="width: 69%;display: inline-flex;">
<span class="nazivzadatka">Evidentiraj sva potraživanja u aplikaciju</span>
</div>
<button type="button" class="btn btn-light btn-sm" style="display: none;">Opcije</button>
<label class="checkbox">
<input type="checkbox" id="fin-evidentirajpotrazivanja" name="zadaci">
<span class="default"></span>
</label>
<div class="card card-body" style="border:0;display:none;">
Anim pariatur cliche repre henderit....
</div>
</li>
<li class="list-group-item">
<div style="width: 69%;display: inline-flex;">
<span class="nazivzadatka">Osuđenom dostavi platne naloge</span>
</div>
<button type="button" class="btn btn-light btn-sm" style="display: none;">Opcije</button>
<label class="checkbox">
<input type="checkbox" id="fin-dostavinaloge" name="zadaci">
<span class="default"></span>
</label>
<div class="card card-body" style="border:0;display:none;">
Anim pariatur cliche repre henderit....
</div>
</li>
<li class="list-group-item">
<div style="width: 69%;display: inline-flex;">
<span class="nazivzadatka">Dostavi presudu IKS referentu (radi evidentiranja troškova)</span>
</div>
<button type="button" class="btn btn-light btn-sm" style="display: none;">Opcije</button>
<label class="checkbox">
<input type="checkbox" id="fin-dostaviIKS-troskovi" name="zadaci">
<span class="default"></span>
</label>
<div class="card card-body" style="border:0;display:none;">
Anim pariatur cliche repre henderit....
</div>
</li>
<li class="list-group-item">
<div style="width: 69%;display: inline-flex;">
<span class="nazivzadatka">Dostavi kaznene podatke za osuđenog (nadležnoj PU)</span>
</div>
<button type="button" class="btn btn-light btn-sm" style="display: none;">Opcije</button>
<label class="checkbox">
<input type="checkbox" id="fin-dostavikaznenepodatke" name="zadaci">
<span class="default"></span>
</label>
<div class="card card-body" style="border:0;display:none;">
Anim pariatur cliche repre henderit....
</div>
</li>
<li class="list-group-item">
<div style="width: 69%;display: inline-flex;">
<span class="nazivzadatka">Izdvoji i dostavi statistički upitnik</span>
</div>
<button type="button" class="btn btn-light btn-sm" style="display: none;">Opcije</button>
<label class="checkbox">
<input type="checkbox" id="fin-izdvojiupitnik" name="zadaci">
<span class="default"></span>
</label>
<div class="card card-body" style="border:0;display:none;">
Anim pariatur cliche repre henderit....
</div>
</li>
<li class="list-group-item">
<div style="width: 69%;display: inline-flex;">
<span class="nazivzadatka">U «Kuo» upiši uvjetnu osudu</span>
</div>
<button type="button" class="btn btn-light btn-sm" style="display: none;">Opcije</button>
<label class="checkbox">
<input type="checkbox" id="fin-upisiuvjednu" name="zadaci">
<span class="default"></span>
</label>
<div class="card card-body" style="border:0;display:none;">
Anim pariatur cliche repre henderit....
</div>
</li>
</ul>
</div> <!-- izaberi zadatke -->
</div> <!-- COL 4 -->
<div class="col-8">
<div id="odluka" class="panel panel-default" style="font-family:Arial;text-align: justify;">
<div id="rezultat" style="text-align: justify;">
<div class="alert alert-secondary" role="alert">
Izaberite desno vrstu odluke koju želite kreirati:
<svg class="bi bi-chevron-double-right" width="25px" height="20px" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L9.293 8 3.646 2.354a.5.5 0 010-.708z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L13.293 8 7.646 2.354a.5.5 0 010-.708z" clip-rule="evenodd"></path>
</svg>
</div>
</div>
<div id="fin-pregledzadataka">
<div style="text-align: center;">
<strong> FINALIZACIJA SPISA PO PRAVOSNAŽNOSTI PRESUDE </strong>
</div>
<ol>
<li id="fin-pravosnaznost-pregled"> Presuda Suda BiH broj: <text class="brojPredmeta">_______</text> od <text class="datumpresude">_______</text> godine je pravosnažna sa danom ________- godine. Na presudu staviti klauzulu pravosnažnosti.</li>
<li id="fin-izvrsenjekazne-pregled"> Nalog za izvršenje kazne zatvora za osuđenog _______ dostaviti IKS referentu ovog suda: - /kazna zatvora u trajanju od _ (______) godine (uz primjerak pravosnažne presude)</li>
<li id="fin-obavijestiostecene-pregled"> Obavijest o pravosnažnosti presude dostaviti oštećenim u smislu čl. 289. stav 5. ZKP BiH</li>
<li id="fin-naredbaunistenje-pregled"> Naredbu za izvršenje odluke (mjere sigurnosti) oduzimanja predmeta dostaviti stručnom saradniku za izvršenje krivčnih na način da se:
- izvrši izuzimanje _____________ iz spisa i njegovo uništenje-
- izvrši prodaju _____________</li>
<li id="fin-dostaviMPBiH-pregled"> Pravosnažnu presudu dostaviti Ministarstvu pravde BiH u smislu člana 407. ZKP BiH (član 186, 187, 195, 205. i 209. KZ BiH).</li>
<li id="fin-dostaviMSBiH-pregled"> Kaznene podatke za osuđeno strano lice dostaviti:
- putem Ministarstva pravde BiH, nadležnim organima ________
- MUP ______, PU _______, Policijska stanica _______ (u smislu člana 3. stav 1. tačka c) Pravilnika o kaznenoj evidenciji)</li>
<li id="fin-dostaviMSBiH-pregled"> Pravosnažnu presudu protiv stranih državljana dostaviti Ministarstvu sigurnosti BiH.</li>
<li id="fin-evidentirajpotrazivanja-pregled"> U aplikaciju novčanih potraživanja evidentirati novčana potraživanja prema pravosnažnoj presudi</li>
<li id="fin-dostavinaloge-pregled"> Osuđenom dostaviti platni nalog/e da za plaćanje troškova/imovinske koristi</li>
<li id="fin-dostaviIKS-troskovi-pregled"> Primjerak pravosnažne presude dostaviti IKS referentu Suda BiH, radi evidentiranja troškova krivičnog postupka. </li>
<li id="fin-izdvojiupitnik-pregled"> Izdvojiti popunjeni Statistički upitnik za osuđenog i dostaviti Agenciji za statistiku BiH, Sarajevo</li>
<li id="fin-upisiuvjednu-pregled"> U «Kuo» upiši UVJETNU OSUDU osuđenom _________, (kazna zatvora u trajanju od _ (________) godine, sa rokom provjere od _ (___) godine. PROVJERAVANJE do ___________ .godine. </li>
</ol>
</div>
<div id="fin-pravosnaznost" style="display:none;">fin-pravosnaznost </div>
<div id="fin-izvrsenjekazne" style="display:none;">fin-izvrsenjekazne </div>
<div id="fin-obavijestiostecene" style="display:none;">fin-obavijestiostecene </div>
<div id="fin-naredbaunistenje" style="display:none;">fin-naredbaunistenje </div>
<div id="fin-dostaviMPBiH" style="display:none;">fin-dostaviMPBiH </div>
<div id="fin-dostaviMSBiH" style="display:none;">fin-dostaviMSBiH </div>
<div id="fin-dostavinaloge" style="display:none;">fin-dostavinaloge </div>
<div id="fin-dostaviIKS-troskovi" style="display:none;">fin-dostaviIKS-troskovi </div>
<div id="fin-dostavikaznenepodatke" style="display:none;">fin-dostavikaznenepodatke </div>
</div>
</div><!-- COL 8 -->
</div><!-- ROW -->
</div><!-- container -->
@keyframes check {0% {height: 0;width: 0;}
25% {height: 0;width: 10px;}
50% {height: 20px;width: 10px;}
}
.checkbox{background-color:#fff;display:inline-block;height:28px;margin:0 .25em;width:28px;border-radius:4px;border:1px solid #ccc;float:right}
.checkbox span{display:block;height:28px;position:relative;width:28px;padding:0}
.checkbox span:after{-moz-transform:scaleX(-1) rotate(135deg);-ms-transform:scaleX(-1) rotate(135deg);-webkit-transform:scaleX(-1) rotate(135deg);transform:scaleX(-1) rotate(135deg);-moz-transform-origin:left top;-ms-transform-origin:left top;-webkit-transform-origin:left top;transform-origin:left top;border-right:4px solid #fff;border-top:4px solid #fff;content:'';display:block;height:20px;left:3px;position:absolute;top:15px;width:10px}
.checkbox span:hover:after{border-color:#999}
.checkbox input{display:none}
.checkbox input:checked + span:after{-webkit-animation:check .6s;-moz-animation:check .6s;-o-animation:check .6s;animation:check .6s;border-color:#555}
.checkbox input:checked + .default:after{border-color:#444}
.checkbox input:checked + .primary:after{border-color:#2196F3}
.checkbox input:checked + .success:after{border-color:#8bc34a}
.checkbox input:checked + .info:after{border-color:#3de0f5}
.checkbox input:checked + .warning:after{border-color:#FFC107}
.checkbox input:checked + .danger:after{border-color:#f44336}
.list-group-item {padding: 0.45rem 1.0rem;}
#izaberizadatke .list-group-item:hover {background-color: rgb(233, 236, 239);cursor:pointer;}
.list-group-item .card-body {margin: 5px -15px -6px -15px;}
$(document).ready(function(){
//Omogući klik na span element i označavanje čekboxa i opcija
$(document).on('click', '#izaberizadatke span.nazivzadatka', function (e) {
var $this = $(this);
if ($this.parents('.list-group-item').find(':checkbox').is(':checked') === false) {
$this.parents('.list-group-item').find(':checkbox').prop("checked", true).change();
$this.parents('.list-group-item').css("background-color","#e9ecef");
$this.parents('.list-group-item').find(':button').slideDown();
}
else if ($this.parents('.list-group-item').find(':checkbox').is(':checked') == true) {
$this.parents('.list-group-item').find(':checkbox').prop("checked", false).change();
$this.parents('.list-group-item').css("background-color","");
$this.parents('.list-group-item').find(':button').slideUp();
$this.parents('.list-group-item').find('.card-body').slideUp();
}
});
//Omogući klik na sam čekbox i istovremeno prikaži dugme "Opcije"
$(document).on('click', '#izaberizadatke .checkbox', function (e) {
var $this = $(this);
if ($this.parents('.list-group-item').find(':checkbox').is(':checked') === true) {
$this.parents('.list-group-item').find(':button').slideDown();
$this.parents('.list-group-item').css("background-color","#e9ecef");
}
else if ($this.parents('.list-group-item').find(':checkbox').is(':checked') === false) {
$this.parents('.list-group-item').css("background-color","");
$this.parents('.list-group-item').find(':button').slideUp();
$this.parents('.list-group-item').find('.card-body').slideUp();
}
});
//Omogući collapse klikom na dugme "Opcije"
$(document).on('click', '#izaberizadatke :button', function (e) {
var $this = $(this);
if ($this.parents('.list-group-item').find('.card-body').is(':hidden')) {
$this.parents('.list-group-item').find('.card-body').slideDown();
}
else if ($this.parents('.list-group-item').find('.card-body').is(':visible')) {
$this.parents('.list-group-item').find('.card-body').slideUp();
}
});
$("input[name='zadaci']").on('change', function() {
if ($(this).prop("checked")) {
var id = $(this).attr("id");
$('div#'+id).show();
$('li#' +id+ '-pregled').css("font-weight","bold");
} else {
var id = $(this).attr("id");
$('li#' +id+ '-pregled').css("font-weight","");
$('div#'+id).hide();
}
});
$("#imelicarod .btn").click(function(){
if ($("#imelicarodbtn").hasClass("active")) {
$("#imelicarodbtn").html("<i class='fa fa-female' aria-hidden='true'></i>");
}
else {
$("#imelicarodbtn").html("<i class='fa fa-male' aria-hidden='true'></i>");
}
});
});
