@extends('layouts.dashboard')
@section('pagehead', 'Add Payment')
@section('bredcrumb-item-link',url('/home/payments'))
@section('bredcrumb-item','All Payments')

@section('content')
<section class="section dashboard">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    @include('layouts.notification')
                </div>
                <p id="address"></p>
                <div class="card-body">
                    <form action="{{ url('/home/payments') }}" method="POST">
                        @csrf
                        <div class="row">
                            <div class="form-group col-md-3">
                                <label class="mb-2 mt-2">Select Client</label>
                                <select name="client_id" id="client_id" class="form-control form-select">
                                    @foreach($modules['clients'] as $key => $client)
                                    <option value="{{ $client['id'] }}">{{ $client['name'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-md-3 additional_fields">
                                <label class="mb-2 mt-2">Address</label>
                                <input type="text" readonly disabled id="additional_field_address" class="form-control">
                            </div>
                            <div class="form-group col-md-3 additional_fields">
                                <label class="mb-2 mt-2">State</label>
                                <input type="text" readonly disabled id="additional_field_state" class="form-control">
                            </div>
                            <div class="form-group col-md-3 additional_fields">
                                <label class="mb-2 mt-2">City</label>
                                <input type="text" readonly disabled id="additional_field_city" class="form-control">
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="form-group col-md-3">
                                <label class="mb-1"> Payment Mode </label>
                                <select name="mode_of_payment" class="form-control form-select">
                                    @foreach($modules['paymentModes'] as $payment)
                                    <option value="{{ $payment->id }}">{{ $payment->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-md-3">
                                <label class="mb-1"> Date </label>
                                <input type="date" class="form-control" name="payment_date">
                            </div>
                            <div class="form-group col-md-3">
                                <label class="mb-1"> Refrence Number </label>
                                <input type="text" class="form-control" name="refrence_number" placeholder="ABC">
                            </div>
                            <div class="form-group col-md-3">
                                <label class="mb-1"> Narration </label>
                                <input type="text" class="form-control" name="narration" placeholder="ABC">
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="form-group col-md-3">
                                <label class="mb-1"> Amount </label>
                                <input type="number" min="0.00" step="0.10" value="0.00" class="form-control" name="amount">
                            </div>
                            <div class="form-group col-md-3">
                                <label class="mb-1"> Type </label>
                                <select name="type" class="form-control form-select">
                                    <option value="credit">Credit</option>
                                    <option value="debit">Debit</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group mt-3">
                            <input type="submit" value="Add Payment" class="btn btn-primary btn-xs">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection
@section('scripts')
<script type="text/javascript">
    $(function() {
        var currentId = $("#client_id").val();
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: "{{ url('home/billing/state') }}",
            data: {
                'id': currentId,
            },
            type: 'POST',
            dataType: 'json',
            success: function(result) {
                var state = result.state;
                $(".additional_fields").show();
                $("#additional_field_address").val(result.address);
                $("#additional_field_state").val(result.state);
                $("#additional_field_city").val(result.city);
                if (state.toLowerCase() == 'delhi') {
                    $("#sgst").attr('disabled', false);
                    $("#cgst").attr('disabled', false);
                    $("#igst").attr('disabled', true);
                } else {
                    $("#sgst").attr('disabled', true);
                    $("#cgst").attr('disabled', true);
                    $("#igst").attr('disabled', false);
                }

            }
        });
        $("#client_id").change(function(event) {
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: "{{ url('home/billing/state') }}",
                data: {
                    'id': $(this).val(),
                },
                type: 'POST',
                dataType: 'json',
                success: function(result) {
                    var state = result.state;
                    $(".additional_fields").show();
                    $("#additional_field_address").val(result.address);
                    $("#additional_field_state").val(result.state);
                    $("#additional_field_city").val(result.city);
                    $('.card-header p').first().remove();
                    if (state.toLowerCase() == 'delhi') {
                        $("#sgst").attr('disabled', false);
                        $("#cgst").attr('disabled', false);
                        $("#igst").attr('disabled', true);
                    } else {
                        $("#sgst").attr('disabled', true);
                        $("#cgst").attr('disabled', true);
                        $("#igst").attr('disabled', false);
                    }

                }
            });
        });
        // State Check
        // 
        $('#rate,#discount, #sgst, #cgst, #igst, #gtotal,#total_discount,#total_sgst').keyup(function() {
            var rate = parseFloat($('#rate').val()) || 0;
            var discount = parseFloat($('#discount').val()) || 0;
            var sgst = parseFloat($('#sgst').val()) || 0;
            var cgst = parseFloat($('#cgst').val()) || 0;
            var igst = parseFloat($('#igst').val()) || 0;
            var totalDiscount = (rate * discount) / 100;
            var totalSgst = (rate) * sgst / 100;
            var totalCgst = (rate) * cgst / 100;
            var totalIgst = (rate) * igst / 100;
            $('#total_discount').val(totalDiscount);
            $('#total_sgst').val(totalSgst);
            $('#total_cgst').val(totalCgst);
            $('#total_igst').val(totalIgst);
            $('#gtotal').val((rate - totalDiscount) + totalCgst + totalSgst + totalIgst);
        });
    });
</script>
@endsection