@extends('layouts.dashboard')
@section('pagehead', 'Add Bill')
@section('bredcrumb-item-link',url('/home/billing'))
@section('bredcrumb-item','All Bills')

@section('content')
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css" rel="stylesheet">
<section class="section dashboard">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    @include('layouts.notification')
                    <p style="margin:0;float:right">{{__('Bill No IOPM' . $modules['lastId']['id'] + 1 )}}</p>
                </div>
                <p id="address"></p>
                <div class="card-body">
                    <form action="{{ url('/home/billing') }}" 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 class="form-group col-md-3">
                                <label class="mb-2 mt-2">Select Brand</label>
                                <select name="brand_id" class="form-control form-select">
                                    @foreach($modules['brands'] as $key => $brand)
                                    <option value="{{ $brand['id'] }}">{{ $brand['brand_name'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-md-3">
                                <label class="mb-2 mt-2">Select Pages</label>
                                <!-- <select name="page_id" class="form-control form-select" multiple>
                                    @foreach($modules['pages'] as $key => $page)
                                    <option value="{{ $page['id'] }}">{{ $page['name'] }}</option>
                                    @endforeach
                                </select> -->
                                <select name="page_id[]" class="form-control selectpicker page_price" multiple aria-label="Select" data-live-search="true">
                                    @foreach($modules['pages'] as $key => $page)
                                    <option {{$key == 0 ? 'selected' : '' }} value="{{ $page['id'] }}" data-price="{{$page['price']}}">{{ $page['name'] . ' -- ' . $page['price']  }}</option>
                                    @endforeach
                                </select>
                                <input type="text" id="pagePrice" hidden value="0" name="pagePrice">
                                <input type="text" id="totalRates" hidden value="0" name="totalRates">
                            </div>
                            <div class="form-group col-md-3">
                                <label class="mb-2 mt-2">Select Page Number</label>
                                <select id="page_number" name="page_number" class="form-control form-select">
                                    @foreach($modules['page_numbers'] as $key => $pagenumber)
                                    <option value="{{ $pagenumber['id'] }}">{{ $pagenumber['name'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-md-3">
                                <label class="mb-2 mt-2">Select Issue Number</label>
                                <select name="issue_number_id" id="issue_number_group" class="form-control form-select">
                                    @foreach($modules['issue_numbers'] as $key => $issue_number)
                                    <option value="{{ $issue_number['id'] }}">{{ $issue_number['name'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-md-3 issue_number_year_wrap">
                                <label class="mb-2 mt-2">Issue Year</label>
                                <input type="text" name="issue_number_year" readonly class="form-control issue_number_year">
                            </div>
                            <div class="form-group col-md-3 issue_number_month_wrap">
                                <label class="mb-2 mt-2">Issue Month</label>
                                <input type="text" name="issue_number_month" readonly class="form-control issue_number_month">
                            </div>
                            <div class="form-group col-md-3">
                                <label class="mb-2 mt-2">Select Color</label>
                                <select name="color_id" class="form-control form-select">
                                    @foreach($modules['colors'] as $key => $color)
                                    <option value="{{ $color['id'] }}">{{ $color['name'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-md-3">
                                <label class="mb-2 mt-2">Select Currency</label>
                                <select name="currency_id" class="form-control form-select">
                                    @foreach($modules['currency'] as $key => $currency)
                                    <option value="{{ $currency['id'] }}">{{ $currency['name'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-md-3">
                                <label class="mb-2 mt-2">Select HSN</label>
                                <select name="hsn_number" class="form-control form-select">
                                    @foreach($modules['hsn'] as $key => $hsn)
                                    <option value="{{ $hsn['id'] }}">{{ $hsn['name'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <!-- <div class="form-group col-md-3">
                                <label class="mb-2 mt-2">Select Year</label>
                                <select name="billing_year" class="form-control form-select">
                                    @foreach($modules['billing_numbers'] as $key => $number)
                                    <option value="{{$number}}">{{ $number }}</option>
                                    @endforeach
                                </select>
                            </div> -->
                            <div class="form-group col-md-3" style="display:none">
                                <label class="mb-2 mt-2">Financial Year</label>
                                <select name="financial_year" class="form-control form-select">
                                    @foreach($modules['financial_year'] as $key => $year)
                                        <option value="{{$year->id}}">{{ date('Y', strtotime($year->start_date))  . '-' . date('Y', strtotime($year->end_date)) }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <hr>
                        <!-- Calculations -->
                        <div class="row">
                            <div class="form-group col-sm-3">
                                <label class="control-label" for="rate">Rate (With Code)</label>
                                <input type="number" name="rate1" id="rate1" class="form-control" min="0" placeholder="0.00" />
                            </div>
                            <div class="form-group col-sm-3">
                                <label class="control-label" for="rate">Rate (With Code)</label>
                                <input type="number" name="rate2" id="rate2" class="form-control" min="0" placeholder="0.00" />
                            </div>
                            <div class="form-group col-sm-3">
                                <label class="control-label" for="rate">Rate (With Code)</label>
                                <input type="number" name="rate3" id="rate3" class="form-control" min="0" placeholder="0.00" />
                            </div>
                            <div class="form-group col-sm-3">
                                <label class="control-label" for="rate">Rate (With Code)</label>
                                <input type="number" name="rate4" id="rate4" class="form-control" min="0" placeholder="0.00" />
                            </div>
                        </div>
                        <div class="row" style="margin-top:10px">
                            <div class="form-group col-sm-3">
                                <label class="control-label" for="rate">Rate</label>
                                <input type="number" name="rate" id="rate" class="form-control" min="0" placeholder="0.00" required />
                            </div>
                            <div class="form-group col-sm-2">
                                <label class="control-label" for="amt">Amount</label>
                                <input type="number" name="amt" id="amt" readonly class="form-control" min="0" placeholder="0.00" required />
                            </div>
                            <div class="form-group col-sm-2">
                                <label class="control-label" for="discount">Discount(%)</label>
                                <input type="number" name="discount" id="discount" class="form-control" min="0" placeholder="0.00" />
                            </div>
                            <div class="form-group col-sm-2">
                                <label class="control-label" for="total_discount">Total Discount</label>
                                <input type="number" name="total_discount" id="total_discount" readonly class="form-control" min="0" placeholder="0.00" readonly />
                            </div>
                            <div class="form-group col-sm-3">
                                <label class="control-label" for="gtotal">GTotal</label>
                                <input type="number" name="grand_total_with_tax" id="grand_total_with_tax" readonly class="form-control" min="0" placeholder="0.00" required />
                            </div>
                            <div class="row mt-3">
                                <div class="form-group col-sm-3">
                                    <label class="control-label" for="sgst">SGST(%)</label>
                                    <input type="number" name="sgst" id="sgst" class="form-control" step="0.01" min="0" placeholder="0.00" />
                                </div>
                                <div class="form-group col-sm-3">
                                    <label class="control-label" for="cgst">CGST(%)</label>
                                    <input type="number" name="cgst" id="cgst" class="form-control" step="0.01" min="0" placeholder="0.00" />
                                </div>
                                <div class="form-group col-sm-3">
                                    <label class="control-label" for="igst">IGST(%)</label>
                                    <input type="number" name="igst" id="igst" class="form-control" step="0.01" min="0" placeholder="0.00" />
                                </div>
                                <div class="form-group col-sm-3">
                                    <label class="control-label" for="grand_total_with_tax">Grand Total With Tax</label>
                                    <input type="number" name="gtotal" id="gtotal" readonly class="form-control" min="0" placeholder="0.00" required />
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="form-group col-sm-2">
                                    <label class="control-label" for="total_sgst">Total SGST</label>
                                    <input type="number" name="total_sgst" id="total_sgst" readonly class="form-control" min="0" placeholder="0.00" readonly />
                                </div>
                                <div class="form-group col-sm-2">
                                    <label class="control-label" for="total_cgst">Total CGST</label>
                                    <input type="number" name="total_cgst" id="total_cgst" readonly class="form-control" min="0" placeholder="0.00" readonly />
                                </div>
                                <div class="form-group col-sm-2">
                                    <label class="control-label" for="total_igst">Total Igst</label>
                                    <input type="number" name="total_igst" id="total_igst" readonly class="form-control" min="0" placeholder="0.00" readonly />
                                </div>
                            </div>
                            <!-- <div class="form-group">
                                <label class="control-label col-sm-2" for="sum">Sum</label>
                                <div class="col-sm-10">
                                    <input type="number" name="sum" id="sum" class="form-control" readonly />
                                </div>
                            </div> -->
                        </div>
                        <!-- Calculation Ends -->
                        <div class="form-group mt-3">
                            <input type="submit" value="Add Bill" class="btn btn-primary btn-xs">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection
@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js"></script>
<script type="text/javascript">
    $(function() {
        $(".issue_number_year_wrap").hide();
        $(".issue_number_month_wrap").hide();
        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);
                    }

                }
            });
        // Check Rate Columns
        $("#rate1").blur(function(){
            var pages = $("#page_number").find(":selected").text();
            if($('#rate1').val() != '' && $('#rate2').val() != '' && $('#rate3').val() != '' && $('#rate4').val() != ''){
                var getAmount = $('#rate').val() * pages;
                var totalRate = parseFloat($('#rate1').val()) + parseFloat($('#rate2').val()) + parseFloat($('#rate3').val()) + parseFloat($('#rate4').val());
                $('#totalRates').val(totalRate);
                $('#amt').val(totalRate + parseFloat(getAmount));
            }else{
                $('#totalRates').val(0);
                var getAmount = $('#rate').val() * pages;
                $('#amt').val(getAmount);
            }
        });
        $("#rate2").blur(function(){
            var pages = $("#page_number").find(":selected").text();
            if($('#rate1').val() != '' && $('#rate2').val() != '' && $('#rate3').val() != '' && $('#rate4').val() != ''){
                var getAmount = $('#rate').val() * pages;
                var totalRate = parseFloat($('#rate1').val()) + parseFloat($('#rate2').val()) + parseFloat($('#rate3').val()) + parseFloat($('#rate4').val());
                $('#totalRates').val(totalRate);
                $('#amt').val(totalRate + parseFloat(getAmount));
            }else{
                $('#totalRates').val(0);
                var getAmount = $('#rate').val() * pages;
                $('#amt').val(getAmount);
            }
        });
        $("#rate3").blur(function(){
            var pages = $("#page_number").find(":selected").text();
            if($('#rate1').val() != '' && $('#rate2').val() != '' && $('#rate3').val() != '' && $('#rate4').val() != ''){
                var getAmount = $('#rate').val() * pages;
                var totalRate = parseFloat($('#rate1').val()) + parseFloat($('#rate2').val()) + parseFloat($('#rate3').val()) + parseFloat($('#rate4').val());
                $('#totalRates').val(totalRate);
                $('#amt').val(totalRate + parseFloat(getAmount));
            }else{
                $('#totalRates').val(0);
                var getAmount = $('#rate').val() * pages;
            }
        });
        $("#rate4").blur(function(){
            var pages = $("#page_number").find(":selected").text();
            if($('#rate1').val() != '' && $('#rate2').val() != '' && $('#rate3').val() != '' && $('#rate4').val() != ''){
                var getAmount = $('#rate').val() * pages;
                var totalRate = parseFloat($('#rate1').val()) + parseFloat($('#rate2').val()) + parseFloat($('#rate3').val()) + parseFloat($('#rate4').val());
                $('#totalRates').val(totalRate);
                $('#amt').val(totalRate + parseFloat(getAmount));
            }else{
                $('#totalRates').val(0);
                $('#amt').val(getAmount);
            }
        });
        $("#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
        $("#issue_number_group").change(function(event) {
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: "{{ url('home/billing/issue-number') }}",
                data: {
                    'id':$(this).val(),
                },
                type: 'POST',
                dataType: 'json',
                success: function(result) {
                    $(".issue_number_year_wrap").show();
                    $(".issue_number_year").val(result.year);
                    $(".issue_number_month_wrap").show();
                    $(".issue_number_month").val(result.month.toUpperCase().replace('_','-'));

                }
            });
        });
        // Number Of Pages
        $("#page_number").change(function(event) {
            var pages = $("#page_number").find(":selected").text();
            var totalRates = $("#totalRates").val();
            if(totalRates != 0){
                var rate = parseFloat($('#rate').val() * pages) + parseFloat(totalRates) || 0;
            }else{
                var rate = parseFloat($('#rate').val() * pages) || 0;
            }
            // var getPagePrice = $("#pagePrice").val();
            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 - totalDiscount) * sgst / 100;
            var totalCgst = (rate - totalDiscount) * cgst / 100;
            var totalIgst = (rate - totalDiscount) * igst / 100;
            $("#amt").val(rate);
            $('#total_discount').val(totalDiscount);
            $('#total_sgst').val(totalSgst);
            $('#total_cgst').val(totalCgst);
            $('#total_igst').val(totalIgst);
            $('#grand_total_with_tax').val(rate - totalDiscount);
            $('#gtotal').val((rate - totalDiscount) + totalCgst + totalSgst + totalIgst);
        });
        // Page Price Multi Select Dropdown
        $(".page_price").change(function(event) {
            var result = $(".page_price option:selected").map(function() {
                return $(this).data("price");
            }).get();
            var total = 0;
            for (var i = 0; i < result.length; i++) {
                total += result[i] << 0;
            }
            $("#pagePrice").val(total);
            var pages = $("#page_number").find(":selected").text();
            // var getPagePrice = $("#pagePrice").val();
            var rate = parseFloat($('#rate').val() * pages) || 0;
            $("#amt").val(rate);
        });
        $('#rate,#discount, #sgst, #cgst, #igst, #gtotal,#total_discount,#total_sgst').keyup(function() {
            var pages = $("#page_number").find(":selected").text();
            var totalRates = $("#totalRates").val();
            if(totalRates != 0){
                var rate = parseFloat($('#rate').val() * pages) + parseFloat(totalRates) || 0;
            }else{
                var rate = parseFloat($('#rate').val() * pages) || 0;
            }
            // var getPagePrice = $("#pagePrice").val();
            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 - totalDiscount) * sgst / 100;
            var totalCgst = (rate - totalDiscount) * cgst / 100;
            var totalIgst = (rate - totalDiscount) * igst / 100;
            $("#amt").val(rate);
            $('#total_discount').val(totalDiscount);
            $('#total_sgst').val(totalSgst);
            $('#total_cgst').val(totalCgst);
            $('#total_igst').val(totalIgst);
            $('#grand_total_with_tax').val(rate - totalDiscount);
            $('#gtotal').val((rate - totalDiscount) + totalCgst + totalSgst + totalIgst);
        });
    });
</script>
@endsection