@extends('layouts/microfin_layout')
@section('title', '| Opening Savings Adjustment List')
@section('content')

{{-- @php  
    $branchSelected = isset($_GET['filBranch']) ? $_GET['filBranch'] : $userBranchId;
@endphp --}}
<style>
    #configTable{
        color: black;
    }
</style>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
	<div class="panel panel-default" style="background-color:#708090;">
		<div class="panel-heading" style="padding-bottom:0px">
			<div class="panel-options">
              <a href="#" class="btn btn-info pull-right addViewBtn" autofocus><i class="glyphicon glyphicon-plus-sign addIcon" aria-hidden="true"></i> Add New</a>
              
            </div>
			<h1 align="center" style="font-family: Antiqua;letter-spacing: 2px"><font color="white">POMIS-3 V2 CLASSIFICATION CONFIGURATIONS</font></h1>
		</div>
		<div class="panel-body panelBodyView">
      <table class="table table-striped table-bordered" id="configTable">
          <thead>
              <tr>
                  <th width="80">SL#</th>
                  <th>Date</th>
                  <th>Name</th>
                  <th>Min Days</th>
                  <th>Max Days</th>
                  <th width="150">Action</th>
              </tr>
          </thead>
          <tbody>
              @foreach ($pomis3v2Configs as $key => $pomis3v2Config)
                  @php $rowspan = $pomis3v2Config->count(); @endphp
                  <tr>
                      <td rowspan="{{$rowspan+1}}">{{ $loop->iteration }}</td>
                      <td rowspan="{{$rowspan+1}}">{{ $key }}</td>
                  </tr>
                    @foreach ($pomis3v2Config as $data)
                        <tr>
                          <td class="name">{{ $data->name }}</td>
                          <td class="min_days">{{ $data->min_days }}</td>
                          <td class="max_days">{{ $data->max_days }}</td>
                          <td>
                              {{-- <a href="#" data-id="{{ $data->id }}" class="ViewBtn">
                                  <i class="fa fa-eye" aria-hidden="true"></i>
                              </a> &nbsp --}}
                              <a href="#" data-id="{{ $data->id }}" class="editBtn">
                                  <i class="fa fa-pencil-square-o fa-lg" aria-hidden="true"></i>
                              </a>
                          </td>
                      </tr>
                    @endforeach
              @endforeach  
          </tbody>
      </table>
  </div>
  
	</div>
</div>
<div class="col-md-1"></div>
</div>



{{-- Add New Modal Start Here --}}
<div class="modal fade" id="add-new-config" style="padding-top: 10%;">
  <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
              <h4 class="modal-title text-primary">Add New Pomis-3 V2 Configuration</h4>
              <a class="close" href="#" data-dismiss="modal">X</a>
          </div>
          <div class="modal-body">
            {!! Form::open(['url' => '', 'role' => 'form', 'id' => 'pomis3v2Config', 'class' => 'form-horizontal form-groups']) !!}
            <div class="row">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <div class="col-md-12">
                                <label for="date_pomis3">Date</label>
                                <input type="date" id="date_pomis3" name="date_pomis3" class="form-control">
                            </div>
                        </div>
                    </div> 
                </div>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Min Days</th>
                            <th>Max Days</th>
                        </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td id="name_watchful">WatchfulV2</td>
                        <td><input type="text" id="min_days_watchful" name="min_days_watchful" class="form-control"></td>
                        <td><input type="text" id="max_days_watchful" name="max_days_watchful" class="form-control"></td>
                      </tr>
                      <tr>
                          <td id="name_substandard">SubstandardV2</td>
                          <td><input type="text" id="min_days_substandard" name="min_days_substandard" class="form-control"></td>
                          <td><input type="text" id="max_days_substandard" name="max_days_substandard" class="form-control"></td>
                      </tr>
                      <tr>
                          <td id="name_doubtful">DoubtfulV2</td>
                          <td><input type="text" id="min_days_doubtful" name="min_days_doubtful" class="form-control"></td>
                          <td><input type="text" id="max_days_doubtful" name="max_days_doubtful" class="form-control"></td>
                      </tr>
                      <tr>
                          <td id="name_badLoan">BadLoanV2</td>
                          <td><input type="text" id="min_days_badLoan" name="min_days_badLoan" class="form-control"></td>
                          <td><input type="text" id="max_days_badLoan" name="max_days_badLoan" class="form-control"></td>
                      </tr>
                    
                    </tbody>
                </table>
            </div>
            {!! Form::close() !!}
        </div>
        
        
          <div class="modal-footer">
              <button id="submitBtn" type="button" class="btn btn-success animated slideInRight" style="margin-bottom:0!important;" autofocus>Submit</button>
              <button id="closeBtn" type="button" class="btn btn-danger animated slideInRight" data-dismiss="modal" style="margin-bottom:0!important;">Close</button>
          </div>
      </div>
  </div>
</div>
{{-- Add New Modal End Here --}}

{{-- Edit Modal --}}
<div class="modal fade" id="editModal"  aria-labelledby="editModalLabel" style="padding-top: 10%;">
  <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
              <h4 class="modal-title" id="editModalLabel">Edit Pomis-3 V2 Configuration</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
              </button>
          </div>
          <div class="modal-body">
              <form id="editConfigForm">
                  <input type="hidden" id="configId" name="id">
                  <div class="form-group">
                      <label for="name">Name</label>
                      <input type="text" class="form-control" id="name" name="name" required readonly>
                  </div>
                  <div class="form-group">
                      <label for="min_days">Min Days</label>
                      <input type="number" class="form-control" id="min_days" name="min_days" required>
                  </div>
                  <div class="form-group">
                      <label for="max_days">Max Days</label>
                      <input type="number" class="form-control" id="max_days" name="max_days">
                  </div>
                  <div class="form-group">
                      <label for="date">Date</label>
                      <input type="date" class="form-control" id="date" name="date" required>
                  </div>
              </form>
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-danger animated slideInRight" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-success animated slideInRight" id="submitEdit">Save changes</button>
          </div>
      </div>
  </div>
</div>

{{-- Edit Modal End Here --}}

<script type="text/javascript">
  $(document).ready(function() {
      $(document).on('click', '.addViewBtn', function(event) {
          event.preventDefault();
          $('#id').val($(this).data('id'));

          const currentDate = new Date().toISOString().split('T')[0];

          $('#date_pomis3').val(currentDate);

          $("#add-new-config").modal('show');
      });

      $("#submitBtn").click(function(event) {
        event.preventDefault();

        
        var dataFormat = [];

        
        var ids = [
            { name: "watchful", idPrefix: "watchful" },
            { name: "substandard", idPrefix: "substandard" },
            { name: "doubtful", idPrefix: "doubtful" },
            { name: "badLoan", idPrefix: "badLoan" }
        ];


        ids.forEach(function(item) {
            var obj = {
                name: item.name,
                min_days: $("#" + "min_days_" + item.idPrefix).val(),
                max_days: $("#" + "max_days_" + item.idPrefix).val(),
                date: $("#date_pomis3").val()
            };
            dataFormat.push(obj); 
        });

        console.log("Data format:", dataFormat);
        
        $.ajax({
            url: "{{ url('pomis-3v2-config/insert') }}",
            type: 'POST',
            data: JSON.stringify(dataFormat),
            contentType: 'application/json',
            dataType: 'json',
            success: function(response) {
                $("#add-new-config").modal('hide');
                if (response.responseTitle == 'Success!') {
                    toastr.success(response.responseText, response.responseTitle);                        
                    setTimeout(function(){
                        location.reload();
                    }, 2000);
                } else {
                    toastr.warning(response.responseText, response.responseTitle);                        
                    setTimeout(function(){
                        location.reload();
                    }, 2000);
                }
                
                
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $("#add-new-config").modal('hide');
                alert("Something went wrong")
                
            }
        });
    });
    });

    $(document).on('click', '.editBtn', function(event) {
      event.preventDefault();
      
      var id = $(this).data('id');

      $.ajax({
          url: 'pomis-3v2-config-edit/' + id,
          type: 'GET',
          success: function(data) {
              
            $('#configId').val(data.id);
            $('#name').val(data.name);
            $('#min_days').val(data.min_days);
            if (data.name === 'badLoan') {
                $('#max_days').val('').closest('.form-group').hide();
            } else {
                $('#max_days').val(data.max_days).closest('.form-group').show(); 
            }

            $('#max_days').val(data.max_days);
            $('#date').val(data.date);
            
            $('#editModal').modal('show');
          },
          error: function() {
              alert('Error fetching data.');
          }
      });
    });

    $(document).on('click', '#submitEdit', function(event) {
      event.preventDefault();

      var formDataString = $('#editConfigForm').serialize();
      var formDataArray = {};
      $.each(formDataString.split('&'), function() {
          var pair = this.split('=');
          formDataArray[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
      });

      console.log(formDataArray);
      console.log(formDataString);
      var id = $(this).data('id');
      $.ajax({
          url: 'pomis-3v2-config-update/' + id, 
          type: 'GET',
          data: formDataArray,
          success: function(response) {
              $('#editModal').modal('hide');
              if (response.responseTitle == 'Success!') {
                    toastr.success(response.responseText, response.responseTitle);                        
                    setTimeout(function(){
                        location.reload();
                    }, 2000);
                } else {
                    toastr.warning(response.responseText, response.responseTitle);                        
                    setTimeout(function(){
                        location.reload();
                    }, 2000);
                }

          },
          error: function(jqXHR, textStatus, errorThrown) {
              alert('Error updating configuration: ' + errorThrown);
          }
      });
    });


</script>

@endsection