@include('admin.layouts.header')
@include('admin.layouts.sidebar')
<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">

            </div>

        </div>
    </div>
    <!-- END: Subheader -->
    <div class="m-content">
        @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(\Illuminate\Support\Facades\Session::has('Product_Create|14-0-1'))
        <div class="btn btn-success" style="margin-bottom: 7px;margin-right: 0px; position: relative" id="add_product">Add Product</div>
        @endif
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__head" style="position: relative;">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <span class="m-portlet__head-icon">
                            <i class="fa fa-vcard"></i>
                        </span>
                        <h3 class="m-portlet__head-text">
                            Products & Services Offered
                        </h3>
                    </div>
                </div>
            </div>
            <div class="m-section" style="padding: 21px;">
                <div class="m-section__content">
                    <table class="table m-table merchant-form">
                        <thead>
                        <tr>
                            <th>Id</th>
                            <th>Name</th>
                            <th>Code</th>
                            <th>Warranty</th>
                            <th>Description</th>
                            <th>Center</th>
                            <th>Amount</th>
                            <th>Visible</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>

                        @foreach($products as $key => $product)
                            <tr style="{{ !$product->product_visibility ? 'background-color: #f4f4f4; color: #999;' : '' }}">
                                <td>{!! $product->id !!}</td>
                                <td>{!! $product->name !!}</td>
                                <td>{!! $product->code !!}</td>
                                <td>{!! $product->warranty !!}</td>
                                <td>{!! $product->description !!}</td>
                                <td>{!! $product->center->name or '-' !!}</td>
                                <td>{!! $product->amount !!}</td>
                                <td>{!! $product->product_visibility ? 'Yes' : 'No' !!}</td>
                                <td id="product_data_{!! $product->id !!}" data-obj='<?php echo str_replace("'", '', json_encode($product)); ?>'>
                                    <div class="row">
                                        @if(\Illuminate\Support\Facades\Session::has('Product_Create|14-0-1') || \Illuminate\Support\Facades\Session::has('Product_Delete|14-0-2'))
                                            <span style="margin-left: 18px;margin-top: 10px;">
                                                    <i class="fa fa-edit mk-jb-edit" title="Edit" data-id="{!! $product->id !!}"></i>
                                                </span>
                                        @endif
                                        @if(\Illuminate\Support\Facades\Session::has('Product_Delete|14-0-2'))
                                        <span style="margin-left: 18px;margin-top: 10px;">
                                                    <i class="fa fa-trash  mk-jb-delete" title="Delete" data-id="{!! $product->id !!}"></i>
                                                </span>
                                        @endif
                                        <span style="margin-left: 18px;margin-top: 10px;">
                                                    <i class="fa fa-link  mk-jb-offers" title="Link Offers" data-id="{!! $product->id !!}"></i>
                                                </span>
                                    </div>
                                </td>
                            </tr>
                        @endforeach

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
{{--Add Product Modal--}}
<div class="modal fade" id="create_new_product" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header" style="display: inline;padding: 13px;background-color: #f9f9f9;">
                <button type="button" class="close" data-dismiss="modal" style="line-height:1 !important;">&times;</button>
                <h4 class="modal-title">Add Product</h4>
            </div>
            <div class="modal-body">
                <form action="/admin/merchant/add-product" method="post" id="create_new_product_frm">
                    <div class="col-md-12">
                        <div class="form-group row">
                            <label for="name" class="col-sm-2 col-form-label">Product Name <span style="color: red;">*</span></label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="product_name" name="product_name" required="required" placeholder="Product Name"/>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="code" class="col-sm-2 col-form-label">Code <span style="color: red;">*</span></label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="product_code" name="product_code" required="required" placeholder="Product Code"/>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="warranty" class="col-sm-2 col-form-label">Warranty <span style="color: red;">*</span></label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="product_warranty" name="product_warranty" placeholder="eg. 2 Years" required="required"/>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="description" class="col-sm-2 col-form-label">Product's description <span style="color: red;">*</span></label>
                            <div class="col-sm-10">
                                <textarea type="text" class="form-control" id="product_description" name="product_description" placeholder="About the product" required="required"></textarea>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="amount" class="col-sm-2 col-form-label">Amount <span style="color: red;">*</span></label>
                            <div class="col-sm-10">
                                <input type="number" min="0" class="form-control" id="product_amount" name="product_amount"  required="required"/>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="amount" class="col-sm-2 col-form-label">Center <span style="color: red;">*</span></label>
                            <div class="col-sm-10">
                            <select name="center_id" class="form-control">
                                <option value="">Select Center</option>
                                @foreach($centers as $center)
                                    <option value="{!! $center->id !!}">{!! $center->name !!}</option>
                                @endforeach
                            </select>
                            </div>
                        </div>
                        @if(\Illuminate\Support\Facades\Session::has('Merchant_Update|1-0-2'))
                        <div class="form-group row">
                            <label for="product_visibility" class="col-sm-2 col-form-label">Visible</label>
                            <div class="col-sm-10">
                                <select name="product_visibility" id="product_visibility" class="form-control">
                                    <option value="1">Yes</option>
                                    <option value="0">No</option>
                                </select>
                            </div>
                        </div>
                        @endif
                        <label for="you_get" class="col-sm-2 col-form-label"></label>
                        <input type="hidden" name="_token" value="{!! csrf_token() !!}"/>
                        <input type="hidden" name="product_id" value="0"/>
                        <input type="hidden" name="merchant_id" value=" {!! $merchant_id; !!} "/>
                        <input type="hidden" name="created_at" value=" {!! Carbon\Carbon::now(); !!} "/>
                        <input type="hidden" name="user_id" value="{!! Auth::user()->id; !!}"/>
                        <input type="submit" class="btn btn-primary" value="Add Product"/>
                        <span><img class="loader-iv" src="/assets/front/img/loading.gif" style="display: none;width: 15px;"></span>
                    </div>
            </div>
            </form>
        </div>
    </div>
</div>

{{--Link Offers Modal --}}
<div class="modal fade" id="link-offers" role="dialog">
    <div class="modal-dialog modal-lg" style="max-width: 60%; width: 55%;">
        <div class="modal-content">
            <div class="modal-header" style="display: inline;padding: 13px;background-color: #f9f9f9;">
                <button type="button" class="close" data-dismiss="modal" style="line-height:1 !important;">&times;</button>
                <h4 class="modal-title">Link Offers</h4>
            </div>
            <div class="modal-body">
                {{--<form action="/admin/merchant/link-offers" method="post" id="link_offers_to_product">--}}
                    <div class="col-md-12">
                        <div class="form-group row">
                            <div class="col-sm-12">
                                @if(isset($offers) && count($offers) > 0)
                                    <div id="collapsePricing" class="panel-collapse collapse in show">
                                        <div class="panel-body" style="padding-top: 22px;">
                                            <div class="form-group m-form__group row">
                                                <div class="col-md-12 table-responsive">
                                                    <table class="table" style="width: 100%;">
                                                        <tr style="font-size: 12px;">
                                                            <th style="width: 7%; text-align: center;">Offer Id</th>
                                                            <th style="width: 25%; text-align: center;">Plan</th>
                                                            <th style="width: 10%; text-align: center;">Interest Charged</th>
                                                            <th style="width: 11%; text-align: center;">Subvention Charged</th>
                                                            <th style="width: 11%; text-align: center;">Processing Fee</th>
                                                            <th style="width: 16%; text-align: center;">IRR</th>
                                                            <th style="width: 12%; text-align: center;">Select the offers to link <br><input type="checkbox" name="offer_all_select" ></th>
                                                            <th style="width: 8%; text-align: center;">Linked</th>
                                                        </tr>
                                                        @foreach($offers as $offer)
                                                            <tr style="font-size: 12px;">
                                                                <td style="text-align: center;"><b>{!! $offer->id !!}</b></td>
                                                                <td style="text-align: center;"><b>{!! $offer->tenure !!} Month / {!! $offer->advance_emi !!} Advance {!! ucwords(str_replace('_',' ',$offer->advance_type)) !!} Payable</b></td>
                                                                <td style="text-align: center;">{!! $offer->interest_rate !!}%</td>
                                                                <td style="text-align: center;">{!! $offer->subvention !!}%</td>
                                                                <td style="text-align: center;">{!! strtolower($offer->processing_fee_type) == 'percentage' ? $offer->processing_fee . '%' : '&#8377; ' . $offer->processing_fee !!}</td>
                                                                <td style="text-align: center;">{!! $offer->monthly_irr or 0 !!}% (Monthly) | {!! $offer->annualised_irr or 0 !!}%  (Annualised)</td>
                                                                <td style="text-align: center;"><input type="checkbox" id="{!! $offer->id !!}" name="offer_selected" value="{!! $offer->id !!}" ></td>
                                                                <td style="text-align: center;" class="status-ch-a-s status-ch-a-s-{!! $offer->id !!}">No</td>
                                                            </tr>
                                                        @endforeach
                                                    </table>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                        <input type="hidden" name="_token" value="{!! csrf_token() !!}"/>
                        <input type="hidden" name="product_id" id="product_id" value="0"/>
                        <input type="hidden" name="created_at" value=" {!! Carbon\Carbon::now(); !!} "/>
                        <input type="button" id="link_button" class="btn btn-primary" value="Link Selected Offers">
                        <span><img class="loader-iv" src="/assets/front/img/loading.gif" style="display: none;width: 15px;"></span>
                    </div>
            </div>
            </form>
        </div>
    </div>
</div>
</div>




@include("admin.layouts.footer")

<script>

    let selectedOffers = <?php echo isset($selectedOffers) && !empty($selectedOffers) ? json_encode($selectedOffers) : ''; ?>

    $("#add_product").click(function(){

        let event = $("#create_new_product");

        event.find('.modal-title').html('Add Product');

        event.find('#product_name').val('');
        event.find('#product_code').val('');
        event.find('#product_warranty').val('');
        event.find('#product_description').val('');
        event.find('#product_amount').val('');
        event.find('input[type="submit"]').val('Add Product');
        event.find('input[name="merchant_id"]').val({!! $merchant_id !!});
        event.find('input[name="user_id"]').val({!! Auth::user()->id !!});
        event.find('input[name="product_id"]').val(0);
        event.find('select[name="center_id"] option:selected').attr('selected', false);
        event.find('#product_visibility').val(1);

        event.modal('show');
    });

    $("#create_new_product_frm").on('submit', function(){
        $(".loader-iv").css({'display':'initial'});
        return true;
    });


    $(".mk-jb-edit").on('click', function() {

        var product_id = $(this).attr('data-id');

        let event = $("#create_new_product");
        event.find('.modal-title').html('Update Product');

        let data = $("#product_data_"+product_id).attr('data-obj');
        data = JSON.parse(data);
        event.find('#product_name').val(data.name);
        event.find('#product_code').val(data.code);
        event.find('#product_warranty').val(data.warranty);
        event.find('#product_description').val(data.description);
        event.find('#product_amount').val(data.amount);
        event.find('input[type="submit"]').val('Update Product');
        event.find('input[name="merchant_id"]').val({!! $merchant_id !!});
        event.find('input[name="user_id"]').val({!! Auth::user()->id; !!});
        event.find('input[name="product_id"]').val(product_id);
        if(data.center_id){
            event.find('select[name="center_id"] option[value='+data.center_id+']').attr('selected', true);
        }else{
            event.find('select[name="center_id"] option:selected').attr('selected', false);
        }
        
        let visibilityVal = data.product_visibility ? 1 : 0;
        event.find('#product_visibility').val(visibilityVal);

        event.modal('show');
    });

    $(".mk-jb-delete").on('click', function() {
        var product_id = $(this).attr('data-id');
        var _token = '<?php echo csrf_token(); ?>';

        if(window.confirm('Are you sure?')) {
            $(".init-loader").css({display: 'block'});
            $.ajax({
                type: 'POST',
                url: "/admin/merchant/delete-product",
                data: {product_id: product_id, _token: _token},
                dataType: "JSON",
                success: function (response) {
                    alert(response.message);
                    if (response.status == 'OK') {
                        window.location.reload();
                    }
                    $(".init-loader").css({display: 'none'});
                }
            });
        }
    });


    $(".mk-jb-offers").click(function(){

        $("input[name='offer_selected']").prop('checked',false);

        let event = $("#link-offers");

        var product_id = $(this).attr('data-id');

        $(".status-ch-a-s").html('No');

        if(typeof selectedOffers[product_id] !== 'undefined'){
            $("input[name='offer_selected']").removeProp('checked','checked');
            $("input[name='offer_selected']").each(function(){
                if(!$(this).is(':checked')){
                    if($.inArray(parseFloat($(this).attr('id')), selectedOffers[product_id]) !== -1){
                        $(this).prop('checked','checked');
                        $(this).parent().next('td').html('Yes');
                    }
                }else{
                    $(this).parent().next('td').html('No');
                }
            });
        }

        event.modal('show');

        $('#product_id').val(product_id);
    });

    $("#link_button").click(function() {

        var product_id = $('#product_id').val();
        var offer_selected = [];
        let _token = '<?php echo csrf_token(); ?>';
        let user_id = '<?php echo Auth::user()->id; ?>';

        $("input[name='offer_selected']").each(function(){
            if($(this).is(':checked')) {
                offer_selected.push($(this).val());
            }
        });

        if(window.confirm('Are you sure?')){
            $(".init-loader").css({display:'block'});
            $.ajax({
                type: 'POST',
                url: "/admin/merchant/link-offers",
                data: {
                    product_id: product_id,
                    offer_selected: offer_selected,
                    _token: _token,
                    user_id:user_id
                },
                dataType: "JSON",
                success: function (response) {
                    alert(response.message);
                    if(response.status == 'OK'){
                        window.location.reload();
                    }else{
                        $(".init-loader").css({display:'none'});

                    }
                }
            });
        }

    });

    $("input[name='offer_all_select']").click(function(){
        if($(this).is(':checked')) {
            $("input[name='offer_selected']").prop('checked',true);
        }else {
            $("input[name='offer_selected']").prop('checked',false);
        }
    });

    function manageSelectAll() {
        var offer_selected = [];
        $("input[name='offer_selected']").each(function(){
            if($(this).is(':checked')) {
                offer_selected.push($(this).val());
            }
        });
        if(offer_selected.length === $('input[name="offer_selected"]').length) {
            $("input[name='offer_all_select']").prop('checked',true);
        }else {
            $("input[name='offer_all_select']").prop('checked',false);
        }
    }

    $("input[name='offer_selected']").click(function(){
        manageSelectAll();
    });

    $('#link-offers').on('shown.bs.modal', function (e) {
        manageSelectAll();
    });

</script>