@extends('layouts.main')

@section('content')
    <h1>Add Expense</h1>
        <div class="card-box">
            <div class="card-body">
                    
                @if (session('status'))
                    <div class="alert alert-success">
                        {{ session('status') }}
                    </div>
                @endif

                <div class="row">
                    <div class="col-md-6">
                        <label>Transaction date</label>
                        <input type="date" name="date" value="{{ date('Y-m-d') }}" id="date" class="form-control">

                        <label>Account</label>
                        <select class="form-control" id="expense_account_id" name="expense_account_id">
                            @foreach($account as $accounts)
                                <option value="{{$accounts->id}}">{{$accounts->name}}</option>
                            @endforeach
                        </select>

                        @if(Auth::user()->canDo(['mange_expenses_accounts']))
                        <a class="nav-link" style="text-transform: uppercase;" href="{{route('account.index')}}">Add accounts</a>
                        <br>
                        @endif

                        <label>Particular</label>
                        <textarea class="form-control" id="particular" name="particular"></textarea>


                        <label>Quantity</label>
                        <input type="number" id="size" value="1" class="form-control" step="any">
                    </div>
                    <div class="col-md-6">
                        <label>Amount</label>
                        <input type="text"  id="amount" name="amount" step="any" class="form-control number">

                        <label>Voucher number</label>
                        <input type="text" name="voucher_number" id="voucher_number" class="form-control">

                        <label>Person name</label>
                        <input type="text" name="person_name" id="person_name" class="form-control">

                        <label>Phone Number</label>
                        <input type="text" name="phone_number" id="phone_number" step="any" class="form-control">
                        <br>
                        <button class="btn btn-dark" id="saveBtn" type="submit">Save</button>
                        <br>
                        <span id="display"></span>
                    </div>
                </div>
            </div>
        </div>
@endsection

@push('scripts')
<script type="text/javascript">
    $("#expense_account_id").chosen();
    $("#saveBtn").click(function() {
        $("#saveBtn").text("Processing ...");
        $("#display").text("");
        $("#saveBtn").attr("disabled","disabled");

        $("#amount").val(
            $("#amount").val().replace(/,/g, "")
        );

        $.ajax({
                type: "POST",
                url: "{{ route('expense.store') }}",
            data: {
                date: $("#date").val(),
                expense_account_id: $("#expense_account_id").val(),
                particular: $('#particular').val(),
                amount: $('#amount').val(),
                size: $('#size').val(),
                voucher_number: $('#voucher_number').val(),
                person_name: $('#person_name').val(),
                phone_number: $('#phone_number').val(),                
                _token: "{{Session::token()}}"
            },
            success: function(result){                     
                $("#display").text(result);
                $("#saveBtn").removeAttr("disabled");
                $("#saveBtn").text("Add new Expense");
 
                }
        })
    });
</script>

  <script>
      document.addEventListener("DOMContentLoaded", function () {
          const amount = document.getElementById("amount");
          addCommas(amount); 
      });
  </script>

  
@endpush