@extends('layouts.master')

@section('page_title', 'Add Expenses ')
@section('title', 'Add Expenses')
@section('main_item', 'Expenses ')
@section('sub_item', 'Add Expenses ')

@section('content')

    <div class="col-md-12">
        <form method="POST" action="{{ route('expenses.store') }}" enctype="multipart/form-data">
            @csrf
            <div class="card">
                <div class="card-body">
                    <div class="row mg-b-25">
                        <div class="col-md-3" @if ($setting->business_location != '1') style="display: none" @endif>
                            <div class="form-group">
                                <label class="required" style="font-weight: bold" for="activate_code">business
                                    Location</label>
                                <select class="form-control select2" id="location_id" name="location_id">
                                    @if (Auth::user()->role_id == '1')
                                        @foreach ($users_access_location as $business_location)
                                            @if ($business_location->is_active == '1')
                                                <option value="{{ $business_location->id }}">
                                                    {{ $business_location->name }}
                                                </option>
                                            @else
                                            @endif
                                        @endforeach
                                    @else
                                        @foreach ($users_access_location as $business_location)
                                            @if ($business_location->is_active == '1')
                                                <option value="{{ $business_location->business_location_id }}">
                                                    {{ $business_location->name }}
                                                </option>
                                            @else
                                            @endif
                                        @endforeach

                                    @endif

                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="required" style="font-weight: bold" for="expense_category_id">Expense
                                    Category</label>
                                <select class="form-control select2 " name="expense_category_id" id="expense_category_id"
                                    required>
                                    @foreach ($expense_categories as $expense_category)
                                        <option value="{{ $expense_category->id }}">
                                            {{ $expense_category->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="required" style="font-weight: bold" for="ref_no">Expense Ref No</label>
                                <input class="form-control" type="text" name="ref_no" id="ref_no" value=""
                                    required>
                            </div>
                        </div>
                    </div>
                    <div class="row mg-b-25">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="required" style="font-weight: bold" for="payment_date">Date</label>
                                <input class="form-control mdate " type="text" name="date" id="mdate"
                                    value="" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="required" style="font-weight: bold" for="amount">Amount</label>
                                <input class="form-control " type="number" name="amount" id="amount" value=""
                                    step="0.01" required>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="description" style="font-weight: bold">Note</label>
                                <textarea class="form-control " type="text" name="description" id="description" value=""></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </div>
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h4 class="header-title mt-0">Add Payment</h4>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label style="font-weight: bold">Payment Ref No</label>
                            <input type="text" class="form-control" id="payment_ref_no" name="payment_ref_no">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label style="font-weight: bold">Paid Amount</label>
                            <input type="text" class="form-control" id="paid_amount" name="paid_amount">
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label style="font-weight: bold">Payment Date</label>
                            <input class="form-control payment_dt" type="text" name="payment_dt" id="payment_dt">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label style="font-weight: bold">Payment Method</label>
                            <select class="form-control select2" name="payment_method" id="payment_method">
                                <option value="cash">Cash</option>
                                <option value="card">Card</option>
                                <option value="cheque">Cheque</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <label style="font-weight: bold">Payment Account</label>
                        {{-- <select id="payment_account" class="select2 form-control mb-3 custom-select"
                            name="payment_account" style="width: 100%; height:36px;" required>
                            @foreach ($accounts as $account)
                                <option value="{{ $account->id }}">{{ $account->account_name }} | {{ $account->balance }}</option>
                            @endforeach
                        </select> --}}
                        <select class="form-control select2 mb-3 custom-select" name="payment_account" id="account" style="width: 100%; height:36px;" required>
                            @foreach ($balances as $balance)
                            <option value="{{ $balance->account_id }}">
                                {{ $balance->account_name }} | Balance: {{ $balance->balance }}
                            </option>
                            @endforeach
                            
                        </select>


                       
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label style="font-weight: bold">Payment Note</label>
                            <textarea type="text" class="form-control" id="payment_note" name="payment_note"></textarea>
                        </div>
                    </div>
                    <div class="col-md-12 text-right">
                        <div class="form-group">
                            <button class="btn btn-primary" type="submit">
                                Save
                            </button>
                        </div>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('scripts')
    <script>
        $(document).ready(function() {
            $("#branch_id").select2();
            $('#mdate').val(moment(new Date()).format("YYYY-MM-DD"));
            $('#payment_dt').val(moment(new Date()).format("YYYY-MM-DD"));

            getAccountsRelated($('#location_id').val());

        });

        $(document).on('change', '#location_id', function() {
            $('#location_id').val($(this).val());
            getAccountsRelated($(this).val());
        });

        $("input[name='paid_amount']").change(function() {
            let paid_amount = $('#paid_amount').val();
            let expense_amount = $('#amount').val();
            if (Math.round(paid_amount) > expense_amount) {
                Swal.fire(
                    'Warning',
                    'Paid Amount is greater than Expense Amount',
                    'warning'
                )
                $('#paid_amount').val('');
            }
        });

        function getAccountsRelated(business_location_id) {
            $.ajax({
                method: 'GET',
                url: "{{ route('payment-accounts.location') }}",
                data: {
                    business_location_id: business_location_id,
                },
                success: function(options) {
                    $('#account').empty().html(options)
                },
                error: function(xhr, status, error) {
                    console.error('AJAX error:', status, error);
                }
            });
        }

        //duplicate ref no error
        $('#ref_no').change(function() {
            let input = $('#ref_no').val();
            let url = "{{ route('expenses.validate-ref-no') }}";
            $.ajax({
                method: 'POST',
                url: url,
                data: {
                    "_token": "{{ csrf_token() }}",
                    ref_no: input
                },
                success: function(response) {
                    if (response.is_have == 'yes') {
                        $('#ref_no').val('');
                        Swal.fire(
                            'Error',
                            'This Ref No already used',
                            'warning'
                        )
                    }
                }
            })
        });


    </script>
@endsection