@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-4">
                            <div class="form-group">
                                <label for="branch_id" style="font-weight: bold">Branch</label>
                                <select class="form-control select2" id="branch_id" name="branch_id" required>
                                    <option value="">Select</option>
                                    @foreach ($branches as $branch)
                                        <option value="{{ $branch->id }}">{{ $branch->branch_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <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-4">
                            <div class="form-group">
                                <label class="required" style="font-weight: bold" for="ref_no">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;">
                            @foreach ($accounts as $account)
                                <option value="{{ $account->id }}" {{ $account->is_default == 1 ? 'selected' : '' }}>
                                    {{ $account->account_name }}
                                </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-sm-12 text-right">
                        <div class="form-group">
                            <button class="btn btn-primary px-5 py-2" 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"));

        });

        $("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('');
                }

        });
        $('#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