@extends('frontend.layouts.app')
@section('title')
    Product Proposal
@endsection
@section('style')
<style>
    .hide{
        display: none!important;
    }
    .show {
        display: block !important;
    }
</style>
@endsection
@section('content')
<div class="inrPageLayout__wr">
    <div class="inrPageTitleSec__wr">
        <div class="container">
            <div class="row row-gap-4">
                <div class="col">
                    <div class="inrPageTitleBlock">
                        <h2 class="inrPageTitle mb-0">Products</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="cardBoxBlock__wr pb-lg-80px pb-5">
        <div class="container">
            <div class="cardBodyBox__wr">
                <div class="row row-gap-4 gx-lg-20px">
                    @include('frontend.proposal.products-filter')
                    <div class="col-lg-9 col-12">
                        <div class="proListSec__wr">
                            <div class="proListSecHead">
                                <div class="row row-gap-4 align-items-center">
                                    <div class="col">
                                        <h2 class="proListSecHeadTitle mb-0">Product</h2>
                                    </div>
                                    <div class="col-auto">
                                        <form action="{{ route('compare.products') }}" method="post">
                                            @csrf
                                            <input type="hidden" name="compared_products" id="compared_products" value="">
                                            <div class="btnBlock">
                                                <button type="button" class="btn btn-light rounded-pill" role="button" id="btn-reset">
                                                    <span class="btnTitle">RESET</span>
                                                </button>
                                                <button type="submit" class="btn btn-primary rounded-pill" role="button">
                                                    <span class="btnTitle">COMPARE</span>
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="proListBlockParent selected" id="div-selected-products"></div>
                            <div class="proListBlockParent">
                                @if ($products->isNotEmpty())
                                    @foreach ($products as $index => $product)
                                        <div class="proListBlock compare" data-product="{{ $product->id }}">
                                            <div class="proListBlockBody">
                                                <div class="row gx-0 row-gap-sm-0 row-gap-2">
                                                    <div class="col-lg proBankColBlock">
                                                        <div class="proBankBLock">
                                                            <div class="proBankBLockBox">
                                                                <img src="{{uploaded_asset($product->bank->image)}}" loading="lazy" class="img-fluid" alt="bank-logo" width="50" height="50" onerror="this.onerror=null; this.src='{{asset('assets/frontend/images/placeholder.png')}}';">
                                                                {{-- <span>{{ chr(65 + $index) }}</span> --}}
                                                            </div>
                                                            <span class="proBankBLockTitle">{{ $product->bank->name }}</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm proBodyColData">
                                                        <span class="proColHeadData">Rate Fixed For 3 Years</span>
                                                        <span class="proColData">{!! $product->interest_rate_int !!}%</span>
                                                    </div>
                                                    <div class="col-sm proBodyColData">
                                                        <span class="proColHeadData">Follow On Rate</span>
                                                        <span class="proColData fs-16-14">{!! $product->follow_on_rate_details  !!}</span>
                                                    </div>
                                                    <div class="col-sm proBodyColData">
                                                        <span class="proColHeadData">Loan to Value</span>
                                                        <span class="proColData">{{ $product->loan_to_value }}</span>
                                                    </div>
                                                    <div class="col-sm proBodyColData">
                                                        <span class="proColHeadData">Islamic / Conventional</span>
                                                        <span class="proColData fs-16-14">{{ $product->mortgage_types_display }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            {{--<div class="table-responsive">
                                                <table class="table table-borderless proTable">
                                                    <tbody>
                                                        <tr>
                                                            <td rowspan="2">
                                                                <div class="bankBLock">
                                                                    <div class="bankBLockBox">
                                                                        <span>{{ chr(65 + $index) }}</span>
                                                                    </div>
                                                                    <span class="bankBLockTitle">Bank {{ chr(65 + $index) }}</span>
                                                                </div>
                                                            </td>
                                                            <td>Rate fixed for 3 years</td>
                                                            <td>Follow On Rate</td>
                                                            <td>Loan to Value</td>
                                                            <td>Islamic / Conventional</td>
                                                        </tr>
                                                        <tr>
                                                            <th>{!! $product->interest_rate_int !!}%</th>
                                                            <th class="fs-16-14">{!! $product->follow_on_rate_details  !!}</th>
                                                            <th>{{ $product->loan_to_value }}</th>
                                                            <th class="fs-16-14">{{ $product->mortgage_types_display }}</th>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>--}}
                                            <div class="proListBlockFoot">
                                                <div class="btnBlock">
                                                    <button type="button" class="btn btn-light rounded-pill" role="button" onclick="edit_tax_modal('{{$product->id}}', '{{chr(65 + $index)}}')">
                                                        <span class="btnTitle">LEARN MORE</span>
                                                    </button>
                                                    <button type="button" class="btn btn-primary rounded-pill" role="button" onclick="addToCompare({{ $product->id }});" id="btn-add{{ $product->id }}">
                                                        <span class="btnTitle">COMPARE</span>
                                                    </button>
                                                    <button type="button" class="btn btn-danger rounded-pill hide" role="button" onclick="removeFromCompare({{ $product->id }});" id="btn-remove{{ $product->id }}">
                                                        <span class="btnTitle">Remove</span>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        <div style="display: none;" id="div{{ $product->id }}">
                                            <div class="proListBlock selected copy{{ $product->id }}">
                                                <a href="javascript:void(0);" class="removeProBtn" onclick="removeFromCompare({{ $product->id }});"><i class="fa-regular fa-xmark"></i></a>
                                                <div class="proListBlockBody">
                                                    <div class="row gx-0 row-gap-sm-0 row-gap-2">
                                                        <div class="col-lg proBankColBlock">
                                                            <div class="proBankBLock">
                                                                <div class="proBankBLockBox">
                                                                    <img src="{{uploaded_asset($product->bank->image)}}" loading="lazy" class="img-fluid" alt="bank-logo" width="50" height="50" onerror="this.onerror=null; this.src='{{asset('assets/frontend/images/placeholder.png')}}';"> 
                                                                    {{-- <span>{{ chr(65 + $index) }}</span> --}}
                                                                </div>
                                                                <span class="proBankBLockTitle">{{ $product->bank->name }}</span>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm proBodyColData">
                                                            <span class="proColHeadData">Rate Fixed For 3 Years</span>
                                                            <span class="proColData">{!! $product->interest_rate_int !!}%</span>
                                                        </div>
                                                        <div class="col-sm proBodyColData">
                                                            <span class="proColHeadData">Follow On Rate</span>
                                                            <span class="proColData fs-16-14">{!! $product->follow_on_rate_details  !!}</span>
                                                        </div>
                                                        <div class="col-sm proBodyColData">
                                                            <span class="proColHeadData">Loan to Value</span>
                                                            <span class="proColData">{{ $product->loan_to_value }}</span>
                                                        </div>
                                                        <div class="col-sm proBodyColData">
                                                            <span class="proColHeadData">Islamic / Conventional</span>
                                                            <span class="proColData fs-16-14">{{ $product->mortgage_types_display }}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                {{--<div class="table-responsive">
                                                    <table class="table table-borderless proTable">
                                                        <tbody>
                                                            <tr>
                                                                <td rowspan="2">
                                                                    <div class="bankBLock">
                                                                        <div class="bankBLockBox">
                                                                            <span>{{ chr(65 + $index) }}</span>
                                                                        </div>
                                                                        <span class="bankBLockTitle">Bank {{ chr(65 + $index) }}</span>
                                                                    </div>
                                                                </td>
                                                                <td>Rate fixed for 3 years</td>
                                                                <td>Follow On Rate</td>
                                                                <td>Loan to Value</td>
                                                                <td>Islamic / Conventional</td>
                                                            </tr>
                                                            <tr>
                                                                <th>{!! $product->interest_rate_int !!}%</th>
                                                                <th class="fs-16-14">{!! $product->follow_on_rate_details  !!}</th>
                                                                <th>{{ $product->loan_to_value }}</th>
                                                                <th class="fs-16-14">{{ $product->mortgage_types_display }}</th>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>--}}
                                            </div>
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                            <div class="btnBlock w-100 d-flex align-items-center justify-content-center mt-3">
                                <a href="#" role="button" class="proListLoadBtn">
                                    <span class="btnTitle">Load More</span>
                                    <i class="fa-regular fa-chevron-down"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="proDetailModal" tabindex="-1" aria-labelledby="proDetailModalLabel" aria-hidden="true">
        
    </div>
</div>
<input type="hidden" class="autonumeric">
@endsection

@section('script')
<script>
    $(document).ready(function(){
        // var ww = $(window).width();
        // if (ww >= 992) {}
        // $(".mCompareTable__wr").reflowTable();
        checkAndAddCompareClass();

        $('#btn-reset').click(function() {
            localStorage.removeItem("_compare_products_");
            checkAndAddCompareClass();
        });
        $('.mCompareTableReadBtn__wr').each(function() {
            var rows = $(this).closest('.mCompareTable__wr').children('tbody').children('.expand__wr');
            show_details(rows, $(this));
        });
        $('.mCompareTableReadBtn__wr').click(function() {
            var rows = $(this).closest('.mCompareTable__wr').children('tbody').children('.expand__wr');
            show_details(rows, $(this));
        });

        function show_details(rows, $this){
            if (rows.first().is(':visible')) {
                rows.hide();
                $this.text('Read more');
            } else {
                rows.show();
                $this.text('Read less');
            }
        }
        
    });

    function checkAndAddCompareClass() {
        var compareProducts = JSON.parse(localStorage.getItem("_compare_products_")) || [];
        
        $('.compare').each(function() {
            var productId = $(this).data('product');

            if(compareProducts.includes(productId)){
                $('#btn-remove'+productId).removeClass('hide');
                $('#modal-btn-remove'+productId).removeClass('hide');
                $('#btn-add'+productId).addClass('hide');
                $('#modal-btn-add'+productId).addClass('hide');
                $(this).addClass('in-compare');

                // add product to top compare section
                let sourceContent = $('#div'+productId).html();
                var parentDivContent = $("#div-selected-products").html();

                if (parentDivContent.indexOf(sourceContent) === -1) {
                    $('#div-selected-products').append(sourceContent);
                    $('#div-selected-products').show();
                }
               
            }else{
                $('#btn-add'+productId).removeClass('hide');
                $('#btn-remove'+productId).addClass('hide');
                $(this).removeClass('in-compare');

                // remove product to top compare section
                $("#div-selected-products").find(".copy"+productId).remove();

                if ($.trim($("#div-selected-products").html()) === '') {
                    $('#div-selected-products').hide();
                }
            }
        });

        $('#compared_products').val(compareProducts.join(','));
    }

    function updateStorage(array) {
        localStorage.setItem("_compare_products_", JSON.stringify(array));
        checkAndAddCompareClass();
    }

    function addToCompare(product){
        if (product !== "") {
            var storedArray = JSON.parse(localStorage.getItem("_compare_products_")) || [];
            
            if(storedArray.length < 3){
                storedArray.push(product);
                updateStorage(storedArray);
            }else{
                alert('Maximum three products are allowed to compare');
            }
        }
    }

    function removeFromCompare(product) {
        var storedArray = JSON.parse(localStorage.getItem("_compare_products_")) || [];
        var index = storedArray.indexOf(product);

        if (index !== -1) {
            storedArray.splice(index, 1);
            updateStorage(storedArray);
        }
    }
    

    function reset_form() {
        let url = window.location.href.split('?')[0]; 
        window.history.replaceState(null, null, url);
        location.reload();
    }

    function edit_tax_modal(id, bank){
        $.post('{{ route('product.detail') }}',{_token:'{{ @csrf_token() }}', id:id, bank: bank}, function(data){
            $('#proDetailModal').html(data);
            checkAndAddCompareClass();
            $('#proDetailModal').modal('show', {backdrop: 'static'});
        });
    }
</script>
@endsection