@extends('adminlte::page')
@section('content_header')
    <h1>Tapal</h1>
@stop
<script src="//code.jquery.com/jquery.js"></script>
@notifyCss
@notifyJs
@section('content')
@if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
@if (session('status'))
  <div class="alert alert-success">
      {{ session('status') }}
  </div>
@endif
@include('notify::messages')
<div class="row">
  <div class="col-md-12">
    <form class="form-horizontal" action="{{ url('creation_of_tapalpost') }}" method="post" enctype="multipart/form-data" id="tapal" onsubmit="return validation();">
      <div class="panel tapalpanel">
        <div class="panel-heading">
          <div class="row">
            <div class="col col-xs-9">
              <h3 class="panel-title"><i class="fa fa-fw fa-ticket "></i>{{request()->session()->get('session_tname')}} <i class=" fa fa-fw fa-plus "></i></h3>
            </div>
            <div class="form-position">
              <div class="col col-xs-3 text-right">
                <button id="btn" type="submit" class="btn btn-sm btn-primary"><span class="glyphicon glyphicon-floppy-open"></span>  Save</button>
              </div>
            </div>
          </div>
        </div>
        <div class="panel-body">
          <!-- CSRF Token -->
          <input type="hidden" name="_token" value="{{csrf_token()}}">
          <input type="hidden" name="tapalno" value="{{$tapalprint}}">                      
          <div class="row sidewhite">    
            <div class="col-lg-9">
              <div class="form-group ">
                <div class="col-md-12 "> 
                  <div class="btn-group" data-toggle="buttons" onclick="toggleupload();">
                    <label class="btn btn-default">
                      <input type="radio"  name="type" id="type1" value="1" autocomplete="off" > Internal
                    </label>
                    <label class="btn btn-default active">
                      <input type="radio" name="type" id="type2" value="2" autocomplete="off" checked="checked" >  External
                    </label>
                  </div>
                </div>
              </div>              
              <div class="col-lg-12">    
                <div class="form-group">
                  <label class="col-md-3 control-label" for="name">{{request()->session()->get('session_tname')}} Title<span style="color: red;">*</span></label>
                  <div class="col-md-9">
                  <input id="title" name="title" type="text" class="form-control" required></div>
                </div>             
                <div class="form-group">
                  <label class="col-md-3 control-label" for="remarks">Description<span style="color: red;">*</span></label>
                  <div class="col-md-9">
                    <textarea class="form-control resize_vertical" id="description" name="description" placeholder="Please enter description here..." rows="3" required></textarea>  
                  </div>
                </div> 
              </div> 
              <div class="row">
                <div class="col-lg-12"> 
                  <!-- Custom Tabs -->
                  <br><br>
                  <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                      <li class="active"><a href="#tab_attachments" data-toggle="tab"><i class="fa fa-paperclip margin-r-5 "></i> <span class="sm-hide">Attachments</span> </a></li>
                    </ul>
                    <div class="tab-content">
                      <div class="tab-pane active" id="tab_attachments">
                        <div class="form-group">
                          <label class="col-md-3 control-label" for="name">Attachments</label>  
                          <input type="hidden" name="uploadcount" id="uploadcount" value="1">
                          <div class="col-md-7" >
                            <div id='newupload1'>
                              <input id="upload1" name="upload1" type="file" class="form-control" onchange="check_extension();" /><br>
                              <input type="text" name="filedesc1" id="filedesc1" placeholder="Enter description of file" class="form-control">
                            </div>
                            <div id="otheruploads"></div>
                          </div>
                          <div class="col-md-2">
                            <button type="button" class="btn btn-responsive btn-success btn-xs" id="uploaddivadd">Add </button></div>
                        </div>
                        <div class="box ">
                          <!-- /.box-header -->
                          <div class="box-body no-padding">
                            <div class="table-responsive mailbox-messages">
                              <table class="table table-hover table-striped">
                                <tbody id="uploaddiv">
                                </tbody>
                              </table>
                              <!-- /.table --> 
                            </div>
                          </div>
                        </div><!-- /.col -->
                      </div>
                    </div>
                    <!-- /.tab-content -->
                  </div>
                </div>
              </div>                                                            
            </div>
            <div class="col-lg-3 tapalbg">
              <div class="col-lg-12"> 
                <div id="external_content_div" style="display: block;">
                  <div class="form-group">
                    <label class="control-label" for="addr">Received From</label>
                    <input id="receivedfrom" name="receivedfrom" class="form-control" type="text">
                  </div>
                  <div class="form-group">
                    <label class="control-label" for="addr">Received Date</label>
                    <input id="receiveddate" name="receiveddate" type="date" class="date form-control" data-date-end-date="0d">
                  </div>
                </div>
                <div class="form-group">
                  <label class="control-label" for="email">Subject Group<span style="color: red;">*</span></label>
                  <select name="subject_group" id="subject_group" class="form-control" required>
                    <option value="">Select One</option>
                    @foreach ($subject_groups as $subject_group)
                        <option value="{{$subject_group->id}}">{{$subject_group->subject_group}}</option>
                    @endforeach
                  </select>
                </div>
                <div class="form-group">
                  <label class="control-label" for="email">Subject<span style="color: red;">*</span></label>
                  <select name="subject" id="subject" class="form-control" required>
                    <option value="">Select One</option> 
                  </select>
                </div>
                <div class="form-group">
                  <label class="control-label" for="email">Mode of Receipt</label>
                  <select name="mode_of_receipt" id="mode_of_receipt" class="form-control">
                    <option value="">Select One</option>
                    <option value="1">Fax</option>
                    <option value="2">Email</option>
                    <option value="3">By hand</option>
                    <option value="4">Post</option>    
                  </select>
                </div>
                <div class="form-group">
                  <label class="control-label" for="email">Priority<span style="color: red;">*</span></label>
                  <select name="priority" id="priority" class="form-control" required>
                    <option value="">Select One</option>
                    @foreach ($priority as $priorityobj)
                      <option value="{{$priorityobj->id}}">{{$priorityobj->priority}}</option>
                    @endforeach
                  </select>
                </div>
                <div class="form-group">  
                  <div class="checkbox">
                    <label> <input type="checkbox" name="confidential" id="confidential" value="1">Confidential</label> <!-- function to hide radio buttons(toggleupload) -->
                  </div>
                  <div class="checkbox">
                    <label> <input type="checkbox" name="valuables" id="valuables" value="1" onclick="check_values(this)">Has Valuables</label>
                  </div>
                </div>
                <!-- Email input-->
                <div class="form-group" id="detail_div" style="display: none;">
                  <label class="control-label" for="addr">Remarks-Valuables</label>
                  <input id="details" name="details" type="text" class="form-control">
                </div>
                <div class="form-group">
                  <label class="control-label" for="remarks">Keywords</label> 
                  <textarea class="form-control resize_vertical" id="keywords" name="keywords" placeholder="Please enter keywords here..." rows="3"></textarea>
                </div>
                <!-- /input-group -->
              </div>
            </div>  
          </div>           
        </div>                    
      </div>
    </form>
    <div class="panel panel-body">
      <table class="table table-bordered" id="tapal_table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Tapal Number</th>
                <th>Tapal Title</th>
                <th>Tapal Description</th>
                <th>Priority</th>
                <th>Subject Group</th> 
                <th>Subject</th> 
                <th>Actions</th>
            </tr>
        </thead>
      </table>
    </div>
  
  </div>
</div>
<script>
$(function() {

    $('#tapal_table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{!! url('creation_of_tapalpostdata') !!}',
        columns: [
            { data: 'id', name: 'id' },
            { data: 'tapal_no', name: 'tapal_no' },
            { data: 'title', name: 'title' },
            { data: 'tapal_description', name: 'tapal_description' },
            { data: 'priority', name: 'priority' },
            { data: 'subject_group_id', name: 'subject_group_id' },
            { data: 'subject_id', name: 'subject_id' },
            { data: 'action', name: 'action' }
        ]
    });
});

$(document).ready(function($){
   
            $('#subject_group').change(function(){

            $.get("{{ url('getsubject')}}",
            { option: $(this).val() },
            function(data) {

            $('#subject').empty();
            $('#subject').append("<option value=''>Select a subject</option>");
            $.each(data, function(key, element) {
            $('#subject').append("<option value='" + key +"'>" + element + "</option>");
            });
            });
            });

            /*$('#uploaddivadd').click(function(){

            var upcount= document.getElementById('uploadcount').value;
            upcount++;
            var file= document.getElementById('upload1').value;
            var filedesc1= document.getElementById('filedesc1').value;

            /*if(file)
            {
                $('#uploaddiv').append("<tr><td class='mailbox-star'><a href='#'><i class='fa fa-paperclip text-green'></i></a></td><td class='mailbox-name'><a href='#'>var filedesc1</a></td><td class='mailbox-subject'><b>file</b></td><td class='mailbox-attachment'><i class='fa fa-trash-o text-red'></i></td><td class='mailbox-date'></td></tr>");

                document.getElementById('uploadcount').value=upcount;
            }
            

            });*/
                $('#uploaddivadd').on('click',function(){

                    var upcount= document.getElementById('uploadcount').value;

                var name = $('#filedesc'+upcount).val();

                document.getElementById('newupload'+upcount).style.visibility='hidden';
                document.getElementById('newupload'+upcount).style.height='0px';
               

                $('#uploaddiv').append("<tr id='trash"+upcount+"'  onclick='trash(this)'><td class='mailbox-star'><i class='fa fa-paperclip text-green'></i></td><td class='mailbox-name'>"+name+"</td><td class='mailbox-subject'><b>file</b></td><td class='mailbox-attachment' ><i class='fa fa-trash-o text-red'></i></td><td class='mailbox-date'></td></tr>");
                upcount++;

                $('#otheruploads').append("<br><div id='newupload"+upcount+"'><input type='file' name='upload"+upcount+"' id='upload"+upcount+"' class='form-control'  onchange='check_extension();' ><br><input type='text' name='filedesc"+upcount+"' id='filedesc"+upcount+"' placeholder='Enter description of file"+upcount+"' class='form-control'></div>")


                document.getElementById('uploadcount').value=upcount;
              
              });
            /*$('#upload1').change(function() {
              //$('#title').val(this.value ? this.value.match(/([\w-_]+)(?=\.)/)[0] : '');
              $('#uploaddiv').val(this.files && this.files.length ? this.files[0].name.split('.')[0] : '');

            })*/
            });


function toggleupload()
{
    if(document.getElementById('type1').checked==false)
    {
     
        document.getElementById("external_content_div").style.display="none";
        document.getElementById("receivedfrom").value="";
        document.getElementById("receiveddate").value="";
    }
    else
    {
        document.getElementById("external_content_div").style.display="block";
    }
}
function check_values(x)
{
    var has_values = x.value;
    if(x.checked == true)
    {
        document.getElementById("detail_div").style.display="block";
    }
    else
    {
         document.getElementById("detail_div").style.display="none";
         document.getElementById("details").value = "";
    }
}
function trash(o)
{
    document.getElementById(o.id).style.display="none";   
}

function validation()
{
    
    if(document.getElementById('title').value=="")
    {
        alert(" Please enter the Tapal Title");
        document.getElementById('title').focus();
        return false;
    }

    if(document.getElementById('description').value=="")
    {
        alert(" Please enter the Description");
        document.getElementById('description').focus();
        return false;
    }
    var type = document.getElementsByName('type');
    if(type[1].checked==true)
    {
        if(document.getElementById('receivedfrom').value=="")
        {
            alert(" Please enter received from");
            document.getElementById('receivedfrom').focus();
            return false;
        }
        if(document.getElementById('receiveddate').value=="")
        {
            alert(" Please enter the received date");
            document.getElementById('receiveddate').focus();
            return false;
        }
    }
    if(document.getElementById('subject_group').value=="0")
    {
        alert(" Please select the Subject_Group");
        document.getElementById('subject_group').focus();
        return false;
    }

    if(document.getElementById('subject').value=="0")
    {
        alert(" Please select the Subject");
        document.getElementById('subject').focus();
        return false;
    }

    if(document.getElementById('priority').value=="0")
    {
        alert(" Please select the priority");
        document.getElementById('priority').focus();
        return false;
    }
    
    document.getElementById("btn").disabled='true';        
  
    return true;
}
//////check the extension of upload////////////////////////
function check_extension()
{
    var file= document.getElementById('upload1').value;
    var reg = /(.*?)\.(jpg|pdf|jpeg|excel|xls|xlsx|doc|docx|odt|word)$/;
    if(!file.match(reg))
    {
        alert("Invalid File format. Please upload correct format");
        document.getElementById('upload1').value='';
        document.getElementById('upload1').focus();
        return false;
    }
    }
</script>                     
@stop