@extends('admin.layouts.index')



@section('content')
<section id="main-content">
 <section class="wrapper">
    <div class="panel-body" >

<div class="col-lg-6">
            <div class="col-lg-4" >
                <div class="form-group">
                               
                               
                                <select class="form-control ">
                                
                                <option>All Transaction</option>
                                <option>Income</option>
                                <option>Expense</option>
                                 </select>
                                </div>
</div>
<div class="col-lg-4">
<input type="text" class="form-control search" placeholder=" Search Transaction">         
                                
                        
        
            
        
             
</div>
            


                            <div class="col-lg-4">
                                
                            <input class="btn btn-info"   type="submit" value="+Add Record" data-toggle="modal" data-target="#myModaladdrecord" name="login">
                             
                           
                            </div>
                            </div>


        <div class="col-md-12 w3ls-graph  ">
            <!--agileinfo-grap-->
                <div class="agileinfo-grap">
                    <div class="agileits-box">
                        <header class="agileits-box-header clearfix">
                            <h3>Cash Flow</h3>
                                <div class="toolbar">
                                    
                                    
                                </div>
                        </header>
                        <div class="agileits-box-body clearfix ">
                            <div id="hero-area"></div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default" style="margin-top:15px;">
    <div class="panel-heading">
     Cash Details
    </div>
    <div>
      <table class="table" ui-jq="footable" ui-options='{
        "paging": {
          "enabled": true
        },
        "filtering": {
          "enabled": true
        },
        "sorting": {
          "enabled": true
        }}'>
        <thead>
          <tr>
            <th >Sl. No.</th>
            <th>Trnx Date	</th>
            <th>Description</th>
            <th >Income</th>
            <th>Expense</th>
            <th>Processed By</th>
            
           
            <th >Action</th>
          </tr>
        </thead>
        <tbody>
          <tr data-expanded="true">
          <td>1	</td>
            <td>17 Nov, 2022	</td>
            <td>Payment by Ivar Osayantin Osakpolor .	</td>
            <td>₦300.00	</td>
            <td>₦0.00	</td>
            <td>Supper Admin	</td>
            
            <td >
            <a style="padding:3px; border-style: solid;" class="agile-icon bg-danger" href="#"><i style="padding:7px;"  class="fa fa-envelope" aria-hidden="true">Delete</i> </a> 
            </td>
          </tr>
          
        </tbody>
      </table>
    </div>
    <!-- tasks -->
			<div class="agile-last-grids">
				<div class="col-md-4 agile-last-left">
					<div class="agile-last-grid">
						<div class="area-grids-heading">
							<h3>Monthly</h3>
						</div>
						<div id="graph7"></div>
						<script>
						// This crosses a DST boundary in the UK.
						Morris.Area({
						  element: 'graph7',
						  data: [
							{x: '2013-03-30 22:00:00', y: 3, z: 3},
							{x: '2013-03-31 00:00:00', y: 2, z: 0},
							{x: '2013-03-31 02:00:00', y: 0, z: 2},
							{x: '2013-03-31 04:00:00', y: 4, z: 4}
						  ],
						  xkey: 'x',
						  ykeys: ['y', 'z'],
						  labels: ['Y', 'Z']
						});
						</script>

					</div>
				</div>
				<div class="col-md-4 agile-last-left agile-last-middle">
					<div class="agile-last-grid">
						<div class="area-grids-heading">
							<h3>Daily</h3>
						</div>
						<div id="graph8"></div>
						<script>
						/* data stolen from http://howmanyleft.co.uk/vehicle/jaguar_'e'_type */
						var day_data = [
						  {"period": "2016-10-01", "licensed": 3407, "sorned": 660},
						  {"period": "2016-09-30", "licensed": 3351, "sorned": 629},
						  {"period": "2016-09-29", "licensed": 3269, "sorned": 618},
						  {"period": "2016-09-20", "licensed": 3246, "sorned": 661},
						  {"period": "2016-09-19", "licensed": 3257, "sorned": 667},
						  {"period": "2016-09-18", "licensed": 3248, "sorned": 627},
						  {"period": "2016-09-17", "licensed": 3171, "sorned": 660},
						  {"period": "2016-09-16", "licensed": 3171, "sorned": 676},
						  {"period": "2016-09-15", "licensed": 3201, "sorned": 656},
						  {"period": "2016-09-10", "licensed": 3215, "sorned": 622}
						];
						Morris.Bar({
						  element: 'graph8',
						  data: day_data,
						  xkey: 'period',
						  ykeys: ['licensed', 'sorned'],
						  labels: ['Licensed', 'SORN'],
						  xLabelAngle: 60
						});
						</script>
					</div>
				</div>
				<div class="col-md-4 agile-last-left agile-last-right">
					<div class="agile-last-grid">
						<div class="area-grids-heading">
							<h3>Yearly</h3>
						</div>
						<div id="graph9"></div>
						<script>
						var day_data = [
						  {"elapsed": "I", "value": 34},
						  {"elapsed": "II", "value": 24},
						  {"elapsed": "III", "value": 3},
						  {"elapsed": "IV", "value": 12},
						  {"elapsed": "V", "value": 13},
						  {"elapsed": "VI", "value": 22},
						  {"elapsed": "VII", "value": 5},
						  {"elapsed": "VIII", "value": 26},
						  {"elapsed": "IX", "value": 12},
						  {"elapsed": "X", "value": 19}
						];
						Morris.Line({
						  element: 'graph9',
						  data: day_data,
						  xkey: 'elapsed',
						  ykeys: ['value'],
						  labels: ['value'],
						  parseTime: false
						});
						</script>

					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		<!-- //tasks -->
    </section>
    </section> 
    <!--modal-->
<div style="z-index: 999999; margin-top: 2%;" class="modal fade" id="myModaladdrecord" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div style="width:900px;" class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
	  <h4 class="modal-title" id="myModalLabel" style="margin-right:40px;">Create New Record </h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		
        <div class="row">
                
                        <div class="panel-body">
                            <div class="form">
                                <form class="cmxform form-horizontal" id="signupForm" method="get" action="" >
                                <div class="form-group ">
                                        <label for="confirm_password" class="control-label col-lg-4 text-right">Transaction Type	
                                              :</label>
                                                <div class="col-lg-8">
                                        <select class="form-control ">
                                <option>Create New Parents</option>
                                <option>F & M</option></select>
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="lastname" class="control-label col-lg-4 pull-left">Amount:	</label>
                                        <div class="col-lg-8">
                                            <input  type="text" class="form-control " id="amount" name="amount" type="amount" value="Transaction Amount in Your Currency" >
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="username" class="control-label col-lg-4 pull-left">Description:	</label>
                                        <div class="col-lg-8">
                                            <input  type="text" class="form-control " id="Description" name="Description" type="Description">
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="password" class="control-label col-lg-4 pull-left">Date:</label>
                                        <div class="col-lg-8">
                                            <input  type="date" class="form-control " id="confirm_password" name="confirm_password" type="password">
                                        </div>
                                    </div>
                                    
                                    
                                  
                                    
                                    

                                    <div class="form-group " >
                                        <div class="col-lg-offset-3 col-lg-6" style="margin-top:15px;">
                                            <button class="btn btn-primary" type="submit">Create Assignment</button>
                                            <button class="btn btn-default" type="button">Cancel</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </section>
                </div>
            </div>




    </div>
	
      <div style="padding: 10px;" class="modal-body">
        
      </div>
     
    </div>
  </div>
</div>
<!--modal-->

@endsection