@extends('layouts.app')
@section('content')

<div class="container mt-4">
  @if(session('status'))
    <div class="alert alert-success">
        {{ session('status') }}
    </div>
  @endif
  <div class="card">

    <div class="card-header d-flex  bg-al">
 <div>
      <a href="{{url('companies-list')}}" class="btn clr-al"style="border-color:white">
        <i class="fa-sharp fa-solid fa-arrow-left clr"></i>
      </a>
    </div>
    <div class="bold backbt-all">
    
</div>
    </div>
    <div class="card-body clr-al">
    <table class="table table-bordered table table-hover">
  <thead class="table-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col"></th>
      <th scope="col"></th>
    </tr>
  </thead>
  <tbody>
      
        @foreach($zohos as $zoho)
      
          <form method="POST" action="{{url('zoho-data-create')}}" id="add_zoho_data">
            <tr>
              <td>{{$loop->iteration}}</td>
              <td>{{$zoho->head_name}}
                @csrf
                <input type="hidden" name="zoho_id" value="{{$zoho->id}}" />
                <input type="hidden" name="company_id" value="{{$company_id}}" />
              </td>
              <td>
                <select id="category" name="category[]" class="form-control" class="mapping_input" required>
                        <option value="">-- select category --</option>
                    @if($zoho->type == "pl")
                        <option value='{"type":"income","id":"{{$zoho->id}}","category":"{{$zoho->head_name}}"}'  @if($zoho->category == "income") {{"selected"}} @endif>Income</option>
                        <option value='{"type":"expenses","id":"{{$zoho->id}}","category":"{{$zoho->head_name}}"}'  @if($zoho->category == "expense") {{ "selected" }} @endif>Expense</option>
                    @else
                        <option value='{"type":"assets","id":"{{$zoho->id}}","category":"{{$zoho->head_name}}"}' @if($zoho->category == "asset") {{ "selected" }} @endif>Assets</option>
                        <option value='{"type":"liabilities","id":"{{$zoho->id}}","category":"{{$zoho->head_name}}"}' @if($zoho->category == "liabilitie") {{"selected" }} @endif>Liabilites</option>
                    @endif
                </select>
                <!-- <a class="export-btn btn btn-success" href="#" ><i class="fa-sharp fa-solid fa-right-left"></i>&nbsp; &nbsp;</a> -->
                <!-- <a class="export-btn btn btn-success" href="#" ><i class="fa-sharp fa-solid fa-retweet"></i>&nbsp; &nbsp;</a> -->
            </td>
            </tr>
        @endforeach
        <tr>
          <td>
          </td>
          <td>
          </td>
          <td>
            <button class='btn btn-success'>Submit</button>
          </td>
        </tr>
  </form>
</table>
    </div>
  </div>
</div> 

<script>
    $( document ).ready(function() {
        //event.preventDefault()
        $("#add_zoho_data").click(function(event){
          event.preventDefault();

        });

        console.log($('.mapping_input'));
    });
</script>

@endsection