芝麻web文件管理V1.00

编辑当前文件:/home/rejoandoctor/www/resources/views/Prescribe/doctor/prescription_header.blade.php

@extends('layouts.app')

@section('title', 'Joruri Doctor | Pad Header')
 
@section('content')
<style>
    .color-input {
        width: 100px; /* Set width for the input */
        height: 40px; /* Set height for the input */
        border: none; /* Remove border */
        cursor: pointer; /* Change cursor to pointer */
    }
    .color-display {
        width: 100%;
        height: 100px;
        border: 1px solid #ccc;
        margin-top: 20px;
    }
    /* Wrapper for inline layout */
    .inline-color-pickers {
      display: flex;
      gap: 15px; /* Space between each input */
      flex-wrap: wrap; /* Allows wrapping if there isn't enough space */
    }
    
    .inline-color-pickers .form-group {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .inline-color-pickers label {
      margin-bottom: 5px; /* Space between label and input */
    }
    
    .inline-color-pickers input[type="color"] {
      width: 60px; /* Set width for color picker */
      height: 40px; /* Set height for color picker */
      cursor: pointer;
      border-radius: 4px;
    }

</style>

<div class="main-content">
  <div class="main-content-inner">
      <div class="breadcrumbs ace-save-state" id="breadcrumbs">
         @include('layouts.header_menu')
      </div>

<div class="page-content">
          <div class="row">
              <div class="col-xs-12">
                <p class="text-warning bigger-110 red">
                  <i class="ace-icon fa fa-exclamation-triangle"></i>
                  আপনার ছাপানো প্যাড থাকলে সেটিং এ গিয়ে সুইচ করে প্যাড পরিবর্তন করুন এবং সেই প্যাডের সাইজ ইনপুট দিন। ইনপুট অনুসারে আপনার প্যাড প্রিন্ট হবে। একটি স্কেল দিয়ে আপনার ছাপানো প্যাড মিলিমিটারে মাপুন । আপনার প্রেসক্রিপশনের মাপ মিলিয়ে অংশগুলো পূরণ করুন।
                </p>
                @error('name')
				   <span class="text-danger">{{$message}}</span>
				@enderror

@error('status')
				   <span class="text-danger">{{$message}}</span>
				@enderror 
                @if($pad[0]->status == '0')
                <div class="row">
                  <h3 class="header smaller lighter green center" style="font-weight: bold;">
                    PRESCRIPTION DEFAULT PAD
                  </h3>
                  <div class="widget-body">
                    <div class="widget-main">
                      <form action="{{route('update', $header->doctor_id)}}" method="post">
                        @csrf
                        @method('PUT')
                        <div class="col-sm-4">
                          <span class="label label-lg label-pink arrowed-right">Pad Left Area</span> 
                          <input type="text" class="form-control" value="{{ $header->name}}" name="name" placeholder="Doctor Name">
                          <input type="text" class="form-control" value="{{$header->course}}" name="course" placeholder="Especial Course">
                          <select name="specialist" class="chosen-select form-control"data-placeholder="Specialist..." autocomplete="off" required>
                            <option>{{$header->specialist}}</option>
                            @foreach($specialist as $result)
                              <option value="{{$result->specialist}}">{{$result->specialist}}</option>
                            @endforeach
                          </select>
                          <select name="additional_degree" class="chosen-select form-control"data-placeholder="Aditional Degree..." autocomplete="off">
                            <option>{{$header->additional_degree}}</option>
                            <option value="NULL">NULL</option>
                            <option value="FCPS">FCPS</option>
                            <option value="MD">MD</option>
                            <option value="FCPS,MD">FCPS,MD</option>
                          </select>
                          <input type="text" class="form-control" value="{{$header->designation}}" name="designation" placeholder="Designation">
                          <input type="text" class="form-control" value="{{$header->department}}" name="department" placeholder="Department">
                          <input type="text" class="form-control" value="{{$header->posting_place}}" name="posting_place" placeholder="Service Location">
                          <input type="text" class="form-control" value="{{$header->bmdc}}" name="bmdc" placeholder="BMDC Regi No.">
                        </div>

<div class="col-sm-4">
                          <span class="label label-lg label-pink arrowed-right">Pad Right Area</span>
                          <input type="text" class="form-control" value="{{$header->name_bn}}" name="name_bn" placeholder="নাম">
                          <input type="text" class="form-control" value="{{$header->course_bn}}" name="course_bn" placeholder="বিশেষ কোর্স">
                          
                          <select name="specialist_bn" class="chosen-select form-control"data-placeholder="Specialist Bangla..." autocomplete="off" required>
                            <option>{{$header->specialist_bn}}</option>
                            @foreach ($specialist as $result)
                              <option value="{{$result->specialist_bn}}">{{$result->specialist_bn}}</option>
                            @endforeach
                          </select>
                          <select name="additional_degree_bn" class="chosen-select form-control"data-placeholder="Aditional Degree Bangla..." autocomplete="off">
                            <option>{{$header->additional_degree_bn}}</option>
                            <option value="NULL">NULL</option>
                            <option value="এফসিপিএস">এফসিপিএস</option>
                            <option value="এমডি">এমডি</option>
                            <option value="এফসিপিএস,এমডি">এফসিপিএস,এমডি</option>
                          </select>
                          <input type="text" class="form-control" value="{{$header->designation_bn}}" name="designation_bn" placeholder="ডেজিগনেশন">

<input type="text" class="form-control" value="{{$header->department_bn}}" name="department_bn" placeholder="ডিপার্মেন্ট">

<input type="text" class="form-control" value="{{$header->posting_place_bn}}" name="posting_place_bn" placeholder="কর্মরত স্থান">

<input type="text" class="form-control" value="{{$header->bmdc_bn}}" name="bmdc_bn" placeholder="বিএমডিসি নং">
                        </div>

<div class="col-sm-4">
                          <span class="label label-lg label-pink arrowed-right">Pad Bottom Area</span>
                          <input type="text" class="form-control" value="{{$header->type}}" name="type">

<input type="text" class="form-control" value="{{$header->ch_name}}" name="ch_name" placeholder="Chamber Name">

<input type="text" class="form-control" value="{{$header->ch_address}}" name="ch_address" placeholder="Chamber Address">

<input type="text" class="form-control" value="{{$header->ch_mobile}}" name="ch_mobile" placeholder="Chamber Mobile" maxlength="11">

<input type="text" class="form-control" value="{{$header->ch_day}}" name="ch_day" placeholder="Visit Day">

<input type="text" class="form-control" value="{{$header->ch_off}}" name="ch_off" placeholder="Off Day">
                        </div>

<div class="col-sm-12">
                          <span class="label label-lg label-pink arrowed-right">Pad Footer Area</span>
                          <textarea type="text" class="form-control" value="{{$header->footer_text}}" name="footer_text">{{$header->footer_text}}</textarea>
                          <div class="space-8"></div>
                        </div>

<div class="col-sm-3">
                          <span class="label label-lg label-pink arrowed-right">Patient Name Area</span>
                          <input type="text" placeholder="Input Name Text" name="text1" value="{{$header->text1}}" class="form-control">
                          <input type="text" placeholder="Input Sex Text" name="text2" value="{{$header->text2}}" class="form-control">
                          <input type="text" placeholder="Input Age Text" name="text3" value="{{$header->text3}}" class="form-control"> 
                        </div>

<div class="col-sm-3">
                          <span class="label label-lg label-pink arrowed-right">Patient Name Area</span>
                          <input type="text" placeholder="Input Date Text" name="text4" value="{{$header->text4}}" class="form-control">
                          <input type="text" placeholder="Input Mobile Text" name="text5" value="{{$header->text5}}" class="form-control">
                          <input type="text" placeholder="Input Patient Text" name="text8" value="{{$header->text8}}" class="form-control">
                          <input type="text" placeholder="Input Address Text" name="text9" value="{{$header->text9}}" class="form-control" >
                        </div>

<div class="col-sm-3">
                          <span class="label label-lg label-pink arrowed-right">Chamber Name Area</span>
                          <input type="text" placeholder="Input Visit Text" name="text6" value="{{$header->text6}}" class="form-control">
                          <input type="text" placeholder="Input Serial Text" name="text7" value="{{$header->text7}}" class="form-control">
                          
                        </div>

<div class="col-sm-3">
                          <span class="label label-lg label-pink arrowed-right">Default Pad Color</span>
                          <br/>
                        
                          <div class="inline-color-pickers">
                            
                            <div class="form-group">
                              <label for="colorPicker1">Header</label>
                              <input 
                                type="color" 
                                id="colorPicker1" 
                                class="color-input form-control" 
                                value="{{ $customization->header_color ?? '#ebfffc' }}" 
                                name="header_color">
                            </div>
                        
                            
                            <div class="form-group">
                              <label for="colorPicker2">Left</label>
                              <input 
                                type="color" 
                                id="colorPicker2" 
                                class="color-input form-control" 
                                value="{{ $customization->left_color ?? '#ebfffc' }}" 
                                name="left_color">
                            </div>
                        
                            
                            <div class="form-group">
                              <label for="colorPicker3">Footer</label>
                              <input 
                                type="color" 
                                id="colorPicker3" 
                                class="color-input form-control" 
                                value="{{ $customization->footer_color ?? '#ebfffc' }}" 
                                name="footer_color">
                            </div>
                          </div>
                        </div>

<div class="col-sm-12">
                          <div class="clearfix form-actions">
                            <div class="center">
                              <button class="btn btn-success btn-round" type="submit">
                                <i class="ace-icon fa fa-check bigger-110"></i>
                                Update Pad Header
                              </button>
                             </div>
                          </div>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
                @else
                <div class="row">
                  <h3 class="header smaller lighter green center" style="font-weight: bold;">
                    PRESCRIPTION CUSTOM PAD
                  </h3>

<div class="col-sm-8">
                    <div class="pad_header" style="height: {{$size[0]->header_height}}mm; width: {{$size[0]->header_width}}mm">
                      
                    </div>
                    <div class="patient_area" style="height: {{$size[0]->total_patient_height}}mm; width: {{$size[0]->total_patient_width}}mm">

<name style="width: {{$size[0]->name}}mm;">
                        Patient Name:
                      </name>
                      <name_content style="width: {{$size[0]->name_content}}mm;">
                        Mohammad Redwan Ullah
                      </name_content> 
                      @if(isset($pad[1]->name) == 'address' && $pad[1]->status == '1')
                      <address style="width: {{$size[0]->address}}mm;">
                        Address
                      </address>
                      <address_content style="width: {{$size[0]->address_content}}mm;">
                        Aditmari
                      </address_content>
                      @endif
                      <age style="width: {{$size[0]->age}}mm;">
                        Age:
                      </age>
                      <age_content style="width: {{$size[0]->age_content}}mm;">
                        26 Years
                      </age_content>
                      @if(isset($pad[2]->name) == 'sex' && $pad[2]->status == '1')
                      <sex style="width: {{$size[0]->sex}}mm;">
                        Sex:
                      </sex>
                      <sex_content style="width: {{$size[0]->sex_content}}mm;">
                      Male
                      </sex_content>
                      @endif
                      <date style="width: {{$size[0]->date}}mm;">
                        Date:
                      </date>
                      <date_content style="width: {{$size[0]->date_content}}mm;">
                        23-01-2023
                      </date_content>
                      @if(isset($pad[3]->name) == 'mobile' && $pad[3]->status == '1')
                      <mobile style="width: {{$size[0]->mobile}}mm;">
                        Mobile:
                      </mobile>
                      <mobile_content style="width: {{$size[0]->mobile_content}}mm;">
                        01714966214
                      </mobile_content>
                      @endif
                    </div>
                    <div class="body_area">
                      <div class="body_left" style="height: {{$size[0]->body_left_height}}mm; width: {{$size[0]->body_left_width}}mm;">

<left_cc style="margin-top: {{$size[0]->cc_top}}mm; width: {{$size[0]->cc}}mm;">
                         C/C
                        </left_cc>

<left_cc_content style="height: {{$size[0]->cc_content}}mm;">
                         CC Content
                        </left_cc_content>

<left_oe style="width: {{$size[0]->oe}}mm;">
                          O/E
                        </left_oe>
                        <left_oe_content style="height: {{$size[0]->oe_content}}mm;">
                          OE Content
                        </left_oe_content>

<left_dh style="width: {{$size[0]->dh}}mm;">
                          D/H
                        </left_dh>
                        <left_dh_content style="height: {{$size[0]->dh_content}}mm;">
                          DH Content
                        </left_dh_content>

@if(isset($pad[4]->name) == 'dx' && $pad[4]->status == '1')
                        <left_dx style="width: {{$size[0]->dh}}mm;">
                          D/X
                        </left_dx>
                        <left_dx_content>
                          DX Content
                        </left_dx_content>
                        @endif
                        <left_advice style="width: {{$size[0]->advice}}mm;">
                          ADVICE
                        </left_advice>
                        <left_advice_content style="height: {{$size[0]->advice_content}}mm;">
                          ADVICE Content
                        </left_advice_content>

</div>

<div class="body_right" style="height: {{$size[0]->body_right_height}}mm; width: {{$size[0]->body_right_width}}mm;">
                        <right_content>
                        sdfasf
                        </right_content>
                      </div>
                      
                    </div>
                    <div class="footer_area" style="height: {{$size[0]->footer_height}}mm; width: {{$size[0]->footer_width}}mm;">
                      
                    </div>
                  </div>
                  <div class="col-sm-4">
                    <form class="form-horizontal" action="{{route('update_pad', $size[0]->doctor_id)}}" role="form" method="POST">
                      @csrf
                      @method('PUT')
                      <div class="">
                        <div class="form-group">
                          <span class="label label-lg label-pink arrowed-right">সম্পূর্ণ প্রেসক্রিপশনের সাইজ :</span>
                          <div class="space-2"></div>
                          <div class="form-inline">
                            <label class="" style="width: 50px; margin-left:5px;" for="form-field-1"> দৈর্ঘ্যঃ</label>
                            <input type="number" name="total_height" min="0" max="300" step=".1" value="{{$size[0]->total_height}}">

<label class="" style="width: 50px; margin-left:5px;" for="form-field-1"> প্রস্থঃ</label>
                            <input type="number" name="total_width" min="0" max="300" step=".1" value="{{$size[0]->total_width}}">
                            <span class="label label-lg label-pink arrowed-right">mm</span>
                          </div>
                        </div>
                        
                        <div class="form-group">
                          <span class="label label-lg label-pink arrowed-right">হেডার সাইজ :</span>
                          <div class="space-2"></div>
                          <div class="form-inline">
                            <label class="" style="width: 50px; margin-left:5px;" for="form-field-1"> দৈর্ঘ্যঃ</label>
                            <input type="number" name="header_height" min="0" max="300" step=".1" value="{{$size[0]->header_height}}">

<label class="" style="width: 50px; margin-left:5px;" for="form-field-1"> প্রস্থঃ</label>
                            <input type="number" name="header_width" min="0" max="300" step=".1" value="{{$size[0]->header_width}}">
                            <span class="label label-lg label-pink arrowed-right">mm</span>
                          </div>
                        </div>

<div class="form-group">
                          <span class="label label-lg label-pink arrowed-right">রোগীর তথ্যের সাইজ :</span>
                          <div class="space-2"></div>
                          <div class="form-inline">
                            <label class="" style="width: 50px; margin-left:5px;" for="form-field-1"> দৈর্ঘ্যঃ</label>
                            <input type="number" name="total_patient_height" min="0" max="300" step=".1" value="{{$size[0]->total_patient_height}}">

<label class="" style="width: 50px; margin-left:5px;" for="form-field-1"> প্রস্থঃ</label>
                            <input type="number" name="total_patient_width"  min="0" max="300" step=".1" value="{{$size[0]->total_patient_width}}">
                            <span class="label label-lg label-pink arrowed-right">mm</span>
                          </div>

<label class="" style="width: 50px; margin-left:5px;" for="form-field-1"> প্রস্থঃ</label>
                            <input type="number" name="name_content"  min="0" max="300" step=".1" value="{{$size[0]->name_content}}">
                            <span class="label label-lg label-pink arrowed-right">mm</span>
                          </div>
                          @if(isset($pad[1]->name) == 'address' && $pad[1]->status == '1')
                          <span class="label label-white middle">ঠিকানা :</span>
                          <div class="space-2"></div>
                          <div class="form-inline">
                            <label class="" style="width: 50px; margin-left:5px;" for="form-field-1"> প্রস্থঃ</label>
                            <input type="number" name="address" min="0" max="300" step=".1" value="{{$size[0]->address}}">

<label class="" style="width: 50px; margin-left:5px;" for="form-field-1"> প্রস্থঃ</label>
                            <input type="number" name="address_content"  min="0" max="300" step=".1" value="{{$size[0]->address_content}}">
                            <span class="label label-lg label-pink arrowed-right">mm</span>
                          </div>
                          @endif
                          <span class="label label-white middle">বয়স :</span>
                          <div class="space-2"></div>
                          <div class="form-inline">
                            <label class="" style="width: 50px; margin-left:5px;" for="form-field-1"> প্রস্থঃ</label>
                            <input type="number" name="age" min="0" max="300" step=".1" value="{{$size[0]->age}}">

<label class="" style="width: 50px; margin-left:5px;" for="form-field-1"> প্রস্থঃ</label>
                            <input type="number" name="age_content"  min="0" max="300" step=".1" value="{{$size[0]->age_content}}">
                            <span class="label label-lg label-pink arrowed-right">mm</span>
                          </div>

@if(isset($pad[2]->name) == 'sex' && $pad[2]->status == '1')
                          <span class="label label-white middle">লিঙ্গ :</span>
                          <div class="space-2"></div>
                          <div class="form-inline">
                            <label class="" style="width: 50px; margin-left:5px;" for="form-field-1"> প্রস্থঃ</label>
                            <input type="number" name="sex" min="0" max="300" step=".1" value="{{$size[0]->sex}}">

<label class="" style="width: 50px; margin-left:5px;" for="form-field-1"> প্রস্থঃ</label>
                            <input type="number" name="sex_content"  min="0" max="300" step=".1" value="{{$size[0]->sex_content}}">
                            <span class="label label-lg label-pink arrowed-right">mm</span>
                          </div>
                          @endif
                          <span class="label label-white middle">তারিখ :</span>
                          <div class="space-2"></div>
                          <div class="form-inline">
                            <label class="" style="width: 50px; margin-left:5px;" for="form-field-1"> প্রস্থঃ</label>
                            <input type="number" name="date" min="0" max="300" step=".1" value="{{$size[0]->date}}">

<label class="" style="width: 50px; margin-left:5px;" for="form-field-1"> প্রস্থঃ</label>
                            <input type="number" name="date_content"  min="0" max="300" step=".1" value="{{$size[0]->date_content}}">
                            <span class="label label-lg label-pink arrowed-right">mm</span>
                          </div>

@if(isset($pad[3]->name) == 'mobile' && $pad[3]->status == '1')
                          <span class="label label-white middle">মোবাইল :</span>
                          <div class="space-2"></div>
                          <div class="form-inline">
                            <label class="" style="width: 50px; margin-left:5px;" for="form-field-1"> প্রস্থঃ</label>
                            <input type="number" name="mobile" min="0" max="300" step=".1" value="{{$size[0]->mobile}}">

<label class="" style="width: 50px; margin-left:5px;" for="form-field-1"> প্রস্থঃ</label>
                            <input type="number" name="mobile_content"  min="0" max="300" step=".1" value="{{$size[0]->mobile_content}}">
                            <span class="label label-lg label-pink arrowed-right">mm</span>
                          </div>
                          @endif
                        </div>

<div class="form-group">
                          <span class="label label-lg label-pink arrowed-right">হিস্ট্রি অংশ :</span>
                          <div class="space-2"></div>
                          <div class="form-inline">
                            <label class="" style="width: 50px; margin-left:5px;" for="form-field-1"> দৈর্ঘ্যঃ</label>
                            <input type="number" name="body_left_height" min="0" max="300" step=".1" value="{{$size[0]->body_left_height}}">

<label class="" style="width: 50px; margin-left:5px;" for="form-field-1"> প্রস্থঃ</label>
                            <input type="number" name="body_left_width"  min="0" max="300" step=".1" value="{{$size[0]->body_left_width}}">
                            <span class="label label-lg label-pink arrowed-right">mm</span>
                          </div>

<label class="" style="width: 35px; margin-left:5px;" for="form-field-1"> দৈর্ঘ্যঃ</label>
                            <input type="number" name="cc_content" style="width: 50px;"  min="0" max="300" step=".1" value="{{$size[0]->cc_content}}">

<span class="label label-white middle">ও/ই :</span>
                          <div class="space-2"></div>
                          <div class="form-inline">
                            <label class="" style="width: 50px; margin-left:5px;" for="form-field-1"> দৈর্ঘ্যঃ</label>
                            <input type="number" name="oe_content"  min="0" max="300" step=".1" value="{{$size[0]->oe_content}}">

<label class="" style="width: 50px; margin-left:5px;" for="form-field-1"> দৈর্ঘ্যঃ</label>
                            <input type="number" name="dh_content"  min="0" max="300" step=".1" value="{{$size[0]->dh_content}}">

@if(isset($pad[4]->name) == 'dx' && $pad[4]->status == '1')
                          <span class="label label-white middle">ডি/এক্স :</span>
                          <div class="space-2"></div>
                          <div class="form-inline">
                            <label class="" style="width: 50px; margin-left:5px;" for="form-field-1"> দৈর্ঘ্যঃ</label>
                            <input type="number" name="dx"  min="0" max="300" step=".1" value="{{$size[0]->dx}}">

<label class="" style="width: 50px; margin-left:5px;" for="form-field-1"> প্রস্থঃ</label>
                            <input type="number" name="dx_content" min="0" max="300" step=".1" value="{{$size[0]->dx_content}}">
                            <span class="label label-lg label-pink arrowed-right">mm</span>
                          </div>
                          @endif
                          <span class="label label-white middle">উপদেশ :</span>
                          <div class="space-2"></div>
                          <div class="form-inline">
                            <label class="" style="width: 50px; margin-left:5px;" for="form-field-1"> দৈর্ঘ্যঃ</label>
                            <input type="number" name="advice_content"  min="0" max="300" step=".1" value="{{$size[0]->advice_content}}">

<label class="" style="width: 50px; margin-left:5px;" for="form-field-1"> প্রস্থঃ</label>
                            <input type="number" name="advice" min="0" max="300" step=".1" value="{{$size[0]->advice}}">
                            <span class="label label-lg label-pink arrowed-right">mm</span>
                          </div>
                        </div>

<div class="form-group">
                          <span class="label label-lg label-pink arrowed-right">প্রেসক্রিপশন প্যাড অংশ :</span>
                          <div class="space-2"></div>
                          <div class="form-inline">
                            <label class="" style="width: 50px; margin-left:5px;" for="form-field-1"> দৈর্ঘ্যঃ</label>
                            <input type="number" name="body_right_height" min="0" max="300" step=".1" value="{{$size[0]->body_right_height}}">

<label class="" style="width: 50px; margin-left:5px;" for="form-field-1"> প্রস্থঃ</label>
                            <input type="number" name="body_right_width" id="age" min="0" max="300" step=".1" value="{{$size[0]->body_right_width}}">
                            <span class="label label-lg label-pink arrowed-right">mm</span>
                          </div>
                        </div>
                      
                        <div class="form-group">
                          <span class="label label-lg label-pink arrowed-right">ফুটার অংশ :</span>
                          <div class="space-2"></div>
                          <div class="form-inline">
                            <label class="" style="width: 50px; margin-left:5px;" for="form-field-1"> দৈর্ঘ্যঃ</label>
                            <input type="number" name="footer_height" min="0" max="300" step=".1" value="{{$size[0]->footer_height}}">

<label class="" style="width: 50px; margin-left:5px;" for="form-field-1"> প্রস্থঃ</label>
                            <input type="number" name="footer_width" id="age" min="0" max="300" step=".1" value="{{$size[0]->footer_width}}">
                            <span class="label label-lg label-pink arrowed-right">mm</span>
                          </div>
                        </div>
                        <div class="center">
                          <button class="btn btn-success btn-round" type="submit">Update Pad Setting</button>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
                @endif
<script>
    const colorPickers = [
        { picker: document.getElementById('colorPicker1'), display: document.getElementById('colorDisplay1') },
        { picker: document.getElementById('colorPicker2'), display: document.getElementById('colorDisplay2') },
        { picker: document.getElementById('colorPicker3'), display: document.getElementById('colorDisplay3') }
    ];

// Set initial color displays
    colorPickers.forEach(item => {
        item.display.style.backgroundColor = item.picker.value;

// Change color display on color input change
        item.picker.addEventListener('input', (event) => {
            item.display.style.backgroundColor = event.target.value;
        });
    });
</script>                
@endsection