@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="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="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.update', $config->id)}}" 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}}" @if($config->category_id == $category->id) selected @endif>{{$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>
                                    @foreach($sub_categories as $category)
                                        <option value="{{$category->id}}" @if($config->sub_category_id == $category->id) selected @endif>{{$category->name}}</option>
                                    @endforeach
                                </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" @if($config->pricing == 'subject_pricing') selected @endif>Subject Pricing</option>
                                    <option value="flat_pricing" @if($config->pricing == 'flat_pricing') selected @endif>Flat Pricing</option>
                                </select>
                               <small class="help-block text-danger"></small>
                            </div>
                            <div class="subject-pricing" @if($config->pricing == 'flat_pricing') style="display: none;" @endif>
                                <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="api_id" id="subject-api-id" class="form-control" @if($config->pricing == 'subject_pricing') required @endif>
                                        <option value="" selected="true" hidden>--Select--</option>
                                        @foreach($subjectApis as $api)
                                            <option value="{{$api->id}}" @if($config->api_id == $api->id) selected @endif>{{$api->name}}</option>
                                        @endforeach
                                    </select>
                                    <small class="help-block text-danger"></small>
                                </div>
                            </div>
                            <div class="form-group flat-pricing" @if($config->pricing == 'subject_pricing') style="display: none;" @endif>
                                <div class="flat-api-block">
                                    <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 @if($config->type == 1) required @endif>
                                            @php
                                                $products = json_decode($config->product_id ?? '[]', true);
                                            @endphp
                                            @foreach($flatApis as $api)
                                                <option value="{{$api->id}}" @if( $products && in_array($api->id, $products) ) selected @endif>{{$api->name}}</option>
                                            @endforeach
                                        </select>
                                        <small class="help-block text-danger"></small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group flat-pricing" @if($config->pricing == 'subject_pricing') style="display: none;" @endif>
                           <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" @if($config->duration == "monthly") selected @endif>Monthly</option>
                                    <option value="quarterly" @if($config->duration == "quarterly") selected @endif>Quarterly</option>
                                    <option value="semi-annually" @if($config->duration == "semi-annually") selected @endif>Semi Annually</option>
                                    <option value="yearly" @if($config->duration == "yearly") selected @endif>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" @if($config->period == 1) checked @endif>
                                    <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" @if($config->period == 0) checked @endif>
                                    <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="{{round($config->rate,2)}}" step="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" @if($config->status == 1) checked @endif>
                                    <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" @if($config->status == 0) checked @endif>
                                    <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">UPDATE</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" hidden>--All--</option>');
            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)
            }
        });
        $(document).on('change', '#type', function () {
            if ($(this).val() == 1) {
                $(".flat-product-block").hide()
                $(".flat-api-block").show()
                $('#flat-api-id').prop('required', true)
            } else {
                $(".flat-product-block").show()
                $(".flat-api-block").hide()
                $('#flat-api-id').prop('required', false)
            }
        });
    </script>
@endsection