@model Mobile_Web_Service_2.Models.RepairViewModel
@{
    ViewBag.Title = "Receipt";
}

<style>
    .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10,
    .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8,
    .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
    .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4,
    .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
        padding-right: 3px;
        padding-left: 3px;
        padding-bottom: 13px;
        overflow: hidden;
    }

    .navbar {
        display: none;
    }

    footer {
        display: none;
    }

    body {
        margin: 0px;
    }

    .body-content {
        padding: 0px;
    }

    .row {
        padding: 0px 10px;
    }

    .container {
        padding: 0px;
    }

    .nopadding {
        padding: 0px;
    }

    .panel {
        border-color: #ccc;
        border-bottom-width: 1px;
        border-radius: 0px;
        margin-bottom: 0px;
        padding-bottom: 5px;
        position: relative;
    }

    .panel-primary > .panel-heading {
        border-radius: 0px;
        background-color: whitesmoke;
        border-bottom: none;
        color: black;
        padding: 5px 10px;
        text-align: center;
    }

    .panel-body {
        padding: 10px 15px;
    }

    .display-field {
        display: inline;
    }

    .display-label {
        display: inline;
    }

    .barcode {
        display: inline;
        position: absolute;
        bottom: 10px;
        right: 10px;
        width: 200px;
        height: 100px;
        background-color: whitesmoke;
    }
</style>

<div class="panel" style="overflow:hidden; border-style:dashed; border-color:black; margin:50px; padding:10px; width:210mm; height:148.5mm;">
    <div class="row">
        <div class="col-xs-4">
            @*------------------Customer Infromation-------------*@
            <div class="panel panel-primary">
                <div class="panel-heading"><span class="glyphicon glyphicon-user"></span> Customer Information</div>
                <div class="panel-body">
                    @Model.Customers.Name<br />
                    @Model.Customers.Phone<br />
                    @Model.Customers.Email<br />
                    @Model.Customers.Address
                </div>
            </div>
        </div>

        <div class="col-xs-4">
            @*-----------------Device Info----------------*@
            <div class="panel panel-primary">
                <div class="panel-heading"><span class="glyphicon glyphicon-phone"></span> Device Info</div>
                <div class="panel-body">
                    @Model.Manufacturers.Name
                    @Model.Devices.Name<br />
                    <img src="@Url.Action("GetBarcode", "Home", new { barcodeNumber = Model.IMEI })" alt="alt text" />
                    <br />
                    @Model.DeviceColor<br />
                    @Model.ProviderInfo
                </div>
            </div>
        </div>

        <div class="col-xs-4">
            @*------------Job Information---------------*@
            <div class="panel panel-primary">
                <div class="panel-heading"><span class="glyphicon glyphicon-calendar"></span> Job Information</div>
                <div class="panel-body">
                    <p>
                        <b>Received:</b>@Model.ReceivedDate.ToString("dd/MM/yyyy")<br />
                        <b>Delivery:</b>@Model.DeliveryDate.ToString("dd/MM/yyyy")<br />
                        <b>Employer:</b>@Model.Employee<br />
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            @*---------Received Accessories------------*@
            <div class="panel panel-primary">
                <div class="panel-heading"><span class="glyphicon glyphicon-check"></span> Received Accessories</div>
                <div class="panel-body">
                    <div class="col-xs-3" style="display: inline; width: 20%; padding-bottom: 5px; padding-top: 5px; text-align: center; margin-bottom: 0px;">
                        Battery
                    </div>
                    <div class="col-xs-3" style="display: inline; width: 20%; padding-bottom: 5px; padding-top: 5px; text-align: center; margin-bottom: 0px;">
                        Charger
                    </div>
                    <div class="col-xs-3" style="display: inline; width: 20%; padding-bottom: 5px; padding-top: 5px; text-align: center; margin-bottom: 0px;">
                        Mem.Card
                    </div>
                    <div class="col-xs-3" style="display: inline; width: 20%; padding-bottom: 5px; padding-top: 5px; text-align: center; margin-bottom: 0px;">
                        Case
                    </div>
                    <div class="col-xs-3" style="display: inline; width: 20%; padding-bottom: 5px; padding-top: 5px; text-align: center; margin-bottom: 0px;">
                        Sim
                    </div>
                    <div class="col-xs-3" style="display: inline; width: 20%; padding: 0px; text-align: center;">
                        @Html.DisplayFor(it => it.ReceivedAccessories.Battery)
                    </div>
                    <div class="col-xs-3" style="display: inline; width: 20%; padding: 0px; text-align: center;">
                        @Html.DisplayFor(it => it.ReceivedAccessories.Charger)
                    </div>
                    <div class="col-xs-3" style="display: inline; width: 20%; padding: 0px; text-align: center;">
                        @Html.DisplayFor(it => it.ReceivedAccessories.MemoryCard)
                    </div>
                    <div class="col-xs-3" style="display: inline; width: 20%; padding: 0px; text-align: center;">
                        @Html.DisplayFor(it => it.ReceivedAccessories.PhoneCase)
                    </div>
                    <div class="col-xs-3" style="display: inline; width: 20%; padding: 0px; text-align: center;">
                        @Html.DisplayFor(it => it.ReceivedAccessories.SimCard)
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            @*-----------Initial Check-------------*@
            <div class="panel panel-primary">
                <div class="panel-heading"><span class="glyphicon glyphicon-check"></span> Initial check</div>
                <div class="panel-body">
                    <div class="col-xs-3" style="display: inline; width: 20%; padding-bottom: 5px; padding-top: 5px; text-align: center; margin-bottom: 0px;">
                        Battery
                    </div>
                    <div class="col-xs-3" style="display: inline; width: 20%; padding-bottom: 5px; padding-top: 5px; text-align: center; margin-bottom: 0px;">
                        Charging
                    </div>
                    <div class="col-xs-3" style="display: inline; width: 20%; padding-bottom: 5px; padding-top: 5px; text-align: center; margin-bottom: 0px;">
                        Display
                    </div>
                    <div class="col-xs-3" style="display: inline; width: 20%; padding-bottom: 5px; padding-top: 5px; text-align: center; margin-bottom: 0px;">
                        Network
                    </div>
                    <div class="col-xs-3" style="display: inline; width: 20%; padding-bottom: 5px; padding-top: 5px; text-align: center; margin-bottom: 0px;">
                        Power
                    </div>
                    <div class="col-xs-3" style="display: inline; width: 20%; padding: 0px; text-align: center;">
                        @Html.DisplayFor(it => it.InitialCheck.Battery)
                    </div>
                    <div class="col-xs-3" style="display: inline; width: 20%; padding: 0px; text-align: center;">
                        @Html.DisplayFor(it => it.InitialCheck.Charging)
                    </div>
                    <div class="col-xs-3" style="display: inline; width: 20%; padding: 0px; text-align: center;">
                        @Html.DisplayFor(it => it.InitialCheck.Display)
                    </div>
                    <div class="col-xs-3" style="display: inline; width: 20%; padding: 0px; text-align: center;">
                        @Html.DisplayFor(it => it.InitialCheck.Network)
                    </div>
                    <div class="col-xs-3" style="display: inline; width: 20%; padding: 0px; text-align: center;">
                        @Html.DisplayFor(it => it.InitialCheck.PowerOn)
                    </div>
                </div>
            </div>
        </div>
    </div>
    @*-------------------------Problem Description----------------------*@
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-primary">
            <div class="panel-heading"><span class="glyphicon glyphicon-check"></span> Problem Description</div>
            <div class="panel-body">
                @foreach (var problem in Model.Problem_Order)
                {
                    @problem.Problem.Description <br />
                }

            </div>
        </div>
            </div>
            <div class="col-md-6">@*------------Payment Information----------------*@
                <div class="panel panel-primary">
                    <div class="panel-heading"><span class="glyphicon glyphicon-check"></span> Payment Information</div>
                    <div class="panel-body">
                    </div>
                </div>
            </div>
    </div>
    <div class="customer"></div>
    <div class="employee"></div>
    <div class="barcode" style="text-align:center;"><img style="" src="@Url.Action("GetBarcode", "Home", new { barcodeNumber = Model.IMEI })" alt="alt text" /></div>
</div>