@extends('layouts.admin')

@section('ext_css')
    <style type="text/css">
        /* Chrome, Safari, Edge, Opera */
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Firefox */
        input[type=number] {
            -moz-appearance: textfield;
        }
    </style>
    <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, 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.config') }}">Billing Configure </a></li>
            <li class="active"> Create</li>
        </ol>
    </div>

    @if(session('success'))
        <div class="row">
            <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>
        </div>
    @elseif(session('failure'))
        <div class="row">
            <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>
        </div>
    @endif

    <div class="row">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"> Create New Billing Configure
                    <span class="pull-right"><strong class="text-danger">*</strong> Required Fields</span>
                </h3>
            </div>
            <div class="panel-body">
            	<div class="error-message-jsx"></div>
            	<form action="{{route('admin.billing.config.store')}}" id="product-store" method="POST" class="form-horizontal form-padding" enctype="multipart/form-data">
            		@csrf
                   	<div class="col-xs-12 col-sm-12 col-md-6 col-lg-12">
                       	<div class="form-group">
                           <label class="col-md-2 control-label" for="category_id">Category <span class="text-danger">*</span></label>
                           <div class="col-md-4">
                               <select name="category_id" id="category_id" class="form-control">
                                    <option value="" selected="true">--All--</option>
                                    @foreach($categories as $category)
                                        <option value="{{$category->id}}">{{$category->name}}</option>
                                    @endforeach
                                </select>
                               <small class="help-block text-danger"></small>
                           </div>
                           <label class="col-md-2 control-label" for="sub_category_id">Sub Category </label>
                           <div class="col-md-4">
                               <select name="sub_category_id" id="sub_category_id" class="form-control">
                                    <option value="" selected="true">--All--</option>
                                </select>
                               <small class="help-block text-danger"></small>
                           </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label" for="pricing">Pricing <span class="text-danger">*</span></label>
                            <div class="col-md-4">
                               <select name="pricing" id="pricing" class="form-control" required>
                                    <option value="subject_pricing">Subject Pricing</option>
                                    <option value="flat_pricing">Flat Pricing</option>
                                </select>
                               <small class="help-block text-danger"></small>
                            </div>
                            <div class="subject-pricing">
                                <label class="col-md-2 control-label" for="subject-api-id">API <span class="text-danger">*</span></label>
                                <div class="col-md-4">
                                    <select name="subject_api_id" id="subject-api-id" class="form-control" required>
                                        <option value="" selected="true" hidden>--Select--</option>
                                        @foreach($subjectApis as $api)
                                            <option value="{{$api->id}}">{{$api->name}}</option>
                                        @endforeach
                                    </select>
                                    <small class="help-block text-danger"></small>
                                </div>
                            </div>
                            <div class="flat-pricing" style="display: none;">
                                <label class="col-md-2 control-label" for="api-id">Product <span class="text-danger">*</span></label>
                                <div class="col-md-4">
                                    <select name="flat_api_id[]" id="flat-api-id" class="form-control" multiple>
                                        @foreach($flatApis as $api)
                                            <option value="{{$api->id}}">{{$api->name}}</option>
                                        @endforeach
                                    </select>
                                    <small class="help-block text-danger"></small>
                                </div>
                            </div>
                        </div>
                        <div class="form-group flat-pricing" style="display: none;">
                            <label class="col-md-2 control-label" for="duration">Duration <span class="text-danger">*</span></label>
                            <div class="col-md-4">
                               <select name="duration" id="duration" class="form-control">
                                    <option value="" selected="true" hidden>--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>
                               <small class="help-block text-danger"></small>
                           </div>
                           <label class="col-md-2 control-label" for="period">Period <span class="text-danger">*</span></label>
                           <div class="col-md-4">
                               <div class="checkbox">
                                    <input id="period" class="i-checks" type="radio" name="period" value="1" checked>
                                    <label for="period" class="text-left">Start of the month</label>
                                    <span style="margin-left: 10px;"></span>
                                    <input id="period-2" class="i-checks" type="radio" name="period" value="0">
                                    <label for="period-2">End of the month</label>
                                </div>
                           </div>
                        </div>
                        <div class="form-group">
                           <label class="col-md-2 control-label" for="product">Rate <span class="text-danger">*</span></label>
                           <div class="col-md-4">
                                <input type="number" name="rate" class="form-control" required value="{{old('rate', 0.00)}}" step="0.01" min="0.01">
                               <small class="help-block text-danger"></small>
                           </div>
                           	<label class="col-md-2 control-label" for="demo-contact-input">Status <span class="text-danger">*</span></label>
                           	<div class="col-md-4">
                               	<div class="checkbox">
                                    <input id="status" class="i-checks" type="radio" name="status" value="1" checked>
                                    <label for="status" class="text-left">Active</label>
                                    <span style="margin-left: 10px;"></span>
                                    <input id="status-2" class="i-checks" type="radio" name="status" value="0">
                                    <label for="status-2">Inactive</label>
                                </div>
                           	</div>
                       	</div>
                        <div class="form-group">
                           <label class="col-md-2 control-label"></label>
                           <div class="col-md-4">
                               <button class="btn btn-block btn-success pw-submit">CREATE</button>
                           </div>
                       </div>
                   </div>
               </form>
            </div>
        </div>
    </div>
@endsection

@section('ext_js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/1.1.1/js/bootstrap-multiselect.min.js" ></script>
    <script type="text/javascript">
        $("#flat-api-id").multiselect({
            includeSelectAllOption: true
        });
        $(document).on('change', '#category_id', function () {
            var category_id = $("#category_id").val();
            $('#sub_category_id').html('<option value="" selected="true">--All--</option>');
            $('#sub_category_id').prop('required', false);
            if (category_id) {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: '{{ url("admin/sub_category_list") }}/' + category_id,
                    success: function (data) {
                        $('#sub_category_id').html(data.html);
                    }
                });
            }
        });
        $(document).on('change', '#pricing', function () {
            if ($(this).val() == 'flat_pricing') {
                $(".subject-pricing").hide()
                $(".flat-pricing").show()
                $('#subject-api-id').prop('required', false)
                $('#duration').prop('required', true)
                $('#flat-api-id').prop('required', true)
            } else {
                $(".subject-pricing").show()
                $(".flat-pricing").hide()
                $('#subject-api-id').prop('required', true)
                $('#duration').prop('required', false)
                $('#flat-api-id').prop('required', false)
            }
        });
    </script>
@endsection