@include('includes.admin.header')
@include('includes.admin.sidebar')
<script>
    $(document).ready(function(){
        $('#transaction--menu').addClass('active');
    });
</script>
<link rel="stylesheet" href="/datepicker/dist/css/default/zebra_datepicker.min.css">
<script src="/datepicker/dist/zebra_datepicker.min.js"></script>
      <!-- Content Wrapper. Contains page content -->
      <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
          <h1>
           Transactions
            <small>From Transactions</small>
          </h1>
          <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="#">Transactions</a></li>
            <li class="active">Create Transactions</li>
          </ol>
        </section>

        <!-- Main content -->
        <section class="content">
          <div class="row">
            <div class="col-md-12">
              <div class="box">
                <div class="box-header with-border">
                  <h3 class="box-title">Add New Transaction</h3>
                </div><!-- /.box-header -->
               <form class="form-horizontal" id="transaction-form" method="POST">
                    <div class="error" style="display: none">
                            
                    </div>
                    <div class="box-body">
                      <div class="form-group">
                            <label for="inputname3" class="col-sm-2 control-label">Date</label>
                            <div class="col-sm-9">
                              <input type="text" class="form-control datepicker" name="date_date" placeholder="Date">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="inputname3" class="col-sm-2 control-label">Title</label>
                            <div class="col-sm-9">
                              <input type="text" class="form-control" name="title" placeholder="Title">
                            </div>
                        </div>
                        
                        <div class="form-group">
                          <label for="inputphone3" class="col-sm-2 control-label">Descritpion</label>
                          <div class="col-sm-9">
                            <textarea class="form-control" name="description"  placeholder="Description"></textarea>
                          </div>
                        </div>
                        <div class="form-group">
                          <label for="inputEmail3" class="col-sm-2 control-label">Type</label>
                          <div class="col-sm-9">
                            <select class="form-control" name="credit">
                              <option value="1">Credit</option>
                              <option value="0">Debit</option>
                            </select>
                          </div>
                        </div>
                        <div class="form-group">
                          <label for="password" class="col-sm-2 control-label">Amount</label>
                          <div class="col-sm-9">
                            <input type="amount" class="form-control"  name="amount" id="amount" placeholder="Amount">
                          </div>
                        </div>
                    </div><!-- /.box-body -->
                  <div class="box-footer">
                    <button type="reset" class="btn btn-default">Cancel</button>
                    <button type="submit" class="btn btn-info pull-right" id="btn-submit">Submit</button>
                  </div><!-- /.box-footer -->
                </form>
              </div><!-- /.box -->

             
            </div><!-- /.col -->
            
          </div><!-- /.row -->
          
        </section><!-- /.content -->
      </div><!-- /.content-wrapper -->

       <script>
            $(document).ready(function(){
              $('.datepicker').Zebra_DatePicker({
                    format : 'd M Y'
                });
                $('#transaction-form').submit(function(e){
                  e.preventDefault();
                    $('#btn-submit').attr('disabled', 'disabled').text('Please Wait. Saving.....');
                    var data = $("#transaction-form").serializeArray();
                    $.post('/admin/transactions/save',{data:data, "_token": "{{ csrf_token() }}"}, function(res, status){
                      
                        alert('Transaction Added Successfully');
                        window.location.href = '#body';
                        window.location.href = '/admin/transactions';
                    },'json')
                    .fail(function(xhr) {
                        var html = '';
                        var res = xhr.responseJSON;
                        $(res).each(function(i, value){
                                html+= '<p>' + value + '</p>';
                        });
                        $('.error').html(html).show();
                        $('#btn-submit').html('Submit').removeAttr('disabled');
                        window.location.href = '#body';
                    },'json');;
                });
            });
        </script>
      
     
@include('includes.admin.footer')