@include('admin.layouts.header')
@include('admin.layouts.sidebar')
<style>
    .panel-heading {
        background-color: #f1f1f1;
        border: 1px solid #e0dfe0;
        padding-left: 10px;
        padding-top: 6px;
        cursor: pointer;
    }
    h4.panel-title > a{
        font-size: 14px;
        color: #5f5a5a !important;
    }
</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">
                    Merchant Offer
                </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-user') }}" class="m-nav__link">
                            <span class="m-nav__link-text">
                                 Merchant
                            </span>
                        </a>
                    </li>
                    <li class="m-nav__separator">
                        -
                    </li>
                    <li class="m-nav__item">
                        <a href="" class="m-nav__link">
                            <span class="m-nav__link-text">
                                Offers
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- END: Subheader -->
    <div class="m-content">
        @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">
            <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">
                            Merchant Offers
                        </h3>
                    </div>
                </div>
            </div>
            <!--begin::Form-->
            <form action="{{ asset('admin/merchant/offers-add') }}" class="m-form m-form--fit m-form--label-align-right" method="POST" enctype="multipart/form-data">
                <div class="m-portlet__body">
                    <div class="m-form__section m-form__section--first">
                        <input type="hidden" id="merchant_id" name="merchant_id" value="{!! $merchant_id !!}"/>
                        <input type="hidden" name="_token" value="{{csrf_token()}}" />
                        <div class="form-group m-form__group row">
                            <label class="col-lg-3 col-form-label">
                                Reason for editing offer:
                            </label>
                            <div class="col-lg-6">
                                <input type="text" name="reason" class="form-control" value="{!! Request::old('reason') !!}" placeholder="Reason"/>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-3 col-form-label">
                                Category: <span style="font-size: 10px;color: red;">*</span>
                            </label>
                            <div class="col-lg-6">
                                <select class="form-control" name="category_id" required="required">
                                    <option selected="selected" value="">Select Category</option>
                                    @foreach($merchant['merchant_category_many'] as $category)
                                        <option value="{!! $category->id !!}">{!! $category['name'] !!}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-3 col-form-label">
                                Total EMIs: <span style="font-size: 10px;color: blue;">(Add plan option in month)</span>: <span style="font-size: 10px;color: red;">*</span>
                            </label>
                            <div class="col-lg-6">
                                <input type="number" name="tenure" class="form-control" value="{!! Request::old('tenure') !!}" placeholder="eg. 10" required/>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-3 col-form-label">
                                Interest Type: <span style="font-size: 10px;color: red;">*</span>
                            </label>
                            <div class="col-lg-6">
                                <select class="form-control" name="interest_type_id" required="required">
                                    <option selected="selected" value="">Select Interest Type</option>
                                    @foreach($interest_types as $index=>$type)
                                        @if(!in_array($index, [3, 4]))
                                            <option value="{!! $index !!}">{!! $type !!}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-3 col-form-label">
                                Subvention Type: <span style="font-size: 10px;color: red;">*</span>
                            </label>
                            <div class="col-lg-6">
                                <select class="form-control" name="subvention_type_id" required="required">
                                    <option selected="selected" value="">Select Subvention Type</option>
                                    @foreach($subvention_types as $index=>$type)
                                        <option value="{!! $index !!}">{!! $type !!}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-3 col-form-label">
                                Slug: <span style="font-size: 10px;color: red;">*</span>
                            </label>
                            <div class="col-lg-6">
                                <input type="text" readonly name="slug" id="slug" class="form-control" value="{!! Request::old('slug') !!}" required/>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-3 col-form-label">
                                Processing fee Type: <span style="font-size: 10px;color: red;">*</span>
                            </label>
                            <div class="col-lg-6">
                                <input style="margin-left: 7px;" type="radio" name="processing_fee_type" value="fixed_amount" required/> <label>Fixed Amount</label>
                                <input style="margin-left: 10px;margin-right: 7px;" type="radio" name="processing_fee_type" value="percentage" required/><label>Percentage</label>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-3 col-form-label">
                                Processing fees <span class="pro-fee-span" style="font-size: 10px;color: blue;">(including GST)</span>: <span style="font-size: 10px;color: red;">*</span>
                            </label>
                            <div class="col-lg-6">
                                <input type="text" name="processing_fee" class="form-control" value="{!! Request::old('processing_fee') !!}" placeholder="eg. 999" required/>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-3 col-form-label">
                                Advance Type: <span style="font-size: 10px;color: red;">*</span>
                            </label>
                            <div class="col-lg-6">
                                <input style="margin-left: 7px;" type="radio" name="advance_type" value="emi" required/> <label>EMI</label>
                                <input style="margin-left: 10px;margin-right: 7px;" type="radio" name="advance_type" value="fixed_amount" required/><label>Fixed Amount</label>
                                <input style="margin-left: 10px;margin-right: 7px;" type="radio" name="advance_type" value="percentage" required/><label>Percentage</label>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-3 col-form-label">
                                Advance EMI: <span style="font-size: 10px;color: red;">*</span>
                            </label>
                            <div class="col-lg-6">
                                <input type="number" name="advance_emi" value="{!! Request::old('advance_emi') !!}" class="form-control" placeholder="eg. 2" required/>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-3 col-form-label">
                                Annual Interest (%): <span style="font-size: 10px;color: red;">*</span>
                            </label>
                            <div class="col-lg-6">
                                <input type="text" name="interest_rate" value="{!! Request::old('interest_rate') !!}" class="form-control" placeholder="eg. 0" required/>
                            </div>
                        </div>
                        <div class="form-group m-form__group row subvention_type_id_div">
                            <label class="col-lg-3 col-form-label">
                                Subvention (%): <span style="font-size: 10px;color: red;">*</span>
                            </label>
                            <div class="col-lg-6">
                                <input type="text" name="subvention" class="form-control" value="{!! Request::old('subvention') !!}" placeholder="eg. 4.5" required/>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="panel-group" id="accordionMain">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h4 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#accordionMain" href="#collapseMain">
                                                Partial Disbursement (<?php echo count($disbursement_offers) ? : '0'; ?>)</a> <span class="btn btn-primary create-phases" data-id="<?php echo isset($disbursement_offers) && count($disbursement_offers) > 0 ? count($disbursement_offers) : 1 ?>" style="float: right;font-size: 13px;margin-top: -5px;margin-right: 1px;">Create Phases</span>
                                        </h4>
                                    </div>
                                    <div id="collapseMain" class="panel-collapse collapse in">
                                        <div class="panel-body">
                                            <div class="panel-group" id="accordionChild">
                                                @foreach($disbursement_offers as $disbursement_key => $disbursement_offer)
                                                    <div class="panel panel-default <?php echo $disbursement_key > 0 ? 'second_'.$disbursement_key : ''; ?>">
                                                        <div class="panel-heading">
                                                            <h4 class="panel-title">
                                                                <a data-toggle="collapse" data-parent="#accordionChild" href="#collapse{!! $disbursement_key + 1 !!}">
                                                                    Phase {!! $disbursement_key + 1 !!}</a> <span onclick="$(this).parent().parent().parent().remove();" style="@if(!$disbursement_key) display:none; @endif float: right;margin-right: 13px;"><i class="fa fa-close"></i></span>
                                                            </h4>
                                                        </div>
                                                        <div id="collapse{!! $disbursement_key + 1 !!}" class="panel-collapse collapse in">
                                                            <div class="panel-body" style="border-style: solid;border-width: 1px;border-color: #ded6d6;padding-top: 17px;">
                                                                <div class="form-group m-form__group row">
                                                                    <label class="col-lg-3 col-form-label">
                                                                        Disbursement Amount: <span style="font-size: 10px;color: blue;">(% of Disbursement Amount)</span>:
                                                                    </label>
                                                                    <div class="col-lg-6">
                                                                        <input type="number" name="per_disbursement_amount[<?php echo isset($disbursement_offer->id) ? $disbursement_offer->id : '-1'?>]" class="form-control per_disbursement_amount" value="{!! $disbursement_offer->per_disbursement_amount !!}" min="1" max="100"/>
                                                                    </div>
                                                                </div>
                                                                <div class="form-group m-form__group row">
                                                                    <label class="col-lg-3 col-form-label">
                                                                        Days From Disbursement Date:
                                                                    </label>
                                                                    <div class="col-lg-6">
                                                                        <input type="number" name="day_from_disbursement_date[<?php echo isset($disbursement_offer->id) ? $disbursement_offer->id : '-1'?>]" class="form-control day_from_disbursement_date" value="{!! $disbursement_offer->day_from_disbursement_date !!}" min="0"/>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-3 col-form-label">
                                Payment frequency: <span style="font-size: 10px;color: red;">*</span>
                            </label>
                            <div class="col-lg-6">
                                <input type="radio" name="payment_frequency" class="form-control" value="1"/> <label>Monthly</label>
                                <input type="radio" name="payment_frequency" class="form-control" value="2"/> <label>Bi-Weekly (5th and 18th)</label>
                                <input type="radio" name="payment_frequency" class="form-control" value="3"/> <label>Weekly - every wednesday</label>
                                <input type="radio" name="payment_frequency" class="form-control" value="4"/> <label>Daily</label>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
            @if(\Illuminate\Support\Facades\Session::has('Merchant_Offers_Create|1-0-3-1'))
        <div class="m-portlet__foot m-portlet__foot--fit">
            <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>
        </div>
            @endif
        </form>
        <!--end::Form-->
    </div>
</div>
@include("admin.layouts.footer")
<script>
    $("input[name='processing_fee_type']").click(function(){
       if($(this).val() === 'fixed_amount'){
           $(".pro-fee-span").text('(including GST)');
           $("input[name='processing_fee']").attr('placeholder','eg. 999');
       }else{
           $(".pro-fee-span").text('');
           $("input[name='processing_fee']").attr('placeholder','eg. 2');
       }
    });

    $("input[name='advance_type']").click(function(){
        if($(this).val() === 'emi'){
            $("input[name='advance_emi']").attr('placeholder','eg. 2');
        }else if($(this).val() === 'fixed_amount'){
            $("input[name='advance_emi']").attr('placeholder','eg. 999');
        }else{
            $("input[name='advance_emi']").attr('placeholder','eg. 2');
        }
    });

    $("select[name='subvention_type_id']").change(function(){
        if($(this).find('option:selected').val() == "3"){
            $('.subvention_type_id_div').css({'display':'none'});
            $("input[name='subvention']").val(0);
        }else{
            $('.subvention_type_id_div').removeAttr('style');
            $("input[name='subvention']").val('');
        }
    });

    $("form").submit(function (event) {
        event.preventDefault();
        let form = this;
        $("button[type='submit']").attr('disabled','disabled');
        offerValidation(function(response){
            if(response.data.status == 'OK') {
                let advance_type = $('input[name="advance_type"]:checked').val();
                if (advance_type == "emi") {
                    let tenure = parseInt($('input[name="tenure"]').val());
                    let advance_emi = parseInt($('input[name="advance_emi"]').val());
                    if (advance_emi >= tenure) {
                        alert('Advance EMI cannot be more than tenure');
                        $("button[type='submit']").removeAttr('disabled','disabled');
                        return true;
                    }
                }
                checkDisbursementOffers(function (response) {
                    if (response.status == 1){
                        form.submit();
                    }else{
                        alert(typeof response.message !== 'undefined' ? response.message : 'Your Partial Disbursement Offer is not correct');
                        $("button[type='submit']").removeAttr('disabled','disabled');
                        return true;
                    }
                });
            }else{
                alert('You can\'t create offer with net tenure '+response.tenure+' months & subvention '+response.subvention+'%, Please check merchant module.');
                $("button[type='submit']").removeAttr('disabled','disabled');
                return true;
            }
        });
    });

    function checkDisbursementOffers(callback){
        let amount = 0;
        let per_dis = 0;
        let bool = 0;
        let phases = 0;
        $("#accordionChild > div.panel").each(function(){
            amount += parseInt($(this).find('input.per_disbursement_amount').val());
            if (per_dis == 0){
                if ($(this).find('input.day_from_disbursement_date').val() != "0"){
                    bool = 1
                }
            }
            per_dis = 1;
            phases++;
        });
        if(!bool && phases == 1){
            callback({status:0, message:'You have to create more than 1 phase to submit the details.'});
        }else if (bool && amount > 0) {
            callback({status:0, message:'First Phase\'s Days From Disbursement Date should be Zero'});
        }else{
            callback({status: amount === 100 || amount === 0 || isNaN(amount) ? 1 : 0});
        }
    }

    function offerValidation(callback){
        var _token = '<?php echo csrf_token(); ?>';
        let tenure = parseInt($("input[name='tenure']").val());
        let advance_emi = parseInt($("input[name='advance_emi']").val());
        let subvention = $("input[name='subvention']").val();
        let advance_type = $('input[name="advance_type"]:checked').val();
        let remaining_emi = 0;
        if (advance_type == "emi") {
            remaining_emi = (tenure - advance_emi);
        }else{
            remaining_emi = tenure;
        }
        $.ajax({
            type: 'POST',
            url: "/admin/merchant/module/get-validation/<?php echo $merchant_id; ?>",
            data: {_token: _token, subvention:subvention, tenure: remaining_emi},
            dataType: "JSON",
            success: function (response) {
                callback({data:response,tenure:remaining_emi,subvention});
            }
        });
    }

    $(".create-phases").click(function(){
        let accordionMain = $('#accordionChild');
        $(this).attr('data-id',(parseInt($(this).attr('data-id')) + 1));
        let className = 'second_'+$(this).attr('data-id');
        accordionMain.append('<div class="panel panel-default '+className+'">'+$(accordionMain.find('div')[0]).html()+'<div>');//.children('.panel').last().addClass(className).removeClass('second_'+(parseInt($(this).attr('data-id')) - 1));
        let headingEvent = $("div."+className).find('.panel-heading > h4 > a');
        headingEvent.html('Phase '+$(this).attr('data-id'));
        headingEvent.attr('href','#collapse'+$(this).attr('data-id'));
        headingEvent.parent().find('span').css({'display':'block'});
        let bodyEvent = $("div."+className).find('.panel-collapse');
        let id = 'collapse'+$(this).attr('data-id');
        bodyEvent.attr('id',id);
        $("#"+id).find('input.per_disbursement_amount').attr('name','per_disbursement_amount[-'+className+']');
        $("#"+id).find('input.day_from_disbursement_date').attr('name','day_from_disbursement_date[-'+className+']');

        $('#collapseMain').collapse();
    });

</script>