@using static WebWindowComplex.LayoutConst
<div class="row">
    @if (isLoading)
    {
        <EgwCoreLib.Razor.LoadingData></EgwCoreLib.Razor.LoadingData>
    }
    else
    {
        if (listErrPre != null && listErrPre.Count > 0)
        {
            <div class="alert alert-danger">
                <div class="fs-3">Errori validazione!</div>
                <div class="col-12 col-md-6 col-lg-3">

                    <ul class="list-group">
                        @foreach (var item in listErrPre)
                        {
                            <li class="list-group-item">@item.Value</li>
                        }
                    </ul>
                </div>
            </div>
        }
        else if (listErrLink != null && listErrLink.Count > 0)
        {
            <div class="alert alert-danger">
                <div class="fs-3">Errore configurazione:</div>
                <div class="col-12">

                    <ul class="list-group">
                        @foreach (var item in listErrLink)
                        {
                            <li class="list-group-item">@item.Value</li>
                        }
                    </ul>
                </div>
            </div>
        }
        else
        {
            <div class="@mainCss()">
                <div class="card text-center table-svg shadow rounded">
                    <div class="card-header" style="background-color: #d5f1f2;">
                        <div class="d-flex justify-content-between align-middle">
                            <div class="@headerCss()">
                                <ul class="nav nav-tabs card-header-tabs">
                                    @if (string.IsNullOrEmpty(LiveData.CurrJwd))
                                    {
                                        <li class="nav-item m-1">
                                            @if (currStep == CompileStep.Template)
                                            {
                                                <button data-target="#Template" class="nav-link active fw-bold" aria-current="true" @onclick="() => AdvStep(CompileStep.Template)">Template</button>
                                            }
                                            else
                                            {
                                                <button data-target="#Template" class="nav-link text-secondary" @onclick="() => AdvStep(CompileStep.Template)">Template</button>
                                            }
                                        </li>
                                    }
                                    @if (FrameWindow != null)
                                    {
                                        <li class="nav-item m-1">
                                            <button data-target="#Tree" class="@tabNavCss(CompileStep.Tree)" aria-current="true" @onclick="() => NextStep(CompileStep.Tree)">Tree</button>
                                        </li>
                                        <li class="nav-item m-1">
                                            <button data-target="#General" class="@tabNavCss(CompileStep.General)" aria-current="true" @onclick="() => NextStep(CompileStep.General)">General</button>
                                        </li>
                                    }
                                </ul>
                            </div>
                            <div class="@buttonCss()">
                                <div class="col d-flex">
                                    @if (currStep != CompileStep.Template)
                                    {
                                        <button class="btn btn-lg btn-primary" style="font-size: 1rem;" @onclick="DoReset">Reset</button>
                                    }
                                </div>
                                <div class="col d-flex">
                                    <button class="btn btn-lg btn-primary" style="font-size: 1rem;" @onclick="DoSave">Save</button>
                                </div>
                                <div class="col d-flex">
                                    <button class="btn btn-lg btn-primary" style="font-size: 1rem;" @onclick="DoClose">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body bg-transparent">
                        <div class="text-center">
                            @if (string.IsNullOrEmpty(LiveData.CurrJwd))
                            {
                                @if (currStep == CompileStep.Template && ListPayload.TemplateDTO != null)
                                {
                                    <table class="table table-hover align-middle shadow-sm">
                                        <thead class="fs-5">
                                            <tr>
                                                <th scope="col">#</th>
                                                <th scope="col" class="col-4">Image</th>
                                                <th scope="col" class="text-start">Description</th>
                                            </tr>
                                        </thead>
                                        <tbody class="table-group-divider fs-5">
                                            @foreach (var item in ListPayload.TemplateDTO)
                                            {
                                                string colorClass = "";
                                                @if (SelTemplateDTO != null && item.Index == SelTemplateDTO.Index)
                                                    colorClass = "table-success";
                                                else
                                                    colorClass = "";
                                                <tr style="height: 120px;" class="@colorClass" @onclick="() => DoSelect(item)">
                                                    <td>@item.Index</td>
                                                    <td><img class="img-fluid" width="100" src="@item.ImageUrl" /></td>
                                                    <td class="text-start">@item.Description</td>
                                                </tr>
                                            }
                                        </tbody>
                                    </table>
                                }
                            }
                            @if (currStep == CompileStep.Tree)
                            {
                               <CardTree ItemTableList="m_ItemTableList" maxCol="m_maxCol" EC_NextStep="NextStepArgs"></CardTree>
                            }
                            else if (currStep == CompileStep.Frame)
                            {
                                @if (m_CurrWindow != null)
                                {
                                    m_PreviousWindow = m_CurrWindow;
                                }
                                <CardFrame FrameWindow="m_Frame" SashList="m_SashList" SplitList="m_SplitList" EC_ChangeAllJoints="ChangeAllJoints" EC_AddSash="() => AddSashToFrame(FrameWindow)" EC_AddSplit="() => FrameWindow.AddSplit(FrameWindow)" EC_ReqClose="ReturnTree" EC_UpdateFrame="UpdateFrame"></CardFrame>
                            }
                            else if (currStep == CompileStep.Split)
                            {
                                @if (currSplit >= SplitList.Count || currSplit == -1)
                                {
                                    currStep = CompileStep.Tree;
                                }
                                else
                                {
                                    Split item = SplitList[currSplit];
                                    <div class="container">
                                        <div class="row">
                                            <div class="text-start p-1 display-4">
                                                <div class="row">
                                                    <div class="col-sm-12">
                                                        <div class="border mb-2 shadow-sm rounded">
                                                            <div class="card-body py-2">
                                                                <div class="row my-2">
                                                                    <div class="col-sm-4">
                                                                        <h5 class="card-title">@(descParentSplit(item))</h5>
                                                                    </div>
                                                                </div>
                                                                <div class="col">
                                                                    <div class="border mb-2 shadow-sm rounded">
                                                                        <div class="card-body py-2">
                                                                            <div class="row">
                                                                                <div class="col-sm-4">
                                                                                    <h5 class="card-title">Split</h5>
                                                                                </div>
                                                                                <div class="col-sm-4">
                                                                                    @if ((item.nSplitQtyVert == 1 && item.nSplitQtyHoriz == 0) || (item.nSplitQtyVert == 0 && item.nSplitQtyHoriz == 1))
                                                                                    {
                                                                                        <div class="input-group mb-2 justify-content-center">
                                                                                            <button class="btn  btn-outline-secondary btn-sm" @onclick="() => SwapTwoAree(item)">Swap Aree</button>
                                                                                        </div>
                                                                                    }
                                                                                </div>
                                                                                <div class="col-sm-4">
                                                                                    <div class="input-group mb-2 justify-content-center">
                                                                                        <button class="btn btn-outline-secondary btn-sm" @onclick="() => RemoveArea(item)">Remove split</button>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="row">
                                                                                <div class="col-sm-6">
                                                                                    <div class="input-group mb-2">
                                                                                        <label class="input-group-text" for="ShapeSplit@(SplitList.IndexOf(item) + 1)">Shape</label>
                                                                                        <select class="form-select" id="ShapeSplit@(SplitList.IndexOf(item) + 1)" @bind="@item.SelSplitShapeIndex">
                                                                                            <option value="0">Vertical</option>
                                                                                            <option value="1">Horizontal</option>
                                                                                            <option value="2">Grid</option>
                                                                                            <option value="3">Custom</option>
                                                                                        </select>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="row">
                                                                                @if (item.nSplitQtyVert > 0)
                                                                                {
                                                                                    <div class="col-sm-6">
                                                                                        <div class="input-group mb-2">
                                                                                            <span class="input-group-text" id="SplitQty@(SplitList.IndexOf(item) + 1)">QtyVert</span>
                                                                                            <input type="number" class="form-control" placeholder="0" aria-label="basic-addon1Split" @bind="@item.nSplitQtyVert">
                                                                                        </div>
                                                                                    </div>
                                                                                }
                                                                                @if (item.nSplitQtyHoriz > 0)
                                                                                {
                                                                                    <div class="col-sm-6">
                                                                                        <div class="input-group mb-2">
                                                                                            <span class="input-group-text" id="SplitQty@(SplitList.IndexOf(item) + 1)">QtyHoriz</span>
                                                                                            <input type="number" class="form-control" placeholder="0" aria-label="basic-addon1Split" @bind="@item.nSplitQtyHoriz">
                                                                                        </div>
                                                                                    </div>
                                                                                }
                                                                            </div>
                                                                            <div class="row">
                                                                                @if (item.SplitVertList.Count > 0 && item.SplitHorizList.Count > 0)
                                                                                {
                                                                                    <div class="col-sm-6">
                                                                                        @foreach (var dim in item.SplitVertList)
                                                                                        {
                                                                                            <div class="input-group mb-2">
                                                                                                <span class="input-group-text" id="SplitDimension@(item.SplitVertList.IndexOf(dim) + 1)">Width</span>
                                                                                                <input type="number" class="form-control" aria-label="basic-addon2Split" @bind="@dim.dDimension">
                                                                                                <span class="input-group-text">%</span>
                                                                                            </div>
                                                                                        }
                                                                                    </div>
                                                                                    <div class="col-sm-6">
                                                                                        @foreach (var dim in item.SplitHorizList)
                                                                                        {
                                                                                            <div class="input-group mb-2">
                                                                                                <span class="input-group-text" id="SplitDimension@(item.SplitHorizList.IndexOf(dim) + 1)">Height</span>
                                                                                                <input type="number" class="form-control" aria-label="basic-addon2Split" @bind="@dim.dDimension">
                                                                                                <span class="input-group-text">%</span>
                                                                                            </div>

                                                                                        }
                                                                                    </div>
                                                                                }
                                                                                else if (item.SplitHorizList.Count > 0)
                                                                                {
                                                                                    @foreach (var dim in item.SplitHorizList)
                                                                                    {
                                                                                        <div class="col-sm-6">
                                                                                            <div class="input-group mb-2">
                                                                                                <span class="input-group-text" id="SplitDimension@(item.SplitHorizList.IndexOf(dim) + 1)">Height</span>
                                                                                                <input type="number" class="form-control" aria-label="basic-addon2Split" @bind="@dim.dDimension">
                                                                                                <span class="input-group-text">%</span>
                                                                                            </div>
                                                                                        </div>
                                                                                    }
                                                                                }
                                                                                else if (item.SplitVertList.Count > 0)
                                                                                {
                                                                                    @foreach (var dim in item.SplitVertList)
                                                                                    {
                                                                                        <div class="col-sm-6">
                                                                                            <div class="input-group mb-2">
                                                                                                <span class="input-group-text" id="SplitDimension@(item.SplitVertList.IndexOf(dim) + 1)">Width</span>
                                                                                                <input type="number" class="form-control" aria-label="basic-addon2Split" @bind="@dim.dDimension">
                                                                                                <span class="input-group-text">%</span>
                                                                                            </div>
                                                                                        </div>
                                                                                    }
                                                                                }
                                                                            </div>
                                                                            @if (item.SelSplitShape == Json.WindowConst.SplitShapes.GRID)
                                                                            {
                                                                                <div class="row">
                                                                                    <div class="col-sm-6">
                                                                                        <div class="d-flex justify-content-start fs-5 mb-2">
                                                                                            <div class="px-1">
                                                                                                <input class="form-check-input ml-auto" type="checkbox" name="SplitStartVert" id="SplitStartVert@(SplitList.IndexOf(item) + 1)" checked="@item.bSplitStartVert" @oninput="(ChangeEventArgs e) => changeStartVert(e, item)">
                                                                                            </div>
                                                                                            <div class="px-2">
                                                                                                <label class="form-check-label fs-6 text-dark" for="SplitStartVert@(SplitList.IndexOf(item) + 1)">StartVert</label>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            }
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                }
                            }
                            else if (currStep == CompileStep.Sash)
                            {
                                @if (currSash >= SashList.Count || currSash == -1)
                                {
                                    currStep = CompileStep.Tree;
                                }
                                else
                                {
                                    Sash item = SashList[currSash];
                                    <div class="container">
                                        <div class="row">
                                            <div class="text-start p-1 display-4">
                                                <div class="row">
                                                    <div class="col-sm-12">
                                                        <div class="border mb-2 shadow-sm rounded">
                                                            <div class="card-body py-2">
                                                                <div class="row my-2">
                                                                    <div class="col-sm-6">
                                                                        @if (SashList.Count > 1)
                                                                        {
                                                                            <h3 class="card-title">Window @(currSash + 1)</h3>
                                                                        }
                                                                        else
                                                                        {
                                                                            <h3 class="card-title">Window</h3>
                                                                        }
                                                                    </div>
                                                                    <div class="col-sm-6 align-items-center">
                                                                        <div class="input-group mb-2 justify-content-center">
                                                                            <button class="btn  btn-outline-secondary btn-sm" @onclick="() => RemoveArea(item)">Remove window</button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="row">
                                                                    <div class="col-sm-6">
                                                                        <div class="input-group mb-2">
                                                                            <span class="input-group-text" id="NumberSash@(SashList.IndexOf(item) + 1)">Qty sash</span>
                                                                            <input type="number" class="form-control" aria-label="NumberSash@(SashList.IndexOf(item) + 1)" @bind="@item.nSashQty">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="row">
                                                                    <div class="col-sm-6">
                                                                        <div class="input-group mb-2">
                                                                            <label class="input-group-text" for="OrientationSash@(SashList.IndexOf(item) + 1)">Tipology</label>
                                                                            <select class="form-select" id="OrientationSash@(SashList.IndexOf(item) + 1)" @bind="@item.SelOrientationSashTypeIndex">
                                                                                <option value="0">Vertical</option>
                                                                                <option value="1">Horizontal</option>
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-sm-6">
                                                                        <div class="input-group mb-2">
                                                                            <span class="input-group-text" id="BottomRailQty@(SashList.IndexOf(item) + 1)">Qty bottom rail</span>
                                                                            <input type="number" class="form-control" aria-label="BottomRailQty" @bind="@item.SashBottomRailQty">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <hr />
                                                                <div class="row">
                                                                    <div class="col-sm-6">
                                                                        <div class="row">
                                                                            <div class="col-sm-3">
                                                                                <h5 class="card-title">Joints</h5>
                                                                            </div>
                                                                            <div class="col-sm-3">
                                                                                <div class="input-group mb-2 justify-content-center">
                                                                                    @* <button class="btn btn-outline-secondary btn-sm" @onclick="() => ChangeAllJoints(WebWindowComplex.Json.WindowConst.Joints.ANGLED, item)">Angled</button> *@
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-sm-3">
                                                                                <div class="input-group mb-2 justify-content-center">
                                                                                    @* <button class="btn btn-outline-secondary btn-sm" @onclick="() => ChangeAllJoints(WebWindowComplex.Json.WindowConst.Joints.FULL_H, item)">Horizontal</button> *@
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-sm-3">
                                                                                <div class="input-group mb-2 justify-content-center">
                                                                                    @* <button class="btn btn-outline-secondary btn-sm" @onclick="() => ChangeAllJoints(WebWindowComplex.Json.WindowConst.Joints.FULL_V, item)">Vertical</button> *@
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        @foreach (Joint joint in item.JointList)
                                                                        {
                                                                            <div class="col-sm-12">
                                                                                <div class="input-group mb-2">
                                                                                    <label class="input-group-text" for="IndexJoint@(joint.nIndex)">@((PositionJoints)(joint.nIndex - 1))</label>
                                                                                    <select class="form-select" id="IndexJoint@(joint.nIndex)" @bind="@joint.SelJointTypeIndex">
                                                                                        <option value="0">Angled</option>
                                                                                        <option value="1">Full H</option>
                                                                                        <option value="2">Full V</option>
                                                                                    </select>
                                                                                </div>
                                                                            </div>
                                                                        }

                                                                    </div>
                                                                    <div class="col-sm-6">
                                                                        <div class="row">
                                                                            <div class="col-sm-6">
                                                                                <h5 class="card-title">Hardware</h5>
                                                                            </div>
                                                                            <div class="input-group mb-2 justify-content-center">
                                                                            </div>
                                                                        </div>
                                                                        <div class="input-group mb-2">
                                                                            <label class="input-group-text" for="FamilyHardware">Family</label>
                                                                            <select class="form-select" id="FamilyHardware" @bind="@item.SelFamilyHardware">
                                                                                @if (Sash.s_FamilyHardwareList == null || Sash.s_FamilyHardwareList.Count == 0)
                                                                                {
                                                                                    <option value="000000">ERROR - Missing family HW List</option>
                                                                                }
                                                                                else
                                                                                {
                                                                                    @foreach (var familyHw in Sash.s_FamilyHardwareList)
                                                                                    {
                                                                                        <option value="@familyHw">@familyHw</option>
                                                                                    }
                                                                                }
                                                                            </select>
                                                                        </div>
                                                                        <div class="input-group mb-2">
                                                                            <label class="input-group-text" for="Hardware">Type</label>
                                                                            <select class="form-select" id="Hardware" @bind="@item.SelHardwareFromId">
                                                                                @if (item.HardwareList == null || item.HardwareList.Count == 0)
                                                                                {
                                                                                    <option value="000000">ERROR - Missing HW List</option>
                                                                                }
                                                                                else
                                                                                {
                                                                                    @foreach (var hlItem in item.HardwareList)
                                                                                    {
                                                                                        <option value="@hlItem.Id" typeof="string">@hlItem.Description</option>
                                                                                    }
                                                                                }
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-sm-12">
                                                        <div class="border mb-2 shadow-sm rounded">
                                                            <div class="card-body py-2">
                                                                <div class="row">
                                                                    @for (int i = 0; i <= item.SashList.Count / 2; i++)
                                                                    {
                                                                        for (int j = 0; j < 2 && (i * 2 + j <= item.SashList.Count - 1); j++)
                                                                        {
                                                                            SashDimension sash = item.SashList[i * 2 + j];
                                                                            Area anta;
                                                                            @if (item.AreaList[i * 2 + j] is Splitted)
                                                                            {
                                                                                anta = item.AreaList[i * 2 + j];
                                                                            }
                                                                            else
                                                                            {
                                                                                anta = item;
                                                                            }
                                                                            <div class="col-sm-6 my-2">
                                                                                @if (item.SashList.Count == 1)
                                                                                {
                                                                                    <h5 class="card-title">Sash</h5>
                                                                                }
                                                                                else
                                                                                {
                                                                                    <h5 class="card-title">Sash @(i * 2 + j + 1)</h5>
                                                                                }
                                                                                <div class="input-group mb-2">
                                                                                    <label class="input-group-text" for="OpeningSash@(i * 2 + j + 1)">Tipology</label>
                                                                                    <select class="form-select" id="OpeningSash@(i * 2 + j + 1)" @bind="@sash.SelOpeningTypeIndex">
                                                                                        <option value="0">A bandiera sinistra</option>
                                                                                        <option value="1">A bandiera destra</option>
                                                                                        <option value="2">Ad anta-ribalta sinistra</option>
                                                                                        <option value="3">Ad anta-ribalta destra</option>
                                                                                        <option value="4">Solo verso alto</option>
                                                                                        <option value="5">Solo verso basso</option>
                                                                                        <option value="6">Pivot</option>
                                                                                        <option value="7">Fissa</option>
                                                                                        <option value="8">Complanare sinistra</option>
                                                                                        <option value="9">Complanare destra</option>
                                                                                        <option value="10">Scorrevole sinistra</option>
                                                                                        <option value="11">Scorrevole destra</option>
                                                                                    </select>
                                                                                </div>
                                                                                <div class="input-group mb-2">
                                                                                    <span class="input-group-text">Dimension</span>
                                                                                    <input type="number" class="form-control" aria-label="DimensionSash" @bind="@sash.dDimension">
                                                                                    <span class="input-group-text">%</span>
                                                                                </div>
                                                                                <div class="d-flex justify-content-start fs-5 mb-2">
                                                                                    <div class="px-1">
                                                                                        <input class="form-check-input ml-auto" type="checkbox" name="Handle" id="HandleSashLabel@(i * 2 + j + 1)" checked="@sash.bHasHandle" @onclick="() => changeHandle(sash, item)">
                                                                                    </div>
                                                                                    <div class="px-2">
                                                                                        <label class="form-check-label fs-6 text-dark" for="HandleSashLabel@(i * 2 + j + 1)">Handle</label>
                                                                                    </div>
                                                                                </div>
                                                                                @if (!(anta.AreaList[0] is Split))
                                                                                {
                                                                                    <div class="row">
                                                                                        <div class="col-sm-6">
                                                                                            <div class="input-group mb-2 justify-content-center">
                                                                                                <button class="btn btn-outline-secondary btn-sm" @onclick="() => anta.AddSplit(anta)">Aggiungi split</button>
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="col-sm-6">
                                                                                            <div class="input-group mb-2 justify-content-center">
                                                                                                <button class="btn btn-outline-secondary btn-sm">Aggiungi inglesina</button>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                }
                                                                                <div class="row d-grid d-md-flex justify-content-center">
                                                                                    @for (int k = 0; k <= item.SashList.Count - 1; k++)
                                                                                    {
                                                                                        @if (k != i * 2 + j)
                                                                                        {
                                                                                            int IndexCopy = k;
                                                                                            int IndexModify = i * 2 + j;
                                                                                            <div class="col-sm-6 my-1">
                                                                                                <div class="input-group justify-content-center">
                                                                                                    <button class="btn btn-outline-secondary btn-sm" @onclick="() => CopyContentSash(item, IndexCopy, IndexModify)">Copy sash @(k + 1)</button>
                                                                                                </div>
                                                                                            </div>
                                                                                        }
                                                                                    }
                                                                                </div>
                                                                            </div>

                                                                        }
                                                                    }
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                }
                            }
                            else if (currStep == CompileStep.Fill)
                            {
                                @if (currFill >= FillList.Count || currFill == -1)
                                {
                                    currStep = CompileStep.Tree;
                                }
                                else
                                {
                                    Fill item = FillList[currFill];
                                    <CardFill CurrIndex="currFill" CurrItem="item" FillList="m_FillList" SashList="m_SashList" SplittedList="m_SplittedList" EC_ChangeAllType="ChangeAllFill" EC_ChangeType="ChangeOneFill" EC_CopySash="CopySash" EC_ReqClose="ReturnTree"></CardFill>
                                }
                            }
                            else if (currStep == CompileStep.General)
                            {
                                <General CurrWindow="@m_CurrWindow" ListPayload="ListPayload" ListWarnings="listWarnings" EC_SelColor="SelectColor" EC_SelGlass="SelectGlass" EC_SelWindMat="SelectMat" EC_ReqClose="ReturnTree"></General>
                            }
                        </div>
                    </div>
                </div>
            </div>
            @if (currStep != CompileStep.Template)
            {
                <div class="col-6">
                    @outSvg
                </div>
            }
            if (listWarnings != null && listWarnings.Count > 0)
            {
                <div class="alert alert-warning">
                    <div class="fs-3">Mancata corrispondenza valori:</div>
                    <div class="col-12 col-md-6 col-lg-3">

                        <ul class="list-group">
                            @foreach (var item in listWarnings)
                            {
                                <li class="list-group-item">@item.Value</li>
                            }
                        </ul>
                    </div>
                </div>
            }
        }
    }
</div>

@if (bError)
{
    <div class="alert alert-danger" role="alert">
        Aggiunta finestra non possibile.
    </div>
}