{{View::make('layout.header')}}
<style>
    .required {
    background-color: #FFFFE0 !important;
}
</style>
    <!-- BEGIN: Content-->
    <div class="app-content content ">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <div class="content-header row">
                <div class="content-header-left col-md-9 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <div class="breadcrumb-wrapper">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item">E-Claim
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-body">
                <!-- Dashboard Ecommerce Starts -->
                <section id="multiple-column-form">
                    
                <div class="row">
                  <div class="col-12 col-md-8">
                    
                  </div>
                </div>
                <div class="row" style="margin:0px;">
                <div class="card col-md-12" style="">
                                <div class="card-body">
                                    <div class="row">
                                    <div class="col-md-12">
                                        <ul class="nav nav-tabs nav-justified" id="myTab2" role="tablist" style="border-bottom: 1px solid #ebe9f1; border-radius: 0px;">
                                            <li class="nav-item">
                                                <a class="nav-link active" style=" text-align:left;" id="home-tab-justified" data-toggle="tab" href="#home-just" role="tab" aria-controls="home-just" aria-selected="true">Add/Edit Claim</a>
                                            </li>
                                        </ul>
                                    </div></div>
                                    <!-- Tab panes -->
                                    <div class="tab-content pt-1">
                                        <div class="tab-pane active" id="home-just" role="tabpanel" aria-labelledby="home-tab-justified">
                                            <div class="card" style="margin-bottom:0px; border: 0px;"> 
                                                <div class="card-header" style="padding-top:0px;">
                                                    <h4 class="card-title" >Add Claim</h4>
                                                </div>
                                                <div class="col-md-12">
                                                    @if (\Session::has('statusMsg'))
                                                    
                                                    <div class="alert alert-success alert-dismissible" style="margin-top:18px;">
                                                        <a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">×</a>
                                                        <strong>Success!</strong> {{ Session::get('statusMsg') }}
                                                    </div>
                                                    
                                                    @endif
                                                </div>
                                                <div class="card-body" style="padding-top:0px;">
                                                    
                                                    <form  id="all-filter11"  enctype="multipart/form-data">
                                                        <div class="row">
                                                            <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
                                                            <div class="col-md-6 col-6">
                                                                <div class="form-group">
                                                                    <label class="form-label" for="payment-date">Approver :*</label>
                                                                    <input type="text" name="approver" id="approver" class="form-control" readonly  style="padding-left: 10px;" value="{{$approver_info->name ?? ''}}" placeholder="" required>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6 col-6">
                                                                <div class="form-group">
                                                                    <label class="form-label" for="payment-date">Type :*</label>
                                                                     <select id="eclaimtype_id" name="eclaimtype_id" class="form-control required" required onchange="claimTypeChange()">
                                                                         @foreach($eclaimtypes as $eclaimtype)
                                                                    	    <option value="{{ $eclaimtype->id }}">{{ $eclaimtype->type_name }}</option>
                                                                    	 @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            </div>
                                                            <div id="fields" class="row">
                                                            </div>
                                                            <div class="row">
                                                            <div class="col-md-6 col-6">
                                                                <div class="form-group">
                                                                    <label class="form-label" for="payment-date">Billing Date :*</label>
                                                                          <input type="text" name="billing_date" id="billing_date" class="tcal form-control flatpickr-basic required" placeholder="DD-MM-YYYY" data-dateformat="dd-mm-yy" required>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6 col-6">
                                                                <div class="form-group">
                                                                    <label class="form-label" for="payment-date">Total Amount :*</label>
                                                                    <input type="text" name="total_amount" id="total_amount" class="form-control required"  style="padding-left: 10px;" value="" placeholder="" required>
                                                                    
                                                                </div>
                                                            </div>
                                                            <div class="col-md-12 col-12">
                                                                <div class="form-group">
                                                                    <span id="filespan">
                                                                        <label>Bill Slip (if Any)</label>
                                                                          <div>
                                                                            <input type="file" name="slip_file" id="slip_file" value="" />
                                                                          </div>
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        
                                                            <div class="col-md-12 col-12">
                                                                <div class="form-group d-flex flex-wrap mb-0">
                                                                    <button type="button" onclick="saveDetails()" class="btn btn-primary mr-1" id="apply">Add</button>
                                                                    
                                                                    
                                                                </div>
                                                                <div id="msg" style="margin-top:15px;"></div>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                            <div class="card"  style="border: 0px;">
                                                <h4 class="card-title" style="">Staff Eclaim Details</h4>
                                                <div class="card-header">
                                     <div class="btn-group" >
                                                <button onclick="more_filter()" class="btn btn-primary waves-effect waves-float waves-light" style="">Filter</button>
                                    </div>
                                    
                                </div>
                                <div class="card activity filter-container" style="margin: 0px 15px; background-color:#e6e5e5; padding:10px 20px 20px 20px; display:none !important;" id="empleavetoday">
                                    <div class="row">
                                        <div class="col-md-12" style="padding:0px;">
                                            <button id="spanclose" onclick="more_filter()" style="float:right;border:0px;background-color:transparent;color:white;padding: 3px 8px 5px;"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x cursor-pointer font-large-1" data-repeater-delete=""><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
                                        </div>
                                    </div>
                                    <div class="row">
                                        
                                        <div class="col-sm-6 filter-form-group mb-1">
                                        Start Date &nbsp;:&nbsp;
                                            <input type="date" class="form-control flatpickr-basic" id="start_date" placeholder="DD-MM-YYYY">
                                        </div>
                                        
                                        <div class="col-sm-6 filter-form-group mb-1">
                                        End Date &nbsp;:&nbsp;
                                            <input type="date" class="form-control flatpickr-basic" id="end_date" placeholder="DD-MM-YYYY">
                                        </div>
                                        <div class="col-sm-6 filter-form-group mb-1">
                                        Month &nbsp;:&nbsp;
                                            <select name="modified_month" id="modified_month" class="form-control">
                                              <option value="">All</option>
                                                         <option value="1">1</option>
                                                        <option value="2">2</option>
                                                        <option value="3">3</option>
                                                        <option value="4">4</option>
                                                        <option value="5">5</option>
                                                        <option value="6">6</option>
                                                        <option value="7">7</option>
                                                        <option value="8">8</option>
                                                        <option value="9">9</option>
                                                        <option value="10">10</option>
                                                        <option value="11">11</option>
                                                        <option value="12">12</option>
                                                                        </select>
                                        </div>
                                        <div class="col-sm-6 filter-form-group mb-1">
                                        Year &nbsp;:&nbsp;
                                            <select name="modified_year" id="modified_year" class="form-control">
                                              <option value="">All</option>
                                                            <option value="2024">2024</option>
                                                                <option value="2025">2025</option>
                                                                <option value="2026">2026</option>
                                                                            </select>
                                        </div>
                                        <div class="col-sm-12 filter-form-group mb-1">
                                        Status &nbsp;:&nbsp;
                                            <select name="status_val" id="status_val" class="form-control">
                                              <option value="">All</option>
                            <option value="1">Not Approved</option>
                            <option value="2">Approved</option>
                            <option value="3">Approved Finance</option>
                            <option value="4">Paid</option>
                            <option value="5">Rejected</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-6 filter-form-group" style="margin-top:18px;">
                                            <input type="button" value="Apply" onclick="search();" class="filter-apply btn btn-info" />
                                        </div>
                                    </div>    

                                </div>
                                
                                                <div class="card-body" style="padding:0px; ">
                                                        <div class="col-md-12">
                                                            <div class="table-responsive" style="padding: 0 15px 15px 15px;">
                                                                <table class="table table-striped  my-leave-summary-entitle" id="example11" style="font-size:12px;" >
                                                                    <thead>
                                                                        <tr style="">
                                                                            <th width="10%" style="text-align:center;text-transform: capitalize;">S.No.</th>
                                                                            <th width="15%" style="text-transform: capitalize;">User Name</th>
                                                                            <th width="15%" style="text-transform: capitalize;">Claim Type</th>
                                                                            <th width="15%" style="text-transform: capitalize;">Amount</th>
                                                                             <th width="15%" style="text-transform: capitalize;">Applied Date</th>
                                                                            <th width="15%" style="text-transform: capitalize;">Billing Date</th>
                                                                             <th width="15%" style="text-transform: capitalize;">Status</th>
                                                                            <th width="15%" style="text-align:center;text-transform: capitalize;white-space: nowrap;">Action</th>
                                                                                        
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                                
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                </div>
              </section>

              <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                        <div class="modal-header">

                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                        <h5 class="modal-title" id="exampleModalLabel">Are you sure to delete this ?</h5>
                        <div id="delete-modal">
                        </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary yes-btn">Yes</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </div>
    <!-- END: Content-->
    {{View::make('layout.footer')}}
    <script>
     var base_url = $('body').attr('data-baseurl')+'/e-claim'
     $(document).ready(function() {
        geteclaimtypefield();
        claimTypeChange();
     });

     function geteclaimtypefield(){
        $('#example11').DataTable({
             "lengthMenu": [[20, 50, 100, -1], [20, 50,100, "All"]],
             "order": [],
		        "processing": true,
                "destroy": true,
		        "serverSide": true,
		        "ajax": '{{route('e-claim.getEClaim')}}',
               
                "columns": [
                    
                    { data: 'sno', name: 'sno' },
                    { data: 'name', name: 'name' },
                    { data: 'type_name', name: 'type_name',
		           "render": function (data,type,row,meta){ 
                         var ltype = '';
          
                    if(row.filename != null && row.filename != '') {
                     ltype+= '<a href="'+base_url+'/view-file/'+row.id+'" style="color:blue;">';
                     ltype+= row.type_name;
                     ltype+='</a>';
                    }
                      else{
                       ltype+=row.type_name;
                       } 
                       return ltype;                     
                   }
                   },
                    { data: 'total_amount', name: 'total_amount' },
                        { data: 'applied_date', name: 'applied_date',
                    "render": function (data,type,row,meta){ 
                        var ldate = "";
                        if(row.applied_date!=null) 
                        {
                            var ldate =  row.applied_date.split("-").reverse().join("-");
                        }
                        
                        return ldate;                     
                    } },
                    { data: 'billing_date', name: 'billing_date',
                    "render": function (data,type,row,meta){ 
                        var ldate = "";
                        if(row.billing_date!=null) 
                        {
                            var ldate =  row.billing_date.split("-").reverse().join("-");
                        }
                        
                        return ldate;                     
                    } },
                    { data: 'status_text', name: 'status_text' },
                    { data: 'id', name: 'id',
		            "render": function (data,type,row,meta){ 
		                var edit = '';
		                if(row.status==1){
                        var edit = '<a class="appDialog-model text-success" href="'+base_url+'/edit-eclaim?id='+row.id+'" ><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><circle cx="12" cy="12" r="3"></circle><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></a>&nbsp; ';
                        edit +='<a class="appDialog-model11 text-danger" data-toggle="modal" data-target="#exampleModal" data-id="'+row.id+'" ><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 font-small-4 mr-50"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></a>';
		                }
                        return edit;                     
                   } },
     
                ],
                'rowCallback': function(row, data, index){
                    $(row).find('td:eq(0)').css('text-align', 'center');
                    $(row).find('td:eq(6)').css('text-align', 'right');
                    $(row).find('td:eq(0)').css('word-break', 'all');
                    $(row).find('td:eq(1)').css('word-break', 'all');
                    
                },
             "language": {
                    "paginate": {
                    // remove previous & next text from pagination
                    "previous": '&nbsp;',
                    "next": '&nbsp;'
                    }
                },
         });
    }
    
    function search(){
    
        var start_date = $("#start_date").val();
        var end_date = $("#end_date").val();
        var modified_month = $("#modified_month").val();
        var modified_year = $("#modified_year").val();
        var status_val = $("#status_val").val();
        var string_url = "getEClaim?start_date="+ start_date +"&end_date="+ end_date +"&modified_month="+ modified_month+"&modified_year="+modified_year+'&status_val='+status_val;
     $('#example11').DataTable({
             "lengthMenu": [[20, 50, 100, -1], [20, 50,100, "All"]],
             "order": [],
		        "processing": true,
                "destroy": true,
		        "serverSide": true,
		        "ajax": string_url,
               
                "columns": [
                    
                    { data: 'sno', name: 'sno' },
                    { data: 'name', name: 'name' },
                    { data: 'type_name', name: 'type_name',
		           "render": function (data,type,row,meta){ 
                         var ltype = '';
          
                    if(row.filename != null && row.filename != '') {
                     ltype+= '<a href="'+base_url+'/view-file/'+row.id+'" style="color:blue;">';
                     ltype+= row.type_name;
                     ltype+='</a>';
                    }
                      else{
                       ltype+=row.type_name;
                       } 
                       return ltype;                     
                   }
                   },
                    { data: 'total_amount', name: 'total_amount' },
                                            { data: 'applied_date', name: 'applied_date',
                    "render": function (data,type,row,meta){ 
                        var ldate = "";
                        if(row.applied_date!=null) 
                        {
                            var ldate =  row.applied_date.split("-").reverse().join("-");
                        }
                        
                        return ldate;                     
                    } },
                    { data: 'billing_date', name: 'billing_date',
                    "render": function (data,type,row,meta){ 
                        var ldate = "";
                        if(row.billing_date!=null) 
                        {
                            var ldate =  row.billing_date.split("-").reverse().join("-");
                        }
                        
                        return ldate;                     
                    } },
                    { data: 'status_text', name: 'status_text' },
                    { data: 'id', name: 'id',
		            "render": function (data,type,row,meta){ 
		                var edit = '';
		                if(row.status==1){
                        var edit = '<a class="appDialog-model text-success" href="'+base_url+'/edit-eclaim?id='+row.id+'" ><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><circle cx="12" cy="12" r="3"></circle><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></a>&nbsp; ';
                        edit +='<a class="appDialog-model11 text-danger" data-toggle="modal" data-target="#exampleModal" data-id="'+row.id+'" ><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 font-small-4 mr-50"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></a>';
		                }
                        return edit;                     
                   } },
     
                ],
                'rowCallback': function(row, data, index){
                    $(row).find('td:eq(0)').css('text-align', 'center');
                    $(row).find('td:eq(6)').css('text-align', 'right');
                    $(row).find('td:eq(0)').css('word-break', 'all');
                    $(row).find('td:eq(1)').css('word-break', 'all');
                    
                },
             "language": {
                    "paginate": {
                    // remove previous & next text from pagination
                    "previous": '&nbsp;',
                    "next": '&nbsp;'
                    }
                },
         });
    }
    function saveDetails(){
        var _inner = $("#fields").find(":input").serializeArray();
		const _inner1 = new Array();
for (var i = 0; i < _inner.length; i++) {
    _inner1.push(_inner[i]);
}
        var billing_date = $("#billing_date").val();
        var total_amount = $("#total_amount").val();
        var eclaimtype_id = $("#eclaimtype_id").val();
        var approver_name = $("#approver").val();
        var slip_file = $("#slip_file").val();
        
        var field_0_val = $("#field_0").val();
        var field_1_val = $("#field_1").val();
        if(approver_name==""){
            $("#msg").empty();
            $("#msg").append("<p style='color:red;'>You not have any approver. So you can't apply for any claim. Please contact your HR.</p>");
            return false;
        }
		var error_arr=[];
		var i=0;
		$("#fields :text").each(function(){
			if($(this).hasClass("required")){
				var ID_ = $(this).attr('id');
				if($(this).val()==''){
					$("#error_"+ID_).empty();
                    $("#error_"+ID_).append('<p style="color:red;">Field Required </p>');
                    error_arr[i]='#error_'+ID_;
                    i=i+1;
				}else{
				    $("#error_"+ID_).empty();
				}
			}
		});
	
		if(total_amount==''){
			$("#msg").empty();
            $("#msg").append('<p style="color:red;">Total Amount Field Required</p>');
            return false;
		}
		if(eclaimtype_id==''){
		    $("#msg").empty();
            $("#msg").append('<p style="color:red;">Type Field Required</p>');
            return false;
		}
       
        if(billing_date==''){
            var today = new Date();
            var dd = today.getDate();
            var mm = today.getMonth()+1; //January is 0!

            var yyyy = today.getFullYear();
            if(dd<10){
                dd='0'+dd;
            } 
            if(mm<10){
                mm='0'+mm;
            } 
            var today = dd+'-'+mm+'-'+yyyy;
            
            $("#billing_date").val(today);
            billing_date = $("#billing_date").val();
        }
        
        if(billing_date!='' && total_amount!='' && eclaimtype_id!='' && error_arr.length==0){
         var leaveForm = document.querySelector("#all-filter11");
		 var data = new FormData(leaveForm);
         data.append('_token','<br />
<b>Fatal error</b>:  Uncaught Error: Call to undefined function csrf_token() in /home/ecoleave/public_html/backup/v6/resources/views/E-Claim/eclaim.blade.php:481
Stack trace:
#0 {main}
  thrown in <b>/home/ecoleave/public_html/backup/v6/resources/views/E-Claim/eclaim.blade.php</b> on line <b>481</b><br />