@include('admin.layouts.header')
@include('admin.layouts.sidebar')
<style>
    ul.comment_section > li{
        padding-bottom: 5px;
        border: 1px #00c5dc;
        border-bottom-style: solid;
    }
    ul.comment_section > li > div{
        font-size: 13px;
    }
    ul.comment_section > li > div > span{
        padding-left: 12px;
        font-size: 10px;
    }
</style>
<div class="m-grid__item m-grid__item--fluid m-wrapper">
    <!-- BEGIN: Subheader -->
    <div class="m-subheader ">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    Risk Based Pricing
                </h3>
                <ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
                    <li class="m-nav__item m-nav__item--home">
                        <a href="{{ asset('/') }}" class="m-nav__link m-nav__link--icon">
                            <i class="m-nav__link-icon la la-home"></i>
                        </a>
                    </li>
                    <li class="m-nav__separator">
                        -
                    </li>
                    <li class="m-nav__item">
                        <a href="{{ asset('admin/merchant/risk-based-pricing')}}" class="m-nav__link">
                            <span class="m-nav__link-text">
                                 Module
                            </span>
                        </a>
                    </li>
                    <li class="m-nav__separator">
                        -
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- END: Subheader -->
    <div class="m-content">
    <!--  Error handling -->
        @if($errors->any())
            @foreach($errors->all() as $key => $error)
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
                    {{$error}}
                </div>
            @endforeach
        @endif
        @if(Session::has('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
                {{ Session::get('success') }}
            </div>
        @endif
        @if(Session::has('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
            {{ Session::get('error') }}
        </div>
        @endif

        <div class="m-portlet m-portlet--mobile">
            <!--begin::Sub Module Header-->
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <span class="m-portlet__head-icon">
                            <i class="flaticon-add"></i>
                        </span>
                        <h3 class="m-portlet__head-text">
                            Bureau Band
                        </h3>
                    </div>
                </div>
            </div>
            <!--end::Sub Module Header-->

            <!--begin::Band Customisation-->
            <div class="m-portlet__body">
                <div class="m-form__section m-form__section--first">
                    <input type="hidden" name="_token" value="{{csrf_token()}}" />
                    <div class="col-md-12 row">
                        <div class="col-lg-3"></div>
                        <div class="col-lg-2">MIN</div>
                        <div class="col-lg-2">MAX</div>
                        <div class="col-lg-2">Increase in PF</div>
                        <div class="col-lg-2">Max Discount in PF</div>
                    </div>
                    <?php $count_of_riskConfig = count($riskBasedConfiguration)?>
                    <div class="outer-view">
                        @foreach($riskBasedConfiguration as $_range_index => $_range)
                            <div class="group-of-view main-view-rbp form-group m-form__group row" id="band_{!! $_range_index+1 !!}" data-id="{!! $_range->id or 0 !!}">
                                <label class="col-lg-3 col-form-label">
                                    Bureau Band {!! $_range_index + 1 !!}: <span style="font-size: 10px;color: red;">*</span>
                                    <div class="band-bureau-view"></div>
                                </label>
                                <div class="range-view-div col-lg-8 row">
                                    <div class="col-lg-3">
                                        <input type="number" value="{!! $_range->min or 0 !!}" data-pre="{!! $_range->min or 0 !!}"  data-type="min" placeholder="Min Range" name="min_range" class="range-view form-control"/>
                                    </div>
                                    <div class="col-lg-3">
                                        <input type="number" value="{!! $_range->max or 0 !!}" data-pre="{!! $_range->max or 0 !!}" data-type="max" placeholder="Max Range" name="max_range" class="range-view form-control"/>
                                    </div>
                                    <div class="col-lg-3" style="display: flex;height: fit-content;">
                                        <input type="text" value="{!! $_range->increase_pf_percent or 0 !!}" data-pre="{!! $_range->increase_pf_percent or 0 !!}" placeholder="PF %" name="increase_pf_percent" class="form-control" onkeyup="if (/[^0-9.]/g.test(this.value)) this.value = this.value.replace(/[^0-9.]/g,'')"/>
                                        <span style="padding: 10px">%</span>
                                    </div>
                                    <div class="col-lg-3" style="display: flex;height: fit-content;">
                                        <input type="text" value="{!! $_range->discount_pf_percent or 0 !!}" data-pre="{!! $_range->discount_pf_percent or 0 !!}" placeholder="Discount %" name="discount_pf_percent" class="form-control" onkeyup="if (/[^0-9.]/g.test(this.value)) this.value = this.value.replace(/[^0-9.]/g,'')"/>
                                        <span style="padding: 10px">%</span>
                                    </div>
                                </div>
                                @if($_range_index+1 == $count_of_riskConfig)
                                    <div class="col-lg-1 add-more-view-p" style="margin-top: 6px;">
                                        <i class="add-more-view-old fa fa-plus-circle" style="font-size: 25px;"></i>
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
            <!--end::Band Customisation-->

            <!--begin::Change Log-->
            <div class="m-portlet__body">
                <div class="panel-group">
                    <div class="panel panel-default">
                        <a data-toggle="collapse" href="#change_logs" id="change_logs_panel">
                            <div class="panel-heading" style="background: #ddd;padding: 10px;color: #666;border: solid black 0.5px;">
                                <h6 class="panel-title" style="margin: 5px 10px;">
                                    Change Log
                                    <div style="float: right;margin-right: 14px;"><i id=log_logo class="fa fa-angle-down" style="font-size: 24px;"></i></div>
                                </h6>
                            </div>
                        </a>
                        <div id="change_logs" class="panel-collapse collapse" style="border: solid black 0.5px;">
                            <div class="panel-body" style="overflow: scroll;max-height: 300px;">
                                <table class="table table-hover table-bordered" id="band_log_view" style="margin-bottom: 0px;text-align: center">
                                    <thead>
                                    <tr style="background-color: #eee">
                                        <th>Bureau Band</th>
                                        <th>Changes</th>
                                        <th>When</th>
                                        <th>Who</th>
                                    </tr>
                                    </thead>
                                    <?php $i_key = 1; ?>
                                    @foreach($range as $_range)
                                        <?php
                                            $name = \App\User::where('id', $_range['updated_by'])->first(['name']);
                                            $u_name = $name->name ?? '-';
                                        ?>
                                        <tbody>
                                            <tr>
                                                <td>{!! $_range['config_id'] !!}</td>
                                                <td>
                                                    <span>Min: {!! $_range['min'] or '-' !!}</span>
                                                    <span>Max: {!! $_range['max'] or '-' !!}</span>
                                                    <span>PF: {!! $_range['increase_pf_percent'] or '-' !!}</span>
                                                    <span>Discount: {!! $_range['discount_pf_percent'] or '-' !!}</span>
                                                </td>
                                                <td>{!! $_range['created_at'] or '-' !!}</td>
                                                <td>{!! $u_name or $_range['updated_by'] !!}</td>
                                            </tr>
                                        </tbody>
                                    @endforeach
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!--end::Change Log-->

            <!--begin::Form submit-->
            <div class="m-portlet__foot m-portlet__foot--fit" style="padding: 10px;">
                @if(!isset($merchantModule->id) || (isset($merchantModule->id) && \Illuminate\Support\Facades\Session::has('Merchant_Module_Update|1-0-4-2')))
                <div class="m-form__actions m-form__actions">
                    <button type="submit" class="btn btn-primary">
                        Submit
                    </button>
                    <button type="reset" onclick="window.history.back()" class="btn btn-secondary">
                        Cancel
                    </button>
                </div>
                @endif
            </div>
            <!--end::Form submit-->
        </div>
    </div>
</div>


@include("admin.layouts.footer")
{{--<script src="https://cdn.datatables.net/2.0.8/js/dataTables.js"></script>--}}
<script>
$(document).ready(function(){
    // new DataTable('#band_log_view');

   $('#change_logs_panel').click(function() {
       if($('#log_logo').hasClass('fa-angle-down')) {
           $('#log_logo').removeClass('fa-angle-down');
           $('#log_logo').addClass('fa-angle-up');
       }else{
           $('#log_logo').removeClass('fa-angle-up');
           $('#log_logo').addClass('fa-angle-down');
       }
   });

   $(document).on("click", '.add-more-view, .add-more-view-old', function(){

       if($(this).hasClass('fa-minus-circle')){
           $(this).closest(".group-of-view").remove();
           return true;
       }

       if($(this).hasClass('add-more-view-old')){
           $(this).removeClass('fa-plus-circle');
       }

       let view = $(".add-more-view-p .add-more-view");

       view.removeClass('fa-plus-circle').addClass('fa-minus-circle');

       let _count  = $('.group-of-view').length + 1;
       $(".outer-view").append(
           '<div id="band_' + _count + '" class="group-of-view form-group m-form__group row">' +
           '<label class="col-lg-3 col-form-label">' +
           'Bureau Band ' + _count + ': <span style="font-size: 10px;color: red;">*</span> <div class="band-bureau-view"></div> </label>'+
           '<div class="range-view-div col-lg-8 row">' +
           $('.range-view-div').html() +
           '</div>' +
           '<div class="col-lg-1 add-more-view-p" style="margin-top: 6px;"> ' +
            '<i class="add-more-view fa fa-plus-circle" style="font-size: 25px;"></i>' +
           '</div></div></div>'
       );

       //Remove data from newly added rows
       let event = $("div[id=band_"+_count+"]");
       event.find('input[name="min_range"]').val('')
       event.find('input[name="max_range"]').val('')
       event.find('input[name="increase_pf_percent"]').val('')
       event.find('input[name="discount_pf_percent"]').val('')

       event.find('input[name="min_range"]').attr('data-pre', '')
       event.find('input[name="max_range"]').attr('data-pre', '')
       event.find('input[name="increase_pf_percent"]').attr('data-pre', '')
       event.find('input[name="discount_pf_percent"]').attr('data-pre', '')
       event.find('.range-view-div').attr('data-old', '');

   });

    function checkConflictingRanges(ranges) {
        // Sort ranges based on the starting value
        ranges.sort(function(a, b) {
            return a[0] - b[0];
        });

        // Check for conflicts
        for (let i = 1; i < ranges.length; i++) {
            let currentRange = ranges[i];
            let previousRange = ranges[i - 1];

            // If the start of the current range is less than the end of the previous range, there is a conflict
            if (currentRange['min_range'] < previousRange['max_range'] || currentRange['min_range'] === previousRange['max_range']) {
                return {
                    result: false,
                    conflictingRange: currentRange['min_range'],
                    conflictWith: previousRange['max_range']
                };
            }else if (currentRange['min_range'] === previousRange['min_range']) {
                return {
                    result: false,
                    conflictingRange: currentRange['min_range'],
                    conflictWith: previousRange['min_range']
                };
            }else if (currentRange['max_range'] === previousRange['max_range']) {
                return {
                    result: false,
                    conflictingRange: currentRange['max_range'],
                    conflictWith: previousRange['max_range']
                };
            }
        }

        // If no conflicts are found
        return {
            result: true,
            conflictingRange: null,
            conflictWith: null
        };
    }


    function setRequestData(){
        let ranges = [];
        let incorrect_band = false;

        $(".group-of-view").each(function(){
            let row_id = $(this).attr('data-id') ?? 0;
            let min_range = $(this).find('input[name="min_range"]').val();
            let pre_min_range = $(this).find('input[name="min_range"]').attr('data-pre');
            let max_range = $(this).find('input[name="max_range"]').val();
            let pre_max_range = $(this).find('input[name="max_range"]').attr('data-pre');
            let increase_pf_percent = $(this).find('input[name="increase_pf_percent"]').val();
            let pre_increase_pf_percent = $(this).find('input[name="increase_pf_percent"]').attr('data-pre');
            let discount_pf_percent = $(this).find('input[name="discount_pf_percent"]').val();
            let pre_discount_pf_percent = $(this).find('input[name="discount_pf_percent"]').attr('data-pre');

            if(min_range > max_range){
                incorrect_band = true;
                return false;
            }


            if(min_range !== pre_min_range || max_range !== pre_max_range || increase_pf_percent !== pre_increase_pf_percent || discount_pf_percent !== pre_discount_pf_percent) {
                if (min_range !== '' && max_range !== '' && increase_pf_percent !== '' && discount_pf_percent !== '' &&
                    (min_range !== max_range || (min_range !== 0 && max_range !== 0))) {
                    ranges.push({
                        'row_id': row_id,
                        'min_range': min_range,
                        'pre_min_range': pre_min_range,
                        'max_range': max_range,
                        'pre_max_range': pre_max_range,
                        'increase_pf_percent': increase_pf_percent,
                        'pre_increase_pf_percent': pre_increase_pf_percent,
                        'discount_pf_percent': discount_pf_percent,
                        'pre_discount_pf_percent': pre_discount_pf_percent,
                    });
                }
            }
        });

        if(incorrect_band){
            alert(`Score Bands defined incorrectly.`)
        }

        // Check for conflicts
        let checkResult = checkConflictingRanges(ranges);

        if (checkResult.result) {
            return ranges;
        } else {
            alert(`Conflict found between ranges ${JSON.stringify(checkResult.conflictingRange)} and ${JSON.stringify(checkResult.conflictWith)}.`);
            return '';
        }

   }

   $("button[type='submit']").click(function(){
       let _data = setRequestData();
       if(_data === ''){
           return false;
       }
       // console.log(_data);

       let id = '<?php echo Auth::user()->id; ?>';
       let _token = '<?php echo csrf_token(); ?>';
       let data = {_token: _token, user_id: id, data: _data};
       console.log(data);
       $.ajax({
           url: "/admin/merchant/risk-based-pricing/update",
           method: 'POST',
           data: data,
           success: function(response) {
               alert(response.message);
               window.location.reload();
           }
       });
   });

});
</script>