<form method="POST" action="{{ @route('frontend.board.update',['id'=>$board->id])}}"
      id="updateForm">
    @csrf
    <input type="hidden" name="name" value="{{$board->name}}">
    <input type="hidden" name="from" value="1">
    <?php
    $size = $board->width . '_' . $board->height;
    $array_size = array("500_200", "800_600", "794_1123", "1587_2245", "2245_3179", "3179_4494");
    if (in_array($size, $array_size)) {
        $dimension_type = "auto";
    } else {
        $dimension_type = "custom";
    }
    ?>
    <div class="board_mainmenu_tools">
        <div class="accordion" id="mainmenuAccordion">
            <div class="card">
                <div class="card-header" aria-expanded="true" id="headingThree"
                     data-toggle="collapse" data-target="#description"
                     aria-controls="description">
                    <h2 class="mb-0 metadata-form-header">
                        Metadata
                    </h2>
                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="16"
                         viewBox="0 0 22 16">
                        <path id="Polygon_5" data-name="Polygon 5"
                              d="M9.352,2.4a2,2,0,0,1,3.3,0l7.2,10.47A2,2,0,0,1,18.2,16H3.8a2,2,0,0,1-1.648-3.133Z"
                              fill="#dcdcdc"/>
                    </svg>
                </div>
                <div id="description" class="collapse show"
                     aria-labelledby="headingThree"
                     data-parent="#mainmenuAccordion">
                    <div class="card-body">
                        <div class="mb-0 mt-1">
                            <h2 class="mb-0 metadata-form-header">Name </h2>
                        </div>
                        <input type="text" class="name_box"
                                  name="name" id="metadata_name" value="{{$board->name}}">
                        <div class="mb-0 mt-1">
                            <h2 class="mb-0 metadata-form-header">Description </h2>
                        </div>
                        <textarea class="description_box"
                                  name="description">{{$board->description}}</textarea>
                        <div class="mb-0 mt-1">
                            <h2 class="mb-0 metadata-form-header"> Tags </h2>
                        </div>
                        <div class="d-flex">


                            <select name="tags[]" id="board_tags"
                                    class="tagsselect" multiple>
                                @foreach ($tags as $item)
                                    <option
                                        value="{{$item->id}}"
                                        {{in_array($item->id, $board_tags_id) ? "selected" : "" }}>
                                        {{$item->text}}</option>
                                @endforeach
                            </select>
                            <button type="button" class="clear-all-btn"
                                    onclick="clearTags('board_tags','selectedBoardTags')">
                                <svg xmlns="http://www.w3.org/2000/svg"
                                     viewBox="0 0 129.94 129.94">
                                    <g id="Layer_2" data-name="Layer 2">
                                        <g id="Layer_1-2" data-name="Layer 1">
                                            <path
                                                d="M112.06,0H0V112.06a17.88,17.88,0,0,0,17.88,17.88h94.18a17.87,17.87,0,0,0,17.88-17.88V17.88A17.88,17.88,0,0,0,112.06,0Zm12.88,112.06a12.9,12.9,0,0,1-12.88,12.88H17.88A12.9,12.9,0,0,1,5,112.06V5H112.06a12.9,12.9,0,0,1,12.88,12.88ZM102,40,77,65l25,25a8.5,8.5,0,1,1-12,12L65,77,40,102a8.5,8.5,0,1,1-12-12L53,65l-25-25a8.5,8.5,0,1,1,12-12L65,53l25-25a8.5,8.5,0,1,1,12,12Z"/>
                                        </g>
                                    </g>
                                </svg>
                                Clear All
                            </button>
                        </div>
{{--                        Additional controls if admin--}}
                        @role('administrator')
                        <div class="mb-0 mt-2">
                            <h2 class="mb-0 metadata-form-header"> Template (admin only) </h2>
                        </div>
                        <div class="pretty p-switch">
                            <input type="checkbox" name="is_template" value="true" id="is_template"
                                {{is_null($board->is_template)?'' : "checked"}}
                            >
                            <div class="state  p-info">
                                <label>Is template?</label>
                            </div>
                        </div>
                        <div class="mb-0 mt-1">
                            <h2 class="mb-0 metadata-form-header"> Template type </h2>
                        </div>
                        <div class="d-flex">


                            <select name="board_template_types[]" id="board_template_types"
                                    class="templateselect" multiple>
                                @foreach ($board_template_types as $item)
                                    <option
                                        value="{{$item->id}}"
                                        {{in_array($item->id, $board_template_types_id) ? "selected" : "" }}>
                                        {{$item->text}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-0 mt-2">
                            <h2 class="mb-0 metadata-form-header"> Copy this board to all NEW users  </h2>
                        </div>
                        <div class="pretty p-switch">
                            <input type="checkbox" name="base_template" value="true" id="base_template"
                                {{is_null($board->base_template)?'' : "checked"}}
                            >
                            <div class="state  p-info">
                                <label>Copy to all new users?</label>
                            </div>
                        </div>
                        <div class="mb-0 mt-2">
                            <h2 class="mb-0 metadata-form-header"> Copy this board to all CURRENT users (Bonus board)  </h2>
                        </div>
                        <div class="pretty p-switch">
                            <input type="checkbox" name="bonus_template" value="true" id="bonus_template"
                                {{is_null($board->bonus_template)?'' : "checked"}}
                            >
                            <div class="state  p-info">
                                <label>Copy to all current users?</label>
                            </div>
                        </div>
                        @endrole
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header" id="headingOne" data-toggle="collapse"
                     data-target="#dimensions"
                     aria-controls="dimensions">
                    <h2 class="mb-0 metadata-form-header"> Dimensions (mm)
{{--                        <div class="pretty p-switch p-smooth p-toggle p-plain">--}}
{{--                            <input type="checkbox" name="metadata_units" value="1">--}}
{{--                            <div class="state p-success p-on">--}}
{{--                                <label style="font-weight: bold; color: #218838">mm</label>--}}
{{--                            </div>--}}
{{--                            <div class="state p-danger p-off">--}}
{{--                                <label style="font-weight: bold; color:#C82333 ">px</label>--}}
{{--                            </div>--}}

{{--                        </div> --}}
                    </h2>

                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="16"
                         viewBox="0 0 22 16">
                        <path id="Polygon_5" data-name="Polygon 5"
                              d="M9.352,2.4a2,2,0,0,1,3.3,0l7.2,10.47A2,2,0,0,1,18.2,16H3.8a2,2,0,0,1-1.648-3.133Z"
                              fill="#dcdcdc"/>
                    </svg>
                </div>

                <div id="dimensions" class="collapse"
                     aria-labelledby="headingOne" data-parent="#mainmenuAccordion">
                    <div class="card-body">
                        <div class="dimension-select-option dimension-select-option-custom">
                            <div class="pretty p-default p-round">
                                <input type="radio" name="size" value="custom" id="custom_dimensions_radio"
                                    {{$dimension_type == "custom" ? "checked" : ""}}
                                >
                                <div class="state  p-info-o">
                                    <label>Custom</label>
                                </div>
                            </div>

                            <div class="dimension-values" id="custom_dimension_input"
                                 style="{{$dimension_type == "custom" ?"":"display:none"}}">
                                <div class="dimension-vertical">
                                    <label for="">Width</label>
                                    <input type="text" id="cust_width_disp"
                                           value="{{$dimension_type == "custom" ? round((($board->width / 3.7795) * 100) / 100) : "" }}">
                                </div>
                                <input type="hidden" name="cust_width" id="cust_width_metadata_hidden" value="{{$board->width}}">
                                <div class="dimension-horizontal">
                                    <label for="">Height</label>
                                    <input type="text" id="cust_height_disp"
                                           value="{{$dimension_type == "custom" ? round((($board->height / 3.7795) * 100) / 100) : "" }}">
                                </div>
                                <input type="hidden" name="cust_height" id="cust_height_metadata_hidden" value="{{$board->height}}">

                            </div>
                        </div>


                        <div class="dimension-select-option">
                            <div class="pretty p-default p-round">
                                <input type="radio" name="size" value="794_1123"
                                    {{$dimension_type == "auto" && "794_1123" == $size ? "checked" : ""}} >
                                <div class="state p-info-o">
                                    <label>A4</label>
                                </div>
                            </div>

                            {{--                     --}}

                            <div class="dimension-values">
                                <p class="dimension-horizontal">297</p>
                                <p class="dimension-vertical">210</p>
                            </div>
                        </div>
                        <div class="dimension-select-option">
                            <div class="pretty p-default p-round">
                                <input type="radio" name="size" value="1587_2245"
                                    {{$dimension_type == "auto" && "1587_2245" == $size ? "checked" : ""}} >
                                <div class="state p-info-o">
                                    <label>A2</label>
                                </div>
                            </div>

                            <div class="dimension-values">
                                <p class="dimension-horizontal">594</p>
                                <p class="dimension-vertical">420</p>
                            </div>
                        </div>
                        <div class="dimension-select-option">
                            <div class="pretty p-default p-round">
                                <input type="radio" name="size" value="2245_3179"
                                    {{$dimension_type == "auto" && "2245_3179" == $size ? "checked" : ""}} >
                                <div class="state p-info-o">
                                    <label>A1</label>
                                </div>
                            </div>

                            <div class="dimension-values">
                                <p class="dimension-horizontal">594</p>
                                <p class="dimension-vertical">420</p>
                            </div>
                        </div>
                        <div class="dimension-select-option">
                            <div class="pretty p-default p-round">
                                <input type="radio" name="size" value="3179_4494"
                                    {{$dimension_type == "auto" && "3179_4494" == $size ? "checked" : ""}} >
                                <div class="state p-info-o">
                                    <label>A0</label>
                                </div>
                            </div>

                            <div class="dimension-values">
                                <p class="dimension-horizontal">1189</p>
                                <p class="dimension-vertical">841</p>
                            </div>
                        </div>

                        <div class="">
                            <div class="mb-0 mt-1">
                                <h2 class="mb-0 metadata-form-header"> Orientation </h2>
                            </div>
                            <div class="structure-options mt-1">
                                <button type="button"
                                        class="structure-btn {{$board->width > $board->height ? 'active' : $board->width . $board->height }}">

                                    <label class="input-group">
                                        <input type="radio" name="board_structure"
                                               style="display: none" value="landscape">
                                        <svg style="margin-top:10px">
                                            <rect width="45" height="25"/>
                                        </svg>
                                    </label>
                                </button>
                                <button type="button"
                                        class="structure-btn structure-btn_hor  {{$board->width < $board->height ? 'active' : "" }}">

                                    <label class="input-group">
                                        <input type="radio" name="board_structure"
                                               style="display: none" value="portrait">
                                        <svg
                                            style="margin-top: 10px;margin-left: 10px;">
                                            <rect width="25" height="45"/>
                                        </svg>
                                    </label>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            @if(count($folders)>0)
                <div class="card">
                    <div class="card-header collapsed" id="headingTwo"
                         data-toggle="collapse" data-target="#folder"
                         aria-expanded="false" aria-controls="folder">
                        <h2 class="mb-0 metadata-form-header">Folder</h2>
                        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="16"
                             viewBox="0 0 22 16">
                            <path id="Polygon_5" data-name="Polygon 5"
                                  d="M9.352,2.4a2,2,0,0,1,3.3,0l7.2,10.47A2,2,0,0,1,18.2,16H3.8a2,2,0,0,1-1.648-3.133Z"
                                  fill="#dcdcdc"/>
                        </svg>
                    </div>
                    <div id="folder" class="collapse" aria-labelledby="headingTwo"
                         data-parent="#mainmenuAccordion">
                        <div class="card-body">
                            <div class="css-treeview">
                                <ul class="css-treeview-lists" id="dragTreeView">
                                    @include('frontend.board.folder',['folders'=>$folders,'board_folder_id'=>$board->board_folder_id])

                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

        </div>
    </div>
    {{--    <button type="button" class="request-send-btn" onclick="saveBoardDetails()">--}}
    <button type="button" class="btn btn-outline-secondary btn-block" onclick="saveBoardDetails()">
        Save
    </button>
</form>
