@extends('layout.master')
@section('pageTitle')
  <title>Pawnshop Management System</title>
@endsection
@section('metaCSRF')
  <meta name="csrf-token" content="{{ csrf_token() }}">
@endsection
@section('contents')
    <style>
    label {
      font-size:0.9em !important;
    }
    .pac-container {
      z-index: 9999 !important;
    }
    .ui-front {
      z-index: 9999 !important;
    }
    .modal {
        z-index: 9999; /* Sit on top - higher than any other z-index in your site*/
    }
    .ui-datepicker-div, .ui-datepicker, .ui-widget{
        z-index: 99999 !important;
    }
  </style>
  <link rel="stylesheet" href="/css/autocomplete-jquery-ui.css">
  <link rel="stylesheet" href="/theme/plugins/datatables-bs4/css/dataTables.bootstrap4.css">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">Other Services</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">Other Services</li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->
    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <!-- Small boxes (Stat box) -->
        <div class="row">
          <div class="col-md-12">
            <form id="add-service-form">
              <div class="modal-body" style="border:1px solid rgba(0,0,0,0.1);background:rgba(0,0,0,0.1);">
                <div class="review-content-section">
                  <div id="dropzone1" class="pro-ad">
                    <div class="row">
                      <div class="col-md-9">
                        <label>SERVICE DETAILS</label>
                      </div>
                      <div class="col-md-3">
                        <div class="form-group">
                          <div class="input-group">
                            <div class="input-group-prepend">
                              <span class="input-group-text">
                                <i class="far fa-calendar-alt"></i>
                              </span>
                            </div>
                            <input type="text" class="form-control form-control-sm float-right trans-input" id="transdate" name="transdate" value="{{date('Y-m-d')}}">
                          </div>

                        </div>
                      </div>
                    </div>
                    <hr>
                    <div class="row">
                      <div class="col-md-12">
                        <div class="row">
                          <div class="col-md-3">
                            <div class="form-group">
                              <label>Service Name</label>
                              <select class="form-control form-control-sm" id="servicecode" name="servicecode">
                                <option value="">--Select Service--</option>
                                @if(isset($services))
                                                                                                      @foreach($services as $service)
                                    @if(!in_array($service['servicecode'],$excludedcodes))
                                    <option value="{{$service['servicecode']}}">{{$service['servicename']}}</option>
                                    @endif
                                  @endforeach
                                @endif
                              </select>
                            </div>
                          </div>
                          <div class="col-md-3">
                            <div class="form-group">
                              <label>No. of Transaction</label>
                              <input id="transcount" name="transcount" type="number" class="form-control form-control-sm" value="">
                            </div>
                          </div>
                          <div class="col-md-3">
                            <div class="form-group">
                              <label>Capital</label>
                              <input id="capital" name="capital" type="text" class="form-control form-control-sm" value="0.00">
                            </div>
                          </div>
                          <div class="col-md-3" style="display:none;">
                            <div class="form-group">
                              <label>Service Fee</label>
                              <input id="servicefee" name="servicefee" type="text" class="form-control form-control-sm" value="0.00">
                            </div>
                          </div>
                          <div class="col-md-3" style="display:none">
                            <div class="form-group">
                              <label>Handling Fee</label>
                              <input id="handlingfee" name="handlingfee" type="text" class="form-control form-control-sm" value="0.00">
                            </div>
                          </div>
                          <div class="col-md-3">
                            <div class="form-group">
                              <label>Total Amount</label>
                              <input id="totalamount" name="totalamount" type="text" class="form-control form-control-sm" value="0.00" readonly>
                            </div>
                          </div>
                          <div class="col-md-3">
                            <div class="form-group">
                              <label>-</label>
                              <input type="hidden" name="userlevel" value="{{$currrentuser['level']}}" />
                              <input type="hidden" name="user" value="{{$currrentuser['user']}}" id="userlogged" />
                              <input type="hidden" name="branch" value="{{$currrentuser['branch']}}" id="branchcode" />
                              <input type="hidden" name="request" value="otherservices" />
                              <input type="hidden" name="type" value="service" />
                              <button id="add-service-btn" type="button" class="btn btn-sm btn-primary form-control form-control-sm">Add</button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <br>
            </form>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">Service List</h3>
                <br>
                <div class="col-md-3">
                  <div class="form-group">
                    <label>Entry Date</label>
                    <div class="input-group">
                      <div class="input-group-prepend">
                        <span class="input-group-text">
                          <i class="far fa-calendar-alt"></i>
                        </span>
                      </div>
                      <input type="text" class="form-control form-control-sm float-right trans-input" id="entrydate" name="entrydate" value="{{date('Y-m-d')}}">
                    </div>

                  </div>
                  <button id="populate-service-btn" type="button" class="btn btn-sm btn-success form-control form-control-sm">Populate</button>
                </div>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                <table id="example2" class="table table-bordered table-hover">
                  <thead>
                    <tr>
                      <th>Id</th>
                      <th>Service Name</th>
                      <th>Count</th>
                      <th>Capital</th>
                      <th>Service Fee</th>
                      <th>Handling Fee</th>
                      <th>Total</th>
                      <th>Status</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody></tbody>

                </table>
                <div class="row">
                  <div class="col-md-2">
                    <button id="delete-service-btn" type="button" class="btn btn-sm btn-danger form-control form-control-sm">Delete</button>
                  </div>
                  <div class="col-md-2">
                    <button id="post-service-btn" type="button" class="btn btn-sm btn-info form-control form-control-sm">Post</button>
                  </div>
                </div>
                <form id="change-service-form"></form>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
        </div>
      </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->
  </div>
  <!-- Modal -->
  <div id="addInsurance" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">New Transaction</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <input id="beneficiary-count" value="0" type="hidden" />
          <form id="add-new-insurance-form">
            <input id="insurancecode" name="insurancecode" type="hidden" />
            <input id="insuranceamnt" name="insuranceamnt" type="hidden" />
            <input id="insurancebranch" name="insurancebranch" value="{{$currrentuser['branch']}}" type="hidden" />
            <input id="insuranceuser" name="insuranceuser" value="{{$currrentuser['user']}}" type="hidden" />
            <input name="request" value="insurance" type="hidden" />
            <input name="type" value="add" type="hidden" />
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label for="itemdescription">COC Code</label>
                  <input type="text" class="form-control form-control-sm ins-input" id="inscode" name="inscode">
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label for="insurancedate">Trans Date</label>
                  <div class="input-group">
                    <div class="input-group-prepend">
                      <span class="input-group-text">
                        <i class="far fa-calendar-alt"></i>
                      </span>
                    </div>
                    <input type="text" class="form-control form-control-sm float-right trans-input" id="insurancedate" name="insurancedate" value="{{date('Y-m-d')}}">
                  </div>

                </div>
              </div>
              <div class="col-md-12">
                <div class="form-group">
                  <label for="itemdescription">Insurace Type</label>
                  <input type="text" class="form-control form-control-sm" id="instype" name="instype" disabled>
                </div>
              </div>
            </div>
            <div style="padding:15px;margin-bottom:10px;background:rgba(0,0,0,0.08);">
              <label>Principal</label>
              <div class="row" style="padding:10px; border:1px solid rgba(0,0,0,0.1);">
                <div class="col-md-2">
                  <div class="form-group">
                    <label for="itemdescription">Title</label>
                    <select class="form-control form-control-sm ins-input" id="p_title" = name="p_title">
                      <option value="">--select--</option>
                      <option value="Mr">Mr.</option>
                      <option value="Mrs">Mrs.</option>
                      <option value="Ms">Ms.</option>
                    </select>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="form-group">
                    <label for="itemdescription">First Name</label>
                    <input type="text" class="form-control form-control-sm ins-input" id="p_firstname" = name="p_firstname">
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="form-group">
                    <label for="itemdescription">Middle Name</label>
                    <input type="text" class="form-control form-control-sm ins-input" id="p_middlename" = name="p_middlename">
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="form-group">
                    <label for="itemdescription">Last Name</label>
                    <input type="text" class="form-control form-control-sm ins-input" id="p_lastname" = name="p_lastname">
                  </div>
                </div>
                <div class="col-md-1">
                  <div class="form-group">
                    <label for="itemdescription">Ext</label>
                    <input type="text" class="form-control form-control-sm ins-input" id="p_ext" = name="p_ext">
                  </div>
                </div>
                <div class="col-md-5">
                  <div class="form-group">
                    <label for="itemdescription">Birth Date</label>
                    <input type="text" class="form-control form-control-sm ins-input" id="p_birthdate" = name="p_birthdate">
                  </div>
                </div>
              </div>
              <br>
              <label>Beneficiary</label>
              <button id="remove-beneficiary-btn" style="display:none;" class="btn btn-danger btn-sm float-right" type="button"><i class="fas fa-minus"></i></button>
              <button id="add-beneficiary-btn" class="btn btn-info btn-sm float-right" type="button"><i class="fas fa-plus"></i></button>
              <div id="beneficiary-div" style="padding:10px; border:1px solid rgba(0,0,0,0.1);">
                <!-- <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="itemdescription">First Name</label>
                      <input type="text" class="form-control form-control-sm" name="b_firstname[]">
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="itemdescription">Last Name</label>
                      <input type="text" class="form-control form-control-sm" name="b_lastname[]">
                    </div>
                  </div>
                </div> -->
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button id="add-insurance-btn" class="btn btn-info btn-sm">Add Insurance</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>
@endsection
@section('js')
<script src="/theme/plugins/datatables/jquery.dataTables.js"></script>
<script src="/theme/plugins/datatables-bs4/js/dataTables.bootstrap4.js"></script>

<script src="/theme/dist/js/pages/dashboard.js"></script>
<script src="/theme/dist/js/demo.js"></script>
<script src="/theme/plugins/datatables/jquery.dataTables.js"></script>
<script src="/theme/plugins/datatables-bs4/js/dataTables.bootstrap4.js"></script>

<script>
  $("#entrydate").datepicker({
    dateFormat: "yy-mm-dd",
    maxDate: new Date
  });
  $("#transdate").datepicker({
    dateFormat: "yy-mm-dd",
    maxDate: new Date
  });
  $("#insurancedate").datepicker({
    dateFormat: "yy-mm-dd",
    maxDate: new Date
  });
  $("#p_birthdate").datepicker({
    dateFormat: "yy-mm-dd",
    maxDate: new Date
  });
  var dataTable = $('#example2').DataTable({
      keys: true,
      draw: true,
      "dom": '<"top"i>rt<"bottom"flp><"clear">',
    });
  $('#add-service-btn').on('click',function(event){
    event.preventDefault();
    $.ajax({
        url: '/settings-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: $('#add-service-form').serialize(),
        success:function(e){
          if(e){
            console.log(e);
            alert(e.msg);
          }
        }
    });
  });
  function ratesList(){
    $.ajax({
        url: '/settings-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {request: 'rates', type: 'list'},
        success:function(e){
          if(e){
            console.log(e);
            dataSet = [];
						for(num in e){
							dataSet.push([
								e[num].customercode,
								e[num].customername,
								e[num].customerbranch,
                '<button type="button" id="'+e[num].customercode+'" class="btn btn-info get-customer-btn" data-toggle="modal" data-target="#editCustomer">select</button>']
							);
						}
						dataTable.destroy();
						dataTable.draw();
						$('#example2').DataTable({
							"scrollY":"360px",
							keys: true,
							data: dataSet,
							"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
							columns: [
								{ title: "Customer Code" },
								{ title: "Customer Code" },
                { title: "Branch" },
                { title: "" }
							]}),
							dataTable = $('#example2').DataTable();
          }
        }
    });
  }
  $('#capital').on('change',function(){computeTotal();});
  $('#servicefee').on('change',function(){computeTotal();});
  $('#handlingfee').on('change',function(){computeTotal();});
  function computeTotal(){
    var capital = $('#capital').val();
    var servicefee = 0;//$('#servicefee').val();
    var handlingfee = 0;//$('#handlingfee').val();
    var totalamount = parseFloat(capital) + parseFloat(servicefee) + parseFloat(handlingfee);
    $('#totalamount').val(totalamount.toFixed(2));
  }
  $('#populate-service-btn').on('click',function(event){
    event.preventDefault();
    getServiceData();
  });
  function getServiceData(){
    $.ajax({
        url: '/settings-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {request: 'otherservices', type: 'servicelist', date: $('#entrydate').val(), branch: $('#branchcode').val()},
        success:function(e){
          if(e){
            console.log(e);
            dataSet = [];
						for(num in e){
              var str = "";
              if(e[num].status == "Posted") str = '<input type="checkbox" id="service:'+e[num].id+'" disabled/>';
              else str = '<input type="checkbox" id="service:'+e[num].id+'" />';
							dataSet.push([
								e[num].id,
								e[num].servicename,
								e[num].transcount,
                parseFloat(e[num].capital).toFixed(2),
                parseFloat(e[num].servicefee).toFixed(2),
                parseFloat(e[num].handlingfee).toFixed(2),
                parseFloat(e[num].total).toFixed(2),
                e[num].status,
                str
              ]);
						}
						dataTable.destroy();
						dataTable.draw();
						$('#example2').DataTable({
							"scrollY":"360px",
							keys: true,
							data: dataSet,
							"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
							columns: [
								{ title: "Id" },
								{ title: "Service Name" },
                { title: "Count" },
                { title: "Capital" },
                { title: "Service Fee" },
                { title: "Handling Fee" },
                { title: "Total" },
                { title: "Status" },
                { title: "" },
							]}),
							dataTable = $('#example2').DataTable();
          }
        }
    });
  }
  function removeService(){
    var itemList = "";
    $(':checkbox:checked').each(function(){
      var itemListId = $(this).attr('id');
      itemListId = itemListId.split(':');
      itemList = itemList + '<input type="hidden" value="'+itemListId[1]+'" name="service[]" />'
    });
    console.log(itemList);
    itemList = itemList + '<input type="hidden" name="branchcode" value="'+$('#branchcode').val()+'"/>';
    itemList = itemList + '<input type="hidden" name="transdate" value="'+$('#entrydate').val()+'"/>';
    itemList = itemList + '<input type="hidden" name="request" value="otherservices"/>';
    itemList = itemList + '<input type="hidden" name="type" value="deleteservice"/>';
    $('#change-service-form').html(itemList);
    $.ajax({
        url: '/settings-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: $('#change-service-form').serialize(),
        success:function(e){
          if(e){
            console.log(e);
            getServiceData();
          }
        }
    });
  }
  function postService(){
    var itemList = "";
    $(':checkbox:checked').each(function(){
      var itemListId = $(this).attr('id');
      itemListId = itemListId.split(':');
      itemList = itemList + '<input type="hidden" value="'+itemListId[1]+'" name="service[]" />'
    });
    console.log(itemList);
    itemList = itemList + '<input type="hidden" name="branchcode" value="'+$('#branchcode').val()+'"/>';
    itemList = itemList + '<input type="hidden" name="transdate" value="'+$('#entrydate').val()+'"/>';
    itemList = itemList + '<input type="hidden" name="request" value="otherservices"/>';
    itemList = itemList + '<input type="hidden" name="type" value="postservice"/>';
    $('#change-service-form').html(itemList);
    $.ajax({
        url: '/settings-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: $('#change-service-form').serialize(),
        success:function(e){
          if(e){
            console.log(e);
            getServiceData();
          }
        }
    });
  }
  $('#delete-service-btn').on('click',function(event){
    event.preventDefault();
    removeService();
  });
  $('#post-service-btn').on('click',function(event){
    event.preventDefault();
    postService();
  });
</script>
<script>

  var userlogged = $('#userlogged').val();
  $('#servicecode').on('change',function(event){
    console.log($(this).val() + ' ' + userlogged);
    var inscode = $(this).val();
    var insuranceName = '';
    var amnt = 0;
    if(inscode == "INSBPI3"){
      insuranceName = "BPI PhilAm Insurance (30)";
      amnt = 30;
    }
    else if(inscode == "INSBPI6"){
      insuranceName = "BPI PhilAm Insurance (60)";
      amnt = 60;
    }
    else if(inscode == "INSBPI9"){
      insuranceName = "BPI PhilAm Insurance (90)";
      amnt = 90;
    }
    else if(inscode == "INSNLG"){
      insuranceName = "SunLife Insurance";
      amnt = 20;
    }
    else if(inscode == "SUKIC"){
      insuranceName = "Suki Card (Palawan)";
      amnt = 50;
    }
    if(insuranceName != ""){
      $('#instype').val(insuranceName);
      $('#insurancecode').val(inscode);
      $('#insuranceamnt').val(amnt);
      $('#addInsurance').modal('toggle');
      $('#add-service-btn').prop('disabled',true);
    }
    else $('#add-service-btn').prop('disabled',false);
  })
  $('#add-insurance-btn').on('click',function(){
    event.preventDefault();
    var isTrue = confirm("Confirm add insurance?");
    if(isTrue == true){
      $('#add-insurance-btn').prop('disabled',true);
      $('#add-insurance-btn').text('Please wait..');
      addInsurance();
    }
  });
  function addInsurance(){
    $('.ins-input').css('border','1px solid rgba(0,0,0,0.1)');
    $.ajax({
        url: '/settings-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: $('#add-new-insurance-form').serialize(),
        success:function(e){
          if(e){
            console.log(e);
            $('#add-insurance-btn').prop('disabled',false);
            $('#add-insurance-btn').text('Add Insurance');
            if(e.code > 0){
              var erroArr = e.msg;
              for(num in erroArr){
                $('#'+erroArr[num]).css('border','1px solid red');
              }
            }
            else {
              $('.ins-input').val('');
              alert(e.msg);
            }

          }
        }
    });
  }
  $('#add-beneficiary-btn').on('click',function(event){
    event.preventDefault();
    $('#remove-beneficiary-btn').css('display','block');
    var bencount = $('#beneficiary-count').val();
    bencount = parseInt(bencount) + 1;
    var beneficiaryStr = '<div id="beneficiary_'+bencount+'" class="row">'+
        '<div class="col-md-2">'+
          '<div class="form-group">'+
            '<label for="itembtitle">Title</label>'+
            '<select class="form-control form-control-sm ins-input" id="b_title_'+bencount+'" = name="b_title[]">'+
              '<option value="">--select--</option><option value="Mr">Mr.</option><option value="Mrs">Mrs.</option><option value="Ms">Ms.</option>'+
            '</select>'+
          '</div>'+
        '</div>'+
        '<div class="col-md-3">'+
          '<div class="form-group">'+
            '<label for="itemdescription">First Name</label>'+
            '<input id="b_firstname_'+bencount+'" type="text" class="form-control form-control-sm ins-input" name="b_firstname[]">'+
          '</div>'+
        '</div>'+
        '<div class="col-md-3">'+
          '<div class="form-group">'+
            '<label for="itemdescription">Middle Name</label>'+
            '<input id="b_middlename_'+bencount+'" type="text" class="form-control form-control-sm ins-input" name="b_middlename[]">'+
          '</div>'+
        '</div>'+
        '<div class="col-md-3">'+
          '<div class="form-group">'+
            '<label for="itemdescription">Last Name</label>'+
            '<input id="b_lastname_'+bencount+'" type="text" class="form-control form-control-sm ins-input" name="b_lastname[]">'+
          '</div>'+
        '</div>'+
        '<div class="col-md-1">'+
          '<div class="form-group">'+
            '<label for="itembtitle">Ext</label>'+
            '<input type="text" class="form-control form-control-sm ins-input" id="b_ext_'+bencount+'" = name="b_ext[]">'+
          '</div>'+
        '</div>'+
      '</div>';
    $('#beneficiary-div').append(beneficiaryStr);
    $('#beneficiary-count').val(bencount);
  });
  $('#remove-beneficiary-btn').on('click',function(event){
    event.preventDefault();
    var bencount = $('#beneficiary-count').val();
    $('#beneficiary_'+bencount).remove();
    bencount = parseInt(bencount) - 1;
    $('#beneficiary-count').val(bencount);
    if(bencount == 0) $('#remove-beneficiary-btn').css('display','none');

  });
</script>

@endsection