@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;
    }
    
    .disabled-tooltip-wrapper > * {
        pointer-events: none !important;
    }

    /* Tabular UI for Band Customization */
    #toast-container > div {
        opacity: 1 !important;
    }
    
    .band-table th {
        font-weight: 600;
        color: #575962;
        background: #f4f5f8;
        border-bottom: 2px solid #ebedf2 !important;
        text-align: center;
        vertical-align: middle !important;
    }
    .band-table td {
        vertical-align: middle !important;
        text-align: center;
        transition: background-color 0.3s;
    }
    .band-row {
        transition: opacity 0.3s ease;
    }
    .band-disabled {
        background-color: #fdfdfd;
        opacity: 0.6;
    }
    .input-disabled {
        opacity: 0.4;
        pointer-events: none;
    }
    .trendy-switch {
        position: relative;
        display: inline-block;
        width: 34px;
        height: 18px;
    }
    .trendy-switch input { 
        opacity: 0;
        width: 0;
        height: 0;
    }
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: 34px;
    }
    .slider:before {
        position: absolute;
        content: "";
        height: 12px;
        width: 12px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: 50%;
    }
    input:checked + .slider {
        background-color: #00c5dc;
    }
    input:focus + .slider {
        box-shadow: 0 0 1px #00c5dc;
    }
    input:checked + .slider:before {
        -webkit-transform: translateX(16px);
        -ms-transform: translateX(16px);
        transform: translateX(16px);
    }

    /* Master Switch for Row Level Control */
    .master-switch {
        position: relative;
        display: inline-block;
        width: 48px;
        height: 24px;
    }
    .master-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    .master-slider {
        position: absolute;
        cursor: pointer;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: #e2e5ec;
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: 24px;
        border: 2px solid #ccc;
    }
    .master-slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: 50%;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    input:checked + .master-slider {
        background-color: #34bfa3;
        border-color: #34bfa3;
    }
    input:focus + .master-slider {
        box-shadow: 0 0 2px #34bfa3;
    }
    input:checked + .master-slider:before {
        -webkit-transform: translateX(24px);
        -ms-transform: translateX(24px);
        transform: translateX(24px);
    }
    
    .add-band-btn-container {
        display: flex;
        justify-content: center;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .add-band-btn {
        border: 2px dashed #00c5dc;
        color: #00c5dc;
        background: transparent;
        padding: 8px 30px;
        border-radius: 20px;
        font-weight: 600;
        font-size: 13px;
        cursor: pointer;
        transition: all 0.3s;
        outline: none;
    }
    .add-band-btn:hover {
        background: #00c5dc;
        color: white;
    }
    .input-group-text.switch-addon {
        padding: 0 8px;
        display: flex;
        align-items: center;
        background-color: #fff;
    }
</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
        
        @if(Session::has('pincode_errors'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
                <strong>Validation Failed:</strong>
                <div style="max-height: 220px; overflow-y: auto; margin-top: 10px;">
                    <ul style="margin-bottom: 0; padding-left: 20px;">
                        @foreach(Session::get('pincode_errors') as $pincodeError)
                            <li>{{ $pincodeError }}</li>
                        @endforeach
                    </ul>
                </div>
            </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 class="m-portlet__head-tools">
                    <a data-toggle="collapse" href="#change_logs" class="btn btn-info m-btn m-btn--icon m-btn--pill">
                        <span>
                            <i class="fa fa-history"></i>
                            <span>Change Log</span>
                        </span>
                    </a>
                </div>
            </div>
            <!--end::Sub Module Header-->
            <div id="change_logs" class="panel-collapse collapse" style="margin: 20px; 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>Event</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>{!! $_range['event'] or '-' !!}</td>
                                    <td>
                                        <span>Min: {!! $_range['min'] or '-' !!}</span>
                                        <span>Max: {!! $_range['max'] or '-' !!}</span>
                                        <span>PF: {!! $_range['increase_pf_percent'] or '-' !!}</span>
                                        <span>ROI: {!! $_range['risky_roi_percentage'] 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>

            <!--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="table-responsive" style="padding-top: 10px;">
                        <table class="table table-bordered m-table m-table--head-bg-light band-table" style="min-width: 900px;">
                            <thead>
                                <tr>
                                    <th width="8%">Band</th>
                                    <th width="12%">Min Score</th>
                                    <th width="12%">Max Score</th>
                                    <th width="20%">Increase in PF</th>
                                    <th width="14%">Max Discount PF</th>
                                    <th width="20%">Increase in ROI</th>
                                    <th width="14%">Manage</th>
                                </tr>
                            </thead>
                            <tbody class="outer-view">
                                @foreach($riskBasedConfiguration as $_range_index => $_range)
                                    <tr class="group-of-view band-row" id="band_{!! $_range_index+1 !!}" data-id="{!! $_range->id or 0 !!}">
                                        <td class="align-middle font-weight-bold" style="color: #3f4047;">
                                            <span class="band-index">{!! $_range_index + 1 !!}</span>
                                        </td>
                                        <td class="align-middle">
                                            <input type="number" name="min_range" class="form-control form-control-sm text-center" placeholder="Min" value="{!! $_range->min or 0 !!}" data-pre="{!! $_range->min or 0 !!}" min="0" step="1" onkeyup="if (/[^0-9]/g.test(this.value)) this.value = this.value.replace(/[^0-9]/g,'')">
                                        </td>
                                        <td class="align-middle">
                                            <input type="number" name="max_range" class="form-control form-control-sm text-center" placeholder="Max" value="{!! $_range->max or 0 !!}" data-pre="{!! $_range->max or 0 !!}" min="0" step="1" onkeyup="if (/[^0-9]/g.test(this.value)) this.value = this.value.replace(/[^0-9]/g,'')">
                                        </td>
                                        <td class="align-middle pf-section">
                                            <div class="input-group input-group-sm">
                                                <div class="input-group-prepend" title="Activate Increase in PF">
                                                    <span class="input-group-text switch-addon">
                                                        <label class="trendy-switch mb-0" @if(!\Illuminate\Support\Facades\Session::has('Bureau_Configuration_Update|-2-0')) title="You do not have permission to update bureau configurations." style="cursor: not-allowed;" @else title="Toggle PF Dependency" @endif>
                                                            <input type="checkbox" name="is_risky_pf_active" class="pf-toggle" value="1" data-pre="{!! !isset($_range->is_risky_pf_active) || $_range->is_risky_pf_active ? 1 : 0 !!}" {!! !isset($_range->is_risky_pf_active) || $_range->is_risky_pf_active ? 'checked' : '' !!} @if(!\Illuminate\Support\Facades\Session::has('Bureau_Configuration_Update|-2-0')) disabled @endif>
                                                            <span class="slider"></span>
                                                        </label>
                                                    </span>
                                                </div>
                                                <input type="text" name="increase_pf_percent" class="form-control text-center input-to-disable" placeholder="PF %" value="{!! $_range->increase_pf_percent or 0 !!}" data-pre="{!! $_range->increase_pf_percent or 0 !!}" onkeyup="if (/[^0-9.]/g.test(this.value)) this.value = this.value.replace(/[^0-9.]/g,'')">
                                                <div class="input-group-append"><span class="input-group-text input-to-disable">%</span></div>
                                            </div>
                                        </td>
                                        <td class="align-middle">
                                            <div class="input-group input-group-sm">
                                                <input type="text" name="discount_pf_percent" class="form-control text-center input-to-disable" placeholder="Discount %" value="{!! $_range->discount_pf_percent or 0 !!}" data-pre="{!! $_range->discount_pf_percent or 0 !!}" onkeyup="if (/[^0-9.]/g.test(this.value)) this.value = this.value.replace(/[^0-9.]/g,'')">
                                                <div class="input-group-append"><span class="input-group-text input-to-disable">%</span></div>
                                            </div>
                                        </td>
                                        <td class="align-middle roi-section">
                                            <div class="input-group input-group-sm">
                                                <div class="input-group-prepend" title="Activate Increase in ROI">
                                                    <span class="input-group-text switch-addon">
                                                        <label class="trendy-switch mb-0" @if(!\Illuminate\Support\Facades\Session::has('Bureau_Configuration_Update|-2-0')) title="You do not have permission to update bureau configurations." style="cursor: not-allowed;" @else title="Toggle ROI Dependency" @endif>
                                                            <input type="checkbox" name="is_risky_roi_active" class="roi-toggle" value="1" data-pre="{!! !isset($_range->is_risky_roi_active) || $_range->is_risky_roi_active ? 1 : 0 !!}" {!! !isset($_range->is_risky_roi_active) || $_range->is_risky_roi_active ? 'checked' : '' !!} @if(!\Illuminate\Support\Facades\Session::has('Bureau_Configuration_Update|-2-0')) disabled @endif>
                                                            <span class="slider"></span>
                                                        </label>
                                                    </span>
                                                </div>
                                                <input type="text" name="risky_roi_percentage" class="form-control text-center input-to-disable" placeholder="ROI %" value="{!! $_range->risky_roi_percentage or 0 !!}" data-pre="{!! $_range->risky_roi_percentage or 0 !!}" onkeyup="if (/[^0-9.]/g.test(this.value)) this.value = this.value.replace(/[^0-9.]/g,'')">
                                                <div class="input-group-append"><span class="input-group-text input-to-disable">%</span></div>
                                            </div>
                                        </td>
                                        <td class="align-middle text-center" style="white-space: nowrap;">
                                            <div class="d-flex justify-content-center align-items-center">
                                                <label class="master-switch mb-0 mr-3" @if(!\Illuminate\Support\Facades\Session::has('Bureau_Configuration_Update|-2-0')) title="You do not have permission to update bureau configurations." style="cursor: not-allowed;" @else title="Toggle Band Status" @endif>
                                                    <input type="checkbox" name="status" class="band-status-toggle" value="1" data-pre="{!! !isset($_range->status) || $_range->status ? 1 : 0 !!}" {!! !isset($_range->status) || $_range->status ? 'checked' : '' !!} @if(!\Illuminate\Support\Facades\Session::has('Bureau_Configuration_Update|-2-0')) disabled @endif>
                                                    <span class="master-slider"></span>
                                                </label>
                                                @if(\Illuminate\Support\Facades\Session::has('Bureau_Configuration_Update|-2-0'))
                                                <button type="button" class="btn btn-outline-danger btn-sm m-btn m-btn--icon m-btn--icon-only m-btn--pill remove-band-btn" title="Remove Band" style="width: 25px; height: 25px;">
                                                    <i class="fa fa-trash" style="font-size: 12px;"></i>
                                                </button>
                                                @else
                                                <span style="display: inline-block; cursor: not-allowed;" title="You do not have permission to delete bureau configurations.">
                                                    <button type="button" class="btn btn-outline-danger btn-sm m-btn m-btn--icon m-btn--icon-only m-btn--pill" disabled style="width: 25px; height: 25px; pointer-events: none;">
                                                        <i class="fa fa-trash" style="font-size: 12px;"></i>
                                                    </button>
                                                </span>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    
                    <div class="add-band-btn-container">
                        @if(\Illuminate\Support\Facades\Session::has('Bureau_Configuration_Update|-2-0'))
                        <button type="button" class="add-band-btn" id="add_new_band_btn">
                            <i class="fa fa-plus mr-2"></i> Add New Band
                        </button>
                        @else
                        <span style="display: inline-block; cursor: not-allowed;" title="You do not have permission to add new bureau configurations.">
                            <button type="button" class="add-band-btn" disabled style="pointer-events: none; opacity: 0.6;">
                                <i class="fa fa-plus mr-2"></i> Add New Band
                            </button>
                        </span>
                        @endif
                    </div>

                    <!-- Template for new band -->
                    <table style="display: none;">
                        <tbody id="band_template">
                            <tr class="group-of-view band-row" data-id="0">
                                <td class="align-middle font-weight-bold" style="color: #3f4047;">
                                    <span class="band-index"></span>
                                </td>
                                <td class="align-middle">
                                    <input type="number" name="min_range" class="form-control form-control-sm text-center" placeholder="Min" value="" data-pre="" min="0" step="1" onkeyup="if (/[^0-9]/g.test(this.value)) this.value = this.value.replace(/[^0-9]/g,'')">
                                </td>
                                <td class="align-middle">
                                    <input type="number" name="max_range" class="form-control form-control-sm text-center" placeholder="Max" value="" data-pre="" min="0" step="1" onkeyup="if (/[^0-9]/g.test(this.value)) this.value = this.value.replace(/[^0-9]/g,'')">
                                </td>
                                <td class="align-middle pf-section">
                                    <div class="input-group input-group-sm">
                                        <div class="input-group-prepend" title="Activate Increase in PF">
                                            <span class="input-group-text switch-addon">
                                                <label class="trendy-switch mb-0" @if(!\Illuminate\Support\Facades\Session::has('Bureau_Configuration_Update|-2-0')) title="You do not have permission to update bureau configurations." style="cursor: not-allowed;" @else title="Toggle PF Dependency" @endif>
                                                    <input type="checkbox" name="is_risky_pf_active" class="pf-toggle" value="1" data-pre="" checked @if(!\Illuminate\Support\Facades\Session::has('Bureau_Configuration_Update|-2-0')) disabled @endif>
                                                    <span class="slider"></span>
                                                </label>
                                            </span>
                                        </div>
                                        <input type="text" name="increase_pf_percent" class="form-control text-center input-to-disable" placeholder="PF %" value="" data-pre="" onkeyup="if (/[^0-9.]/g.test(this.value)) this.value = this.value.replace(/[^0-9.]/g,'')">
                                        <div class="input-group-append"><span class="input-group-text input-to-disable">%</span></div>
                                    </div>
                                </td>
                                <td class="align-middle">
                                    <div class="input-group input-group-sm">
                                        <input type="text" name="discount_pf_percent" class="form-control text-center input-to-disable" placeholder="Discount %" value="" data-pre="" onkeyup="if (/[^0-9.]/g.test(this.value)) this.value = this.value.replace(/[^0-9.]/g,'')">
                                        <div class="input-group-append"><span class="input-group-text input-to-disable">%</span></div>
                                    </div>
                                </td>
                                        <td class="align-middle roi-section">
                                    <div class="input-group input-group-sm">
                                        <div class="input-group-prepend" title="Activate Increase in ROI">
                                            <span class="input-group-text switch-addon">
                                                <label class="trendy-switch mb-0" @if(!\Illuminate\Support\Facades\Session::has('Bureau_Configuration_Update|-2-0')) title="You do not have permission to update bureau configurations." style="cursor: not-allowed;" @else title="Toggle ROI Dependency" @endif>
                                                    <input type="checkbox" name="is_risky_roi_active" class="roi-toggle" value="1" data-pre="" checked @if(!\Illuminate\Support\Facades\Session::has('Bureau_Configuration_Update|-2-0')) disabled @endif>
                                                    <span class="slider"></span>
                                                </label>
                                            </span>
                                        </div>
                                        <input type="text" name="risky_roi_percentage" class="form-control text-center input-to-disable" placeholder="ROI %" value="" data-pre="" onkeyup="if (/[^0-9.]/g.test(this.value)) this.value = this.value.replace(/[^0-9.]/g,'')">
                                        <div class="input-group-append"><span class="input-group-text input-to-disable">%</span></div>
                                    </div>
                                </td>
                                <td class="align-middle text-center" style="white-space: nowrap;">
                                    <div class="d-flex justify-content-center align-items-center">
                                        <label class="master-switch mb-0 mr-3" @if(!\Illuminate\Support\Facades\Session::has('Bureau_Configuration_Update|-2-0')) title="You do not have permission to update bureau configurations." style="cursor: not-allowed;" @else title="Toggle Band Status" @endif>
                                            <input type="checkbox" name="status" class="band-status-toggle" value="1" data-pre="" checked @if(!\Illuminate\Support\Facades\Session::has('Bureau_Configuration_Update|-2-0')) disabled @endif>
                                            <span class="master-slider"></span>
                                        </label>
                                        @if(\Illuminate\Support\Facades\Session::has('Bureau_Configuration_Update|-2-0'))
                                        <button type="button" class="btn btn-outline-danger btn-sm m-btn m-btn--icon m-btn--icon-only m-btn--pill remove-band-btn" title="Remove Band" style="width: 25px; height: 25px;">
                                            <i class="fa fa-trash" style="font-size: 12px;"></i>
                                        </button>
                                        @else
                                        <span style="display: inline-block; cursor: not-allowed;" title="You do not have permission to delete bureau configurations.">
                                            <button type="button" class="btn btn-outline-danger btn-sm m-btn m-btn--icon m-btn--icon-only m-btn--pill" disabled style="width: 25px; height: 25px; pointer-events: none;">
                                                <i class="fa fa-trash" style="font-size: 12px;"></i>
                                            </button>
                                        </span>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!--end::Band Customisation-->
            


            <!--begin::Form submit-->
            <div class="m-portlet__foot m-portlet__foot--fit" style="padding: 10px;">
                <div class="m-form__actions m-form__actions">
                    @if(\Illuminate\Support\Facades\Session::has('Bureau_Configuration_Update|-2-0'))
                        <button type="submit" class="btn btn-primary">
                            Submit
                        </button>
                    @else
                        <span style="display: inline-block; cursor: not-allowed;" title="You do not have permission to update bureau configurations.">
                            <button type="button" class="btn btn-primary" disabled style="pointer-events: none;">
                                Submit
                            </button>
                        </span>
                    @endif
                    <button type="reset" onclick="window.history.back()" class="btn btn-secondary">
                        Cancel
                    </button>
                </div>
            </div>
            <!--end::Form submit-->
        </div>

        <div class="row" style="margin-top: 20px;">
            <!-- Pincode Upload Portlet -->
            <div class="col-md-6">
                <div class="m-portlet m-portlet--mobile h-100 mb-0">
                    <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="fa fa-file-text-o"></i></span>
                                <h3 class="m-portlet__head-text">Master Pincode Upload</h3>
                            </div>
                        </div>
                    </div>
                    <div class="m-portlet__body">
                        <span style="font-weight: 500;">[<a href="/assets/master_pincodes_template.xlsx">Download Sample File</a>]</span>
                        <div class="row" style="font-weight: 500; margin-top: 5px;">[Supported file - xls, xlsx]</div>

                        <form id="process_pincode_import" class="form-horizontal mt-4" action="/admin/pincodes/master-upload" method="POST" enctype="multipart/form-data">
                            <input name="_token" value="{{ csrf_token() }}" type="hidden">
                            <div class="row align-items-center">
                                <div class="col-md-7">
                                    <input type="file" name="pincode_file" id="pincode_file" class="form-control" autocomplete="off" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/>
                                </div>
                                <div class="col-md-5">
                                    <input type="submit" id="import_pincode_btn" class="btn btn-accent btn-block" value="Import Data"/>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Merchant Category Portlet -->
            <div class="col-md-6">
                <div class="m-portlet m-portlet--mobile h-100 mb-0">
                    <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="fa fa-building-o"></i></span>
                                <h3 class="m-portlet__head-text">Loan Category Risky Pincode</h3>
                            </div>
                        </div>
                    </div>
                    <div class="m-portlet__body">
                        <div class="form-group mb-4">
                            <label for="merchant_category_id" class="font-weight-bold">Loan Category</label>
                            <div @if(!\Illuminate\Support\Facades\Session::has('Risky_Pincode_Update|-2-1')) class="disabled-tooltip-wrapper" title="You do not have permission to update risky pincode configurations." style="cursor: not-allowed;" @endif>
                                <select id="merchant_category_id" name="merchant_category_id[]" class="form-control selectpicker" data-live-search="true" data-actions-box="true" title="Select Categories" multiple @if(!\Illuminate\Support\Facades\Session::has('Risky_Pincode_Update|-2-1')) disabled @endif>
                                    @foreach($merchantCategories as $category)
                                        <option value="{!! $category->id !!}" data-risky-pincode-roi="{!! $category->risky_pincode_roi ?? 0 !!}" data-is-risky-pincode-active="{!! !isset($category->is_risky_pincode_active) || $category->is_risky_pincode_active ? 1 : 0 !!}" @if($category->id == 24) selected @endif>{!! $category->name !!}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        
                        <div class="form-group mb-0">
                            <label class="font-weight-bold w-100">Risky Pincode Settings</label>
                            <?php $defaultCategory = $merchantCategories->firstWhere('id', 24); ?>
                            
                            <div class="d-flex align-items-center justify-content-between p-3 rounded" style="background: #f8f9fa; border: 1px solid #ebedf2;">
                                
                                <!-- Left side: Input Box (Small) -->
                                <div class="d-flex align-items-center loan-category-controls">
                                    <span class="mr-3 font-weight-bold" style="color: #575962;">ROI %</span>
                                    <input type="text" id="risky_pincode_roi" name="risky_pincode_roi" value="{!! $defaultCategory->risky_pincode_roi ?? 0 !!}" class="form-control text-center" style="width: 80px; font-weight: bold;" onkeyup="if (/[^0-9.]/g.test(this.value)) this.value = this.value.replace(/[^0-9.]/g,'')" />
                                </div>

                                <!-- Right side: Master Switch & Save Button -->
                                <div class="d-flex align-items-center">
                                    <div class="d-flex align-items-center mr-4" title="Toggle Category Status">
                                        <?php $isRiskyActive = (!isset($defaultCategory->is_risky_pincode_active) || $defaultCategory->is_risky_pincode_active); ?>
                                        <span id="risky_pincode_status_text" class="mr-2 font-weight-bold text-uppercase" style="font-size: 11px; color: {!! $isRiskyActive ? '#34bfa3' : '#7b7e8a' !!};">
                                            {!! $isRiskyActive ? 'Enabled' : 'Disabled' !!}
                                        </span>
                                        <label class="master-switch mb-0" @if(!\Illuminate\Support\Facades\Session::has('Risky_Pincode_Update|-2-1')) title="You do not have permission to update risky pincode configurations." style="cursor: not-allowed;" @endif>
                                            <input type="checkbox" id="is_risky_pincode_active" name="is_risky_pincode_active" value="1" {!! (!isset($defaultCategory->is_risky_pincode_active) || $defaultCategory->is_risky_pincode_active) ? 'checked' : '' !!} @if(!\Illuminate\Support\Facades\Session::has('Risky_Pincode_Update|-2-1')) disabled @endif>
                                            <span class="master-slider"></span>
                                        </label>
                                    </div>
                                    @if(\Illuminate\Support\Facades\Session::has('Risky_Pincode_Update|-2-1'))
                                        <button class="btn btn-primary loan-category-controls" type="button" id="save_merchant_category_btn">
                                            <i class="fa fa-save mr-2"></i> Save
                                        </button>
                                    @else
                                        <span style="display: inline-block; cursor: not-allowed;" title="You do not have permission to update risky pincode configurations.">
                                            <button class="btn btn-primary loan-category-controls" type="button" disabled style="pointer-events: none;">
                                                <i class="fa fa-save mr-2"></i> Save
                                            </button>
                                        </span>
                                    @endif
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@include("admin.layouts.footer")
{{--<script src="https://cdn.datatables.net/2.0.8/js/dataTables.js"></script>--}}
<script>
$(document).ready(function(){
    let deletedBandIds = [];
    // 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');
       }
   });

   function updateBandStyles() {
       $('.group-of-view').each(function() {
           let isBandActive = $(this).find('.band-status-toggle').is(':checked');
           if (!isBandActive) {
               $(this).addClass('band-disabled');
               $(this).find('.form-control').addClass('input-disabled');
               $(this).find('.input-to-disable').addClass('input-disabled');
           } else {
               $(this).removeClass('band-disabled');
               $(this).find('.form-control').removeClass('input-disabled');
               $(this).find('.input-to-disable').removeClass('input-disabled');
               
               let isPfActive = $(this).find('.pf-toggle').is(':checked');
               if(!isPfActive){
                   $(this).find('.pf-section .input-to-disable').addClass('input-disabled');
               } else {
                   $(this).find('.pf-section .input-to-disable').removeClass('input-disabled');
               }
               
               let isRoiActive = $(this).find('.roi-toggle').is(':checked');
               if(!isRoiActive){
                   $(this).find('.roi-section .input-to-disable').addClass('input-disabled');
               } else {
                   $(this).find('.roi-section .input-to-disable').removeClass('input-disabled');
               }
           }
       });
   }

   function updateLoanCategoryUI() {
       let isActive = $('#is_risky_pincode_active').is(':checked');
       if (isActive) {
           $('.loan-category-controls').removeClass('input-disabled');
           $('#risky_pincode_status_text').text('Enabled').css('color', '#34bfa3');
       } else {
           $('.loan-category-controls').addClass('input-disabled');
           $('#risky_pincode_status_text').text('Disabled').css('color', '#7b7e8a');
       }
   }

   // Call on load
   updateBandStyles();
   updateLoanCategoryUI();

   // Call on toggle change
   $(document).on('change', '.band-status-toggle, .pf-toggle, .roi-toggle', function() {
       updateBandStyles();
   });

   $('#is_risky_pincode_active').change(function(event, isProgrammatic) {
       updateLoanCategoryUI();
       if (isProgrammatic) {
           return;
       }
       
       let $this = $(this);
       let isChecked = $this.is(':checked');
       let action = isChecked ? 'enable' : 'disable';
       
       if (confirm('Are you sure you want to ' + action + ' the risky pincode ROI?')) {
           let merchant_category_id = $('#merchant_category_id').val();
           let risky_pincode_roi = $('#risky_pincode_roi').val();
           let is_risky_pincode_active = isChecked ? 1 : 0;
           let _token = $('input[name="_token"]').val();

           if (!merchant_category_id || merchant_category_id.length === 0) {
               showToast('Please select at least one loan category.', 'error');
               $this.prop('checked', !isChecked);
               updateLoanCategoryUI();
               return;
           }

           $('.init-loader').css({display: 'block'});
           $.ajax({
               url: "/admin/merchant/risk-based-pricing/update",
               method: 'POST',
               data: {
                   _token: _token,
                   merchant_category_id: merchant_category_id,
                   risky_pincode_roi: risky_pincode_roi,
                   is_risky_pincode_active: is_risky_pincode_active
               },
               success: function(response) {
                   $('.init-loader').css({display: 'none'});
                   showToast('Risky pincode ' + action + 'd successfully!', 'success');
                   $('#merchant_category_id option:selected').data('is-risky-pincode-active', is_risky_pincode_active);
               },
               error: function(xhr) {
                   $('.init-loader').css({display: 'none'});
                   let message = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Unable to update risky pincode status.';
                   showToast(message, 'error');
                   $this.prop('checked', !isChecked);
                   updateLoanCategoryUI();
               }
           });
       } else {
           $this.prop('checked', !isChecked);
           updateLoanCategoryUI();
       }
   });

   function reindexBands() {
       $('.outer-view .group-of-view').each(function(index) {
           $(this).attr('id', 'band_' + (index + 1));
           $(this).find('.band-index').text(index + 1);
       });
   }

   function showToast(message, type) {
       if (typeof toastr !== 'undefined') {
           toastr.options.closeButton = true;
           toastr.options.hideDuration = 100; // Makes normal fade-out very fast
           toastr.options.closeDuration = 100; // Makes the cross-button dismiss very fast
           
           if (type === 'success') toastr.success(message);
           else toastr.error(message);
       } else {
           // Fallback to custom top-right notification
           let color = type === 'success' ? '#34bfa3' : '#f4516c';
           let toast = $('<div style="position:fixed; top:70px; right:20px; background:'+color+'; color:#fff; padding:15px 40px 15px 25px; border-radius:4px; box-shadow:0 4px 15px rgba(0,0,0,0.2); z-index:9999; display:none; font-weight:500;">'+message+'<span style="position:absolute; top:12px; right:15px; cursor:pointer; font-weight:bold; font-size:16px;" onclick="$(this).parent().fadeOut(300, function(){ $(this).remove(); })">&times;</span></div>');
           $('body').append(toast);
           toast.fadeIn(300).delay(3000).fadeOut(300, function() { $(this).remove(); });
       }
   }

   $(document).on("click", '.remove-band-btn', function(){
       let btn = $(this);
       let row = btn.closest(".group-of-view");
       let bandId = row.attr('data-id');
       
       if (bandId && bandId !== '0') {
           if (!confirm('Are you sure you want to permanently delete this band?')) {
               return;
           }
           
           $('.init-loader').css({display: 'block'});
           let _token = $('input[name="_token"]').val();
           
           $.ajax({
               url: "/admin/merchant/risk-based-pricing/update",
               method: 'POST',
               data: {
                   _token: _token,
                   deleted_band_ids: [bandId]
               },
               success: function(response) {
                   $('.init-loader').css({display: 'none'});
                   row.remove();
                   reindexBands();
                   showToast('Band deleted successfully', 'success');
               },
               error: function(xhr) {
                   $('.init-loader').css({display: 'none'});
                   let message = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Unable to delete band.';
                   showToast(message, 'error');
               }
           });
       } else {
           row.remove();
           reindexBands();
       }
   });

   $('#add_new_band_btn').click(function(){
       let _count  = $('.outer-view .group-of-view').length + 1;
       let newBand = $('#band_template').html();
       
       $(".outer-view").append(newBand);
       
       let addedBand = $(".outer-view .group-of-view").last();
       addedBand.attr('id', 'band_' + _count);
       addedBand.find('.band-index').text(_count);
       
       updateBandStyles();
   });

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

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

            let currMin = parseInt(currentRange['min_range'], 10);
            let currMax = parseInt(currentRange['max_range'], 10);
            let prevMin = parseInt(previousRange['min_range'], 10);
            let prevMax = parseInt(previousRange['max_range'], 10);

            // If the start of the current range is less than the end of the previous range, there is a conflict
            if (currMin < prevMax || currMin === prevMax) {
                return {
                    result: false,
                    conflictingRange: currentRange['min_range'],
                    conflictWith: previousRange['max_range']
                };
            } else if (currMin === prevMin) {
                return {
                    result: false,
                    conflictingRange: currentRange['min_range'],
                    conflictWith: previousRange['min_range']
                };
            } else if (currMax === prevMax) {
                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');
            let risky_roi_percentage = $(this).find('input[name="risky_roi_percentage"]').val();
            let pre_risky_roi_percentage = $(this).find('input[name="risky_roi_percentage"]').attr('data-pre');
            let is_risky_pf_active = $(this).find('input[name="is_risky_pf_active"]').is(':checked') ? 1 : 0;
            let pre_is_risky_pf_active = $(this).find('input[name="is_risky_pf_active"]').attr('data-pre');
            let is_risky_roi_active = $(this).find('input[name="is_risky_roi_active"]').is(':checked') ? 1 : 0;
            let pre_is_risky_roi_active = $(this).find('input[name="is_risky_roi_active"]').attr('data-pre');
            let status = $(this).find('input[name="status"]').is(':checked') ? 1 : 0;
            let pre_status = $(this).find('input[name="status"]').attr('data-pre');

            if(parseInt(min_range, 10) > parseInt(max_range, 10)){
                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 || risky_roi_percentage !== pre_risky_roi_percentage || is_risky_pf_active.toString() !== pre_is_risky_pf_active || is_risky_roi_active.toString() !== pre_is_risky_roi_active || status.toString() !== pre_status) {
                if (min_range !== '' && max_range !== '' && increase_pf_percent !== '' && discount_pf_percent !== '' && risky_roi_percentage !== '' &&
                    (parseInt(min_range, 10) !== 0 || parseInt(max_range, 10) !== 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,
                        'risky_roi_percentage': risky_roi_percentage,
                        'pre_risky_roi_percentage': pre_risky_roi_percentage,
                        'is_risky_pf_active': is_risky_pf_active,
                        'is_risky_roi_active': is_risky_roi_active,
                        'status': status,
                    });
                }
            }
        });

        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,
           deleted_band_ids: deletedBandIds,
           merchant_category_id: $('#merchant_category_id').val(),
           risky_pincode_roi: $('#risky_pincode_roi').val()
       };
       $.ajax({
           url: "/admin/merchant/risk-based-pricing/update",
           method: 'POST',
           data: data,
           success: function(response) {
               alert(response.message);
               window.location.reload();
           },
           error: function(xhr) {
               let message = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Unable to save risk based pricing.';
               alert(message);
           }
       });
   });

   $('#merchant_category_id').change(function() {
       let selectedOptions = $(this).find('option:selected');
       if (selectedOptions.length === 1) {
           $('#risky_pincode_roi').val(selectedOptions.first().data('risky-pincode-roi') || 0);
           $('#is_risky_pincode_active').prop('checked', selectedOptions.first().data('is-risky-pincode-active') == 1).trigger('change', [true]);
       } else {
           $('#risky_pincode_roi').val('');
           $('#is_risky_pincode_active').prop('checked', true).trigger('change', [true]);
       }
   });

   $('#save_merchant_category_btn').click(function() {
       let merchant_category_id = $('#merchant_category_id').val();
       let risky_pincode_roi = $('#risky_pincode_roi').val();
       let is_risky_pincode_active = $('#is_risky_pincode_active').is(':checked') ? 1 : 0;
       let _token = $('input[name="_token"]').val();

       if (!merchant_category_id || merchant_category_id.length === 0) {
           showToast('Please select at least one loan category.', 'error');
           return;
       }
       if (risky_pincode_roi === '') {
           showToast('Please enter an ROI percentage.', 'error');
           return;
       }

       $('.init-loader').css({display: 'block'});
       
       $.ajax({
           url: "/admin/merchant/risk-based-pricing/update",
           method: 'POST',
           data: {
               _token: _token,
               merchant_category_id: merchant_category_id,
               risky_pincode_roi: risky_pincode_roi,
               is_risky_pincode_active: is_risky_pincode_active
           },
           success: function(response) {
               $('.init-loader').css({display: 'none'});
               showToast('Loan category settings saved successfully!', 'success');
               // Update the local data attribute so it doesn't reset on select change
               $('#merchant_category_id option:selected').data('risky-pincode-roi', risky_pincode_roi);
               $('#merchant_category_id option:selected').data('is-risky-pincode-active', is_risky_pincode_active);
           },
           error: function(xhr) {
               $('.init-loader').css({display: 'none'});
               let message = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Unable to save loan category settings.';
               showToast(message, 'error');
           }
       });
   });

   $('#process_pincode_import').submit(function() {
       $('.init-loader').css({display: 'block'});
       let submitBtn = $('#import_pincode_btn');
       submitBtn.prop('disabled', true);
       submitBtn.val('Importing... ');
       submitBtn.addClass('m-loader m-loader--light m-loader--right');
   });

});
</script>