@using Domain.Entities.DataCapture;
@using Service.Interfaces;
@using Service.Interfaces.ServiceResult;
@using Service.Interfaces.ViewModels;
@using UI.Utils
@model ServiceResult<QuoteMultipleViewModel>
@section styles
{
    <link href="~/Content/motorcycle.css" rel="stylesheet">
}


@{ Html.RenderPartial("_PartialSteps", 3); }
<div class="row setup-content step activeStepInfo" id="step-2">
    <div class="col-xs-12">
        <div class="col-md-12 well @((Session["Theme"] != null && (bool)Session["Theme"] == true)?"rider-color":"light-color") text-center">
            <form method="post" action="/DataCapture/PostQuotation" novalidate>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group row">
                            <h2 class="data-capture-title col-md-12">Your Quotation</h2>
                            <hr class="title-hr" />
                        </div>
                        <div class="form-group">
                            <label>Policy Number: 125/007/S328/WEB</label>
                        </div>
                        <div class="form-group pointer-hover">
                            <table id="policyTableId" class="table table-responsive">
                                <thead>
                                    <tr>
                                        <th>Insurer Details</th>
                                        <th>Premium</th>
                                        <th>Policy Information</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach (var item in Model.Data.Model)
                                    {
                                        <tr>
                                            <td>@item.Insurer</td>
                                            <td>@item.GrossPremium £</td>
                                            <td>@((item.Excesses != null && item.Excesses.Count > 0) ? item.Excesses.Sum(i => i.Amount) + " £" : 0 + " £") </td>
                                            <td>
                                                <input id="policyRadioBtnId" type="radio" name="policySelect">
                                            </td>
                                        </tr>
                                    }
                                </tbody>
                            </table>

                        </div>
                        <div class="form-group row">
                            <h4 class="data-capture-title col-md-12">OPTIONAL EXTRAS</h4>
                            <hr class="title-hr" />
                        </div>
                        <div id="optionalExtrasDiv" class="form-group pointer-hover" style="display:none">
                            <table id="optionalextras" class="table table-responsive">
                                <thead>
                                    <tr>
                                        <th>Your Policy</th>
                                        <th>Price</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach (var item in Model.Data.Model)
                                    {
                                        <tr>
                                            <td>@item.Insurer</td>
                                            <td>@item.GrossPremium £</td>
                                            <td><input type="checkbox" name="" value=""></td>
                                        </tr>
                                    }
                                </tbody>
                            </table>
                        </div>

                    </div>
                    <div class="form-group">
                        <a class="terms">Terms &amp; Conditions</a>
                    </div>
                    <h3 class="login-details">Login Details</h3>
                    <div class="form-group">

                        <p class="details login-details">
                            Your quote details have been saved, so if you wish to return to your quote you won’t have to re-enter your details (though you should check each time whether anything, including start date, needs updating).
                            Please use the following login details to revisit your quote.
                        </p>
                        <strong class="user-login-details">Username:user@@outlook.com; Password:CYJ56C9 </strong>
                    </div>
                    <div class="form-group">
                        <a class="btn btn-default" href="/DataCapture/OtherDetails">Change Quote Details</a>
                        <a class="btn btn-default" href="/Home/Index">Home</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<style type="text/css">
    .highlightTable {
        background-color: white;
    }

    .pointer-hover {
        cursor: pointer;
    }
    .xshow {

          display : block;
    }

</style>
@section scripts {
    <script>
        $('#policyTableId tbody tr').click(function () {
            var checked = $(this).find('td input:radio').prop('checked', true);
            if (checked) {
                var selected = $(this).hasClass("highlightTable");
                if (!selected) {
                    $("#policyTableId tbody tr").removeClass("highlightTable");
                    $(this).addClass("highlightTable");

                }
                //LOGIKA TUKA DOKOLKU E SELEKTIRANA REDICA
                //showDiv();
            }
        })

        $(document).ready(function () {
            $($(".step > div")[4]).click();

            $('#optionalextras tbody tr').click(function (event) {
                var selected = $(this).hasClass("highlightTable");
                $(':checkbox', this).trigger('click');
                if (!selected) {
                    $(this).addClass("highlightTable");
                } else {
                    $(this).removeClass("highlightTable");
                }
            });
        });
        //function showDiv()
        //{
        //    $('input[type="radio"]').click(function () {
        //        //   $("#optionalExtrasDiv").removeAttr("style");

        //        var element = document.getElementById('optionalExtrasDiv');
        //        element.style.display = 'block';
        //        //$("#optionalExtrasDiv").attr("display", );
        //    });
        //}


        $(document).ready(function () {
            $("#optionalExtrasDiv").hide();

            $('input[type=radio]').change(function () {
                var isChecked = $(this).prop('checked');
                var isShow = $(this).hasClass('xshow');
                $("#optionalExtrasDiv").toggle(isChecked && isShow);
            });
        });

        $(document).ready(function () {
            $('input[type="radio"]').click(function () {
                if ($(this).attr('id') == 'policyRadioBtnId') {
                    $('#optionalExtrasDiv').show();
                }

                else {
                    $('#optionalExtrasDiv').hide();
                }
            });
        });
    </script>
}

var element = document.getElementById('optionalExtrasDiv');