@extends('layouts/billing_layout')
@section('title', '| Auto Billing System')
@section('content')
    <style type="text/css">
        .select2-results__option[aria-selected=true] {
            display: none;
        }
    </style>
    <div class="row add-data-form" style="padding-bottom:20px;">

        <div class="col-md-12">
            <div class="col-md-1"></div>
            <div class="col-md-10 fullbody">

                <div class="panel panel-default panel-border">

                    <div class="panel-heading">
                        <div class="panel-title">Auto Billing System</div>
                    </div>

                    <div class="panel-body">
                        <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
                        <script src="//code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
                        {!! Form::open(['url' => '', 'role' => 'form', 'class' => 'form-horizontal form-groups', 'id' => 'salesForm']) !!}
                        <div class="col-md-12" style="margin-bottom: 15px">
                            <div class="form-group">

                                <div class="col-sm-3">
                                    {!! Form::label('billing_select', 'Billing Select :', [
                                        'class' => 'control-label',
                                        'style' => 'margin-bottom: 10px;',
                                    ]) !!}
                                    {!! Form::select(
                                        'billing_select',
                                        ['' => 'Select Any', 'service' => 'Service Charge', 'server' => 'Server Rent', 'others' => 'Others Rent'],
                                        null,
                                        [
                                            'class' => 'form-control',
                                            'id' => 'billing_select',
                                        ],
                                    ) !!}
                                    <p id='billing_select' style="max-height:3px;">
                                        {{ $errors->error->first('billing_select') }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="billing " style="display: none;">
                            <div class="row">
                                <div class="col-md-6">


                                    <div class="form-group">
                                        {!! Form::label('generateDate', 'Generate Date:', ['class' => 'col-sm-4 control-label']) !!}
                                        <div class="col-sm-8">
                                            {!! Form::text('generateDate', $Date, ['class' => 'form-control', 'id' => 'generateDate', 'readonly']) !!}
                                            <p id='generateDatee' style="max-height:3px;"></p>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        {!! Form::label('serviceMonth', 'Service Month:', ['class' => 'col-sm-4 control-label']) !!}
                                        <div class="col-sm-8">
                                            {!! Form::text('serviceMonth', null, ['class' => 'form-control', 'id' => 'serviceMonth', 'readonly']) !!}
                                            <p id='serviceMonthe' style="max-height:3px;"></p>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        {!! Form::label('submit', ' ', ['class' => 'col-sm-4 control-label']) !!}
                                        <div class="text-left col-sm-6" style="text-align:center;">
                                            {!! Form::submit('submit', ['id' => 'add', 'class' => 'btn btn-info']) !!}


                                        </div>
                                    </div>





                                </div>


                            </div>
                        </div> <br>

                        <!-- filtering -->

                        <!-- filtering end-->


                        {!! Form::close() !!}
                        <span id="success" style="color:green; font-size:20px;" class="pull-right"></span>
                    </div>
                </div>
                <div class="footerTitle" style="border-top:1px solid white"></div>
            </div>
            <div class="col-md-1"></div>
        </div>
    </div>

    <script type="text/javascript">
        $(function() {
            $("#serviceMonth").datepicker({
                dateFormat: "MM yy", // Format to show only month and year
                changeMonth: true, // Show dropdown to select month
                changeYear: true, // Show dropdown to select year
                showButtonPanel: true, // Show buttons to navigate to current month/year
                onClose: function(dateText, inst) {
                    var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                    var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                    $(this).datepicker('setDate', new Date(year, month, 1));
                    inst.settings.defaultDate = new Date(year, month, 1);
                    $(this).datepicker('refresh');
                }
            }).focus(function() {
                $(".ui-datepicker-calendar").hide(); // Hide the datepicker calendar
            });
        });
    </script>


    <script>
        $(document).ready(function($) {
            $('#billing_select').change(function() {
                var billing_select = $(this).val().trim();
                if (billing_select == '') {
                    $('.billing').hide();
                    $('#billing_type').val(''); // Reset the selected value
                } else {
                    if (billing_select == 'service') {
                        $('.billing').show();
                        $('#salesForm').off('submit').on('submit', function(event) {
                            event.preventDefault();
                            $.ajax({
                                type: 'post',
                                url: './addBillingItem',
                                data: $(this).serialize(),
                                dataType: 'json',
                                success: function(_response) {
                                    if (_response == "errors") {
                                        alert("Already Exists in Auto Billing");
                                    } else if (_response == "errors1") {
                                        alert("Please Generate previous month bill");
                                    } else if (_response == "errors2") {
                                        alert(
                                            "Please first Generate software start date month bill"
                                            );
                                    } else {
                                        window.location.href =
                                            "{{ url('billing/billingViewList/') }}";
                                    }
                                }
                            });
                        });
                    } else if (billing_select == 'server') {
                        $('.billing').show();
                        $('#salesForm').off('submit').on('submit', function(event) {
                            event.preventDefault();
                            $.ajax({
                                type: 'post',
                                url: './addServerBillingItem',
                                data: $(this).serialize(),
                                dataType: 'json',
                                success: function(_response) {
                                    if (_response == "errors") {
                                        alert("Already Exists in Auto Billing");
                                    } else if (_response == "errors1") {
                                        alert("Please Generate previous month bill");
                                    } else if (_response == "errors2") {
                                        alert(
                                            "Please first Generate software start date month bill"
                                            );
                                    } else {
                                        window.location.href =
                                            "{{ url('billing/billingViewServerList/') }}";
                                    }
                                }
                            });
                        });
                    } else if (billing_select == 'others') {
                        $('.billing').show();
                        $('#salesForm').off('submit').on('submit', function(event) {
                            event.preventDefault();
                            $.ajax({
                                type: 'post',
                                url: './addOthersBillingItem',
                                data: $(this).serialize(),
                                dataType: 'json',
                                success: function(_response) {
                                    if (_response == "errors") {
                                        alert("Already Exists in Auto Billing");
                                    } else if (_response == "errors1") {
                                        alert("Please Generate previous month bill");
                                    } else if (_response == "errors2") {
                                        alert(
                                            "Please first Generate software start date month bill"
                                            );
                                    } else {
                                        window.location.href =
                                            "{{ url('billing/billingViewOthersList/') }}";
                                    }
                                }
                            });
                        });
                    }
                }
            });

            // Handle initial state
            var selectedOption = $('#billing_select').val();
            if (selectedOption == 'service' || selectedOption == 'server' || selectedOption == 'others') {
                $('.billing').show();
            }
        });
    </script>








    <style>
        input[type=number]::-webkit-outer-spin-button,
        input[type=number]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        input[type=number] {
            -moz-appearance: textfield;
        }
    </style>

@endsection