@extends('layouts.admin')

@section('ext_css')
    <link rel="stylesheet" href="{{ asset('/NepaliDatepicker/nepali.datepicker.v2.2.min.css') }}"/>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/1.1.1/css/bootstrap-multiselect.css" />
    <style type="text/css">
        .btn-group {
            width: 100%;
        }
        button.multiselect.dropdown-toggle.custom-select.text-center {
            width: 100%;
            padding: 5px;
        }
        button.dropdown-item.multiselect-all {
            width: 100%;
        }
        button.multiselect-option.dropdown-item {
            width: 100%;
        }
        span.form-check {
            float: left;
        }
    </style>
@endsection

@section('content')

    <div class="row">
        <ol class="breadcrumb">
            <li><a href="{{ route('admin.dashboard') }}"><i class="fa fa-dashboard"></i> Dashboard</a></li>
            <li><a href="{{ route('admin.billing.index') }}">Invoice </a></li>
            <li class="active"> Create</li>
        </ol>
    </div>

    <div class="row">
        @if(session('success'))
            <div class="alert alert-success alert-dismissable">
                <button class="close" data-dismiss="alert"><i class="fa fa-times-circle"></i></button>
                <strong>Success !</strong>
                {!! Session::get('success') !!}
            </div>
        @elseif(session('failure'))
            <div class="alert alert-danger alert-dismissable">
                <button class="close" data-dismiss="alert"><i class="fa fa-times-circle"></i></button>
                <strong>Failed !</strong> {{ Session::get('failure') }}
            </div>
        @endif
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"> Generate Bills ({{ $setting->billing_type == 'flat' ? 'Flat' : 'Per Hit' }})
                    <span class="pull-right"><strong class="text-danger">*</strong> Required Fields</span>
                </h3>
            </div>

            <div class="panel-body">
                <form action="{{ route('admin.billing.generate_bill') }}" method="POST"
                      class="form-horizontal form-padding">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

                        <div class="form-group">
                            <div class="col-md-4">
                                <label class="control-label" for="demo-address-input" style="margin-bottom: 10px;">Category </label>
                                {{-- <strong class="text-danger">*</strong> --}}
                                <select name="category" id="category" class="form-control">
                                    <option selected="true" value="">--All--</option>
                                    @foreach($categories as $category)
                                        <option value="{{$category->id}}">{{$category->name}}</option>
                                    @endforeach
                                </select>
                                <small class="help-block text-danger">{{ $errors->first('category')}}</small>
                            </div>

                            <div class="col-md-4">
                                <label class="control-label" for="demo-address-input" style="margin-bottom: 10px;">Sub
                                    Category </label>
                                <select name="sub_category" id="sub_category" class="form-control">
                                    <option selected="true" value="">--All--</option>
                                </select>
                                <small class="help-block text-danger">{{ $errors->first('sub_category')}}</small>
                            </div>

                            <div class="col-md-4">
                                <label class="control-label" for="merchant"
                                       style="margin-bottom: 10px;">Merchant</label>
                                <select name="merchant[]" id="merchant" class="form-control select2">
                                    <option selected="true" value="">--All--</option>
                                </select>
                                <small class="help-block text-danger">{{ $errors->first('merchant')}}</small>
                            </div>
                        </div>


                        <div class="form-group">
                            <div class="col-md-4">
                                <label class="control-label" for="demo-address-input" style="margin-bottom: 10px;">Periodic
                                    Date </label><strong class="text-danger">*</strong>
                                <select name="duration" id="duration" class="form-control" required>
                                    <option value="" selected>--Select--</option>
                                    <option value="monthly">Monthly</option>
                                    <option value="quarterly">Quarterly</option>
                                    <option value="semi-annually">Semi Annually</option>
                                    <option value="yearly">Yearly</option>
                                </select>
                            </div>
                            <div class="col-md-4 semi-annually" style="display: none;">
                                <label class="control-label" for="demo-address-input"
                                       style="margin-bottom: 10px;">Semi Annually </label><strong class="text-danger">*</strong>
                                <select name="semi_annual" id="semi-annually" class="form-control">
                                    <option disabled="true" selected="true" value="" hidden>--Select--</option>
                                    <option value="baishakh_asoj">Baishakh - Asoj</option>
                                    <option value="karthik_chaitra">Karthik - Chaitra</option>
                                </select>
                            </div>
                            <div class="col-md-4 quarterly" style="display: none;">
                                <label class="control-label" for="demo-address-input"
                                       style="margin-bottom: 10px;">Quarter </label><strong class="text-danger">*</strong>
                                <select name="quarter" id="quarterly" class="form-control">
                                    <option disabled="true" selected="true" value="" hidden>--Select--</option>
                                    <option value="baishakh_asar">Baishakh - Ashadh</option>
                                    <option value="shrawan_asoj">Shrawan - Asoj</option>
                                    <option value="karthik_poush">Karthik - Poush</option>
                                    <option value="magh_chaitra">Magh - Chaitra</option>
                                </select>
                            </div>
                            <div class="col-md-4 monthly" style="display: none;">
                                <label class="control-label" for="demo-address-input"
                                       style="margin-bottom: 10px;">Month </label>
                                <select name="month" id="monthly" class="form-control">
                                    <option disabled="true" selected="true" value="" hidden>--Select--</option>
                                    <option value="01">Baishakh</option>
                                    <option value="02">Jestha</option>
                                    <option value="03">Ashadh</option>
                                    <option value="04">Shrawan</option>
                                    <option value="05">Bhadau</option>
                                    <option value="06">Asoj</option>
                                    <option value="07">Karthik</option>
                                    <option value="08">Mangsir</option>
                                    <option value="09">Poush</option>
                                    <option value="10">Magh</option>
                                    <option value="11">Falgun</option>
                                    <option value="12">Chaitra</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="control-label" for="demo-address-input" style="margin-bottom: 10px;">
                                    Year
                                </label>
                                
                                <select name="year" class="form-control">
                                    <option value="{{ $year }}" selected>{{ $year }}</option>
                                    @for($i=1; $i<10; $i++)
                                        <option value="{{ $year-$i }}">{{ $year-$i }}</option>
                                    @endfor
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="form-group">
                            <div class="col-md-4">
                                <label class="control-label" style="margin-bottom: 10px;">From Date (B.S.)</label>
                                <input name="nep_from_date" id="nepFromDate" class="form-control" value="{{old('nep_from_date')}}" autocomplete="off">
                            </div>
                            <div class="col-md-4">
                                <label class="control-label" style="margin-bottom: 10px;">To Date (B.S.)</label>
                                <input name="nep_to_date" id="nepToDate" class="form-control" value="{{old('nep_to_date')}}" autocomplete="off">
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="form-group">
                            <div class="col-md-4">
                                <label class="control-label" style="margin-bottom: 10px;">From Date (A.D.)</label>
                                <input name="eng_from_date" id="engFromDate" class="form-control" value="{{old('eng_from_date')}}" autocomplete="off">
                            </div>
                            <div class="col-md-4">
                                <label class="control-label" style="margin-bottom: 10px;">To Date (A.D.)</label>
                                <input name="eng_to_date" id="engToDate" class="form-control" value="{{old('eng_to_date')}}" autocomplete="off">
                            </div>
                        </div>
                    </div>
                    @csrf
                    <div class="form-group">
                        {{--<label class="col-md-3 control-label"></label>--}}
                        <div class="col-md-3" style="margin-left: 13px;">
                            <button type="submit" id="btnSubmit" class="btn btn-block btn-primary">GENERATE
                                INVOICE
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('ext_js')

    <script src="{{ asset('/NepaliDatepicker/nepali.datepicker.v2.2.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/1.1.1/js/bootstrap-multiselect.min.js" ></script>
    <script>

        $("#engFromDate, #engToDate").datepicker({
            dateFormat: 'yy-mm-dd',
            defaultDate: "+1w",
            maxDate: 0,
            changeMonth: true,
            onSelect: function (selectedDate) {
                if (this.id == 'engFromDate') {
                    // var dateMin = $('#engFromDate').datepicker("getDate");
                    // var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate());
                    // $('#engToDate').datepicker("option", "minDate", rMin);
                    $.ajax({
                        headers: {
                            'X-CSRF-Token': $('meta[name="csrf_token"]').attr('content')
                        },
                        type: 'post',
                        url: '{{route('admin.eng_to_nep')}}',
                        data: {
                            date: selectedDate,
                        },
                        success: function (response) {
                            $('#nepFromDate').val(response);
                            npdYearCount: 150
                        }
                    });
                } else if (this.id == 'engToDate') {
                    // var dateMin = $('#engToDate').datepicker("getDate");
                    // var rMax = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate());
                    // $('#engFromDate').datepicker("option", "maxDate", rMax);
                    $.ajax({
                        headers: {
                            'X-CSRF-Token': $('meta[name="csrf_token"]').attr('content')
                        },
                        type: 'post',
                        url: '{{route('admin.eng_to_nep')}}',
                        data: {
                            date: selectedDate,
                        },
                        success: function (response) {
                            $('#nepToDate').val(response);
                            npdYearCount: 150
                        }
                    });
                }
            }
        });

        $('#nepFromDate').nepaliDatePicker({
            npdMonth: true,
            npdYear: true,
            npdYearCount: 100,
            onChange: function () {
                var nepalidob = $('#nepFromDate').val();
                $.ajax({
                    headers: {
                        'X-CSRF-Token': $('meta[name="csrf_token"]').attr('content')
                    },
                    type: 'post',
                    url: '{{route('admin.nep_to_eng')}}',
                    data: {date: nepalidob,},
                    success: function (response) {
                        $('#engFromDate').val(response);
                    }
                });
            }
        });

        $('#nepToDate').nepaliDatePicker({
            npdMonth: true,
            npdYear: true,
            npdYearCount: 100,
            onChange: function () {
                var nepalidob = $('#nepToDate').val();
                $.ajax({
                    headers: {
                        'X-CSRF-Token': $('meta[name="csrf_token"]').attr('content')
                    },
                    type: 'post',
                    url: '{{route('admin.nep_to_eng')}}',
                    data: {date: nepalidob,},
                    success: function (response) {
                        $('#engToDate').val(response);
                    }
                });
            }
        });
        $(document).on('change', '#duration', function() {
            $('.semi-annually').hide();
            $('.quarterly').hide();
            $('.monthly').hide();
            $('#semi-annually').prop('required', false);
            $('#quarterly').prop('required', false);
            $('#monthly').prop('required', false);
            $('.'+$(this).val()).show();
            $('#'+$(this).val()).prop('required', true);
        })

        $(document).on('change', '#category', function () {
            var category_id = $("#category").val();
            $('#sub_category').html('<option value="" selected="true">--All--</option>');
            $('#merchant').html('<option value="" selected="true">--All--</option>');
            $('#merchant').removeAttr('multiple');
            $("#merchant").multiselect('destroy');
            if (category_id) {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                $.ajax({
                    url: '{{ url("admin/sub_category_merchant_list") }}/' + category_id,
                    success: function (data) {
                        // console.log(data);
                        if (data.data == 'sub') {
                            $('#sub_category').html(data.html);
                        } else if (data.data == 'merchant') {
                            $('#merchant').html(data.html);
                            $('#merchant').multiselect({
                                includeSelectAllOption: true
                            })
                            setTimeout(function() {
                                $('#merchant').multiselect("refresh");
                            }, 1000)
                        }
                    }
                });
            }
        });

        $(document).on('change', '#sub_category', function () {
            var sub_category_id = $("#sub_category").val();
            $('#merchant').html('<option value="" selected="true">--All--</option>');
            $("#merchant").multiselect('destroy');
            $('#merchant').removeAttr('multiple');
            if (sub_category_id) {
                $('#merchant').attr('multiple','multiple');
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                $.ajax({
                    url: '{{ url("admin/sub_category/get_merchant_list") }}/' + sub_category_id,
                    success: function (data) {
                        $('#merchant').html(data.html);
                        $('#merchant').multiselect({
                            includeSelectAllOption: true
                        })
                        setTimeout(function() {
                            $('#merchant').multiselect("refresh");
                        }, 1000)
                    }
                });
            }
        });

    </script>

@endsection