@extends('layouts.dashboard')

@section('title', 'Manage Set Up')

@section('myJS')
	<script src="{{url('/')}}/js/admin/setup.js"></script>
@endsection

@section('content')

<div class="padding-top40"></div>

<div class="bs-example">

<!-- main part-->
<div class="container-fluid">
    @include('dashboard.MasterSetup.Header')
    <div class="row" style="margin: 0px; padding-top: 15px;">
        <div class="col-md-2 manage-text">
            <input type="text" class="form-control" id="inputTextBlock" placeholder="Text Block">
        </div>
        <div class="col-md-2">
            <button type="button" id="addTextBlock" class="btn btn-default btn-xs addTextBlock" data-toggle="modal" data-target="#textBlockModal" style="font-size:14px !important;">Add Text Block</button>
        </div>
        <div class="col-md-8"></div>
    </div>
    <div id="div_textblock_table" class="row table-catalog" style="margin: 0px;">
        <table data-page-length='50' id="textBlockTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th scope="col" class="set1">Text Block ID</th>
                    <th scope="col" class="set1">Text Block Name</th>
                    <th scope="col" class="set2">Multiline</th>
                    <th scope="col" class="set3">Allow HTML</th>
                    <th scope="col" class="set2">Operations</th>
                </tr>
            </thead>
            <tbody>
                @foreach($textBlockList as $textBlock)
                    <tr id="txtblkatt_{{$textBlock->TextBlockID}}">
                        <td class="set-col1">
                            {{$textBlock->TextBlockID}}
                        </td>
                        <td class="set-col1">
                            {{$textBlock->TextBlockName}}
                        </td>
                        <td class="set-col3">
                            <div class="checkbox set-checkbox">
                                <label>
                                    <input type="checkbox" name="" disabled value="" {{$textBlock->MultiLine == 1 ? 'checked' : ''}} >
                                </label>
                            </div>
                        </td>
                        <td class="set-col4">
                            <div class="checkbox set-checkbox">
                                <label>
                                    <input type="checkbox" name="" disabled value="" {{$textBlock->AllowHTML == 1 ? 'checked' : ''}} >
                                </label>
                            </div>
                        </td>
                        <td class="set-col5">
                            <div class="bt-seperation">
                                <button type="button" class="btn btn-primary btn-xs edit_button_textBlock"
                                data-toggle="modal" data-target="#textBlockModal"
                                data-textblockid="{{$textBlock->TextBlockID}}"
                                data-textblockname="{{$textBlock->TextBlockName}}"
                                data-allowhtmltxt="{{$textBlock->AllowHTML}}"
                                data-multiline="{{$textBlock->MultiLine}}"
                                data-outputasimage="{{$textBlock->OutputAsImage}}"
                                data-imagesizeid="{{$textBlock->ImageSizeID}}">
                                Edit</button> |

                                <button type="button" class="btn btn-primary btn-xs delete_button"
                                data-toggle="modal" data-target="#deleteModal"
                                data-tabname="TextBlock"
                                data-id="{{$textBlock->TextBlockID}}">
                                Delete</button>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<div class="modal fade" id="textBlockModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog setup-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Add / Edit Text Blocks</h4>
            </div>
            <form id="postTextBlock">
            @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-4"><div class="padd-name"> Text Block Name:</div> </div>
                                <div class="col-md-8">
                                    <input class="form-control textBlockID" type="hidden" name="textBlockID" id="textBlockID">
                                    <input class="form-control textBlockName" name="textBlockName" id="textBlockName" pattern=".*[^ ].*"  oninvalid="setCustomValidity('Plz enter textblock name ')"
           oninput="try{setCustomValidity('')}catch(e){}" required>
                             </div>
                        </div>
                    </div>

                    <div class="form-group">
                    	<div class="row">
                    		<div class="col-md-4">
                    			<div class="padd-name">
                    				Output As Image :
                    			</div>
                    		</div>
                    		<div class="col-md-8">
                    			<input type="checkbox" name="OutputAsImage" id="OutputAsImage" class="OutputAsImage">
                    		</div>
                    	</div>
                    </div>
                    <div class="form-group OutputAsImageDiv" style="display: none;" >
                    	<div class="row">
                    		<div class="col-md-4">
                    			<div class="padd-name">
                    				Image Size ID :
                    			</div>
                    		</div>
                    		<div class="col-md-8">
                    			<select name="ImageSizeID" id="ImageSizeID" class="myAttribute">
                    				<option value="0">Choose An Option</option>
                    				@foreach($ImageSizes as $imageSize)
                                        <option value="{{$imageSize->ImageSizeID}}">{{$imageSize->ImageSizeID}}</option>
                                    @endforeach
                    			</select>
                    		</div>
                    	</div>
                    </div>

                    <div class="form-group" style="clear: both;margin-top: 5%;">
                        <div class="row">
                            <div class="col-md-4">
                               Multiline :
                            </div>
                            <div class="col-md-8">
                                 <input type="checkbox" class="multiline" name="multiline" id="multiline">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                         <div class="row">
                            <div class="col-md-4">
                                Allow HTML : </div>
                              <div class="col-md-8">
                             <input type="checkbox" class="allowhtmltxt" name="allowhtmltxt" id="allowhtmltxt" >
                              </div>
                         </div>
                    </div>
                </div>
                <div class="modal-footer setup-footer">
                    <button type="submit" class="btn btn-primary btn_update_properties">Save changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Delete</h4>
            </div>
            <form id="deleteRow">
            @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <input class="form-control id" type="hidden" name="id" id="id">
                        <input class="form-control id" type="hidden" name="tabName" id="tabName">
                        Do you want to delete ?
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary btn_update_properties ">Yes</button>
                    <button type="button" class="btn btn-default cancel" data-dismiss="modal">No</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection