
<?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**/ ?>