@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 (Suki Card)</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">Suki Card</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">
            <div style="border:1px solid rgba(0,0,0,0.1);padding:20px;">
              <input type="hidden" name="user" value="{{$currrentuser['user']}}" id="userlogged" />
              <input type="hidden" name="branch" value="{{$currrentuser['branch']}}" id="branchcode" />
              <form id="add-new-suki-form">
                <input id="insurancecode" name="insurancecode" value="SUKIC" type="hidden" />
                <input id="insuranceamnt" name="insuranceamnt" value="50" 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">Suki Card Number</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">Transaction 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">Service Type</label>
                      <input type="text" class="form-control form-control-sm" id="instype" name="instype" value="SUKI Card (Palawan)" 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" placeholder="yyyy-mm-dd">
                      </div>
                    </div>
                    <div class="col-md-3">
                      <div class="form-group">
                        <label for="itemdescription">Civil Status</label>
                        <select class="form-control form-control-sm ins-input" id="p_cstatus" = name="p_cstatus">
                          <option value="">--select--</option>
                          <option value="Single">Single</option>
                          <option value="Married">Married</option>
                          <option value="Annuled">Annulled</option>
                          <option value="Divorced">Divorced</option>
                          <option value="Separated">Separated</option>
                          <option value="Widow">Widow</option>
                          <option value="Widower">Widower</option>
                        </select>
                      </div>
                    </div>
                    <div class="col-md-3">
                      <div class="form-group">
                        <label style="color:#fff;">-</label>
                        <button id="add-insurance-btn" class="btn btn-info btn-sm">Add Service</button>
                      </div>
                    </div>
                  </div>
                  <br>
                </div>
              </form>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">Suki Card Entry 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="insuranceTable" class="table table-bordered table-hover">
                  <thead>
                    <tr>
                      <th>Id</th>
                      <th>Effectivity</th>
                      <th>Policy Number</th>
                      <th>Insurance Type</th>
                      <th>Amount</th>
                      <th>Name</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 -->
@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 = $('#insuranceTable').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));
  }

  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();
          }
        }
    });
  }
</script>
<script>

  var userlogged = $('#userlogged').val();
  $('.insurance-select').on('click',function(event){
    var inscode = $(this).attr('id');
    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;
    }
    if(insuranceName != ""){
      $('#instype').val(insuranceName);
      $('#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 Suki Card?");
    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-suki-form').serialize(),
        success:function(e){
          if(e){
            console.log(e);
            $('#add-insurance-btn').prop('disabled',false);
            $('#add-insurance-btn').text('Add Service');
            if(e.code > 0){
              var erroArr = e.msg;
              for(num in erroArr){
                $('#'+erroArr[num]).css('border','1px solid red');
              }
            }
            else {
              $('.ins-input').val('');
              alert("Suki Card Added");
            }

          }
        }
    });
  }
  $('#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');

  });
  $('#populate-service-btn').on('click',function(event){
    event.preventDefault();
    getInsuranceList();
  });
  function getInsuranceList(){
    $.ajax({
        url: '/settings-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {request: 'insurance', type: 'listsk', 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].transdate,
								e[num].code,
                e[num].insurance,
                parseFloat(e[num].amount).toFixed(2),
                e[num].name,
                e[num].status,
                str
              ]);
						}
						dataTable.destroy();
						dataTable.draw();
						$('#insuranceTable').DataTable({
							"scrollY":"360px",
							keys: true,
							data: dataSet,
							"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
							columns: [
								{ title: "Id" },
								{ title: "Effectivity" },
                { title: "Policy Number" },
                { title: "Insurance Type" },
                { title: "Amount" },
                { title: "Insured Name" },
                { title: "Status" },
                { title: "" },
							]}),
							dataTable = $('#insuranceTable').DataTable();
          }
        }
    });
  }
  $('#delete-service-btn').on('click',function(event){
    event.preventDefault();
    removeInsurance();
  });
  function removeInsurance(){
    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="insurance"/>';
    itemList = itemList + '<input type="hidden" name="type" value="delete"/>';
    $('#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);
            getInsuranceList();
          }
        }
    });
  }
  $('#post-service-btn').on('click',function(event){
    event.preventDefault();
    postInsurance();
  });
  function postInsurance(){
    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="insurance"/>';
    itemList = itemList + '<input type="hidden" name="type" value="post"/>';
    $('#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);
            getInsuranceList();
          }
        }
    });
  }
</script>

@endsection