@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">
    <link href="~/Content/Site.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>
                                        <th><span class="glyphicon glyphicon-record"></span></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 id="optionalExtrasDiv" style="display:none">
                            <div class="form-group row">
                                <h2 class="data-capture-title col-md-12">Optional Extras</h2>
                                <hr class="title-hr" />
                            </div>
                            <div class="form-group pointer-hover">
                                <table id="optionalextras" class="table table-responsive">
                                    <thead>
                                        <tr>
                                            <th>Your Policy</th>
                                            <th>Price</th>
                                            <th><span class="glyphicon glyphicon-ok"></span></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>
                    <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>

@section scripts {
    <script>
        $(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");
                }
            });

            $('#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");

                    }
                    showTable();
                }
            })
        });

        function showTable() {
            $('#optionalExtrasDiv').css('display', 'block');
        }
    </script>
}