|
Server : Apache/2.4.41 (Ubuntu) System : Linux vmi1525618.contaboserver.net 5.4.0-105-generic #119-Ubuntu SMP Mon Mar 7 18:49:24 UTC 2022 x86_64 User : www-data ( 33) PHP Version : 8.2.12 Disable Function : NONE Directory : /var/www/leadai/leadai.co.in/storage/framework/views/ |
Upload File : |
<?php $__env->startSection('content'); ?>
<style>
.male {
background: #8c85ff;
text-transform: capitalize;
color: white;
}
.female {
background: #e16498;
text-transform: capitalize;
color: white;
}
.id-card-box{
max-width:240px;
border:1px solid #ddd;
}
.id-card p{
padding:0;
margin:0;
font-size:12px;
}
.school-title{
font-size:14px;
font-weight:bold;
}
.s-name{
font-size:16px;
font-weight:bold;
}
.school-name{
text-align:center;
background:blue;
color:white;
width:100%;
display:flex;
justify-content:center;
align-items:center;
border-radius: 0px 0px 0px 100px;
}
.id-card-box .footer{
background:blue;
text-align:center;
color:white;
}
.id-card-box .footer p{
padding:0;
margin:0;
}
/* vertical smooth card design */
.vs-idcard{
width: 220px;
border: 2px solid #ddd;
border-radius: 10px;
}
.vs-school-title{
font-size: 15px;
font-weight: bold;
}
.vs-idcard-info p{
padding: 0;
margin: 0;
padding-left: 5px;
font-size: 12px;
}
.vs-student-address, .vs-school-address{
padding: 0;
margin: 0;
font-size: 11px;
}
.vs-idcard-footer p{
padding: 0;
margin: 0;
font-size: 12px;
}
.hr{
border: 1px solid #ddd;
margin: 5px 0;
}
/* horizontal idcard */
.horizontal-idcard {
width: 360px;
border: 1px solid #ccc;
border-radius: 5px;
font-family: Arial, sans-serif;
}
.h-school-header{
padding: 5px 5px;
}
.h-school-header h5{
font-size: 22px;
font-weight: bold;
padding: 0 10px;
margin: 0;
}
.h-student-photo{
width: 80px;
}
.h-student-info p{
font-size: 13px;
padding: 0;
margin: 0;
}
.h-footer p{
font-size: 12px;
}
.h-issue-date p{
font-size: 12px;
}
</style>
<!-- begin::main content -->
<main class="main-content">
<div class="container">
<!-- begin::page header -->
<div class="page-header">
<h3>Add Id Card Template</h3>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="<?php echo e(asset('superadmin/dashboard')); ?>"><?php echo e(__('message.dashboard')); ?></a></li>
<li class="breadcrumb-item active" aria-current="page">
<a href="<?php echo e(asset('edit-student-idcard')); ?>">
All Templates
</a>
</li>
</ol>
</nav>
</div>
<!-- end::page header -->
<?php if (isset($component)) { $__componentOriginal8a5ba9c90b64d384232e9948b1023e746ba08e74 = $component; } ?>
<?php $component = $__env->getContainer()->make(App\View\Components\FlashMessage::class, []); ?>
<?php $component->withName('flashMessage'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes([]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal8a5ba9c90b64d384232e9948b1023e746ba08e74)): ?>
<?php $component = $__componentOriginal8a5ba9c90b64d384232e9948b1023e746ba08e74; ?>
<?php unset($__componentOriginal8a5ba9c90b64d384232e9948b1023e746ba08e74); ?>
<?php endif; ?>
</div>
<div class="container">
<div class="alert alert-success d-none idcard-update-message">
</div>
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-6">
<h4>Create Template</h4>
<form class="update-idcard-form" enctype="multipart/form-data">
<?php echo csrf_field(); ?>
<input type="hidden" name="design_id" value="<?php echo e($template->id); ?>">
<div class="form-group">
<label>Background Image</label>
<input type="file" accept="image/*" name="bg_image" class="form-control bg_image">
</div>
<div class="form-group">
<label>Background Color</label>
<input type="color" name="bg_color" class="form-control bg_color" value="<?php echo e($template->bg_color); ?>">
</div>
<div class="form-group">
<label>Text Color</label>
<input type="color" name="text_color" class="form-control text_color" value="<?php echo e($template->text_color); ?>">
</div>
<div class="form-group">
<label>Header & Footer Color</label>
<input type="color" name="header_color" class="form-control header_color" value="<?php echo e($template->header_color); ?>">
</div>
<div class="form-group">
<label>Header & Footer Text Color</label>
<input type="color" name="header_text_color" class="form-control header_text_color" value="<?php echo e($template->header_text_color); ?>">
</div>
<div class="form-group">
<label>Align Content</label>
<select class="form-control alignment" name="alignment">
<?php if($template->alignment == "left"): ?>
<option value="left" selected>LEFT</option>
<?php endif; ?>
<?php if($template->alignment == "right"): ?>
<option value="right" selected>RIGHT</option>
<?php endif; ?>
<?php if($template->alignment == "center"): ?>
<option value="center" selected>CENTER</option>
<?php endif; ?>
<option value="left">LEFT</option>
<option value="right">RIGHT</option>
<option value="center">CENTER</option>
</select>
</div>
<div class="form-group">
<label>Template Type</label>
<select class="form-control template_type" name="template_type">
<option value="V" <?php echo e($template->template_type=='V'?'selected':''); ?>>Vertical</option>
<option value="H" <?php echo e($template->template_type=='H'?'selected':''); ?>>Horizontal</option>
<option value="VS" <?php echo e($template->template_type=='VS'?'selected':''); ?>>Vertical Smooth</option>
</select>
</div>
<div class="form-group">
<button class="btn btn-primary" type="submit">Update</button>
</div>
</form>
</div>
<?php if($template->template_type == "V"): ?>
<div class="col-md-6 d-flex justify-content-center mb-3">
<div class="">
<div class="">
<div class="id-card-box">
<div class="d-flex" >
<div class="d-flex justify-content-start px-2">
<img src="https://png.pngtree.com/png-vector/20230415/ourmid/pngtree-school-logo-design-template-vector-png-image_6705854.png" width="50" alt="logo">
</div>
<div class="school-name d-flex justify-content-center" style="background-color:<?php echo e($template->header_color); ?>;">
<h4 class="school-title" style="color:<?php echo e($template->header_text_color); ?>">Sai Valley World School</h4>
</div>
</div>
<?php
$backgroundStyle = $template->bg_image ? 'background-image: url("' . asset('public/' . $template->bg_image) . '");' : 'background-color: ' . $template->bg_color . ';';
?>
<div class="id-card px-3 py-2" style="<?php echo e($backgroundStyle); ?>;color:<?php echo e($template->text_color); ?>;text-align:<?php echo e($template->alignment); ?>">
<div class="id-card-section">
<div class="image-box">
<img src="https://i.pinimg.com/originals/a6/82/f0/a682f04aaa23b09cf5c3ce162fd7fc79.jpg" alt="student" class="p-0 m-0" width="80" />
</div>
<div class="text-section">
<p class="s-name">Ravi kumar</p>
<p class="f-name"><strong>Father Name :</strong> Jai Singh</p>
<p><strong>Phone :</strong> 9985999999</p>
<p><strong>Class :</strong> 11th B</p>
<p><strong>Address :</strong> C-2/114 Sector 12, Noida UP 245874</p>
</div>
</div>
</div>
<div class="footer py-1" style="background-color:<?php echo e($template->header_color); ?>;color:<?php echo e($template->header_text_color); ?>">
<p>Address : Sector 12, Noida UP<p>
<p>Phone : 9855685542</p>
</div>
</div>
</div>
</div>
</div>
<?php endif; ?>
<?php if($template->template_type == "VS"): ?>
<div class="col-md-6 d-flex justify-content-center mb-3">
<div class="">
<div class="">
<div class="vs-idcard p-2">
<div class="id-header-smooth" >
<div class="d-flex justify-content-center">
<img src="https://png.pngtree.com/png-vector/20230415/ourmid/pngtree-school-logo-design-template-vector-png-image_6705854.png" alt="Logo" width="50" class="vs-school-logo">
</div>
<div class="text-center">
<h4 class="vs-school-title">Sai Velly World School</h4>
</div>
</div>
<div class="hr"></div>
<?php
$backgroundStyle = $template->bg_image ? 'background-image: url("' . asset('public/' . $template->bg_image) . '");' : 'background-color: ' . $template->bg_color . ';';
?>
<div class="vs-section-box d-flex" style="<?php echo e($backgroundStyle); ?>;color:<?php echo e($template->text_color); ?>">
<div class="vs-student-photo-box">
<img src="https://pbs.twimg.com/media/EeUI99bUcAMiRFa.jpg:large" alt="photo" width="60" class="student-photo-vs">
</div>
<div class="vs-idcard-info">
<p class="vs-s-name"><strong>Name:</strong> Amit Kumar</p>
<p class="vs-f-name"><strong>Father:</strong> Shri Virendra Singh</p>
<p class="vs-mobile"><strong>Phone:</strong> 9898989898</p>
<p class="vs-s-class"><strong>Class:</strong> ABC123</p>
</div>
</div>
<div class="pt-1">
<p class="vs-student-address"><strong>Address:</strong> C-24/117 Sector 12, Noida 245874</p>
</div>
<div class="vs-idcard-footer text-center" >
<p><strong>Issued on:</strong> 01/03/2024</p>
<p class="vs-school-phone"><strong>Phone:</strong> 989859898</p>
</div>
<div class="hr"></div>
<div class="vs-idcard-footer text-center">
<p class="vs-school-address p-0 m-0">Railway road, Glaxy plazza C-60 rohini, New Delhi 124551</p>
</div>
</div>
</div>
</div>
</div>
<?php endif; ?>
<?php if($template->template_type == "H"): ?>
<div class="col-md-6 d-flex justify-content-center mb-3">
<div class="">
<div class="">
<div class="horizontal-idcard">
<div class="d-flex h-school-header align-items-center px-2" style="background-color:<?php echo e($template->header_color); ?>;color:<?php echo e($template->header_text_color); ?>">
<img src="https://png.pngtree.com/png-vector/20230415/ourmid/pngtree-school-logo-design-template-vector-png-image_6705854.png" alt="School Logo" width="50" height="50">
<div>
<h5>Sai Vally World School</h5>
</div>
</div>
<?php
$backgroundStyle = $template->bg_image ? 'background-image: url("' . asset('public/' . $template->bg_image) . '");' : 'background-color: ' . $template->bg_color . ';';
?>
<div class="h-idcard" style="<?php echo e($backgroundStyle); ?>;color:<?php echo e($template->text_color); ?>">
<div class="card-body d-flex py-1">
<div>
<img src="https://pbs.twimg.com/media/EeUI99bUcAMiRFa.jpg:large" alt="Student Photo" class="h-student-photo border">
</div>
<div class="h-student-info pl-3">
<p class="h-s-name"><strong>Name:</strong> Amit Kumar</p>
<p class="h-f-name"><strong>Father:</strong> John Doe</p>
<p class="h-s-class"><strong>Class:</strong> 10</p>
<p class="h-mobile"><strong>Phone:</strong> 9856235415</p>
<p class="h-student-address"><strong>Address:</strong> 12345</p>
</div>
</div>
<div class="h-issue-date pb-1 d-flex justify-content-between px-2">
<p class="p-0 m-0"><strong>Issued Date:</strong> 01-03-2023</p>
<p class="p-0 m-0"><strong>Principal</strong></p>
</div>
<div class="border"></div>
</div>
<div class="h-footer p-1 text-center" style="background-color:<?php echo e($template->header_color); ?>;color:<?php echo e($template->header_text_color); ?>">
<p class="h-school-address p-0 m-0">Mill road, C-14/170 Harsh Vihar, Meerut 2458745</p>
<p class="h-school-phone p-0 m-0"><strong>Phone:</strong>9869856985</p>
</div>
</div>
</div>
</div>
</div>
<?php endif; ?>
</div>
</div>
</div>
</div>
</main>
<!-- end::main content -->
<?php $__env->stopSection(); ?>
<?php $__env->startPush('footer-script'); ?>
<script src="<?php echo e(asset('public/admin/vendors/dataTable/jquery.dataTables.min.js')); ?>"></script>
<script src="<?php echo e(asset('public/admin/vendors/dataTable/dataTables.bootstrap4.min.js')); ?>"></script>
<script src="<?php echo e(asset('public/admin/vendors/dataTable/dataTables.responsive.min.js')); ?>"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
<script>
$(".get-preview-btn").click(function(){
let code = $(".html-code").val();
$(".id-card-preview").html(code);
});
$(".bg_color").on("change",function(){
let color = $(this).val();
$(".id-card").css({'background':color});
});
$(".text_color").on("change",function(){
let color = $(this).val();
$(".id-card").css({'color':color});
});
$(".header_color").on("change",function(){
let color = $(this).val();
$(".school-name").css({'background':color});
$(".footer").css({'background':color});
});
$(".header_text_color").on("change",function(){
let color = $(this).val();
$(".school-title").css({'color':color});
$(".footer").css({'color':color});
});
//horizontal idcard code start
$(".bg_color").on("change",function(){
let color = $(this).val();
$(".h-idcard").css({'background':color});
});
$(".text_color").on("change",function(){
let color = $(this).val();
$(".h-idcard").css({'color':color});
});
$(".header_color").on("change",function(){
let color = $(this).val();
$(".h-school-header").css({'background':color});
$(".h-footer").css({'background':color});
});
$(".header_text_color").on("change",function(){
let color = $(this).val();
$(".h-school-header").css({'color':color});
$(".h-footer").css({'color':color});
});
//horizontal idcard code end
$(".alignment").on("change",function(){
let alignment = $(this).val();
if(alignment=="left")
{
$(".id-card").css({'display':'flex','justify-content':'left'});
$(".id-card p").css({'text-align':'left'});
$(".image-box").css({'display':'flex','justify-content':'left'});
}
else if(alignment=="right")
{
$(".id-card").css({'display':'flex','justify-content':'end'});
$(".id-card p").css({'text-align':'right'});
$(".image-box").css({'display':'flex','justify-content':'end'});
}
else if(alignment=="center")
{
$(".id-card").css({'display':'flex','justify-content':'center'});
$(".id-card p").css({'text-align':'center'});
$(".image-box").css({'display':'flex','justify-content':'center'});
}
else if(alignment=="column")
{
$(".id-card-section").css({'display':'flex','flex-direction':'row'});
$(".text-section").css({'width':'60%','text-align':'left'});
$(".image-box").css({'width':'40%','display':'flex','justify-content':'left'});
}
else
{
window.alert("Please select alignment");
}
});
$(".update-idcard-form").submit(function(e){
e.preventDefault();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type:"POST",
url:"<?php echo e(asset('update-idcard-design')); ?>",
data: new FormData(this),
contentType:false,
processData:false,
cache:false,
success:function(response)
{
if(response.message == "success")
{
$(".idcard-update-message").removeClass("d-none");
$(".idcard-update-message").html("Template Update Successfully !");
setTimeout(() => {
$(".idcard-update-message").addClass("d-none");
$(".idcard-update-message").html("");
}, 3000);
}
else
{
$(".idcard-update-message").removeClass("d-none");
$(".idcard-update-message").removeClass("alert-success");
$(".idcard-update-message").addClass("alert-error");
$(".idcard-update-message").html("Failed ! To Update Template");
setTimeout(() => {
$(".idcard-update-message").addClass("d-none");
$(".idcard-update-message").html("");
}, 3000);
}
}
});
});
$(".template_type").on("change",function(){
var type = $(this).val();
if(type =="H")
{
$(".horizontal-idcard").removeClass("d-none");
$(".vertical-idcard").addClass("d-none");
$(".vertical-smooth-idcard").addClass("d-none");
}
else if(type == "V")
{
$(".vertical-idcard").removeClass("d-none");
$(".horizontal-idcard").addClass("d-none");
$(".vertical-smooth-idcard").addClass("d-none");
}
else
{
$(".vertical-smooth-idcard").removeClass("d-none");
$(".horizontal-idcard").addClass("d-none");
$(".vertical-idcard").addClass("d-none");
$(".bg_color").on("change",function(){
let color = $(this).val();
$(".vs-idcard").css({'background':color});
});
$(".text_color").on("change",function(){
let color = $(this).val();
$(".vs-idcard").css({'color':color});
});
}
});
$(".bg_image").on("change",function(){
var file = this.files[0];
var url = URL.createObjectURL(file);
console.log($(".template_type").val());
if($(".template_type").val() == "VS")
{
$('.vs-idcard').css({'background-image':'url('+url+')'});
}
else if($(".template_type").val() == "V")
{
$('.id-card').css({'background-image':'url('+url+')'});
}
else
{
$('.h-idcard').css({'background-image':'url('+url+')'});
}
});
</script>
<!-- end::dataTable -->
<?php $__env->stopPush(); ?>
<?php echo $__env->make('layout', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH F:\xampp\htdocs\school_saas_erp\resources\views/template/edit-idcard.blade.php ENDPATH**/ ?>