@using WebWindowComplex.Models
@using static WebWindowComplex.Json.WindowConst

<div class="card shadow-sm rounded mb-4">
    <div class="card-header bg-light bg-opacity-25">
        <div class="d-flex justify-content-between align-items-center">
            <div class="px-2">
                <h5>Sash group @(SashGroupList.Count > 1 ? (SashGroupList.IndexOf(CurrSashGroup) + 1) : "")</h5>
            </div>
            @if (!User)
            {
                <div class="px-2">
                    <div class="input-group mb-2 justify-content-center">
                        <button class="btn  btn-outline-secondary btn-sm" @onclick="() => RemoveArea()">Remove sash group</button>
                    </div>
                </div>
            }
            <div class="px-2">
                <button class="btn btn-close" @onclick="ReqClose"></button>
            </div>
        </div>
    </div>
    <div class="card-body py-2">
        <div class="row pt-2">
            <div class="col-md-12 col-lg-6">
                <div class="input-group mb-2">
                    <span class="input-group-text">Qty sash</span>
                    @if (User)
                    {
                        <input type="number" readonly class="form-control" value="@SashQty">
                    }
                    else
                    {
                        <input type="number" class="form-control" @bind="@SashQty">
                    }
                </div>
            </div>
            <div class="col-md-12 col-lg-6">
                <div class="input-group mb-2">
                    @if (User)
                    {
                        <span class="input-group-text">Tipology</span>
                        <input type="text" readonly class="form-control" value="@(CurrSashGroup.OrientationSashTypeList.FirstOrDefault(x => x.Id == OrientationSashTypeIndex).Name)">
                    }
                    else
                    {
                        <label class="input-group-text">Tipology</label>
                        <select class="form-select" @bind="@OrientationSashTypeIndex">
                            @foreach (var orientationSash in CurrSashGroup.OrientationSashTypeList)
                            {
                                <option value="@(orientationSash.Id)">@(orientationSash.Name)</option>
                            }
                        </select>
                    }
                </div>
            </div>
            <div class="col-md-12 col-lg-6">
                <div class="input-group mb-2">
                    <span class="input-group-text">Qty bottom rail</span>
                    @if (User)
                    {
                        <input type="number" readonly class="form-control" value="@SashBottomRailQty">
                    }
                    else
                    {
                        @if (CurrSashGroup.SashBottomRailQty > 0)
                        {
                            <BottomRail CurrArea="CurrSashGroup" EC_UpdateBottomRail="UpdateBottomRail"></BottomRail>
                        }
                        <input type="number" class="form-control" @bind="@SashBottomRailQty">
                    }
                </div>
            </div>
        </div>
        <hr />
        <div class="row">
            <div class="col-md-12 col-lg-6">
                <div class="row justify-content-between align-items-center">
                    <div class="col d-flex justify-content-start align-items-center">
                        <h6 class="fw-bold">Hardware</h6>
                    </div>
                </div>
                @if (User)
                {
                    <div class="input-group mb-2">
                        <span class="input-group-text">Family</span>
                        <input type="text" readonly class="form-control" value="@FamilyHardware">
                    </div>
                    <div class="input-group mb-2">
                        <span class="input-group-text">Type</span>
                        <input type="text" readonly class="form-control" value="@SelHwType">
                    </div>
                }
                else
                {
                    <div class="input-group mb-2">
                        <label class="input-group-text">Family</label>
                        <select class="form-select" @bind="@FamilyHardware">
                            @if (Sash.s_FamilyHardwareList == null || Sash.s_FamilyHardwareList.Count == 0)
                            {
                                <option value="000000">CUSTOM</option>
                            }
                            else
                            {
                                @foreach (var familyHw in Sash.s_FamilyHardwareList)
                                {
                                    <option value="@familyHw">@familyHw</option>
                                }
                            }
                        </select>
                    </div>
                    @if (string.IsNullOrEmpty(CurrSashGroup.SashShape))
                    {
                        <div class="input-group mb-2">
                            <label class="input-group-text">Type</label>
                            <select class="form-select">
                                <option value="000000">Custom HW</option>
                            </select>
                        </div>
                    }
                    else
                    {
                        <div class="input-group mb-2">
                            <label class="input-group-text">Type</label>
                            <select class="form-select" @bind="SelHwType">
                                <option value="000000">Custom HW</option>
                                @foreach (var hlItem in CurrSashGroup.HardwareList)
                                {
                                    <option value="@hlItem.Id">@hlItem.Description</option>
                                }
                            </select>
                        </div>
                    }

                }
            </div>
            <div class="col-md-12 col-lg-6">
                <AreaHwOption EC_UpdateHwOpt="UpdateOpt"
                              EC_FirstHwOptionList="FirstHwOptionList">
                </AreaHwOption>
            </div>
        </div>
    </div>
</div>

<div class="card shadow-sm rounded mb-4">
    <div class="card-body py-2">
        <div class="d-flex justify-content-end align-items-center">
            <div class="col-md-3">
                <select class="form-select" @bind="@MeasureType">
                    <option value="@MeasureTypes.ABSOLUTE">Absolute (mm)</option>
                    <option value="@MeasureTypes.PROPORTIONAL">Proportional (*)</option>
                    <option value="@MeasureTypes.PERCENTAGE">Percentage (%)</option>
                </select>
            </div>
            <div class="col-md-2">
                <select class="form-select" @bind="@ChangeType">
                    <option value="0">Sash</option>
                    <option value="1">Glass</option>
                </select>
            </div>
            @* <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#MeasureSettingModal">
                <i class="fa-solid fa-gear"></i>
            </button>
            <div class="modal fade" id="MeasureSettingModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="staticBackdropLabel">Measure settings</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="d-flex justify-content-between align-items-center pb-2">
                                <div class="col-md-6 px-2">
                                    <select class="form-select" @bind="@MeasureType">
                                        <option value="@MeasureTypes.ABSOLUTE">Absolute (mm)</option>
                                        <option value="@MeasureTypes.PROPORTIONAL">Proportional (*)</option>
                                        <option value="@MeasureTypes.PERCENTAGE">Percentage (%)</option>
                                    </select>
                                </div>
                                <div class="col-md-6 px-2">
                                    <select class="form-select" @bind="@ChangeType">
                                        <option value="0">Sash</option>
                                        <option value="1">Glass</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> *@
            @* <div class="dropdown px-4">
                <button class="btn btn-outline-secondary dropdown-toggle btn-sm" type="button" data-bs-toggle="dropdown">
                    Unità misura
                </button>
                <ul class="dropdown-menu" style="min-width:5rem; max-width:10rem">
                    <li><button class="@MeasureTypeCss(MeasureTypes.ABSOLUTE)" @onclick="() => SetMeasureType(MeasureTypes.ABSOLUTE)">Absolute</button></li>
                    <li><button class="@MeasureTypeCss(MeasureTypes.ABSOLUTE)" @onclick="() => SetMeasureType(MeasureTypes.PROPORTIONAL)">Proportional</button></li>
                    <li><button class="@MeasureTypeCss(MeasureTypes.ABSOLUTE)" @onclick="() => SetMeasureType(MeasureTypes.PERCENTAGE)">Percentage</button></li>
                </ul>
            </div> *@
           @*  <div class="dropdown">
                <button class="btn btn-outline-secondary dropdown-toggle btn-sm" type="button" data-bs-toggle="dropdown">
                    Measure type
                </button>
                <ul class="dropdown-menu" style="min-width:7rem; max-width:10rem">
                    <li><button class="@TypeDimensionCss(false)" @onclick="() => ChangeTypeDimension(false)">Sash</button></li>
                    <li><button class="@TypeDimensionCss(true)" @onclick="() => ChangeTypeDimension(true)">Glass</button></li>
                </ul>
            </div> *@
        </div>
        @for (int i = 0; i < CurrSashGroup.SashList.Count; i++)
        {
            <div class="@AreaSashCss(i)">
                <AreaSash CurrSashDim="CurrSashGroup.SashList[i]"
                          IndexSash="i"
                          EC_UpdateSash="UpdateSash"
                          EC_UpdateSashDim="UpdateSashDimension"
                          EC_ReqResetDict="ResetDict"
                          EC_EditView="EditView">
                </AreaSash>
            </div>
            @if (i < CurrSashGroup.SashList.Count - 1)
            {
                <hr />
            }
        }
    </div>
</div>