@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: 99999999 !important;
    }
    .ui-front {
      z-index: 9999 !important;
    }
  </style>
  <link rel="stylesheet" href="/css/autocomplete-jquery-ui.css">
  <link rel="stylesheet" href="/theme/plugins/datatables-bs4/css/dataTables.bootstrap4.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 Setup</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 Setup</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-services-form">
              <div class="modal-body">
                <div class="row">
                  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="review-content-section" style="border:1px solid rgba(0,0,0,0.1);margin-top:0px;padding:20px 20px 20px 20px;background:rgba(0,0,0,0.05);">
                      <div id="dropzone1" class="pro-ad">
                        <label>SERVICE DETAILS</label><br>
                        <hr>
                        <div class="row">
                          <div class="col-md-12">
                            <div class="row">
                              <div class="col-md-2">
                                <div class="form-group">
                                  <label>Service Code</label>
                                  <input id="servicecode" name="servicecode" type="text" class="form-control form-control-sm" value="">
                                </div>
                              </div>
                              <div class="col-md-3">
                                <div class="form-group">
                                  <label>Service Name</label>
                                  <input id="servicename" name="servicename" type="text" class="form-control form-control-sm" value="">
                                </div>
                              </div>
                              <div class="col-md-3">
                                <div class="form-group">
                                  <label>Company</label>
                                  <input id="company" name="company" type="text" class="form-control form-control-sm" value="">
                                </div>
                              </div>
                              <div class="col-md-2">
                                <div class="form-group">
                                  <label>Normal Balance</label>
                                  <select class="form-control form-control-sm" id="normalbalance" name="normalbalance">
                                    <option value="Dr">Debit</option>
                                    <option value="Cr">Credit</option>
                                  </select>
                                </div>
                              </div>
                              <div class="col-md-2">
                                <div class="form-group">
                                  <label>-</label>
                                  <input type="hidden" name="request" value="otherservices" />
                                  <input type="hidden" name="type" value="add" />
                                  <button id="add-service-btn" type="button" class="btn btn-sm btn-success form-control form-control-sm">Save</button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">Services List</h3>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                <table id="example2" class="table table-bordered table-hover">
                  <thead>
                    <tr>
                      <th>Service Code</th>
                      <th>Service Name</th>
                      <th>Company</th>
                      <th>Normal Balance</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody>
                    @if(isset($forexlist))
                      @foreach($forexlist as $forex)
                        <tr>
                          <td>{{$forex['deno_from']}} - {{$forex['deno_to']}}</td>
                          <td>{{$forex['currency']}}</td>
                          <td>{{$forex['transtype']}}</td>
                          <td>{{$forex['value']}}</td>
                          <td><button id="{{$forex['id']}}" class="btn btn-info btn-sm edit-branch-select" data-toggle="modal" data-target="#editBranch">Edit</button></td>
                        </tr>
                      @endforeach
                    @endif
                  </tbody>
                </table>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
        </div>
      </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->
  </div>
  <!-- Modal -->
  <div class="modal fade" id="addCurrency" role="dialog">
    <div class="modal-dialog modal-md">
      <div class="modal-content auto-selector">
        <div class="modal-header">
          <h4 class="modal-title">Add Currency</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
          <form id="add-currency-form">
            <div class="modal-body" style="padding:20px 30px 30px 30px">
                <div class="review-content-section" style="border:1px solid rgba(0,0,0,0.1);margin-top:0px;padding:20px 20px 20px 20px;background:rgba(0,0,0,0.05);">
                  <div id="dropzone1" class="pro-ad">
                    <label>CURRENCY DETAILS</label>
                    <input name="type" type="hidden" value="add">
                    <input name="request" type="hidden" value="currency">
                    <hr>
                    <div class="row">
                      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="row">
                          <div class="col-md-4">
                            <div class="form-group">
                              <label>Currency Code</label>
                              <input id="currencycode" name="currencycode" type="text" class="form-control form-control-sm" value="">
                            </div>
                          </div>
                          <div class="col-md-8">
                            <div class="form-group">
                              <label>Currency Name</label>
                              <input id="currencyname" name="currencyname" type="text" class="form-control form-control-sm" value="">
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <br>
              <div class="row">
                  <div class="col-lg-12">
                    <div id="new-branch-error-msg" style="color:red;"></div>
                    <div id="new-branch-success-msg" style="color:green;"></div>
                  </div>
              </div>
            </div>
          </form>
          <div class="modal-footer">

            <button id="add-currency-btn" type="button" class="btn btn-success">Add Currency</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>

        <hr>
      </div>
    </div>
  </div>
@endsection
@section('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script src="/theme/plugins/datatables/jquery.dataTables.js"></script>
<script src="/theme/plugins/datatables-bs4/js/dataTables.bootstrap4.js"></script>
<script>
  var dataTable = $('#example2').DataTable({
      keys: true,
      draw: true,
      "dom": '<"top"i>rt<"bottom"flp><"clear">',
    });
  ratesList();
  function ratesList(){
    $.ajax({
        url: '/settings-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {request: 'otherservices', type: 'list'},
        success:function(e){
          if(e){
            console.log(e);
            dataSet = [];
						for(num in e){
							dataSet.push([
								e[num].servicecode,
								e[num].servicename,
								e[num].company,
                e[num].normalbalance,
                '<button type="button" id="'+e[num].servicecode+'" 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: "Service Code" },
								{ title: "Service Name" },
                { title: "Company" },
                { title: "Normal Balance" },
                { title: "" }
							]}),
							dataTable = $('#example2').DataTable();
          }
        }
    });
  }
</script>
<script>
  $('#add-currency-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-currency-form').serialize(),
        success:function(e){
          if(e){
            console.log(e);
          }
        }
    });
  });
  $('#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-services-form').serialize(),
        success:function(e){
          if(e){
            console.log(e);
          }
        }
    });
  });
</script>

@endsection